HTML + CSS 주요 개념 정리 (1) - HTML 구성 요소

• 웹프로그래밍 언어를 공부할 때 사용한 텍스트 편지기는 서브라임 텍스트를 사용.
• HTML은 index파일과 css파일을 합으로 사이트를 구성됨.

* 위 그림의 형태로 웹페이지가 구성됨.

---

# 1. HTML의 주요태그 

• <a> 태그 : anchor의 약자로 정박지 또는 닻을 뜻한다. <a>태그의 콘텐츠를 클릭하여 특정 영역이나 특정 페이지로 이동한다. 보통 메뉴 버튼을 만들 때 사용.

<a>태그 예시_1

<a>태그 실행 결과

•   <img>태그 : image의 약자로 정보성 이미지를 삽입할 때 사용

<img>태그 예시_1

<img> 태그 실행 결과

• <h1>~<h2>태그 : <h1>, ... , <h6> 태그는 신문 기사로 치면 헤드라인에 해당. 일반적으로 웹 사이틔 제목이나 부제목처럼 중요하다고 생각되는 정보에 사용.
• <p>태그 : paragraph의 약자로 단락을 표현할 때 사용. 신문 기사로 치면 본문 영역에 해당
• <span> 태그 :  문단 안에 있는 특정 단어나 문장에 디자인을 지정할 때 사용.
• <mark> 태그 : 국어사전처럼 단어나 개념을 설명하는 문장이나 인용된 문장에서 특정 텍스트를 강조할 때 사용.
• <ol>, <ul>, <li> 태그 : ordered list(ol) 태그는 순서가 있는 목록의 약자로 숫자나 알파벳 등 순서가 있는 목록을 만들 때 사용합니다. <ul>태그는 unordered list(순서가 없는 목록)의 약자로 순서가 없는 목록을 만들 때 사용한다.
• <br> 태그 : line break를 뜻하며 강제로 줄 바꿈을 할 때 사용합니다. 줄 바꿈을 할 위치에 <br> 태그를 입력하면 바로 다음 항목부터 줄이 바뀝니다.
• <input>태그 : 텍스트 정보, 패스워드, 날짜, 연락처 등 사용자에게 입력받을 때 사용 한다.

---

# 2. HTML 주석

 

HTML 문서에서는 주석 <!--와 --> 사이에 입력하여 사용되고, 주석안에 주석은 허용되지 않습니다.

 

---

# 3. 테스트 편집기

1. 서브라임 텍스트 :  https://www.sublimetext.com/
2. 브리켓 : http://brackets.io/
3. 웹스톰 : https//www.jetbrains.com/webstorm/

---

<후기>
index를 구성할 때 작성해야하는 기본적인 태그들을 알아보았다.