모던 웹페이지는 style과 레이아웃을 담당하는 CSS를 사용하여 레이아웃을 구성하는것이 바람직하다.
레이아웃 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것이다.
1. position 속성
- position : static
default속성으로 그냥 놓여진 그 위치에 쿵 (default 값이므로 따로 명시하지 않아도 됨)- position : relative
지금 놓여진 위치에서 상대적으로 이동시킨다. 즉, 위로 쪼금만 옆으로 쪼금만 이동하고 싶을 때 사용하면 된다.
ex) position: relative; left: 50px; top: -20px;- position : absolute
static 속성이 아닌 가장 가까운 부모(relative, absolute, fixed)를 찾아서 그 부모를 기준으로 이동한다. 만약 부모 중에 해당 포지션 태그이 없다면 가장위의 태그인<body>를 기준으로 옮긴다
position: absolute; bottom: 0px;- position : fixed
스크롤을 내려도 박스가 계속 보이는 화면 같은위치에 계속 있도록 설정!body { height: 1000vh; } div { position: fixed; background-color: tomato; height: 150px; width: 150px; top : 0 left : 0 } ```
2. display 속성값 (inline , block, inline-block)
- inline
in the same line 줄바꿈없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
margin, padding속성은 좌우 간격만 반영되고, 높이는 속성값으로 변경되지 않는다.
inline 대표 태그!<a>, <span>, <link>, <img>- block
block은 혼자 한 줄을 차지한다. inline과 달리 width, height, margin, padding 속성이 모두 반영된다.
<body>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>
</body>
block을 옆으로 나열 할 수 없나?
있다! display : inline-block
- inline-block
앞에 소개한 것 처럼 inline은 너비높이 설정을 해도 적용이 안되고, block의 경우 한줄 전체를 차지하다보니 옆으로 따닥따닥 붙게 할수 없었다div { display: inline-block; width: 50px; height: 50px; background-color: tomato; } <body> <div></div> <div></div> <div></div> </body>
display:inline-block 설정으로 블록을 한열에 표현 할 수 있지만, 블록사이 간격조정이 어렵다는 단점이 있다! 해상도에 따라 블록의 간격이 변해서 굉장히 어노잉! 🤦♀️
이후에 flexbox로 이 단점을 극복 할 수 있다! (* float:left로도 해결가능하다)
3. float
float 는 이름그대로 둥둥 떠있다는 의미이다.태그들이 순서대로 배치되다가 그중에 float태그 내용은 붕~뜬다. 그뒤에 태그들은 바로 뒷자리를 메꾸려한다.
문단에 이미지를 왼쪽에 넣거나, 네비게이션은 한쪽에 정렬 할 경우 float를 활용하여 레이아웃을 구성한다.
<div id="floatLeft">float-left</div>
<div class="normal">normalnormalnormalnormalnormal</div>
<div id="floatRight">float-right</div>
<div class="normal">normalnormalnormalnormalnormal</div>
<div id="floatLeft">float-left</div>
<div class="clear">clearclearclearclearclear</div>
@css
#floatLeft {
float: left;
background: yellow;
}
.normal {
background: skyblue;
}
#floatRight {
float: right;
background: yellowgreen;
}
.clear {
clear: both;
background: skyblue;
}
normal은 block 태그인 <div> 이니까 한줄을 퉁! 쳐야하지만 float때문에 바로 붙어있다.
만약 float 태그에 바로 옆에 따라 붙는게 싫다면 clear:left or clear:right or clear:both
float는 부모태그가 못알아본다?!
<div id="parent">
<div class="float">float</div>
</div>
<div id="parent-overflow">
<div class="float">float</div>
</div>
@css
#parent {
background: yellow;
}
.float {
float: left;
}
#parent-overflow {
background: skyblue;
overflow: auto;
clear: both;
}
첫번째 float 부모태그에 배경색을 yellow로 지정했음에도 적용이 안되었다. 이유는? 부모태그는 float의 존재를 모르고 내용이 없다고 생각해서 div의 높이는 0이되어 안보인다.
overflow:auto 또는 overflow:hidden을 부모태그에 선언하여 float를 자식으로 인정한다!
아래도 예시도 같은 상황이다. float를 존재를 인지시키려면 부모에게 overflow:auto!를 선언하자
float 사용하여 navigation bar 레이아웃 구성하기
별거없다. 좌측으로 정렬하고 싶은 <nav>를 float:left; 로 선언한뒤
nav {
float: left;
width: 200px;
}
section {
margin-left: 200px;
}
또는 percentage 로도 가능하다.
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
