[ codeit ] 웹 퍼블리싱 - HTML/CSS 핵심 개념 (3)

 포지셔닝 

1강. relative 포지션

position: static default값으로 기본으로 있어야할 곳에 위치함

position: relative 상대적인, 요소의 원래 위치를 기준으로 이동, 위치를 옮겨도 기존 공간은 차지함

 

2강. 해변의 몽숭이

3강. 명언

4강. fixed 포지션

position: fixed 브라우저를 기준으로 고정된 위치, 기존 공간 상실

 

5강. absolute 포지션

포지셔닝이 안 된 요소 / 포지셔닝이 된 요소

static                       / relative, absolute, fixed

relative : 원래 위치 기준

fixed : 브러우저 기준

absolue : 가장 가까운, 포지셔닝된 조상 요소 기준

 

6강. 우표 붙이기

 

 float 

1강. float

float : 3d공간에서 위로 뜨는 기능

float된 다음요소의 inline, inline-block 요소는 float된 요소의 공간을 가지지 못함

 

2강. 신문 광고

3강. multiple floats

여러개가 float될 경우 순차적으로 공간에서 좌측정렬, 

기존 평면에 있던 공간에는 그 다음 요소가 채우게 됨

 

4강. 그리드 연습

5강. clear

{clear:left;}
{clear:right;}
{clear:both;}

clear를 주게되면 float으로 공간에 떠 있던 요소들이 평면으로 내려와 공간을 차지하게 함

(공간은 직전요소의 float방향 기준이 됨)

 

.box{border: 1px solid #ccc;}
.left{float:left;}
.clearfix{clear: left;}

<div class="box">
	<div class="left"></div>
	<div class="left"></div>
	<div class="left"></div>
	<div class="left"></div>
    <div class="clearfix"></div> //clearfix가 높이값을 인식하지 못하는 box가 인식하도록
                                 //영역을 잡지못하는 box가 영역을 잡고 하단 컨텐츠가 제 위치에 오도록
</div>

<div class="text">text</div>

 

6강. 코딩의 민족 그리드

 

 리스트 

1강. 리스트

//orderlist
<ol type="a"> //a, b, c
<ol type="A"> //A, B, C
<ol type="i"> //i, ii, iii
<ol type="I"> //I, II, III
<ol type="1"> //1, 2, 3 default
  <li>영화</li>
  <li>영화</li>
  <li>영화</li>
</ol>

//unorderlist
<ul>
  <li>영화</li>
  <li>영화</li>
  <li>영화</li>
</ul>

 

2강. 리스트 스타일링

li{display: block;} //불릿이 없어짐
li{list-style-type: square;} // 사각형 리스트 스타일
li{list-style: none;}

 

3강. 파라다이스 파크

li:not(:last-child)

마진상쇄(병합)은 좌우가 아닌 위아래에서만 나타난다. 마진상쇄(병합)은 주로 2종류가 있다.

1. 인접 요소 사이의 마진상쇄 2. 부모와 자식요소 사이의 마진상쇄

2번의 경우 패딩이나 보더를 사용해서 마진상쇄를 막을 수 있다.

또한 overflow의 기본값(visible)과 다른 값을 부모요소에 적용시키면 마진상쇄를 막을 수 있다.

따라서 overflow: auto 와 overflow: hidden 은 같은 결과를 나타낸다.

아마도 hidden을 사용할 때 나타나는 유일한 차이는 부모요소가 고정된 높이를 가지고 있을 때, 내용물이 숨겨지는 의도치 않은 결과가 발생한다는 것이다.

부모요소에 적용했을 때 마진상쇄를 막을 수 있는 다른 특성는 다음과 같다.

1. float: left/ right  2. position: absolute  3. display: inline-block