[HTML/CSS] 2. 태그

귤

Mar 06, 2025

Contents

1. 빨간색 박스 만들기 2. body 자리 3. 태그

1. 빨간색 박스 만들기

1. ex01 과 ex02 폴더 생성 후 ex01 폴더 안에 hello_world.html 파일 생성
2. html 입력 후 html : 5 클릭 — 1. ex01 과 ex02 폴더 생성 후 ex01 폴더 안에 hello_world.html 파일 생성 2. html 입력 후 html : 5 클릭

입력 후 드래그하고 ctrl + K 눌러서 ai 에게 “이거 만들어줘” 입력

title 옆에 커서 가져다 대고 우클릭 Open with live Server 클릭

🌐

웹 서버 : 외부의 html 파일을 공유하는 서버

💫

127.0.0.1:5500

127.0.0.1 : internet protocol (인터넷 통신 규약) 에서 사용하는 ip address (주소)

5500 : port 번호

2. body 자리

❗

모든 통신에는 body 와 head 가 있어야 한다


<body>
        반가워
    </body>

전체 코드


<html>
    <head>
        <title>첫번째 페이지</title>
    </head>
    <body>
        반가워
    </body>
</html>

3. 태그

알면 좋은 Develop Tool !

📌

Develop Tool : 개발자 툴 (단축키 : F12)

1. <div>

📌

<div> : 줄 넘김 처리가 됨

block : 사용 가능한 최대 너비를 가진다. 높이는 내부 컨텐츠 크기 만큼 설정됨

inset 영역 : 건드릴 수 없는, 그림을 그릴 수 없는 영역


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>빈박스 : block (inset 영역포함)</div>
    <div>빈박스 : block (inset 영역포함)</div>
</body>
</html>

2. <span>

📌

<span> : 줄 넘김 처리가 되지 않음

주어진 데이터 만큼만 공간을 차지한다.

<span> 태그를 연달아 사용하면 한 라인에 이어져서 출력이 된다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>빈박스 : block (inset 영역포함)</div>
    <div>빈박스 : block (inset 영역포함)</div>
    <span>랩핑박스 : inline</span>
    <span>랩핑박스 : inline</span>
</body>
</html>

3. <h1>

📌


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>#</h1>
    <h2>##</h2>
    <h3>###</h3>
    <h4>####</h4>
    <h5>#####</h5>
    <h6>######</h6>
</body>
</html>

4. <img>

📌


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="/ch01/JJangGU.png" width="400" height="400"> 
    <img src="/ch01/JJangGU.png" width="100" height="100" >
</body>
</html>

5. <hr>

📏

<hr> : 라인


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> 
    <h1>사진 갤러리</h1>
    <hr>
    <div>
        <img src = "/ch01/JJangGu.png" width="300" height="300">
    </div>
    <div>
        <img src = "/ch01/JJangGu.png" width="300" height="300">
    </div>
</body>
</html>

6. <ul>

📏

<ul> : u는 unordered l은 list를 말한다 <li> : list Item

<ul> 태그 : 순서 없는 목록 만들기


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>div</li>
        <li>span</li>
        <li>h1</li>
        <li>img</li>
        <li>hr</li>
    </ul>
</body>
</html>

<ul>, <li>를 모두 써서 목록 만들기


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>div</li>
        <li>span</li>
        <li>h1</li>
        <li>img</li>
        <li>hr</li>
    </ul>
    <hr>
    <ul>
        <li>항목 1</li>
        <li>
            항목 2
            <ul>
                <li>하위 항목 2-1</li>
                <li>하위 항목 2-2</li>
            </ul>
        </li>
        <li>항목 3</li>
    </ul>
</body>
</html>

<ol> 태그 : 순서 목록 만들기


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>div</li>
        <li>span</li>
        <li>h1</li>
        <li>img</li>
        <li>hr</li>
    </ul>
    <hr>
    <ol>
        <li>항목 1</li>
        <li>
            항목 2
            <ul>
                <li>하위 항목 2-1</li>
                <li>하위 항목 2-2</li>
            </ul>
        </li>
        <li>항목 3</li>
    </ol>
</body>
</html>

7. <input>

📌

href : 하이퍼링크를 넣을 수 있다

<input> 태그 : 사용자로부터 입력을 받을 수 있는 입력 필드를 정의할 때 사용한다

이 태그는 type 속성 값에 따라 다양한 컨트롤 유형을 제공하며, type 속성 외에도 여러가지 속성을 통해 입력 필드의 동작을 세부적으로 조정할 수 있다.

<input> 태그는 강력하고 다양한 기능을 제공한다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>input과 a태그를 배우자</h1>
    <hr>
    <ol>
        <li>a태그 배우기</li>
        <li>input태그 배우기</li>
    </ol>
    <hr>
    <div>
        <a href="https://gyul.inblog.ai/%EC%9E%90%EB%B0%94-java-53-jdbc-45913">JDBC가 궁금하다면?</a>
    </div>
    <hr>
    <input type="text">
    <input type="date">
    <input type="email">
    <input type="password">
    <input type="checkbox">
    <input type="radio">
    <input type="tel">
</body>
</html>

📌

type 속성 : type 속성이 지정되어 있지 않을 경우 type 속성의 기본값은 text히다.

많이 쓰는 type들


type="text"
type="date"
type="email"
type="password"
type="checkbox"
type="radio"
type="tel"

8. <br>

📌

9. <p>

📌

<p> : 단락

10. &lt 과 &gt

📌


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>HTML entities</h1>
    <hr>
    &lt;hello&gt;
</body>
</html>

11. &nbsp

📌

띄어쓰기가 된다


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>HTML entities</h1>
    <hr>
    &lt;hello&gt; <br>
    hello&nbsp;&nbsp;&nbsp;world <br>
</body>
</html>

[HTML/CSS] 2. 태그

1. 빨간색 박스 만들기

2. body 자리

3. 태그

1. <div>

2. <span>

3. <h1>

4. <img>

5. <hr>

6. <ul>

7. <input>

8. <br>

9. <p>

10. &lt 과 &gt

11. &nbsp

12. &emsp

More articles

[환경 세팅] 9. PostMan 설치하기

[환경 세팅] 8. Apache Tomcat 설치하기

[HTML/CSS] 1. HTML

[환경 세팅] 7. CURSOR 설치 하기