구현하는 기능과 배우는 컨셉
✅ position 속성 - relative, absolute, fixed
✅ inline, inline-block, block 에 대해서
✅ float에 대해서
👉 position
1. relative
◾ static일 때 해당 요소의 현재 기본 위치 기준
◾ 정확한 위치는 top right bottom left 속성 이용.
◾ 해당 요소의 기본 위치가 빈 공간으로 유지
2. fixed
◾ 무조건 브라우저 창 기준.
◾ 정확한 위치는 top right bottom left 속성 이용해 정함.
◾ 해당 요소의 다음에 있던 요소가 그 자리를 차지.
◾ 홈페이지 로딩 늦는 원인 될 수 있으니 사용 시 각별히 주의 !! (맨 하단 참고)
◾ IE7 이상 지원
3. absolute
◾ (static 이 아닌) 첫 번째 부모 요소 있으면 해당 부모 요소 기준. 부모 요소 기준으로 하려면, 부모 요소가 relative, absolute, fixed 속성 중 하나여야 함.
◾(static 이 아닌) 첫 번째 부모 요소 없는 경우엔 브라우저 창 기준.
◾ 스크롤 하면 위치 변동.
◾ 정확한 위치는 top right bottom left 속성 이용해 정함.
◾ 해당 요소의 다음에 있던 요소가 그 자리 차지.
👉 inline, inline-block, block
1. inline
◾ <a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>
◾ 대표적으로 <span>이라는 태그의 성질로 content/text 크기만큼만 점유하고
동일 라인에 붙는 성질입니다.
◾ '이 글씨는 두꺼운 효과를 주었다.'와 같이 text 내에 특정 부분에만 스타일을 간단히 줄때 많이 사용된다.
◾ width/height 적용 불가
◾ margin/padding-top/bottom 적용 불가
◾ line-height 원하는 대로 적용 불가(span에 적용안되고 감싸고 있는 div 전체 크기에만 영향 등)
2. inline-block
◾ inline-block 은 말그대로 inline의 특징과 block의 특징을 모두 가진 요소입니다. inline-block의 특징은 다음과 같습니다.
◾ width/height 적용 가능
◾ margin/padding-top/bottom 적용 가능
◾ line-height 적용 가능
◾ inline-block 끼리 공백이 생기게 되는데, 이때는 상위 div에 { font-size: 0; } 를 적용하면 해결이 됩니다.
◾ inline-block 끼리 높이가 안맞을시 상위 공백이 생기는데, 이때는 { vertical-align: ---; } 값으로 top 등을 줘서 맞춰주시면 됩니다.
3. block
◾ <address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>
◾ block은 한 영역을 차지 하는 박스형태을 가지는 성질입니다. 그렇기 때문에 기본적으로 block은 width값이 100%가 됩니다. 그리고 라인이 새로 추가된다는 것을 알 수 있습니다.
◾ block은 height와 width 값을 지정 할 수 있다.
◾ block은 margin과 padding을 지정 할 수 있다.
👉 float
◾ '떠다니다' 의 의미인 플롯은 방향성을 지시해 주어 배치를 할 수있으나, 끝까지 떠다니게 할수 없기에 잡아주는 역할의 명령문을 부모에게, 또는 다음 박스에게 해주지않는다면 레이아웃을 뭉개버리는 단점을 가진다
◾ 이를 clear로 해제하지않는다면 레이아웃이 뭉개져버린다 (부모높이가 사라짐)
◾ clear 하는 첫번째 방법은 float를 사용하지않고 float를 사용한 자식다음에 있는 자식한테 clear : both를 명령해준다
#wrap {width:200px;}
.num1 { float : left; width : 100px;}
.num2 { float : right ; width : 50px;}
.num3 { clear : both;}◾ 두번째 방법은 overflow : auto / hidden 적용하기
◾ 박스안에 내용이 박스보다 클 경우에는 overflow속성을 이용해 콘텐츠 내용을 숨기거나 스크롤을 만들어 관리할 수있다.
◾ 세번째 방법은 가상클래스를 이용한다.
.clearfix::after {
content:'';
clear:both;
display : block;
}◾ float된 박스들을 감싸는 부모박스에 가상요소 after를 부여해 해체한다.
