부트캠프를 시작한지 일주일이 지났다.
아직 HTML 끝, CSS 시작이지만 기초부터 탄탄하게 다져나가는 느낌이라 매우 만족하고 있다.
오늘 배운 내용들을 총 복습해보는 포스트를 남겨볼까 한다.
1. css를 배우면서 깨닫게 된 사실
블로그나 포털사이트 같은 여러 웹 사이트들을 보면 ul, li, ol등의 태그로 메뉴를 나눠 놓는 모습을 보았다.
지금까지 무식하게 div, span 태그만 사용해서 구간을 나눴던 지난날이 떠올라서 부끄러워졌다.
한창 공부할 때 여러 웹 사이트들에서 개발자도구로 어떻게 설계가 되었는지 찾아볼 걸 그랬다.
특히 html에서 form 쪽 수업에서도 서버 통신에 이런 태그도 존재했는데 왜 나는 잊고 있었을까? 에 대해서 생각해보게 되었다.
2. 나는 React의 노예였다.
결국 React도 JS 라이브러리 중 하나일 뿐이었는데 너무 맹신해서 사용했던 것 같다. css도 대충 스타일컴포넌트로 외부 내부 가리지 않고 막 사용했었고 가장 기본인 HTML식 방법들을 등한시하고 무조건 어렵게 만들곤 했었다. 결국 웹의 기반이자 뼈대는 HTML인데.. 내가 왜 그렇게 React를 못 썼는지 이제야 이해가 됐다. 중학 수학도 못 푸는 아이가 미적분을 할 수 있을까? 못 했으니 매번 인터넷에 검색하는 방식으로 문제를 해결했었지... 오늘 강사님께서 하셨던 말씀이 가장 기억에 남는다. 검색하고, GPT한테 물어보고 하는 방법으론 실력이 늘 수 없다고..
결국 개발자는 문제해결을 잘 해야 하는데 내가 너무 바보 같이 공부하고 있었다는 생각이 든다.
자습한 내용
block-inline content, box-model
block, inline, boxModel 모두 css에서 가장 기본이면서 가장 중요한 내용이기에 다시 한번 개념을 잡기 위해 정규과정이 끝난 후 자습을 진행했다. 초창기에 공부할 때 정말 쉬워보였는데 막상 머릿속으로 깊이 이해하기까지 꽤나 시간이 걸렸던 이 개념. 이 참에 확실히 이해하기 위해 여러 방법으로 공부를 했다.
사실 한번 이해하고 나면 어렵지 않다. 하지만 웹 구조의 기본이기 때문에 꼭 이해하고 넘어가야 한다고 생각한다.
block 요소는 가로로 100%를 사용한다.
줄 노트를 생각하면 편하다. 내가 만약 단어장을 만든다고 가정할 때 블록 요소는 단어 : 뜻 하나만 쓰고 넘어가고 인라인 요소는 계속 써나간다고 생각하면 좋다.
ex)
hello world : 안녕 세계야 (block)
head : 머리 body : 몸 (inline)
이 개념이 마냥 쉬워보이지만 내 입장에서는 가면 갈 수록 어려웠던 것 같다.
가면 갈 수록 좀 더 예쁘게 꾸미고 싶다는 욕심이 생기는데 이 부분을 제대로 짚지 못하고 가면 생각보다 각 요소들을 배치하는데 많은 시간을 소요하고 있는 나를 만나게 된다.
box model도 개념만큼은 절대 어렵지 않다.
margin : 요소와 요소간의 여백
말 그대로 요소와 요소간의 여백. 지금 나와 내 눈앞의 모니터 사이의 거리가 마진.
border : 요소의 테두리
이것도 말 그대로 테두리다. 어렵지 않다.
padding : 요소와 컨텐츠 간의 여백
처음에 이게 제일 머리 아팠다. 테두리가 이미 나왔는데 무슨 여백? 했었는데 이것도 별거 없다.
그냥 div에 아무 말이나 치고 style로 border: 1px solid black을 줘보면 내가 친 아무말과 테두리의 거리가 padding이다.
content : 위에서 말한 아무말
이해를 도와줄 그림. 근데 이해에 도움이 될까..?
참고
링크텍스트
