* 이 글은 필자가 자신이 배운 내용을 정리하기 위한 것이며, 결코 Udemy 강의를 결제하지 않은 타인의 학습을 고려하여 작성되지 않았습니다.
* 이 글을 학습에 활용하기를 원하신다면, Udemy에서 '【한글자막】 The Web Developer 부트캠프 2024' 강의를 구매하시는 것을 권장드립니다.
이번 글은 css의 박스 모델을 공부한다. 사실 나도 뭔 소린지 모르겠다.
지금 5일동안 8개의 포스트를 썼고, 이게 9번째 포스트이니 슬슬 정신이 나가도 이상하지 않다.
현재 많은 tistory 글이 gpt에 의존하거나 인터넷 글 짜집기인 반면, 나는 직접 내가 배우고 정리하면서 작성하는 거니 말이다.
python bootcamp에 비해 web developer bootcamp는 강의당 시간이 길다. python은 4~50분이라면 web developer은 1시간 10~20분 정도? 그래서 글을 쓸 때 집중도 잘 되지 않는 경향이 있다.
그래도 돈벌어야지... 어쩌겠어
오늘도 파이팅 넘치게 웹 개발을 공부해보자. 아자자!
웹 브라우저에 있는 모든 것들은 일종의 박스로 대체된다. 차지하는 공간이라고 생각해도 무방하다.
그 박스에 대한 css를 오늘 배우는 것 같다. 나도 아직 안 배워서 잘 모른다. 지금부터 강의를 보면서 배워야 하는 거지 뭐...
width는 콘텐츠의 가로 값을 정하고, height는 콘텐츠의 세로 값을 정한다. 왜 콘텐츠라는 말을 따로 쓰냐면, 패딩이라던가, 마진같은 값 때문에 콘텐츠의 크기가 도대체 어디인가 하고 햇갈릴 수 있기 때문이다.
인터넷에 있는 대부분의 것들은 빽빽하게 서로 붙어있지 않고 떨어져 있지 않은가? 심지어 안의 내용물도 테두리와 완전히 붙어있는 경우가 적다.
그런데 어디에서는 콘텐츠 사이즈를 기준으로 삼고, 어디에서는 콘텐츠 밖에 있는 저 테두리를 기준으로 삼으니, 콘텐츠라고 아예 명시해놓겠다. 콘텐츠는 딱 핵심, 내용이 담긴 부분을 말한다. 적어도 내 포스트에서는.
Border은 말 그대로 테두리를 그린다. 테두리와 컨텐츠 사이의 간격을 만드는 것도 조금 뒤에 다룬다. 그게 당장 필요한 사람은 ctrl+f를 사용하길 바란다. 아래는 border 관련 style? 이다.
- border-width: 테두리의 굵기를 정한다. 일반적으로는 px 단위를 사용한다.
- border-color: 테두리의 색을 정한다.
- border-style: 테두리의 유형을 정한다. 실선solid, 점선dotted, 절취선dashed 등이 있다. 자세한 건 MDN을 찾아보자.
- border: 테두리의 굵기, 유형, 색(순서가 있다!)을 전부 한 번에 정할 수 있다. border: 5px, solid, red같은 식이다.
boder-left-color처럼 한 쪽 테두리의 서식만 정하는 방법도 있다.
- border-radius: 테두리의 모서리를 둥글게 만들 때 쓴다. px, %등의 단위를 사용할 수 있다. 50%로 값을 정하면 거의 원형이 나온다.
box-sizing: border-box;을 이용해 테두리를 포함한 크기가 전체 크기가 되도록 할 수 있다.
테두리와 콘텐츠 사이의 간격을 나타내는 padding은 그 크기를 지정해 가독성을 늘릴 수 있다.
padding: 10px; 이라고 하면 상하좌우에 10px씩 패딩이 생긴다.
padding: 10px 20px; 이라고 하면 상하에 10px, 좌우에 20px씩 패딩이 생긴다.
padding: 10px 20px 30px 40px; 이라고 하면 위부터 시계방향으로 상우하좌에 10, 20, 30, 40px의 패딩이 생긴다.
margin은 padding과 그 사용법이 비슷한데, 대신 margin은 컨텐츠의 테두리 밖 여백을 만들 때 쓴다. 간격(여백)을 정하는 방법 패딩과 같다.
body에도 기본 margin 값이 있다. 이를 없애기 위해 body에 margin: 0; 을 적용시킬 수 있다.
예전에 언급한 적 있듯, html에는 inline과 block이 있다. 그런데 이를 바꿀 수 있다! inline을 block으로, block을 inline으로 바꿀 수 있다. 바로 display를 사용하면 된다.
참고로 inline 값은 width나 height로 너비나 높이를 바꿀 수 없다. margin이나 padding은 해당 값이 있는 그 줄에만 적용이 되고, 나머지 줄의 값을 밀어내지 않는다.
그러니 만약 block을 line처럼 옆으로 늘여놓고 싶다면, inline-block으로 display를 설정하면 된다.
심지어는 display:none; 을 작성해 해당 부분이 화면에 보이지 않도록 할 수도 있다.
css의 단위는 절대 단위와 상대 단위로 구분할 수 있다. 절대 단위 중에 가장 많이 쓰이는 것은 px이며, 그 외의 절대단위는 거의 쓰이지 않는다고 한다. (무언가를 출판하는 상황이 아니라면)
절대단위는 말 그대로 절대적인 단위지만, 상대 단위는 무엇에 대한 상태적인 단위일까?
%: 부모 요소의 n%만큼을 가진다. 하지만 일부 상황에서는 자체의 값을 기준으로 퍼센테이지를 따지기도 한다. line-height와 같은 값은 자체의 값을 기준으로 퍼센테이지를 따진다.
em: '엠'이라고 읽는다. 글자에 사용될 경우 em은 부모에서 적용된 글자 크기의 n배 크기를 갖도록 한다. 패딩이나 마진에 사용될 경우 현재 적용할 요소의 글자 크기의 n배 크기를 갖도록 한다. em은 단계별로 크기가 점점 n배로 늘어나기에, 중첩되는 구문을 가질 경우에 의도한 바와 다르게 적용될 위험이 있다.
rem: '렘'이라고 읽는다. 부모 글자 크기에 대해 영향을 받지 않으며, 루트 요소에 영향을 받는다. 루트요소는 html의 서식을 정함으로서 결정 가능하다.
이번 강의 내용은 여기까지!
내 블로그 글을 정말로 읽는 사람이 있을지는 모르겠지만 (대부분 내용 안 읽고 다는 사람들 같아서) 만약 있다면 좋은 하루 보내길.