기본 문법
태그(Tag)
- HTML에서 꺾쇠(
<,>)를 사용하는 문법 - 일반적으로 시작 태그와 종료 태그로 내용을 감쌈
- 시작 태그:
<태그 이름> - 종료 태그:
</태그 이름>
<!-- <p> 태그 -->
<p>
단락
</p><!-- <img> 태그 -->
<img src="이미지의 주소 혹은 디렉토리">속성
- 시작 태그에
속성 이름="속성 값"형태로 사용하는 문법 - 태그의 속성을 결정
<!-- <a> 태그의 href 속성 -->
<a href="https://naver.com">네이버</a><!-- <img> 태그의 src 속성 -->
<img src="이미지의 주소 혹은 디렉토리">HTML 파일의 기본 구조
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html><!DOCTYPE html>: 문서 타입(Document Type)이 html- 크게
<html>태그로 감싸고<head>와<body>태그로 나뉨 <head>: 페이지에 대한 정보<body>: 페이지에 대한 내용- VSCode에서
!를 입력하고Enter를 누르면 HTML 코드가 자동으로 생성됨
태그 정리
사이트 이름
<head>
<title>네이버</title>
...
</head>- 웹 브라우저 탭에 보이는 제목을 설정
- 페이지 내용이 아니라, 페이지에 대한 정보이므로
<head>태그에 넣음
인코딩 설정
<head>
<meta charset="utf-8">
...
</head>- UTF-8(한글 지원)을 사용하도록 지정
<meta>태그를<head>태그 안에 넣기
제목(Heading)
<h1>title</h1>
<h2>subtitle</h2>- 제일 큰 것부터 작은 것까지
<h1>,<h1>, ... ,<h6>태그를 사용 <title>태그와 다르므로 유의
단락(Paragraph)
<p>
Hello
World
</p>
<p>
Hi
</p>- 단락은
<p>태그로 감싸기 - 코드에서의 줄 바꿈은 화면에 반영되지 않고 붙어서 보임
줄 바꿈(Break Line)
<p>
Hello<br>
World
</p>- 줄 바꿈이 필요할 때 사용
- 시작 태그
<br>하나만 사용
링크
<a href="https://naver.com">
네이버
</a>- 링크는
<a>태그를 사용 href속성으로 이동할 주소나 디렉토리를 기록
이미지
<img>태그를 사용src속성으로 이미지 파일의 주소 혹은 디렉토리를 기록
<img src="이미지의 주소 혹은 디렉토리">영역 나누기
<div>태그로 여러 태그를 감쌈<span>태그로 텍스트 일부만 감쌈- 영역을 구분하는 이유는 CSS에서 스타일을 적용하기 위함
<div>
<h1>서시</h1>
<h2>시인 <span>윤동주</span></h2>
</div>
<div>
<p>
죽는 날까지 하늘을 우러러<br>
한 점 부끄럼이 없기를,<br>
...
걸어가야겠다.
</p>
<p>
오늘 밤에도 별이 바람에 스치운다.
</p>
</div>꺾쇠 기호를 넣는 법
- HTML에서는 꺾쇠를 태그로 인식
- 꺾쇠를 글자로 입력하려면
<(less than),>(greater than) 사용
<html>, <head>, <body>
김찬호 화이팅