HTML의 기본 구성
HTML : 페이지를 만드는 언어(내용)
CSS : 페이지를 디자인하는 언어(디자인)
html 파일을 만들 때 index라는 이름을 붙이면, 폴더 안에서 홈페이지 역할을 한다.
🌟 vscode 단축키
Tab : 선택한 코드 들여쓰기
Shift + Tab : 들여쓰기 취소
<!DOCTYPE HTML> <!-- DOCTYPE이 HTML이라는 뜻 -->
<html>
<head>
...
</head>
<body>
...
</body>
</html>< >는 태그라고 한다.
< >는 시작태그
</ >는 종료태그
태그 안에 태그를 넣는 것: 자식태그, 하위태그
<head> : 페이지에 보이지 않는 페이지에 대한 정보
<body> : 페이지에 보이는 내용HTML 문법에서 꺾쇠 기호 (< 랑 >)를 태그 작성하는 데 사용한다. 그런데 페이지 내용에서 꺾쇠를 표현하고 싶을 땐 어떻게 해야 할까?
예를 들어서 html, head, body라는 단어에 꺾쇠를 추가한다고 가정해본다.
꺾쇠를 글자로 입력하고 싶을 때는 꺾쇠를 그대로 쓰는 게 아니라, <(앰퍼샌드 엘 티 세미콜론) <(앰퍼샌드 지 티 세미콜론) 이렇게 입력해야 한다. 여기서 lt;라는 건 영어로 "~보다 작다"라는 뜻인 less than의 약자고 gt;라는 건 "~보다 크다"라는 뜻인 greater than의 약자이다.
<p>
HTML 파일을 작성하려면 DOCTYPE, <html>, <head>, <body> ... 적어야 할 것이 많다.
이럴때 유용하게 쓸 수 있는 기능이 있다.
VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할 수 있다.
</p>HTML의 기본 문법
태그(Tag)
HTML 문법에서 꺾쇠 기호 (< 랑 >)를 태그 작성하는 데 사용한다.
일반적으로 시작 태그와 종료 태그로 내용을 감싸는데요, 시작 태그는 <태그 이름>형태로 쓰고 종료 태그는 </태그 이름>형태로 쓴다.
<p> 태그
<p>
단락은 이렇게 표시한다.
</p><img> 태그
<img src="http://~~~~.png"><img> 태그를 슬래시와 함께 쓰는 경우
줄바꿈(<br>)이나 이미지(<img>)처럼 안에 내용이 없는 태그는 시작 태그만 쓴다.
참고로 마지막에 슬래시(/) 기호를 넣어서 하나짜리 태그라는 걸 표시하기도 한다.
<img src="http://~~~~.png" />
<!-- 이것도 맞는 표현이다. -->속성
시작 태그에 속성 이름="속성 값"형태로 사용하는 문법이다. 태그의 속성을 정한다.
<a> 태그의 href 속성
<a href="http://~~~.kr">누르면링크연결</a> img 태그의 src 속성
<img src="https://~~~.png">태그 정리
사이트 이름
<head>
<title>브라우저탭에서보이는제목</title>
</head>인코딩 정하기
한글을 지원하는 인코딩인 UTF-8을 사용해야 여러 사이트에서 한글이 제대로 보인다.
<meta> 태그를 사용해서 <head> 태그 안에 넣어주면 된다.
제목
제목(Heading)은 제일 큰 것부터 작은 것까지 <h1>, <h2>, ... <h6> 태그를 사용할 수 있다.
사이트 이름에 쓰는 <title> 태그와 헷갈리지 않도록 주의해야한다.
<h1>제일 큰 글씨</h1>
<h2>두번째로 큰 글씨</h2>단락
단락(Paragraph)은 <p>태그로 감싸면 된다.
이때 코드에서 줄 바꿈은 화면에 나오지 않고 붙어서 보인다.
<p>
죽는 날까지 하늘을 우러러
한 점 부끄럼이 없기를,
잎새에 이는 바람에도
나는 괴로워했다.
별을 노래하는 마음으로
모든 죽어가는 것을 사랑해야지
그리고 나한테 주어진 길을
걸어가야겠다.
</p>
<p>
오늘 밤에도 별이 바람에 스치운다.
</p>줄바꿈
HTML은 기본적으로 문장들을 이어서 보여준다. 줄 바꿈(Break Line)은 <br>이라는 태그를 사용한다. 이때 줄 바꿈 태그 안에는 내용이 없으니까 시작 태그 하나만 <br>처럼 쓴다.
<p>
죽는 날까지 하늘을 우러러<br>
한 점 부끄럼이 없기를,<br>
잎새에 이는 바람에도<br>
나는 괴로워했다.<br>
별을 노래하는 마음으로<br>
모든 죽어가는 것을 사랑해야지<br>
그리고 나한테 주어진 길을<br>
걸어가야겠다.
</p>
<p>
오늘 밤에도 별이 바람에 스치운다.
</p>링크
링크는 <a> 태그를 사용합니다. href 속성으로 이동할 주소나 경로를 적어 주면 된다.
<a href="https://ko.wikipedia.org/wiki/%EC%84%9C%EC%8B%9C_(%EC%8B%9C)">
위키 문서 보기
</a>이미지
이미지(image)는 <img> 태그를 사용합니다. src 속성으로 이미지 파일의 주소나 경로를 적어 주면 된다.
인터넷에 올라와 있는 사진
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Yun_Dong-ju.jpg">같은 폴더에 있는 파일을 사용할 경우
<img src="yun-dong-ju.jpg"> images라는 폴더 안에 있는 파일을 사용할 경우
<img src="images/yun-dong-ju.jpg">영역 나누기
<div> 태그로 여러 태그를 감싸거나, <span> 태그로 텍스트 일부만 감쌀 수 있다.
<div>
<h1>서시</h1>
<h2>시인 <span>윤동주</span></h2>
</div>
<div>
<p>
죽는 날까지 하늘을 우러러<br>
한 점 부끄럼이 없기를,<br>
잎새에 이는 바람에도<br>
나는 괴로워했다.<br>
별을 노래하는 마음으로<br>
모든 죽어가는 것을 사랑해야지<br>
그리고 나한테 주어진 길을<br>
걸어가야겠다.
</p>
<p>
오늘 밤에도 별이 바람에 스치운다.
</p>
</div>