21.01.21

💡

HTML & CSS

• HTML로 웹 페이지의 구조를 잡고, CSS로 잡은 구조에 디자인을 입히고, JavaScript를 통해 실제로 기능하게 한다.

• 시맨틱한 이름을 작성하려고 노력할 것. 시맨틱 태그가 아닌 div를 쓸 때도 id나 class를 통해 구역에 의미 있는 이름을 부여하자.

• id는 같은 이름으로 하나만 부여할 수 있다. 그래서 주로 header나 footer처럼 1개만 존재하는 엘리먼트에 주로 사용한다. class는 여러 엘리먼트에 같은 CSS 태그를 적용할 때 사용한다.

• 절대적이고 확실한 크기 px / 보통의 경우 rem 사용(em은 부모 엘리먼트에 따라 기준이 변경되므로 추천하지 않음. rem은 root의 글자 크기가 기준.) / 반응형 웹의 경우 디바이스 크기(가로 px)별로 다른 CSS 적용 / 화면 크기에 따라 너비, 높이가 달라지게 설정하고 싶을 경우 vw, vh 사용.

• border-box 계산법 사용하기. 패딩, 보더 등을 다 더한 사이즈를 전체 사이즈로 인식한다.

* {
  box-sizing: border-box;
}

---

　

📝

품고 있는 요소들을 설명하는 시맨틱 태그라는 게 존재하는 것 자체가 프로그래밍이 어떤 걸 중요시하는지 알려주는 듯하다. 코드는 단순히 컴퓨터가 이해할 수 있는 언어로 작성하는 것으로 끝이 아니라, 사람과 사람 사이를 오가기도 하기에 사람과 컴퓨터 모두가 쉽게 이해할 수 있도록 하는 복합적인 목적을 잘 수행해야 한다. 프로그래밍에 대해 완전히 무지했을 때 나는 프로그래밍을 한 사람이 써 내려간 독립된 작업물로 인식했다. 그러니까 소설이나 그림 같은? 배우면 배울수록 소통이 중요한 분야 같아서 신기하다.