HTML
- 마크업 언어
- 태그 등을 이용하여 문서나 데이터의 구조를 나타내는 언어. 마크업 언어는 프로그래밍이 가능한 언어는 아니다 (변수를 선언한다거나, 알고리즘을 만든다거나).
- Semantic
- 사전적인 뜻 : 의미론적인
- "A semantic element clearly describes its meaning to both the browser and the developer." - 시멘틱한 요소는 브라우저와 개발자에게 요소가 어떤 의미를 가지는지 정확하게 전달해주는 요소이다.
- 웹페이지의 틀
div vs span
<div> <!-- 한줄 전체를 차지 -->
<span> <!-- 컨텐츠 크기만큼 차지 -->자주쓰는 태그
div, span, img, a, ui, li, input, textarea, button
HTML attribute
<a href="google.com"> 링크 </a>
<!-- name = "value" -->id vs class
id | class |
|---|---|
# 으로 선택 | . 으로 선택 |
| 요소 단 한개 | 여러 요소 |
| 특정 요소에 이름을 붙이는 데 사용 | 스타일의 분류(classification)에 사용 |
Units
- 절대 단위 : px, pt 등
- 상대 단위 : %, em, rem, ch, vw, vh 등
- 기기나 브라우저 사이즈 등의 환경에서 영향을 받지 않는 절대적인 크기로 정하는 경우 (인쇄물) -
px. - 일반적인 경우 -
rem추천.rem은 root의 글자 크기에 따라 상대적으로 크기가 변경된다. 브라우저의 기본 글자 크기는 1 rem 이다.em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵다.
- 반응형 웹 (responsive web) 에서 기준점을 만들 때
- 디바이스별로 CSS를 다르게 적용한다.
- 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 -
vw,vh- 웹사이트의 보여지는 영역을 viewport 라고 한다.
<body>태그에서의%는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤했을 때 보이는 영역까지 포함했을 때의 비율이다.
Box Model
- block vs inline-block vs inline
| block | inline-block | inline | |
|---|---|---|---|
| 줄바꿈 | yes | no | no |
| 너비 | 100% | 글자가 차지하는 만큼 | 글자가 차지하는 만큼 |
| width, height 사용 가능? | 가능 | 가능 | 불가능 |
- 박스 크기 측정 기준(
box-sizing)content-box: 기본값. width 와 height 를 바꾸면 margin, border, padding 을 제외한 순수 콘텐츠의 크기가 변경된다.border-box: width 와 height 를 바꾸면 border, padding, 컨텐츠를 합친 크기가 변경된다. 계산하기 쉽기 때문에 보통 이걸로 바꾼다. (이걸 그냥 기본값으로 해주면 안되나..?)
느낀점
- 내용이 별로 없는걸 봐선 그냥 맛보기 해봐라 느낌이 강하다.
- 만약에 나중에 가서도 내용이 빈약하면 다른 강의를 이용해야 할 수도 있겠다.
- 그래도 어쩔 수 없다. 이미 강을 건너 버렸고, 배는 반대쪽으로 가 버렸다.
- 게임개발에 비하면 지금 배우는 건 너무 시시한 수준이다. 좀 지루하다.
앞으로
- 게임개발은 취미로 하기로 한 만큼 남는 시간에는 게임개발 강의를 들으면 되겠다는 생각을 했다. 실력이 생기면 인디개발에 참여할 수 있을지도...?
- 그리고 PBS CS 강의라는 재미있는게 있다.
게임과 프론트엔드에 관심이 많습니다.