CSS 레이아웃(Lay-out)
게시:
박스 모델(Box Model)
박스 모델(Box model)은 기본적으로 모든 HTML 요소를 감싸는 상자를 말한다.
박스 모델은 바깥 여백(Margin), 테두리(Border), 안쪽 여백(Padding), 콘텐츠(Content)로 구성되는데 각 구성항목의 공간 값을 정의할 수 있고 박스의 총 크기는 각 구성 항목의 크기･공간을 모두 더한 값으로 결정된다.
- Margin : 바깥 여백 영역, 요소간 거리를 조절할 수 있다.
- Border : 테두리 영역, 테두리를 주거나 없앨 수 있고 굵기를 조절할 수 있다.
- Padding : 안쪽 여백 영역, 콘텐츠와 테두리의 간격을 조절할 수 있다.
- Content : 실제 콘텐츠가 자리하는 영역이다.
포지셔닝(Positioning)
포지셔닝(Positioning)은 단어 뜻 그대로 HTML 요소의 위치를 지정하는 것을 말한다. 포지셔닝을 통하여 어느 곳을 기준으로 얼만큼 이격하여 배치할지 결정할 수 있다. 엄밀히 말하면 배열 방법이기보다 위치 미세조정 개념에 더 가깝다.
1. Static position
Static position은 아무것도 정의하지 않은 Default 값이다.
포지션을 적용하지 않으면 기본적으로 Static position이 적용되지만 굳이 속성 값으로 static을
선언하여 적용할 수도 있다.
/* 굳이 이렇게도 선언할 수는 있다 */
div {
position: static;
}
2. Relative position
먼저 작성된 형제 요소를 기준으로부터 상대적인 위치를 지정하는 것을 말한다. 기준이 되는 형제 요소의 크기나 위치가 변하면 포지션에 영향을 받으려 원점은 기준 요소의 좌측 하단이다.
원점으로부터 방향과 상하좌우 거리 값(top, right, bottom, left)을 주어 요소를
배치할 수 있다. 추가적으로 position: relative 선언하였더라도 이동값이 생략되면 static으로
처리된다.
div {
position: relative;
top : 100px;
left : 200px;
}
3. Absolute position
상위 요소인 부모 요소를 기준점으로 상대위치를 지정하는 것을 말한다. 기준점은 부모 요소의 좌측
상단이고 이를 기준으로 방향과 거리 값(top, right, bottom, left)을 주어 요소를
이동시킨다.
부모 요소의 위치나 크기에는 영향을 받지만 형제 요소의 위치나 크기 변화에 영향을 받지 않는다.
양수(Positive)를 입력하면 아래쪽과 오른쪽으로 이동시킬 수 있고 음수(Negative)를 입력하면 위쪽, 왼쪽으로 이동시킬 수 있다.
class {
position: absolute;
top : 120px;
left : 120px;
}
4. Fixed
사용자의 뷰포트(모니터) 위의 지정한 위치에 고정시키는 것을 말한다. 부모 요소나 형제 요소에 영향을 받지 않으며 화면을 스크롤하여 보이는 곳을 올리거나 내려도 항상 화면상 같은 곳에 표시된다. 컴퓨터 모니터에 물리적으로 포스트잇을 붙인 것으로 이해하면 편하다.
뷰포트 좌측 상단을 기준점으로 방향과 거리 값을 주어 요소를 배치한다.
요소가 화면에 둥둥 부유하는 듯이 고정이 되는 속성이기 때문에 자칫 다른 요소를 침범하여 가릴 수 있다. 따라서 Fixed 요소와 간섭이 예상되는 요소가 있으면 padding을 적절히 적용하는 등 이격하는 것을 고려해야 한다.
footer {
position: fixed;
right : 20;
bottom : 50;
}
디스플레이 속성(Display)
디스플레이(Display)는 요소의 배치 특성을 결정하는 속성이다. 화면에 어떻게 표시되는지 결정하는 속성으로 생각하기 쉽지만 표시방법보다 다른 콘텐츠와 어떻게 배치될 것인지 정하는 속성이라고 이해하는 것이 편하다.
HTML 태그는 모두 어떤 하나의 디스플레이 속성을 기본(Default)으로 갖고 있는데 기본값은 태그별로 상이하다. 기본값은 디스플레이 속성을 변경하여 바꿀 수 있다.
selector {
display: value;
}
1. Inline
단어 의미 그대로 요소가 줄(행) 안에 있게 만드는 속성값이다.
Inline 속성을 선언하면 요소는 줄 안에서 허용가능한 길이 중에서 콘텐츠의 길이만큼 줄(행) 안에
공간을 차지한다. 길이가 짧은 Inline 요소가 나열되어 있으면 한 줄에 수용 가능한만큼 요소가 한
줄에 나열된다.
좌/우측의 Margin, Padding은 부여할 수 있지만 상/하측의 Margin, padding은 부여할 수 없다.
/* stylesheet.css */
p {
display: inline;
}
<!-- document.html -->
<body>
<p>p 태그를 </p>
<p>사용했지만 </p>
<p>p 요소에 inline 속성을 지정하였으므로 </p>
<p>한 줄로 표시될 것입니다.</p>
</body>
2. Block
요소의 너비(Width)가 얼마든간에 무조건 화면의 너비를 모두 차지하게 만드는 속성값이다. Block 속성을 가진 요소는 가로로 나열하여 배치할 수 없으며 한 줄에 하나만 배치할 수 있다.
요소의 너비, 높이를 변경할 수 있고 상하좌우에 Margin, Padding, Border 속성을 부여할 수 있다.
/* stylesheet.css */
span {
display: block;
}
<!-- document.html -->
<body>
<span>span 태그를 사용했지만</span><span>줄바꿈 되어 표시될 것입니다.</span>
</body>
3. Inline-block
너비, 높이 부여가 가능한 형태의 Inline 속성값이다.
기존의 Inline처럼 한 줄에 연속적으로 나열이 가능하고 block과 같이 요소의 너비, 높이 부여가
가능하다.
예를 들어 리스트(li)와 같이 한 줄씩 줄 바꿈 되어 있는 요소에 Inline-block을 적용하면
강제로 한 줄에 배치할 수도 있다.
li {
display: inline-block;
}
4. Flex Box
자식 요소에게 허용된 공간(부모 요소의 크기) 안에서 가변적으로 크기･위치가 바뀌게 만드는 속성이다.
flex 속성을 선언하면 주어진 상위 요소(부모 요소) 크기 안에서 자식 요소들이 배열된다.
자식 요소의 높이와 너비의 합이 부모 요소의 높이와 너비보다 클 수 없기 때문에 부모 요소 안에서
비례적으로 크기가 조절되어 배열된다.
.parent {
display: flex;
}
박스 사이징(Box-sizing)
가장 처음에 다룬 Box model과 관련된 속성으로 Box model의 크기를 고정시키는 속성이다.
크기가 같은 요소이더라도 Margin, Padding 및 Border를 설계없이 각기 조절하다보면 화면에 표시되는 요소들의 크기가 달라져 원하지 않던 결과물을 얻을 수 있다.
물론 사전에 치밀한 Design을 통하여 이를 극복할 수 있지만 보다 Box-sizing을 활용하면 보다 쉽게 문제를 해결할 수 있다.
box-sizing 속성을 사용하면 Box model 총 크기를 고정시킬 수 있다. 주어진 총 크기 안에서
Margin, Padding 및 Border의 크기가 비례적으로 움직여 정돈된 배열을 얻을 수 있다.
div {
width : 500px;
box-sizing: border-box;
padding : 10px;
border : 5px;
}
플로트(Float)
어떠한 요소(주로 이미지) 주위로 Inline 요소를 감싸듯이 배치시키도록 하는 속성이다.
float 속성이 선언되면 요소가 화면의 Z축 상으로 빠져나와 부유(Float)하는 것처럼 처리된다.
이를 응용하여 페이지를 구성하는 컨테이너 레이아웃을 구성할 수 있다.
float 속성을 선언하면 부모 요소와 같은 Layer에 존재하지 않게 되기 때문에 부모 요소가 Float
요소의 높이를 인식하지 못하게 된다. 이로인해 배열 계산을 실수하기 쉬우며 다른 요소를
침범･간섭하기도 한다. 다음은 이를 해결하기 위한 몇 가지 방법이다.
1. Clear 속성 응용
상위 요소(부모 요소) 안에 있는 마지막 형제 요소에 clear 속성을 선언하면 float 효과가 해제된다.
이는 float 효과를 아예 제거하는 것이 아니라 영향을 받지 않도록 제어하는 것이다.
/* stylesheet.css */
img {
float: left;
}
<!-- document.html -->
<div>
<img src="~~~~~.jpg">
<p> 본문입니다. </p>
<br class="clear">
</div>
2. ‘overflow : hidden’ 선언
float가 적용된 자식 요소의 높이를 인식하지 못하는 부모 요소에 overflow:hidden
property를 적용한다. 이와 같이 처리하면 부모 요소는 자식 요소를 hidden 처리하기 위하여
높이를 계산해야 하므로 자식 요소를 인식하게 된다.
/* stylesheet.css */
img {
float: left;
}
div {
overflow: hidden;
}
<!-- document.html -->
<body>
<div>
<img src="~~~~~.jpg">
<p> 본문입니다. </p>
</div>
</body>
3. 부모 요소 Float 선언
맞불작전 부모 요소에도 float 속성을 선언하면 부모 요소가 같은 Layer로 이동하므로
자식 요소의 높이를 인식하게 된다. 주의할 것은 이 경우 해당 요소가 inline-block으로 변하게
되므로 반드시 너비를 지정해주어야 한다는 점이다.
/* stylesheet.css */
img {
float: left;
}
div {
float: left;
width: 600px;
}
<!-- document.html -->
<body>
<div>
<img src="~~~~~.jpg">
<p> 본문입니다. </p>
</div>
</body>
그리드(Grid)
그리드 속성을 사용하면 원하는 행과 열에 요소를 배열할 수 있다.
모눈종이 위 배치하고 싶은 칸에 색연필로 채색하여 직사각형을 마음대로 배치하는 것을 떠올리면 된다.
상위 요소(부모 요소)에 그리드를 선언하고 총 몇 열, 몇 행으로 결정할 것인지 선언한 뒤 자식 요소에 각자 차지할 범위와 위치를 선언해주어 원하는 대로 배열할 수 있다.
자식 요소의 행(Row)과 열(Column)을 범위로 지정할 때는 시작 부분과 끝 부분을 슬래시(/)로 구분한다.
이때 단위는 칸(Cell) 기준이 아니라 칸의 시작 부분이라는 점에 주의해야 한다.
.parent {
display : grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows : 200px 200px;
grid-gap : 20px;
}
.children1 {
grid-column: 1; /* 1열 차지 */
grid-row : 1 / 3; /* 1행부터 2행까지 차지 */
}
.children2 {
grid-column: 2 / 4; /* 2열부터 3열까지 차지 */
grid-row : 1 ; /* 1행 차지 */
}
.children3 {
grid-column: 2 / 4; /* 2열부터 3열까지 차지 */
grid-row : 2; /* 2행 차지 */
}
댓글남기기