웹 서버/웹 기초 (HTML, CSS)

HTML #2 개행처리, 단락구분, 이미지, 링크

코다람쥐 2022. 4. 21. 13:42

1. 개행처리

<br>

To force<br> line breaks<br> in a text,<br> use the br<br> element.

2. 단락구분

<p> ... </p>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

<br>과의 차이점은 단순한 개행처리이냐 단락이 구분되냐이다. 나중에 CSS에서 단락으로 구분하여 처리할 수 있기 때문에 구분이된다.

 

 

3. 이미지

<img src="이미지파일" alt="대체텍스트" width="가로크기" height="세로크기">

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

만약에 이미지를 못찾으면 alt에 입력한 대체 텍스트가 출력이 된다.

이미지 파일은 test.html과 같은 폴더안에 있어야한다.

 

4. 링크

<a href="주소">텍스트 디스플레이</a>

<a href="https://www.w3schools.com">Visit W3Schools.com!</a>

 

새로운 창에서 띄우고 싶을 때는 target="_blank"를 추가하면 된다.

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>

 

이미지를 사용하여 링크를 넣고 싶을 때는 아래와같이 하면 된다.

<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100">
</a>

그 외에 많은 방법들은 w3school.com 사이트에서 찾아보면 된다.