자주 쓰이는 태그
1. 문장을 나누는 태그
1) <p> 태그 (paragraph) : 문단을 지정하는 기능
2) <br> 태그 (line break) : 줄을 바꾸는 기능
#코드
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset='UTF-8'>
<title>zzuzzu의 웹사이트</title>
</head>
<body>
<p>강아지 정보 1.사람을 잘 따른다. 2.산책을 좋아한다. 3.너무 귀엽다.</p>
<p>고양이 정보 1.자기 맘대로 한다. 2.사람에게 순종적이지 않다. 3.매우 귀엽다</p>
</body>
</html>#출력결과
<p> 라는 태그를 쓰니 두 줄 사이에 공백을 두고 문단이 구분된다.
#코드
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset='UTF-8'>
<title>zzuzzu의 웹사이트</title>
</head>
<body>
<p>강아지 정보<br>1.사람을 잘 따른다. 2.산책을 좋아한다. 3.너무 귀엽다.</p>
<p>고양이 정보<br> 1.자기 맘대로 한다. 2.사람에게 순종적이지 않다. 3.매우 귀엽다</p>
</body>
</html>#출력결과
2. 범위를 나누는 태그
1) <div>태그 (division) : 영역을 나누는 기능 (한 페이지 내에서 영역을 지정해줌)
2) <span)태그 : 범위를 지정하는 기능 (영역을 나누거나 줄 바꿈을 하지 않고 일정 범위를 지정)
#코드
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset='UTF-8'>
<title>zzuzzu의 웹사이트</title>
</head>
<body>
<div>강아지</div>
<div>강아지</div>
<span>고양이</span>
<span>고양이</span>
</body>
</html>#출력결과
두 태그의 큰 차이점은 줄바꿈이다.
div는 자동으로 줄바꿈이 되고, span은 줄바꿈이 되지 않는다.
#코드
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset='UTF-8'>
<title>zzuzzu의 웹사이트</title>
<style>
div{
background-color: lightblue;
}
span{
background-color: lightgreen;
}
</style>
</head>
<body>
<div>강아지</div>
<div>강아지</div>
<span>고양이</span>
<span>고양이</span>
</body>
</html>#출력결과
div에는 하늘색, span에는 연두색 배경을 추가했다.
div는 브라우저 전체에 박스를 생성하고, span은 텍스트만큼 생성한다.
그 이유는 'display'라는 속성의 차이 때문이다.
div는 디자인 속성이 내장되어있고, span은 아무런 속성이 없다는 것이다.
3. 이미지와 링크를 삽입하는 태그
1) <img>태그 : 이미지를 삽입하는 기능
2) <a> 태그 : 링크를 삽입하는 기능 (텍스트와 이미지 가능)
이미지를 삽입하기 위해서는 <img src='이미지 주소'> 형식으로 코드를 작성하면 됩니다.
html과 이미지를 같은 폴더에 넣어 준 뒤.
#코드
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset='UTF-8'>
<title>zzuzzu의 웹사이트</title>
<style>
div{
background-color: lightblue;
}
span{
background-color: lightgreen;
}
</style>
</head>
<body>
<img src = 'cat.png'>
</body>
</html>
#출력결과
우리집 냥이가 보이는 것을 볼 수 있다.
그리고 a라는 태그를 통해 링크를 첨부 할수도 있다.
<a href = '링크' target ='_blank'>~~~~~~>/a> 형식으로 작성된다,
- herf : 연결하고자 하는 링크
- ~~~ : 링크가 생성될 부분
target = '_blank'를 추가하면 링크를 클릭했을 때 새 창으로 열 수 있다.
- target : 연결하는 창의 종류
- _blank : 웹 브라우저의 새 창으로 연결되는 소스
#코드
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset='UTF-8'>
<title>zzuzzu의 웹사이트</title>
</head>
<body>
<img src = 'cat.png'>
<a href="https://www.youtube.com/watch?v=aODawkjU2js" target ="_blank">고양이 유튜브</a>
</body>
</html>#출력결과
★ 정리하기 ★
✔ 문장을 나누는 태그
- <p>
- <br>
✔ 범위를 나누는 태그
- <div>
- <span>
✔ 이미지와 링크를 삽입하는 태그
- <img>
- <a>
'Web 개발 > [HTML,CSS]' 카테고리의 다른 글
| [HTML/CSS] 6. 단위와 위치 (0) | 2022.07.03 |
|---|---|
| [HTML/CSS] 5. 클래스 , 패딩과 마진 (0) | 2022.07.01 |
| [HTML/CSS] 4. css (0) | 2022.07.01 |
| [HTML/CSS] 2. HTML의 기본 구조 (0) | 2022.06.30 |
| [HTML/CSS] 1. HTML과 CSS (0) | 2022.06.27 |
