하단의 2가지에 대해 기술하기.
1. position 속성 - relative, absolute, fixed
2. inline, inline-block, block 에 대해서
3. float에 대해서
1. position 속성 - relative, absolute, fixed
Position이란?
: 화면의 구성 어디에나 그림을 그릴 수 있는 css property 이다.
position을 정의하는 속성에는
| relative
| absolute
| fixed
| (디폴트값이라서 딱히 잘 쓰지 않는) static 이 있으며,
이 position의 속성값들은 top, right, left, bottom과 함께 쓰여 위치를 이동한다.
■relative : 특정 태그나 클래스 등의 위치를 변경하고 싶을 때
해당 속성을 지정해주면 기존의 (static) 위치 기준으로, top, right, bottom, left로 위치 지정이 가능해짐selector { position : relative ; }■absolute : relative, absolute, fixed 성질을 가진 부모를 기준으로 이동을 하게되며, 없다면 그냥 body를 기준으로 움직임.
+++ 추가적으로 absolute를 지정하게 되면 해당 태그가 block의 성질을 가져도 width : 100%가 아니게 됩니다.selector { position : absolute ; }■ fixed : fixed로 지정하게 되면, 말 그대로 해당 자리에 고정됩니다. 이는 사이트의 상단바나 고정된 메뉴바 처럼 스크롤을 내려도 해당 자리에만 고정됩니다. 이 또한 absolute 처럼 지정하는 순간 width: 100% 에서 벗어납니다.
selector { position : fixed ; }2. inline, inline-block, block 에 대해서
해당 특성들은 css의 display poroperty이며, 즉 화면이 렌더링 되었을 때 특정 영역이 표시되는 방식에 대한 성질을 부여할 수 있습니다.
html 의 태그들은 기본적으로 block 요소와 inline 요소로 나눌 수 있습니다.
[대표적인 block 요소의 태그들]
<div>,<header>,<h1~6>,<ul>,<ol>,<p>,<table> 등[대표적인 inline 요소의 태그들]
<a>,<span>,<img>,<input>,<textarea>,<label>,<button> 등■ block : 한 영역을 모두 차지하는 박스 형태의 성질이며, 기본적으로 width: 100% 로 됨니다. 각각의 height, width, padding, margin 지정이 가능합니다.
■ inline : 텍스트 등의 내용이 입력된 만큼만의 공간으로 정의됩니다.
따라서 따로 해당 공간의 height, width 등을 설정할 수 없으며, 텍스의 경우 해당 font크기에 맞추어 공간이 변경됩니다.
■ inline-block : inline과 block의 특성을 모두 가진 요소.
보통 inline과 같으나, block처럼 height, width를 지정할 수 있어서 해당값을 지정하면 block처럼 정의할 수 있습니다.
3. float에 대하여
float속성은 이미지와 텍스트 배치를 위해 사용되기도 하며 레이아웃용으로 주로 활용됩니다.
