레이아웃
박스모델
: 웹사이트를 만들 때 레이아웃 구조를 빠르게 파악할 수 있도록 도와주는 일종의 옵션
박스 모델의 구성 요소 : margin / padding / border / content
margin
padding
:새롭게 생긴 공백에 의해 밀려남, 선택한 영역이 주체적으로 움직이는 것이 아니라 타의에 의해 옮겨짐 /padding값에 의해서 원래 설정했던 크기보다 달라질 수 있다.
content : ex) body 태그 기준으로 div는 컨텐츠가 된다.
tip)
css 코드 분량이 늘어날 수로 가져오는 시간이 늘어난다.
코드분량을 줄여야 불러오는 시간이 빨라짐.
위 코드에서 초록색 코드처럼 작성하기보다는 빨간색 코드로 작성하면 분량이 줄어든다.
margin : 100px 0 0 100px; padding : 100 px 0 0 100px;한줄로 요약해서 작성할 시 방향은 top부터 시작해서 시계방향으로 생각하면된다.
ex) margin : 100px(top값) 0(right값) 0(bottom값) 100px(left값);
border-box
* box-sizing: border-box;속성을 적용한 영역의 크기를 기준으로 크기 안쪽으로 border와 padding 값이 적용된다.
margin 병합현상
-
형제간에 발생하는 margin병합
margin-bottom & margin-top : 마진값을 공유하여 겹쳐지는 현상 / 숫자가 큰값이 작은 값을 병합 -
부모-자식간에 발생하는 margin병합
margin 병합현상 해결방법
- 부모 요소에 padding: 1px을 준다
- 부모 요소에 border에 1px solid transparent를 준다.
- 부모 요소에 overflow hidden을 준다 (best)
- 자식 요소에 display를 inline-block로 준다
(출처 :https://darrengwon.tistory.com/801)
Block & Inline
Block
Block
Block
InlineInlineInlineblock 은 단어 그대로 블록처럼 쌓여가는 구조
inline 은 block과 다르게 옆으로 정렬
Block : 공간을 만들 수 있다 (margin,padding값 적용 O)
Inline : 공간을 만들 수 없다 (margin,padding값 적용 X)
블록 성격을 가진 h1 > display : inline; 값을 주면 inline성격을 가진다.
인라인 성격을 가진 span > display : block;값을 주면 block 성격을 가진다.
태그는 태생적으로 갖고있는 고유의 성격이 있더라도 css의 display로 속성값 변경이 가능하다.
Inline-block
블록과 인라인 성격 둘다 갖고있는 display
display : inline-block;(메뉴 만들 때 많이 사용됨)
vertical-align
inline 형제들을 같은 기준에서 위치 정리
: vertical-align : top/middle/bottom ex)카카오톡 친구 리스트
*vertical-align 요소는 inline에서만 사용한다.
카카오톡 친구 리스트
이름과 상태메세지가 프로필사진의 이미지와 가운데 정렬한 것을 볼 수 있다.
vertical-align : middle;
코드펜을 사용하여 카카오톡 친구 리스트창을 간단하게 구현해 보았다.
vertical-align을 사용하여 사진-텍스트를 가운데 정렬하였다.
img태그의 성격
img는 글자처럼 inline요소 성격을 갖고있다.
Position 속성
1차원,2차원,3차원(z축-포토샵 이미지 레이어와 같은 개념)
웹사이트는 2차원과 3차원을 적절하게 사용하여 만든다.
Position 값을 사용하여 2차원 3차원 결정.
Position 속성값 특징 파악
1) margin-top 사용시 부모 자식간에 발생하는 마진병합 현상이 일어나는지
2) top, right, bottom, left 속성을 사용할 수 있는지
3) 자식의 높이 값이 부모에게 영향을 주는지
position : static
2차원 속성값
margin사용시 margin병합현상
top/bottom/left/right 입력해도 변화 X,
부모의 높이값 없어도 자식의 높이값에 영향받는다
모든 html의 태그는 기본적으로 position : static 값.
(=모든 html 태그는 2차원의 값을 갖고있다.)position : fixed
3차원 속성값
부모의 높이값 영향 X
margin병합현상 X
top/bottom/left/right Oposition : relative
2차원과 3차원의 성격 지니고있음
top/bottom/left/right > 자기자신이 주체가 되어 움직인다.
(최초 있었던 위치 기준으로 움직임)
부모의 높이값이 없을 때, 자식의 높이값에 영향을 받는다.
margin병합현상 일어남. position : absolute
top/bottom/left/right값 적용 O
margin병합현상 일어나지않음
부모가 어떠한 position속성인지에 따라서 기준점이 달라진다.
부모의 높이값이 자식의 높이값에 영향받지 않는다.
학습 소감
Position의 개념을 구체적으로 정리하는 시간을 가졌다. 특히 static은 처음 듣는 개념이라 새로웠다. 각각의 포지션이 2차원과 3차원의 성격을 갖고 있고 이를 다양하게 코딩으로 구현할 수 있다는 점이 흥미로웠다. margin 병합 현상에 대해서는 알고는 있었지만, 어떠한 조건에서 나타나는 현상인지 정확하게 알지 못했는데, 2차원 성격의 position인 static과 relative에서 일어난 다는 사실을 알게되었다. 각각의 포지션값의 성격과 정의, 특징을 정확히 알고 나서 코딩을 하면 문제가 일어나더라도 왜 이런 문제가 생겼는지에 대해서 합리적으로 해결 할 수 있을것 같다. 선생님께서 position의 속성을 모두 꿰뚫고 있으면 웹사이트 제작을 자유자재로 할 수 있다고 하셨다. 많이 만들어보면서 익숙해지는 것도 중요하지만 명확한 개념 또한 중요한 것임을 깨달았다!
학습 중 어려웠던 점 & 해결 방법
개발일지를 작성하면서 따로 코드펜으로 카카오톡 리스트를 간단하게 구현하였는데, 이 과정에서 조금 막히는 점이 있었다. html로 구조를 짜는 것은 어렵지 않았는데, css로 vertical-align 속성값을 어느 태그에 넣어야 할지 고민이 되었다. 프로필 이름과 상태메세지를 감싸고 있는 div의 display속성을 inline-block으로 설정하고 여기에 vertical-align : middle 값을 넣어서 해결하였다.
