-
CSS - 레이아웃의 모든 것 정리CSS/CSS 2020. 4. 21. 11:14
레이아웃에 대해 알아보자.
1. position 속성
html 코드를 작성하면 위에서 아래로 작성한 순서대로 페이지에 그려졌다
하지만, CSS의 position 속성을 사용하면, html 코드와 상관없이 어느 위치에서나 요소를 그릴 수 있다.
position에서 사용하는 속성 값은 4개가 존재한다.
▶ position: static;
▶ position: relative;
▶ position: absolute;
▶ position: fixed;
relative
relative 말 그대로 상대 위치이다. 기본 위치를 기준으로 좌표 프로퍼티를 사용하여 위치를 이동한다. div2에 position: relative의 top, left에 각각 16px를 할당하면 아래와 같이 position: static이 가질 위치보다 위에서 16px, 왼쪽에서 16px만큼 떨어지게 된다.
.relative{ position: relative; background: skyblue; left: 16px; top: 16px; }
absolute
absolute는 절대 위치이다. 부모 요소나 조상 요소 중 relative, absolute 혹은 fixed가 선언된 곳을 기준으로 좌표 프로퍼티가 작동한다.
html
<div class="parent"> <div class="box absolute">display: absolute;</div> </div>css
body { background-color: skyblue; } .box { width: 100px; height: 50px; } .parent { border: 2px solid red; width: 200px; height: 100px; position: relative; } .absolute { background-color: pink; position: absolute; bottom: 16px; right: 16px; }
단, 만약 부모나 조상 프로퍼티에 relative, absolute, fixed가 없다면 최상단 태그인 <body>를 기준으로 위치가 지정된다.
fixed
fixed는 말 그대로 고정됐다는 뜻이다.
absolute는 relative를 가진 부모가 필요했는데, fixed는 필요 없다.
보이는 화면을 기준으로 좌표 프로퍼티를 이용하여 위치를 고정시킨다.
2. inline, inline-block, block
block
대부분의 html 태그는 block 요소이다.
예를 들어, <header>, <footer>, <p>, <li>, <table>, <div>, <h1> 등이 모두 block 요소에 해당하는 태그들이다.
block요소를 가진 태그들은 다음 행에 시작되고, 전체 행 너비를 가지고 있다.
보시다시피, 노란색 배경색이 문단 하나를 다 차지하는 것을 볼 수 있다.
<div style="background-color:yellow;"> 안녕하세요. </div>
inline
inline요소에는 줄 바꾸기를 하지 않고, 새 행에서 시작하지 않는다.
필요한 만큼만 너비를 차지하며, <span>, <a>, <img> 인라인 요소에 속한다.
<div> <span style="background-color:yellow;">안녕하세요.</span> </div>
inline-block
display 가 inline-block으로 설정된 요소는 block 소성과 inline의 속성을 섞어 놓은 것과 같다. block처럼 가로와 세로 크기를 설정할 수 있으면서도, 새로운 줄에서 시작하지 않고, inline처럼 다른 요소와 같은 라인에 배치되는 장점을 가지고 있다.
p태그는 block 태그이지만, inline-block이라는 속성을 이용하여 inline처럼 한 줄로 나열된 것을 볼 수 있다.
<html> <head> <body> <p style="background-color:yellow;">안녕하세요.</p> <p style="background-color:yellow;">안녕하세요.</p> <p style="background-color:yellow;">안녕하세요.</p> </body> </head> </html>p { display: inline-block; }
3. float
float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티이다.
하지만 페이지 전체의 레이아웃을 잡을 때에도 정말 중요한 도구가 된다.
float을 이용하면 다음과 같이 레이아웃을 가로로 나열할 수 있다.
float: left
float: right
이렇게 태그의 순서와 상관없이 float: left로 지정하면 무조건 왼쪽에 붙고, float: right로 지정하면 무조건 오른쪽으로 붙는다. 이때, 태그 순서 상 먼저 float: right로 지정한 태그부터 오른쪽으로 붙게 된다.
float 속성은 text 요소가 마치 "어울림" 효과로 보인다.
하지만 이러한 형태로 인하여 문제점들이 발생한다.
html
<html> <head> <body> <div class="box-wrap"> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3">div3</div> <div class="div4"> 어울려져라.</div> </div> </body> </head> </html>css
.box-wrap{ width:500px; border: 1px solid black } .div1{ background-color: yellow; float: left; width:100px; height:100px; } .div2{ background-color: yellowgreen; float: left; width:100px; height:100px; } .div3{ background-color: skyblue; float: left; width:100px; height:100px; }
이것을 해결할 수 있는 것이 바로 clear 속성이다.
.clear{ clear:both; }해주면,
이렇게 어울림 효과가 해제 대고, clear를 기준으로 줄 바꿈이 된다.
하지만 float 뒤에 매번 <div class="clear"></div>를 사용하는 것은 이뻐 보이는 코드도 아닐뿐더러, 비효율적이다. 그래서 가상 선택자인 :after를 이용한다.
.box-wrap:after{ content:""; display:block; clear:both; }'CSS > CSS' 카테고리의 다른 글
CSS - flex 개구리 게임(1) (0) 2020.04.28 CSS - 인스타 클론(1) (0) 2020.04.28 CSS - flexbox 정리 (0) 2020.04.25 CSS - 문법 (0) 2020.03.02 CSS - HTML에 CSS 적용시키기 (0) 2020.03.02