블록과 인라인 & position 속성

1. 블록과 인라인

HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가지는데 이 display 속성값은 다음 두 가지 중 하나이다.

1. 블록(block)
2. 인라인(inline)

블록 (block) 타입의 요소

• display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지
• < p >, < header>, < footer>, < div >, < h >, < ul >, < ol >, < li >, < table >, < form > 요소
• < div > 요소 : 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소. 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용
• 블록요소는 요소의 속성으로 한 블록 전체를 다 쓰는 요소

인라인(inline) 타입의 요소

• display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않음
• 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지
• < span >, < a >, < img >
• <span> 요소 : 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소. 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용
• 인라인요소는 라인 안에서 딱 태그로 묶인 부분, 즉 해당되는 부분만 적용

display: inline-block 속성

• block 성질을 가진 태그를 inline 성질을 가진 태그로 바꿀 수 있고, 그 반대도 가능.
  방법 :

ex) 원래 inline 타입이던 span태그를 block타입으로 바꾸기
span {
  display: block;
}   

• display: inline-block 이렇게 할 경우
  기본적으로 inline 타입처럼 줄바꿈 없이 한 줄에 다른 요소들과 같이 배치되지만 원래 불가능했던 width, height 속성 지정 및 margin, padding 속성의 상하 간격 지정이 가능해짐

position 속성

1. static position

• div { position: static; }
• static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않음
• 모든 HTML 요소의 position 속성의 기본 설정값은 static

2. relative position

• div.relative { position: relative; left: -30px; }
• 기본 위치를 기준으로 위치를 설정
• static(기본 위치)을 기준으로 상대적으로 위치가 바뀐다고 생각
• position: relative; 이걸 쓰고 항상 top, right, bottom, left 프로퍼티를 설정해줘야 이동 (음수도 가능)

3. fixed position

• div.fixed { position: fixed; top: 0; right: 0; }
• 뷰포트(viewport)를 기준으로 위치를 설정
• 즉, 페이지 스크롤 움직여도 항상 같은 곳에 위치

4. absolute position

• div.absolute { position: absolute; top: 50px; right: 0; }
• 부모 요소를 기준으로 움직임. 부모 요소 중에 position이 relative, fixed, absolute 중 하나라도 있으면 이에 따라 움직임. 일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position:relative를 부여하면 됨(이럴 경우 부모에 따라 자동으로 움직이니까)
• ex) right: 0은 오른쪽으로부터 0만큼 떨어졌다는 뜻