다섯 째 날이다. 레이아웃을 구성하기 위한 CSS언어의 속성에 대해서 배웠다. 오늘 배운것을 복습 하기 전에 태그의 Inline/Block 속성 중 어떤 속성을 가지고 있는지 알파벳 H,I로 시작하는 태그에 대해서 복습하고 넘어가자.
Inline : <head></head>, <i></i> ,ins></ins>
Block : <h1></h1> to <h6></h6>, <header></header>, <hr>
오늘 무엇을 배웠지?
레이아웃
박스모델
- 박스모델 : html 요소들이 차지하는 공간에 대한 규칙
- margin : border 바깥 부분
(시계방향으로 top, right, bottom, left으로 픽셀을 한꺼번에 설정 가능 ->margin: 100px 0 0 100px) - padding : 내용 바깥 부분이면서 border 안 부분 ->contents와 border 사이 부분이므로 padding 값을 주게 되면 border가 설정한 값과는 다르게 보일 수 있음.
(시계방향으로 top, right, bottom, left으로 픽셀을 한꺼번에 설정 가능 ->border: 100px 0 0 100px)
∴ .box-model {width: 200px; height: 200px; padding-left: 100px;} 인 경우 보이는 값은 300pxx200px 값으로 보인다!
이 때, 'box-sizing: border-box;'로 200x200 사이즈의 박스모델을 설정해 그안에 10px 테두리, 100px 패딩을 만들고 난 남은 공간에 contents의 공간(80x80)을 만들 수 있다!
.box-model {
box-sizing: border-box;
width: 200px; height: 200px;
background-color: yellow;
border: solid 10px red;
padding: 100px 0 0 100px;}- border : 요소를 둘러싸는 테두리, 경계
- contents : 요소들이 가지고 있는 정보
+++TIP
html과 body 태그 사이에도 margin, padding이 적용되어 있으므로 공백을 없애고 싶다면 css 에서 html, body { marign: 0; padding: 0}으로 설정!
margin 병합
- 형제관계에 있는 태그들의 margin은 겹쳐져 큰쪽의 margin을 따른다.
<div class="margin-1"></div>
<div class="margin-2"></div>로 설정했을 때,
.margin-1 { margin-bottom: 100px;}
.margin-2 { margin-top: 50px;}
이라면 margin-1과 margin2 사이의 margin은 150px 이 아닌 100px이 된다!
- 부모자식관계에 있는 태그들의 margin은 자식관계에 설정한 margin의 설정값을 따른다. -> 이 현상을 막기 위해서 'position'을 사용해아함!
▼
display
- 'display:' - block->inline, inline->block으로 속성을 바꿔줌
(입력 : h1 { display: inline;} -> inline 속성을 가진 h1 태그가 됨) - 'display: inline-block;' : 두가지 속성 모두 가진 태그로 설정
└ 주로 메뉴를 설정할 때 자주 사용 - Block 속성 태그는 공간을 디자인 할 수 있지만, Inline 속성 태그의 공간은 y축에 대한 공간 설정은 불가하다. x축에 대한 공간설정은 가능!
(모두 동일하게 공간설정. width: 100px; height: 100px; margin-top: 100px; margin-right: 100px;)
vertical-align (수직 정렬)
- inline 속성에만 적용 가능한 기능
- 형제관계의 태그들은 가장 큰 공간을 기준으로 수직 정렬
- 부모자식관계의 태그는 부모의 공간을 기준으로 수직 정렬
(bottom-기준 공간에 맞춰 아래로 정렬, middle-기준 공간에 맞춰 중앙 정렬, top-기준 공간에 맞춰 위로 정렬)
position
3가지로 구분 지을 수 있음.
① margin-top 사용 시 부모자식 관계에 발생하는 margin 병합 현상이 일어나는지
Yes : static, relative
No : fixed, absolute
② top, right, bottom, left 속성을 사용할수 있는지
Yes : fixed(브라우저 기준), relative(최초 생성된 위치 기준), absolute(브라우저/부모기준)
No : static
③ 자식의 높이 값이 부모에게 영향을 주는지
Yes : static, relative
No : fixed, absolute
- static : 웹사이트(브라우저)에 맞추어 배치. (position의 기본값) ->2차원 속성
- fixed : 지정한 위치에 고정하여 배치. ->3차원 속성
- relative : 전에 설정된 값과 연결하여 위치 지정. ->2,3차원 혼합 속성
- absolute : 원하는 위치에 배치. ->3차원 속성
└ 부모도 동일하게 3차원 속성을 가지고 있다면 부모가 기준이 되고, 부모가 2차원 속성(static)이라면 브라우저 기준
무엇이 어려웠지?
position...
2차원 3차원 개념으로 position 각각의 특징도 가까스로 이해를 했는데 총 48가지의 경우의 수 (부모와 자식 각각의 position)까지 생각해야 하니 일단 많은 정보량에 뇌가 부담을 느꼈다.
어떻게 해결했지?
양이 많을 때 해결하는 방법은 한가지 밖에 없다 양 전체를 나만의 기준을 찾을 때까지 만들어보고 확인해보는 수 밖에.. 아니면 해보지 않아도 바로 아는 엄청난 머리를 가졌거나.. 그래서 하나하나 귀찮지만 연습을 해봐야겠다. Inline/Block 속성 태그를 하나하나 알아보는 것 처럼..
그래서?
드디어 웹프로그래밍 수업 한 주가 지나갔다. 정말 눈이 빙글빙글 도는것 같았지만 차근차근 따라갔다. 배우는 양이 점점 늘어나는 느낌도 들고 솔직히 오늘 배운 position은 조금 벅찬 느낌도 들었다. 할 수 있는 것이 많아져서 다음엔 또 이걸 어떻게 응용해서 쓸까 하고 탐구심이 솟기도 하지만... 정말 오늘이 금요일이 아니고 월요일이라 쉬는 시간 없이 또 position같이 중요하고 마음의 벽을 느끼게 하는 개념이 나와서 공부를 해야했다면 잠깐 그만할까 하는 생각도 들었을 것 같다. 주말 잘 쉬고 돌아와서 복습하고 또 열심히 배우자...!
sublime3를 이용해 오늘 만들어본 파일
https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0702
