📢 자주 쓰이는 태그
📌 문장을 나누는 태그
두 태그모두 문장을 나눈다는 속성을 갖고 있지만 '문단'과 '줄'에 차이가 있다.
↪<p> 태그(Paragraph) : 문단을 지정하는 기능
↪<br> 태그(Line Break) : 줄을 바꾸는 기능
📌 범위를 나누는 태그
↪<div>태그 (Division) : 영역을 나누는 기능(한 페이지 내에서 영역을 지정해줌)
↪<span>태그 : 범위를 지정하는 기능(영역을 나누거나 줄바꿈을 하지 않고 일정 범위를 지정)
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: aqua;
}
span{
background-color: blue;
}
</style>
</head>
<body>
<div>펭수</div>
<div>펭수</div>
<span>뽀로로</span>
<span>뽀로로</span>
</body>
</html>- 두 태그의 가장 큰 차이점은? 줄바꿈!!
div는 자동으로 줄바꿈이 되고, span은 줄바꿈이 되지 않는다.(Block과 inline-Block) - div는 브라우저 전체에 박스를 생성하고, span은 텍스트만큼 생성한다.
- div는 디자인 속성이 내장되어 있고, span은 아무런 속성이 없다.
📌 이미지와 링크를 삽입하는 태그
↪<img>태그 : 이미지를 삽입하는 기능
↪<a> 태그 : 링크를 삽입하는 기능(텍스트와 이미지 모두 가능)
이미지를 삽입하기 위해서는 <img src="이미지 주소">형식으로 코드를 작성하면 된다.
링크를 첨부하기 위해서는 <a href="링크" target="_blank">~~~</a>형식으로 코드를 작성하면 된다.
href: 연결하고자하는 링크~~~: 링크가 생성될 부분target="_blank"를 추가하면 링크를 클릭했을 때 새 창으로 열 수 있다.
taget: 연결하려는 창의 종류
_blank: 웹 브라우저의 새 창으로 연결되는 소스
⭐정리⭐
✔ 문장을 나누는 태그 <p>, <br>
✔ 범위를 나누는 태그 <div>, <span>
✔ 이미지와 링크를 삽입하는 태그 <img>, <a>
⭐MISSION⭐
HTML코드
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: aqua;
}
</style>
</head>
<body>
<div>
<h1>Youtube 전스트</h1>
</div>
<a href="https://www.youtube.com/channel/UCD8r5Jgns2V64-NcUmXclpg" target="_blank"><img src="../img/1634819315.gif"></a>
<br>
<span style="background-color: paleturquoise;">CLICK IMAGE↗</span>
<p>롤토체스를 가장 재밌게하는 유튜버 전스트!!</p>
<p>예능덱 고수 전스트</p>
</body>
</html>미션에만 맞춰서 6가지 코드를 다쓰려고 생각하다보니 코드를 유의미하게 쓰지못해 아쉬웠다!
기본 캡쳐도구 사용하느라 gif파일이 움직이는걸 못보여줬다... ㅎ
I want be a developer🙂