🖊 그동안배운 CSS의 중요한 부분 중 하나인 레이아웃에 대해 정리 하는 시간을 가져보았다....
1.display
display는 CSS에서 레이아웃을 제어하기 위한 가장 중요한 프로퍼티
대부분의 엘리먼트에 대한 기본값은 보통 block이나 inline이다.
- block
div는 대표적인 block(블록) 레벨 엘리먼트로서
새 줄에서 시작해 좌우로 최대한 늘어난다.
자주 볼 수 있는 다른 블록 레벨 엘리먼트로 p와 form등이 있다.
-
inline
span은 대표적인 lnline(인라인) 레벨 엘리먼트로서 단락 안에서 이처럼 해당 단락의 흐름을 방해하지 않은 채로 텍스트를 감쌀 수 있다. 링크에 사용하는 a 태그는 가장 흔히 볼 수 있는 인라인 엘리먼트이다. -
none
흔히 볼 수 있는 또 한 가지 display 값은 none이다. 이 값은 자바스크립트에서 엘리먼트를 실제로 삭제하고 재생성하지 않고도 엘리먼트를 보이고 감추는 데 흔히 사용된다.
✔예시
div id="main" -(html)
#main {
width: 600px;
margin: 0 auto;
} -(css)💻 블록엘리먼트에 width를 설정하면 컨테이너의 좌우 가장자리로 늘어나지 않게 한다. 그런 다음 좌우 마진을 auto로 설정해 해당 엘리먼트를 컨테이너 안에서 가로 중앙에 오게 할 수 있다. 엘리먼트는 내가 지정한 너비를 차지할 테고, 나머지 공간은 두 마진에 균등하게 나눠질 것.
But,브라우저 창이 엘리먼트 너비보다 좁을 때 유일하게 문제가 발생한다.
👉이러한 상황에서 width 대신 max-width를 사용하면 브라우저가 작은 창을 처리하는 방식을 개선할 수 있다.
#main { max-width: 600px; margin: 0 auto; }
2.박스모델
엘리먼트의 너비를 설정해도 실제로 설정한 것보다 크게 나타날 수 있다. 이것은 엘리먼트의 테두리와 패딩이 지정된 너비 이상으로 엘리먼트를 늘리기 때문입니다.
✔예시
.simple {
width: 500px;
margin: 20px auto;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
}위 예시는 서로 같은 너비값을 줬지만 결과값은 달랐다.
💻Box-sizing
엘리먼트에 box-sizing을 지정하면 해당 엘리먼트의 패딩과 테두리가 더는 너비를 늘리지 않는다.
.simple {
width: 500px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}*두 엘리먼트에 모두 box-sizing: border-box;를 추가
- {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
이렇게 하면 모든 엘리먼트가 항상 이처럼 더 직관적인 방식으로 크기가 지정
3. Position
- relative
✔예시
.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
}
💻 1) relative는 별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동작한다.
2) 상대 위치가 지정된 엘리먼트에 top이나 right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정되며, 다른 콘텐츠는 해당 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않을 것이다.
- fixed
고정(fixed)엘리먼트는 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻입니다. relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용됩니다.
✔예시
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}
*우측하단 고정
- absolute
absolute는 가장 다루기 까다로운 위치 지정 값이다. absolute는 상대적으로 위치가 지정되는 게 아니라 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다는 점을 제외하면 fixed와 비슷하게 동작한다. 절대 위치가 지정된 엘리먼트가 기준으로 삼는 조상 엘리먼트가 없으면 문서 본문(body)을 기준으로 삼고, 페이지 스크롤에 따라 움직인다.
"위치가 지정된" 엘리먼트는 position이 static으로 지정되지 않은 엘리먼트를 가리킨다는 사실을 기억하자
✔예시
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}
4. float
레이아웃을 잡는 데 사용하는 또 하나의 CSS 프로퍼티는 float이다. float은 다음과 같이 이미지 주위를 텍스트로 감싸기 위해 만들어진 것
- clear
clear 프로퍼티는 float의 동작 방식을 제어하는 데 중요
✔예시
<div class="box">...</div>
<section>...</section>.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
} -----[css]
💻section 엘리먼트는 실제로 div 다음에 있다. 하지만 div가 왼쪽으로 떠 있기 때문에 이런 결과가 나타난 것입니다. 즉, section 안의 텍스트가 div 주위에 떠 있고 section이 전체를 감싸고 있습니다. section을 실제로 떠 있는 엘리먼트 다음에 나타나게 하려면 어떻게 해야 할까요?
👉 clear를 이용해 이제 이 섹션을 떠 있는 div 아래로 옮긴다. 여기서는 left 값을 지정해 왼쪽에 떠 있는 엘리먼트들을 비운다. 게다가 right과 Both도 비울 수 있다.
.box { float: left; width: 200px; height: 100px; margin: 1em; } .after-box { clear: left; }
- clearfix
img {
float: right;
} ------(CSS)
👉이 문제를 해결하는 방법이 있는데 이를 clearfix 핵이라고 한다.
다음과 같은 CSS 코드를 새로 추가해 보자.
.clearfix {
overflow: auto;
} ----------(CSS)
