1. css position 속성
css에서 position이란? 이름처럼 태그들의 위치를 결정합니다.
1-1. static
- 일반적으로 모든 태그들은 처음에 position: static; 상태입니다. (기본적으로 static 이라 따로 써주지 않아도 됩니다.) 차례대로 왼쪽에서 오른쪽, 위에서 아래도 쌓이는 형태입니다.
1-2 relative
- 태그의 위치를 살짝 변경하고 싶을때
position: relative;를 사용합니다.
top, right, bottom, left 속성을 사용해 위치 조절이 가능합니다.
1-3 absolute
-
relative가 static인 상태를 기준으로 주어진 값 만큼 움직였다면 absolute는 position: static 속성을 가지고 있지 않은 부모를 기준 으로 움직입니다.
-
부모 중에 position이 relative, absolute, fixed 인 태그가 없을 경우 가장 위의 태그(body)가 기준이 됩니다.
-
하기 예시 코드 확인 시, #absolute의 경우 부모 태그 중에 position이 relative, absolute, fixed 가 없으므로 body기준으로 가장 오른쪽으로 붙었습니다. (absolute가 되면 div여도 더는 width: 100%가 아닙니다.)
반면에 #child 의 부모 태그인 #parent는position: relative;이기 때문에 부모 태그 기준으로 가장 오른쪽에 붙은 걸 확인 할 수 있습니다.
1-4 fixed
- fixed는 말그대로 해당 위치에 고정이라는 뜻입니다.
- fixed는 별도로 부모는 필요하지 않으며 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직입니다.
2. css display 속성
display? display 속성은 그 값에 따라서 웹페이지를 보고 있는 사용자에게 특정 요소(element)를 어떻게 보여줄지 결정됩니다.
2-1. block
- display가 block로 설정된 요소는 다른 여러 요소들이 배치된 페이지에서 새로운 줄에 위치하면서, 가로 크기가 Default 100%를 차지합니다.
- 가로, 세로 사이즈를 지정할 수 있으며, 가로 크기를 부모 요소의 그것보다 작게 설정 할 수 있지만, 그렇게 될 경우 나머지는
margin으로 채워져 여전히 block 요소는 한 줄을 차지합니다.
하기 코드와 같이 사이즈는 줄어들었지만 빈공간에 "inline" text가 올라가지 않는걸 확인할 수 있습니다. - block 속성이 기본 값으로 가지는 요소는 대표적으로
div,p등이 있습니다.
2-2. inline
- display 가 inline 으로 설정된 요소는 다른 요소들과 함께 같은 라인에서 표시됩니다.
- 가로와 세로의 크기를 임의로 지정 할 수 없으며, 그 크기는 오로지 포함하고 있는 내용에 의해서 결정됩니다.
block 과 inline의 차이점
1. 요소가 새로운 행에서 시작하는지
2. 요소의 크기를 지정할 수 있는지
2-3. inline-block
-
display 가 inline-block 으로 설정된 요소는 block 소성과 inline 의 속성을 섞어 놓은 것과 같습니다.
-
block 처럼 가로와 세로 크기를 설정 할 수 있으면서도, 새로운 줄에서 시작하지 않고, inline 처럼 다른 요소와 같은 라인에 배치되는 장점을 가지고 있습니다.
-
이전엔 박스를 생성할 때는
float를 이용하여 복잡하게 접근하는 방법 이었으나 이제는 inline-block을 이용하여 쉽게 같은 효과를 보여줄 수 있습니다.
3. css float 속성
float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티입니다.
하지만 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다.
float 속성을 가진 요소는 부모가 높이를 인지 할 수 없어서 요소가 부모를 벗어납니다.
해당 문제를 해결하는 법은 3가지가 있습니다.
- float 요소 다음에 아무태그나 넣고 clear 속성 적용 (BUT, 추가로 HTML코드 입력이 필요하다는 단점이 있음)
- 부모요소에 overflow: hidden; 속성 적용, 주로 많이 사용 됨.
- 부모요소에 float 속성을 주어 그만큼 높이를 차지하게 합니다.(BUT, block 요소의 성질을 잃어버려서, 재설정 등이 필요함.)
