웹기본 HTML/CSS - 주요 태그

김형준 Kim Hyeong Jun·2021년 11월 15일
0
post-thumbnail

📢 자주 쓰이는 태그

📌 문장을 나누는 태그

두 태그모두 문장을 나눈다는 속성을 갖고 있지만 '문단'과 '줄'에 차이가 있다.

<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파일이 움직이는걸 못보여줬다... ㅎ

profile
I want be a developer🙂

0개의 댓글