- sublime 단축키 이용 tip
- ! + tab : 기본적인 html 구성 틀 나타내줌
- div + tab : div를 markup 언어로 바꾸어 줌
- lorem + tab : 더미컨텐츠 채울 수 있다
- style + tab : style시트 생성해준다.
- div.spacer + tab : 자동으로 <div class="spacer"></div> 만들어줌
- ctr+/ : 자동주석처리
+생각나는대로 추가중!
- html의 기초 용어 정리
-markup : 컨텐츠를 묶어주는 괄호의 역할
- html의 구성
-head : 문서의 설정 정보, 문서의 제목 작성
-body : 클라이언트에게 출력할 정보를 작성
(=html 요소는 두 개의 자식 요소(element)인 head와 body를 갖고 있다)
-속성(attribute)
값의 속성을 나타내주는 코드
ex) lang="en", charset="UTF-8"
attribute name : lang
attribute value : en
element name : html
@ 속성과 속성이름, 속성 값으로 분류해보기
<a href = "daum.net">go</a>
<a href = "naver.com" class="test" id = "one">go naver</a>
<img src = "images/1.jpg"/>
- markup이 하나로 이루어진 경우
자식요소를 갖을 수 없을 경우 열자마자 닫는다. (예시 참조)
- html / css / javascript 주석 달기
- 블럭 요소 <div>, <p> 이용하기
- div, p 등은 width를 하나씩 추가할 때마다 위에서 아래로 생성된다.
- 블럭이 쌓이듯 생성되어서 블럭 요소라고 한다.
**출력 결과**
- Inline요소 <span> 이용하기
-부분적인 스타일을 입힐 때 유용하게 사용할 수 있다.
-블럭 요소와의 차이점 : 가로로 쌓인다.
**출력결과**
**출력결과**
style시트 이용하기 2
border : 외곽선을 만들 수 있다.
width : div의 넓이를 지정할 수 있다.
height : div의 높이를 지정할 수 있다.
**출력 결과**
'WEB기초 > HTML' 카테고리의 다른 글
| [HTML] HTML5 이용하기 02 - 정규식 이용하기 (170417) (0) | 2017.04.17 |
|---|---|
| [HTML] HTML5 이용하기 01 (170413) (0) | 2017.04.13 |
| [HTML] html입문 03 (170313) (0) | 2017.03.13 |
| [HTML] a링크 이용과 table 개념 알아보기 (0) | 2017.03.10 |
| [HTML] html입문 02 (170310) (0) | 2017.03.10 |
댓글