학습한 내용
1.box-model
box-model이란?
box Model은 요소를 위해 생성되고 비주얼 서식 모델을 따라 배치되는 사각형 박스(패딩 및 마진 포함)를 정의하는 CSS 모듈.
border을 기준으로 바깥쪽이 margin 안쪽이 padding
margin-left: 100px; 이게 적용이 되면, 노란박스는 왼쪽에 공백이 생기기때문에, 오른쪽으로 밀려나게 된다. 자기 스스로 움직이는 것이 아니다.
padding-left: 100px; 이게 적용이 되면, 내부에 빈 공백이 생기게 됨으로써 내부에 있는 컨텐츠가 오른쪽으로 밀려나게 된 것이다. 이것도 역시 자기 스스로 움직인 것이 아니다.
정리하면,
margin, padding은 선택된 영역이 주체가 돼서 움직이는 것이 아니라, 빈 공백에 의해서 타의적으로 움직이게 된다.
박스의 크기는 200x200 이었지만, 패딩으로 인하여 내부에 100만큼의 공간이 생겼기 때문에,
실제 박스의 크기는 300x200으로 나타나게 된다. 이것을 주의하자.
마진과 패딩은 둘 다 4가지의 속성(top right bottom left)을 가지고 있다. 그래서 이것을 전부다 일일히 쓰면 너무 길어지기때문에 아래와 같은 규칙을 만들었다.
시계방향 순서대로 적는다.
css 코드가 길어질수록 브라우저의 로딩속도가 느려지기 때문이다.
용량이 커지니까.
margin: top right bottom left
padding: top right bottom left
.box-model {
width: 200px;
height: 200px;
background-color: yellow;
border: solid 10px red;
위 사이트의 코드이다. margin과 padding 이 적용되지 않았다.
즉, 기본적으로 마진과 패딩이 (얇지만) 기본적으로 적용이 된다는 것.다시말해, 기본값에 마진과 패딩이 적용이 되어있다는 말이다.
이 기본값을 없애주기 위한 코드를 짜보자.
html, body {
margin: 0px;
padding: 0px;
}
이 코드의 의미는
margin: top right bottom left
padding: top right bottom left
이니까 4가지 영역 모두 0px이라는 뜻이다. 이렇게 하면 브라우저와 테두리 사이의 공백이 사라지게 된다.
html, body {
margin: 0px;
padding: 0px;
}
이것을 웹사이트 만들 때 디폴트값으로 적용해놓으면 좋다.
boxsizing 뜻 : 박스에 맞게 박스안에 패딩이 들어간다.
- 마진병합현상
1)형제끼리 마진병합현상.
마진 바텀이 100이고 아래 마진탑이 50이면 합쳐서 150이라는 공백이 생겨야하는데 그렇지 않고, 둘중에 더 큰 숫자인 100으로 공백이 잡힌다. 같은 형제(마진)기 때문에 둘 중에 더 큰 숫자의 픽셀이 병합을 한다.
2)부모자식끼리 마진병합현상.
파란색 박스만 아래로 내려가야하는데, (margin-top 100px;이니까) 노란색 박스랑 같이 내려감. 마진병합현상이 일어났다.
실제 웹사이트를 만들때 가장 많이 만나는 현상 중 하나이다.
마진병합현상을 해결하기위해서는 position: absolute; 라는 코드를 넣으면 해결된다.
- display
html은 크게 Inline과 Block 으로 나뉜다.
Inline : 한줄로 정렬 = x축으로 정렬 /상하배치작업 못함
block : 줄바꿈해서 정렬 = y축으로 정렬 / 상하배치작업 할수있음
즉 block은 공간을 만들 수 있고, inline은 공간을 만들 수가 없는데,
그런데 display 태그를 이용하면 배치작업이 가능하게 된다!
display를 이용하면 내가 선택한 태그의 공간을 바꿀 수가 있다.
- vertical-align
vertical-align : 말그대로, 수직으로 정렬하는 것이다.
위는 vertical-align를 하지 않는 모습이다. 보기가 좋지 않다.
깔끔하게 정리된 모습을 볼 수 있다.
vertical-align를 사용하는 예로는 카카오톡 친구목록이 있다.
학습한 내용 중 어려웠던 점 또는 해결못한 것들
display 이라는 개념을 이해하기 위해서는 일단, Inline과 Block의 개념을 암기해야하는데 아직 암기를 다 못해서 display라는 개념을 이해하는데 약간 어려웠다.
box-model를 만들때 선생님께서 작성하신 코드를 그대로 넣었는데 box-model 내에 사이즈가 다르게 나와서 왜 그랬는지 잘 이해를 못했다.
해결방법 작성
수업을 다 듣고, 네이버나 다음 사이트에 들어가 각각의 box-model를 살펴보았고 내가 실습으로 만들었던 box-model의 코드를 살펴보았는데 중간에 오타가 있었던 것을 발견했다.
학습 소감
수업때마다 새로운 개념을 배우는데, 생소하고 어려울 때도 있지만 내가 입력한 대로 웹브라우저에서 실행되니까 재미있다. 내가 오타를 치지않고 제대로만 태그를 작성한다면 오차없이 웹브라우저에 생성이 되니까, 신기하고 재미있는 것 같다. 다만, 외워야할 개념이 많아서 머리가 좀 아프다;;
