1) inline
영역의 크기가 딱 컨텐츠 크기로 정해짐
width, height 지정 불가능
margin, padding의 top, bottom을 지정할 수 없음. 양 옆(left, right)만 가능
여러 요소를 추가하면 가로방향으로 추가된다
ex)
<span>
, <a>
, <img>
2) block
영역의 크기를 width, height로 지정할 수 있음
width를 지정하지 않으면 가로줄 전체 크기를 차지 함
여러 요소를 추가하면 세로 방향으로 추가된다
ex)
<div>
, <h1> - <h6>
, <p>
, <form>
, <header>
, <footer>
, <section>
3) inline-block
width, height, margin, padding 지정 가능 (block)
여러 요소를 추가하면 가로방향으로 추가된다 (inline)
ex)
input
4) none
요소를 눈에 보이지않게 없앨 수 있음
display none
visibility hidden
float : (물, 공기에) 뜨다
예) 기사에 이미지를 넣을 때
기본값은 float:none;
container 값을 주게되면 컨테이너 내에서 끝까지 이동함
flex box가 나온 이후 부터는 사용빈도 적음
값
input
html <div class="container"> <div class="image"></div> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores labore possimus deserunt, debitis est delectus fugit dolorum provident officiis esse ratione doloremque facere voluptate odio, totam, quisquam eum laboriosam voluptatem? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores labore possimus deserunt, debitis est delectus fugit dolorum provident officiis esse ratione doloremque facere voluptate odio, totam, quisquam eum laboriosam voluptatem? </p> </div> css .image { width: 100px; height: 100px; background-color: violet; border: 5px solid blue; float: left; /* 본인이 갈 수 있는 부모영역 내에서 가장 끝으로 감 */ margin: 10px; } .container { border: solid; width: 300px; margin-left: 100px; }
output
요소를 어떻게 배치할지 결정하는 CSS 속성
우선 Normal Flow 개념을 이해하는 것이 중요함
Normal Flow란? 요소의 레이아웃을 전혀 제어하지 않았을 때, 브라우저에서 기본적으로 요소가 배치되는 흐름
Remind) 인라인 요소, 블록 레벨 요소 등 특성에 따라 기본적으로 요소가 배치되는 방식이 있음
코드에 작성된 순서에 맞게 차곡차곡 HTML 요소가 표시된다.
position 속성을 통해 Normal Flow에서 벗어나, 개발자가 원하는대로 제어하여 배치할 수 있음
position 속성은 top, bottom, left, right 속성과 함께 사용함
종류
static
: 기본 값
relative
: 자기 자신을 기준으로 삼는다
absolute
: static이 아닌 부모중에서 기준점을 삼는다
fixed
: 뷰포트를 기준으로 삼는다
sticky
Normal Flow를 따라 배치한 원래 자기 자신의 위치
를 기준으로
top, right, bottom, left의 값에 따라 최종 위치 지정(offset 적용)
값 : 양수값, 음수값 모두 줄 수 있음
반대가 되는 값을 동시에 선언하면?
top, bottom을 동시에 선언하면? top만 적용
left, right를 동시에 선언하면? left만 적용
input
html <div></div> <div id="box"></div> <div></div> css div { width: 200px; height: 200px; border: 5px solid orangered; margin-left: 150px; } #box { background-color: peachpuff; position: relative; top: 100px; bottom: ; left: 150px; right: ; /* position이 static일땐 사용할 수 없다 */ /* positon이 relative일 때 top/bottom 동시에 값을 주면 bottom값은 무시됨 */
output
요소를 Normal Flow에서 제거하고,
가장 가까운 부모 요소를 기준으로
position: static(디폴트 값)이 아닌 가장 가까운 부모 요소를 찾는다
그런 요소가 없으면 body를 기준으로
Normal Flow에서 제거되므로 (자기만의 독단적 흐름), 마치 float 처럼 새로운 레이어가 추가되어 둥둥 뜨게 된다.
주로 기준점으로 잡고싶은 부모를 postion:relative
로 설정하고, 자식 요소를 position:absolute
로 자주 쓴다
input
html <body> <div></div> <div id="parent"> <div id="box"></div> </div> <div></div> </body> css div { width: 200px; height: 200px; border: 5px solid orangered; } #parent { position: relative; } #box { width: 150px; height: 100px; border-color: darkblue; background-color: cornflowerblue; border-radius: 30px; position: absolute; top: 100px; }
요소를 Normal Flow에서 제거하고,
눈에 보이는 뷰포트
를 기준으로
top, right, bottom, left 값에 따라 최종 위치 지정
스크롤을 쭉 해도 계속 따라온다.
뷰포트(눈에 보이는 창)이 계속 변경되기 때문에!
예) 팝업창, 문의하기 버튼, 네비게이션 바, 광고창 등
input
html <body> <div></div> <div id="parent"> <div id="box"></div> </div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> css div { width: 200px; height: 200px; border: 5px solid orangered; } #parent { position: relative; } #box { width: 150px; height: 100px; border-color: darkblue; background-color: cornflowerblue; border-radius: 30px; position: fixed; bottom: 40px; right: 40px; }
Normal Flow를 따르고,
가장 가까운 스크롤이 되는 부모를 기준으로
top, right, bottom, left 값에 따라 최종 위치 지정
sticky라는 이름을 기억하면 이해하기가 쉽다. 스크롤을 내리다가 특정 시점부터 마치 fixed처럼 동작한다.
스크롤 되는 조상의 하위에 위치 시켜야함
input
html <body> <div></div> <div></div> <div></div> <div id="parent"> <div id="box"></div> </div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> css div { width: 200px; height: 200px; border: 5px solid orangered; } #parent { position: sticky; top: 100px; left: 100px; } #box { width: 150px; height: 100px; border-color: darkblue; background-color: cornflowerblue; border-radius: 30px; }
여러개의 요소가 겹칠 때, 위로(z축으로) 쭉 쌓이게 된다.
z축의 순서를 지정하는 속성이 z-index
값 : 정수(양의 정수, 음의 정수)
zindex: auto (default 값)
코드를 작성한 순서대로 쌓이게 된다
position을 별도로 지정하면(==relative, absolute, fixed, sticky), static보다 무조건 위로 뜨게 된다.
앞쪽에 보여지게 할 요소 position값 주기, z-index 값 높게 주기
뒤로 보여지게 할 요소 z-index 값 낮게 주기
예) 팝업창, 경고창 등
input
html <div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div> css div { width: 150px; height: 150px; background-color: blanchedalmond; border: 3px solid orangered; } #box2 { margin-top: -60px; margin-left: 60px; position: relative; /* z-index: 1; */ } #box3 { margin-top: -120px; margin-left: 20px; position: relative; z-index: -1; }
컨텐츠가 요소의 크기보다 많아서 넘쳐 흐를때, 이를 어떻게 표현할지 지정하는 속성
참고) 요소의 크기 지정 : width, height
내용이 넘치면 다른 요소와 내용이 겹칠 수 있기 때문에 목적에 맞게 조정해줘야 함
단축속성. shorthand 가능
overflow: visible
(default값)
overflow: hidden
overflow: scroll
overflow: auto