*visual studio code설치
+ 파일열기
+ 파일생성 > 파일명 "a.html"
+ !+Enter: html 기본값 자동생성
※ 단축키
- Tab: 들여쓰기
- Shift+Tab: 들여쓰기 취소
- Alt+Shift+방향키: 복제
- Ctrl+Enter: 다음 줄 생성
ㄴ 커서가 어디에 있든 다음 줄을 생성한다.
- Ctrl+Shift+L: 동일 구역 한 번에 선택
※ HTML
- Hyper Text Markup Language
- 코드를 해석해 브라우저 내에 보여주는 것.a
※ 렌더링
- 코드를 웹브라우저를 통해 해석, 표현되는 과정
- VScode, Brackets ...
※
<body>
실제 구현되는 부분
</body>
※ 태그
- 정보를 정의하는 형태
ㄴ <태그명>내용(엘리먼트)</태그명>
※ 단일태그
- 엘리먼트를 감쌀 필요가 없다.
- 끝을 구분하지 않음
ㄴ <태그명> 또는 <태그명/>
※ 각각의 태그는 속성이 존재
- 속성: 태그들의 부가적 기능 정의
- 정의해주는 개수는 제한 없음
ㄴ <태그명 속성명="속성값">
※ 태그
- !DOCTYPE html: 문서 첫부분 문서유형을 지정하는 단일태그
- html: 실제문서
- head: 웹브라우저가 알아야 할 정보
- meta: 데이터에 관한 구조화된 데이터 (전체 데이터를 설명해주는 것). 문자세트, 페이지 설명 키워드.
- body: 실질적으로 사용. body 태그 속 내용이 실제 구현되는 정보.
- p: 문단(Paragraph). 박스를 감싼다???
- h: 제목(Headline)
- hr: 수평선
-  : 띄어쓰기 (no breaking space)
- br 줄바꿈
- div: 속성이 block인 컨테이너 태그
※ 태그 구분 ★★★
- block: 자기가 있는 모든 너비를 차지
- inline: 자기가 필요한 공간만 차지
※ 컨테이너 태그
- 콘텐츠 레이아웃에 영향없이 묶어서 관리해주는 역할
- <div></div>
- div: 속성이 block인 컨테이너 태그
※ 전역 속성
- 모든 html 태그 공통으로 사용할 수 있는 속성
- 대표적으로 많이 사용하는 속성: id, class, style...
※ id: #이름
- 고유한 이름
- 두 개의 태그가 동일한 id를 갖지 않도록 주의.
※ class: .이름
- 유형별 분류할 때 사용
- 다중, 중복 사용 가능
※ style
- 요소에 적용할 css 선언
___
- 무엇을 넣든지 공백과 Enter는 1칸을 차지
- vscode body 내에서 Enter를 해도 브라우저 상에서 줄바꿈이 되지 않는다.
- 줄바꿈 코드는 <br>
___
___
___
___
??? Strong태그는 inline
??? 13-17번. 다음과 마지막은 문단에 속해있는가
___
>> "contents"라는 class를 가진 div 3개를 만들어라. 각각의 내용은 콘텐츠 1~3
※ CSS
- Cascading Style Sheets
- 계단식으로 스타일을 정의하는 시트
※ Style 시트에서
- class를 선택할 때
ㄴ .class명 {}
- id를 선택할 때
ㄴ #id명 {}
- 태그를 선택할 때
ㄴ 태그명 {}
- 전체를 선택할 때 (전체선택자)
ㄴ * {}
___
- "ct"로 그룹핑하여 값이 동일한 border값을 한 번에 설정