HTML 공부(1)

HTML이란

- HyperText Markup Language

- 마크업(markup)언어 / 프로그래밍 언어가 아님

- 웹 페이지를 구성하는 뼈대를 만드는 언어

- 구조 표현

   -> 잘 짜놓으면 자바스크립트로 개발을 할 때 더 직관적인 코드 작성 가능

- 웹 페이지의 틀을 만드는 것!

 

---

opening tag, closing tag, self-closing tag 

opening tag
<태그>

<div>, <p>, <span>, <ul>​

시작하는(여는) 태그
꺽쇠괄호, 태그명, 꺽쇠괄호

 

closing tag
</태그>

</div>, </p>, <span>, <ul>​

닫는 태그
꺽쇠괄호, 슬래시(/), 태그명, 꺽쇠괄호

 

self-closing tag
<태그 />

<img />, <input />, <br/>​

XHTML에서 사용하던 문법
꺽쇠괄호, 태그명, 슬래시, 꺽쇠괄호
HTML5에서 슬래시 앞의 공백은 선택사항

 

---

태그(Tag)

1. div (division)

<div>
- 블록(block)요소 / 한 줄 전부 차지
</div>

이건 div 태그

 

 

2. span

<span>
- 인라인(inline)요소 / 컨텐츠 크기만큼 차지
</span>

이건 span 태그

 

 

3. ul, ol (Unoredered list, Ordered list)

<ul>
- 블록요소
- li 랑 같이 알아두기
</ul>

이건 ul 요소

 

4. li (List Item)

<ul>
    <li>블록요소</li>
    <li>이렇게 ul이랑 같이 사용</li>
</ul>

• 1
• 2

 

5. img (Image)

<img src="./" alt="이미지" />
- 인라인 요소
- src로 소스 가져오기, alt로 이미지 설정

 

 

6. a (link)

<a href="www.링크.com">
- 인라인 요소
- href에 링크
</a>

어디로 갈까요

 

 

7. input ( text, password, radio, checkbox, reset)

<input type="text"/> 텍스트 입력

 

<input type="password"/> 패스워드 입력

 

<input type="radio"/> 여러개 중 하나만 선택 (같은 name이나 <label>로 묶은 것들 중에서)

귀엽다 예쁘다 사랑스럽다

 

<input type="checkbox"/> 여러개 선택 가능

귀엽다 예쁘다 사랑스럽다

 

<input type="reset"/> 초기화

사용자명 :

 

 

8. textarea

<textarea> 여러 줄로 쓸 수 있음 </textarea>

 

 

9. button

<button> 우리가 아는 바로 그 버튼 </button>