[HTML] <h1>, <p>, <br>, <img> 태그 + 특수 문자 사용
글 제목 : <h1> ~ <h6>
글 제목을 위해 <h1>, <h2>, ..., <h6> 태그가 존재한다.
<h1>h1태그</h1>
<h2>h2태그</h2>
<h3>h3태그</h3>
<h4>h4태그</h4>
<h5>h5태그</h5>
<h6>h6태그</h6>
이 태그에 style 속성을 사용하여 CSS를 정의할 수 있다.
<h1 style="font-size: 50px"> h1태그 </h1>
<h2 style="color: red"> h2태그 </h2>
단락 : <p>
<p>안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요
안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요
안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요</p>
<p>반갑습니다반갑습니다반갑습니다반갑습니다반갑습니다반갑습니다
반갑습니다반갑습니다반갑습니다반갑습니다반갑습니다반갑습니다
반갑습니다반갑습니다반갑습니다반갑습니다반갑습니다반갑습니다</p>
각 단락 다음 줄에는 빈 줄이 들어간다.
줄 바꿈 : <br>
아래처럼 엔터로 줄바꿈을 하더라도 실제 페이지에서는 적용이 안된다.
<p> 1. 안녕하세요
2. 반가워요
3. 잘있어요
4. 다시 만나요 </p>
<br> 태그를 이용해서 줄 바꿈을 적용한다.
<p> 1. 안녕하세요<br>
2. 반가워요<br>
3. 잘있어요<br>
4. 다시 만나요 </p>
HTML 특수 문자
줄바꿈 <br>이 아닌 문자열로 <br>을 표시하고 싶으면 어떻게 해야 할까?
html에서 공백, <, >, ", ' 등등 이것들은 특수 문자로 따로 처리해야 한다.
| 기호 | HTML 표기 |
| 공백 | |
| < | < |
| > | > |
| & | & |
| " | " |
| ' | ' |
| © | © |
<p> <br> </p>
이미지 : <img>
<img src="tree.jpg" title="트리" width="200">
<img src="tree.jpg" title="트리2" width="200" height="400">
title 속성 : 이미지 제목을 설정하는 속성으로 마우스를 올렸을 때 나타나는 메세지이다.
src 속성 : 현재 html 파일과 같은 폴더에 있기에 이미지 파일의 이름만 써도 된다.
width 속성 : 이미지의 너비를 설정한다.
height 속성 : 이미지의 높이를 설정한다.
*width와 height 속성을 하나만 설정했다면 높이, 너비가 입력한 하나의 속성과 동일하게 자동 계산된다.
이미지 파일 포멧
| 이미지 포맷 | 확장자 |
| JPG | .jpg |
| PNG | .png |
| GIF | .gif |
| SVG | .svg |
URL 주소와 경로
URL 주소는 인터넷상에 존재하는 자원 HTML, 이미지, 오디오, 동영상 파일 등의 위치를 의미함.
상대 경로
현재 html 문서 파일의 위치를 기준으로 상대적인 위치에 있는 파일을 찾아가는 방식이다.
test.html과 tree.jpg는 같은 위치에 있고
tes.html의 위치에 있는 img 폴더 안 tree.jpg이미지가 있다고 하자.
상대경로로 이미지 파일을 출력해 보자.
<img src="tree.jpg" width="200">
<img src="./img/tree.jpg" width="200">
src에서 .은 현재 폴더를 뜻한다.
만약 ../ 와 같이 주소를 적었다면 그건 이전폴더를 의미한다. 즉, html의 이전 폴더를 뜻하는 것이다.
src="./img/tree.jpg"에서 현재 폴더를 의미하는 ./를 생략하여 src="img/tree.jpg" 또한 같은 의미로 사용 가능하다.
절대 경로
http://로 시작하는 도메인 네임으로 인터넷상의 유일무이하고 절대적인 URL 주소를 뜻한다.
구글 이미지 주소를 복사하여 src 속성에 사용해 보자.
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
구글 이미지는 구글 서버의 images 폴더에 있다.
이것은 해당 이미지 파일이 존재하는 인터넷상의 위치, 절대 주소이다.