간단한 요약
배운 내용
1. layout tips
html, body, h태그는 default로 margin과 padding 값이 있기에, 원하는 styling을 위해서 값 0을 주고 시작하는 것이 하나의 팁box-sizing: border-box를 통해 padding값의 변화에 content 사이즈가 왜곡되지 않도록 가능
이렇게 할 경우, 설정해둔width/height내에서 padding이 결정됨
2. margin 병합 현상
a. sibling간의 margin 병합 현상
- sibling 관계에서 margin영역을 공유할 때, margin의 값이 큰 쪽의 우선순위가 높음
b. parents-children간의 margin 병합 현상
- parents-children 관계에서 margin영역을 공유할 때, children의 margin을 옮길 때 parents의 margin값이 같이 바뀌는 현상
- 웹사이트 styling 중 가장 흔하게 발생하는 현상 중 하나
- 해결방법:
position: absolute;로 해결가능 (이후에 배울 내용)
3. display
- 선택된 요소의
block 혹은 inline값을 바꿀 수 있는 속성 - 만약 inline과 block요소의 특징을 모두 이용하고 싶을 땐
display: inline-block;을 사용
4. vertical-align
vertical-align은 sibling관계 요소들 중 가장 영역이 큰 값을 기준으로 나란히 정렬하는 기능- inline 속성을 가진 요소에만 사용 가능 (block은 불가능)
img는 inline-block의 속성을 가지기 때문에 vertical-align 적용 가능
5. position
- 웹사이트는 2차원에서 3차원으로 확장할 수 있다.
- 유의할 점 3가지
a.margin-top사용 시, parents-children에서 발생하는 margin 병합 현상 (2차원의 특징)
b.top, right, bottom, left속성 사용이 가능한 지 (3차원의 특징)
c. children의 height 값이 parents에게 영향을 주는 지 (2차원의 특징)
5-1. position: static;
static은 2차원의 특징을 가지는 속성
모든 html 태그는 position: static;이 default
margin-top사용 시, parents-children 간의 margin 병합 현상 발생Otop, right, bottom, left속성 사용 불가능- children의 height 값이 parents의 height 영향O (parents의 height이 없을 때)
5-2. position: fixed;
fixed는 선택 요소를 원하는 위치에 고정시키는 속성
margin-top사용 시, parents-children 간의 margin 병합 현상 발생Xtop, right, bottom, left속성 사용 가능 (기준: 브라우저)- children의 height 값이 parents의 height 영향X
5-3. position: relative;
2차원의 특징과 3차원의 특징 모두 가지고 있음
margin-top사용 시, parents-children 간의 margin 병합 현상 발생Otop, right, bottom, left속성 사용 가능 (기준: 최초 위치)- children의 height 값이 parents의 height 영향O (parents의 height이 없을 때)
5-4. position: absolute;
3차원의 특징만 가지고 있음
margin-top사용 시, parents-children 간의 margin 병합 현상 발생Xtop, right, bottom, left속성 사용 가능 (parents의 position에 따라 다름)
기준: 브라우저 (parents: static)
기준: parents (parents: fixed, relative, absolute)- children의 height 값이 parents의 height 영향X
5-5. 정리 (출처: 웹프로그래밍 강의_김인권)
어려웠던 내용
역시 css의 position 속성은 복잡하며 익숙해져야 할 것이 되게 많다. 필요한 상황마다 적절한 position 속성을 사용해야 하는 것이 당장은 어려움이 있다.
해결 방법
강사님이 말씀하신 것처럼, 최소 27가지 경우의 수의 다른 점 및 특징을 반복적인 연습으로 눈과 손에 익힌다면, css styling은 훨씬 수월하게 다가올 것 같다. 해결 방법은 반복 연습
소감
이전에 배웠던 강의에서는 position에 대한 자세한 언급없이 필요했던 속성만 간단히 언급만 하고 넘어 갔었기에, 이번 강의는 큰 도움이 되었다.
특히 2차원/3차원으로 내용을 풀어내는 것이 이해하기에 훨씬 도움이 되었다.
나의 코드
정리 및 연습한 코드는 github에 업로드하였다.
