고정 헤더 영역
상세 컨텐츠
본문
HTML(HyperText Markup Language)
웹사이트의 구조를 담당하며, 문서에 제목, 표 , 이미지, 동영상등을 정의하고 의미를 부여하는 언어.
- 파일을 수정하고 싶다면, 텍스트 편집기를 이용하자
- 결과(웹페이지)를 확인하고 싶다면, 웹브라우저로 열기(Chrome, 엣지,...등등)
- 텍스트 편집기 : 기본 메모장, Brackets, VSCode,,,등등
* HTML은 문서를 작성할 수 있는 곳이면 어디든지 작성이 가능.
* 확장명은 .html
* HTML은 대소문자를 구별하지 않습니다. 단, 소문자로 작성하는 것을 권장.
* HTML은 띄어쓰기, 줄바꿈을 구별하지 않아 따로 태그를 넣어줘야함.
* 태그 *
HTML은 태드 형태로 괄호(<명령어>)를 사용하여 표현합니다.
<명령어> : 시작 태그
</명령어> : 종료 태그
<html> : 시작 태그
</html> : 종료 태그
*단일 태그*
<태그명 /> 또는 <태그명>
단일 태그는 콘텐츠를 감쌀 필요가 없으므로 시작과 끝을 구분하지 않음.
HTML의 특수 문자
(개행) : <br>
< : <
> : >
(띄어쓰기) :
속성
- 태그의 부가적인 기능을 정의하는것 / 선택사항
- 시작 태그의 내부에 정의 / 갯수에 특별한 제한이 없음.
- <태그명 속성명="속성값"> 내용이 들어감 </태그명>
- <태그명 속성명="속성값" /> ← 단일태그
- 태그명과 속성 정의는 공백(space)로 구분하며, 큰따옴표를 사용함.
주석
- 코드에 대한 메모리를 남기기 위한 용도로 사용한다.
- 총 7개의 기호가 사용.
- <!-- 이 사이 내용을 넣고 주석처리한다 -->
문단태그 <p>
문단이란 내용상 끊어서 구분할 수 있는 부분을 의algkrh <p>태그를 이용하여 표현합니다.
파란색 부분을 컨텐츠 부분이고 실제로 값이 들어가있다.(문자가 들어갔음을 의미)
살구색 공간은 여백을 뜻한다.
<p>태그는 글과 여백이들어가는걸 볼 수 있음.
제목 태그 <h>
<h1>안녕하세요. HTML</h1>
<h2>안녕하세요. HTML</h2>
<h4>안녕하세요. HTML</h4>
<h5>안녕하세요. HTML</h5>
<h6>안녕하세요. HTML</h6>*검색엔진*
각 웹사이트의 내용을 <h>태그를 통해 키워드를 수집합니다. 따라서 HTML 문서에 포함되는 제목은 <h>태그로 작성하면 노출되는 확률을 높일 수 있다.
*서식 태그*
<em><mark>, <del>, <ins>, <sup>, <sub>, <strong>
<strong>
텍스트를 굵게 표현하고 싶을 때 사용합니다. <b>는 텍스트를 진하게 표시하는 역할만 하지만, <strong>태그는 보여주는 강조 뿐만아니라 실제로 페이지 내에 주요한 부분을 브라우저에게 알려주는 역할을 합니다.
<em>
텍스트를 이탤릭체로 표현하고 싶을때 사용.
<i>태그와 비슷하지만 단순히 텍스트를 이탤릭체로 포시하지만, <em>은 그 내용이 중요하다는 의미도 함께 포함해준다.(검색엔진)
<mark>
텍스트 중앙에 가로줄을 만들어 텍스트를 지은 것과 같은 효과를 줍니다.
<ins>
텍스트 밑에 선을 그어 텍스트의 강조 효과를 줍니다.
바로바로 실습을 해보면 좋을걱 같아 실습코드를 붙여봄!
See the Pen Untitled by 빠랍 (@wbdl27) on CodePen.
반응형
'WEB-Front end > *HTML' 카테고리의 다른 글
| [html] 이미지 <img> 태그, 경로 작성 방법 (0) | 2023.04.17 |
|---|---|
| [HTML] 자주 쓰는 html 태그 정리 (0) | 2022.07.11 |
| [HTML] HTML 구조 잡기(3) (2) | 2022.06.30 |
| [HTML 기초] HTML 구조 잡기(2) (3) | 2020.12.08 |
| [HTML 기본] HTML 구조 잡기(1) (0) | 2020.12.06 |
댓글 영역