CSS-캐스케이딩, 박스 모델, 레이아웃

캐스케이딩과 우선순위

캐스케이딩

Cascading은 DOM(Document Object Model) Tree 구조에서 상위 요소에서 하위 요소로 전달되는 (상속 개념)의미에서 유래 되었다.

 

-상위 태그에서 정의된 디자인 속성은 하위 태그로 상속

-하위 태그에서 상위 태그에 정의된 디자인 속성을 변경할 수 있다.

 

우선 순위

디자인 속성이 외부 스타일시트, 내부 스타일시트, 인라인 스타일시트에 있으면 우선순위는 인라인 스타일시트가 제일 우선 순위이다. 그리고 외부, 내부 스타일시트는 문서상 정의된 순서에 따라 우선 순위가 결정된다.

 

만약 웹 브라우저 자체에도 css가 있다고 보면 브라우저 디자인 정의가 제일 낮은 우선 순위를 가진다.

 

박스 모델

박스 모델: 테두리(border), 내용(content), 안쪽 여백(padding), 바깥쪽 여백(margin) 4가지로 구성

 

레이아웃

레이아웃은 화면의 배치를 말한다. 기본적으로 박스의 배치 방법을 결정하는 position 속성이 있고 나란히 배치되는 박스 콘텐츠들을 지정하기 위해 float나 display 속성등이 사용된다.

 

1. 그리드 시스템(Grid System)

그리드 시스템은 화면을 테이블처럼 가로, 세로 격자로 나누는 것을 의미하고 널리 사용하는 css 라이브러리인 bootstrap는 한줄을 최대 12 컬럼으로 분할 가능하다.

 

-화면의 가로폭을 100%로 두고 분할하고자하는 영역을 원하는 비율로 크기를 지정할 수 있다.

-반응형 웹은 크기에 따라 구성이 달라져서 복잡한 설정이 필요

-하나의 컬럼 안에 가로, 세로 분할이 필요하면 컬럼을 100%로 가정하고 분할 가능하다.

 

2. 컨테이너(Container)

컨테이너는 다른 물건을 담을 수 있는 그릇을 의미한다.  

ex) 동일한 크기의 박스 10개를 만들어야하면 하나의 박스를 만들고 그 안에 10개를 넣어 구성하는 것이 좋다.

 

<div class="container">
  <div class="header">
  </div>
    <div class="contents">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
  <div class="footer">
  </div>
</div>

 

-출처

https://dinfree.com/