[html/css] 주요 내용 wrap-up (feat.유지/보수)

📍html/css 내용을 쭉 살펴보고, 과제들을 한 후에 wecode wrap-up 시간을 가졌다.

좀 더 코딩 관점에서 정리해보면, 나에게 오늘의 핵심 키워드는 "유지/보수"다. 공부하면서 가독성/접근성/SEO 등에 대해선 당연히 들어왔지만, 이 모든 작업들은 결국 쉬운 유지/보수로 연결되며 매우 중요한 부분이라는 사실을 살짝 간과하고 있었다.
코딩 작업은 협업으로 이뤄지고, 빠르고 좋은 협업을 위해서는 누구나 이해할 수 있는 코드를 작성해야 한다.

다시 한번 기록해두면 좋을 것 같아 wrap-up 내용을 메모했다.

0

html은 프로그래밍 언어가 아님. markup 언어임
-> why? 여기 클릭. 요약하면, html은 논리문 등 logical structure을 갖고 있지 않고, 단지 정보들을 출력하는데 목적이 있는 언어다(not compiled, but intepreted by the browser).

개발 용어에 익숙해지기 (열린태그, 닫힌태그, 속성 등등)

google에서 검색해서 본 짤. wrap-up 세션 때 본 짤도 웃기긴 했다.

1

semantic web, semantic tag (img/background-image 차이)
결국 “접근성” 과 “검색엔진최적화” 의 문제 -> 유지보수에 기여
노인/시각장애인은 스크린리더 등을 통해 웹을 읽거나 들을 수 있는데, 이 때 img태그를 사용하면 어떤 이미지 파일인지 알 수 있음
-> div를 넣는 것보다, ul/li나 nav를 사용하면, ‘아 얘가 메뉴구나’ 하고 바로 알 수 있는 것 또한 같은 맥락

2

css, box-sizing 속성
border-box vs content-box, 결국 border-box로 설정하는 것이 좋다
(margin/border/padding/content로 구성된 요소의 크기를 쉽게 계산 가능)

3

selector는 결국 효과적인 css 작업을 위한 것
id는 최대한 자제
class 위주로 쓰되, 스타일링 중복 적용의 목적이 제일 크다고 할 수 있음
-> 유지/보수의 측면에서 생각해 볼 것

4

display block에서, width:100%는 기본 default 값이다
default를 굳이 다시 쓴다거나, 중복 코딩은 지양하기
: 100vh/100vw, 보고 있는 화면의 크기대로 나타내기 (view height, view width)
: left:50%, top:50% 등을 통해 중앙 이동 > transform: translate(-50%, -50%) 조합 많이 사용함

5

Weegle 문제 풀이
flex/justify-content(중심축)/align-items(교차축)
자식 요소에게는 flex:7 과 같이 numbering을 통해 영역을 정할 수 있음
display:grid 는 최근에 사용되기 시작 -> 역시..flex 배우기에는 개구리 게임이 최고

보통 height는 주지 않음 (갖고 있는 contents만큼 길이 차지)
height 값 보다, padding 등을 사용하면 height + line-height 를 한 줄로 해결 가능 (예를 들어 button(inline 속성))
-> 길이를 별도로 수정할 필요 없어, 유지/보수에 쉬움

**etc
fontawesome 적용하기 : 이메일 먼저 등록하고 kit code를 받아야 함
(그래야 icon 태그를 그대로 사용할 수 있음)