210121_TIL
오늘은 페어 프로그램 없이 하루종일 HTML, CSS에 관한 동영상 강의를 들었다. 어제 커피 한 잔을 마셔서 그런지 새벽에 잠이들어 오늘도 어김없이 피곤했다. 내가 아침에 피곤하지 않을 날이 코딩 공부를 하면서 하루라도 오길 기도해본다.
HTML
프로그래밍 언어라고 하지 않고 Make up Language라고 한다고 한다. 웹 개발에 있어 구조를 담당한다고 설명해 주는데 건축공학과를 전공한 나로서는 구조보단 설계에 가깝다고 느껴졌다. 건축구조에서 집을 지을 때 벽을 어디에 세우고 거실은 어디에 만들고 부엌과 화장실, 방은 어디에 조닝할 건지 생각하지 않는다. 보통 이런 부분은 건축설계 파트에서 담당하고있다. HTML도 집을 지을 때 벽을 두고 공간을 조닝하는 것 처럼 웹의 구역을 나누어 준다고 생각한다. HTML을 잘 짜지 않으면 CSS, JS로 접근하기 어려워지기 때문에 가장 기본적이면서도 중요한 역할을 담당한다.
새롭게 알게 된 사실
- div: 한 줄 전체
- span: 길이만큼
- section: 구역
- p: 문단
- a: 링크(anchor 닻의 약자)
- ul: 넘버링이 되지 않은 리스트
- ol: 넘버링이 된 리스트
- radio: 하나만 선택 가능 *name으로 그룹 설정을 해줘야 한다
- checkbox: 다중 선택 가능
CSS
HTML로 기본적인 작업을 마치고 스타일링 작업을 수행한다. 예쁘게 꾸민다는 개념보단 사용자가 보다 더 직관적으로 웹을 사용 할 수 있도록 해주는 작업이다. 결국 디자인 요소보단 편의성 향상에 가깝다고 생각된다. 이렇게 HTML과 CSS를 나누어 작업하는 이유는 '관심사 분리'에 있다고 한다. 쉽게 말하면 '분업'이 되겠다. 세상에는 여러 전문가들이 있다. 자동차를 한 사람이 퀄리티 있게 만들 수 없듯이 각 분야의 전문가가 각자의 일을 맡는다고 생각하면 편하다.
새롭게 알게 된 사실
-
HTML에 id나 class를 주어 CSS에서 원하는 스타일링을 할 수 있다
-
id는 CSS에 #을 주어 특정하고 class는 .을 주어 특정한다
-
id는 하나의 element에만 적용 가능하다
-
*모든 태그, 영역에 적용
-
box-sizing: content-box:
가로 width + padding + border
세로 height + padding + border
width가 100px이면 contents는 그대로 유지 padding과 border이 더해짐 -
box-sizing: border-box:
가로 width
세로 height
width가 100px이면 contents가 padding과 border만큼 줄어들면서 100px 유지 -
text-align: 텍스트 정렬
-
inline inline inline -> 줄바꿈 x, 너비 변경 x, 높이 변경 x
-
block
block
block ---> 줄바꿈 o -
block-inline block-inline block-inline -> 줄바꿈 x, 너비 변경 o, 높이 변경 o
-
시맨틱하다: 문서의 의미를 부여한다. 문서의 특정 구역이 어떤 의미를 가지고 있는지 구분한다. 검색어를 잘못써도 연관적인 검색어가 도출되는 것과 비슷한가?
ex) header, footer, section, nav 등
AMA를 들으면서
코드스테이츠 이호용 엔지니어분께서 AMA(Ask Me Anything)를 진행해주셨다. 거의 QnA형식으로 진행되었는데 중간 중간 아주 중요한 말씀을 해주셨다. 문제를 풀다가 막히면 수도코드를 꼭 작성해보라는 말이었다. 내가 모국어인 한국어로도 해야 할 말이 생각이 안나면 영어로 말을 할 수 없듯이 수도코드로 작성을 할 수 없으면 그 코드는 절대 쓸 수 없는 것과 같다고 하셨다. 앞으로 계속 수도코드를 써보는 습관을 들여야겠다.
그리고 내가 배운 언어로 할수 있는 것과 할 수 없는 것을 명확히 파악하고 있어야 코드를 작성할 때 도움이 된다고 하셨다. 이것만 알고 있어도 확실히 코드를 작성 할 때 도움이 될 것 같다. 또, 흥미가 생기는 분야로 깊게 파고 들어 마스터하는 수준에 도달하면 분명 큰 도움이 될거라고 하셨다.
