페이지의 레이아웃을 완성시키기위해(또는 페이지 내의 요소의 배치를 위해)
필요한 기본 개념들을 정리해봅니다.
기존에 중구난방으로 공부하던 것을 한곳에 정리할 수 있는 좋은 기회인 것 같다.
layout의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것이라고한다.
과거에는 display 요소를 이용하여 inline 또는 block요소를 padding과 margin을 계산하여 배치했었으며 이에 대한 대안으로 직관적으로 크기를 정하기 위해 아래의 코드를 쓰기 시작했다.
box-sizing: border-box;이런 위치 배열을 위하여 자주 사용되는것이 아래의 1~3번이니 한번 살펴보자
1. position
- relative
상대 위치가 지정된(보통 부모 엘리먼트에 position:absolute;를 지정)
엘리먼트에 top이나 right, bottom, left를 지정하며 위치를 조정한다.
- absolute
상대위치의 지정과 관련되어(부모 엘리먼트의 위치에 기반하여 부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다.) 적용되어 위치를 조정한다.
- fixed
상대위치의 지정과 상관없이(부모위치에 상관없이) 화면 전체에 적용되어 고정이 된다.
relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용된다
2. inline, inline-block, block
배열을 시키다 보면 어떤 것은 화면 전체에 width(가로크기)를 가지고 어떠한 것은 들어있는 요소에 맞춰 크기를 가지고 가는데
이러한 것의 분류를 크게 inline 과 block으로 나눈다.
아래를 보자
- inline
요소끼리 서로 한줄에 바로 옆에 위치할 수 있다는 뜻이다.
<span>, <a>, <img> 등이 이에 속한다.
- block
block요소는 요소 바로 옆에 다른 요소를 붙여 넣을 수 없다는 뜻이다.
<header>, <footer>, <p>, <li>, <table>, <div>, <h1>...등이 이에 속한다.
- inline-block
css를 통하여 block요소의 성질을 가진 태그를 inline성질로 변경하기 위해 사용하는 코드이다.
display: inline-block;위와 같이 사용된다
그렇다면 inline요소의 성질을 가진 태그는 어떻게 바꿀까 하니
display: block;위와 같이 작성하면된다
3. float
과거에 Layout을 잡는데 많이 사용되던 속성으로(요즘은 flex) 학습이 필요하다고한다.
일단 float 속성은 left, right, none 중 하나를 값으로 줄 수 있고
float의 단점은 부모요소가 높이를 인지할 수 없어 부모요소를 벗어나는일이 다반사이다.
이를 제어하는 것이 문제점이자 귀찮은점이라고한다.
크게 사용할만한 clear속성을 적용하여 밀어내는 것과 감싸고 있는 div에 overflow: hidden;을 주는 두가지 방식이 있다.
- clear
clear 속성을 이용하면 right, left, both방향 설정에따라 해당방향에 있는 요소들을 전부 밀어버리고 block 시켜주는 것 과 같다.
clear: left;- overflow: auto;
clearfix 핵이라고도 불리며 보통 감싸고 있는 요소가 내부요소들의 크기에 맞춰 테두리를 만들어버리는데
그것을 방지할 수 있다.
감싸고 있는 div에 지정해주면 된다.
느낀점
다소 중구난방이었던 display에 대한 개념을 조금이나마 정리를 할 수 있는 좋은 기회인 것 같다.
사실 처음 자기소개 페이지등등을 만들며 레이아웃이라면 주구장창 flex만 써왔기에 float에 대한 이해도가
많이 부족했는데(지금도 그런데) 이것에 대한 해소가 많이 되어 기분이 좋다.
또한 position:fixed의 경우는 nav바 말고는 사용을 할 일이 없어 그 개념에 대해 좀 .. 안일하게 다뤘는데 확실히 인지하게 된 계기인 것 같다
끝
