Development Study/Frontend

[HTML] 태그 정리 (<body> tag)

728x90

Ctrl+f를 통해 관련 내용으로 이동할 수 있습니다

body

img

table

span

form

+들어가기 전에

기본적으로 css 태그는 다음과 같이 정의 내려진다

태그이름 { 속성1: 속성값1; 속성2: 속성값2; }

또한 해당되는 태그 전체에 적용된다

직접 적용해보기(h# tag)

<html>

    <head>
        <style>
            h1 {
                color: #F00;
            }
            h4 {
                color: #0F0;
                font-size: 30px;
            }
        </style>
    </head>

    <body>
        
        <h1>h1태그</h1>
        
        <h4>h4태그</h4>
    </body>

</html>

h 태그를 사용해서 style tag에 직접 적용해보았다

h# tag??

html <body> tag
주로 글자의 크기를 결정하는 태그
h1부터 h6까지 있다

h# tag 전체 적용해보기

혹시 몰라서 h7, h8까지 넣어 보았다

<html>

    <head>
        <style>
            h1 {
                color: #F00;
            }
            h4 {
                color: #0F0;
                font-size: 30px;
            }
        </style>
    </head>

    <body>
        <h1>h1태그</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4태그</h4>
        <h5>h5</h5>
        <h6>h6</h6>
        <h7>h7</h7>
        <h8>h8</h8>
    </body>

</html>

style 안에 h1과 h4에 대한 css를 넣어두었기에 두 부분에 대한 결과만 css가 따로 적용된 모습이고,
그 외의 h# 태그들은 기존 규칙대로 서서히 작아지는 모습을 보이고 있다

+h7과 h8은 따로 존재하지 않기에 본문 내용으로 들어가는 모습이다
하지만 css로 적용 시 특정 글자에 대한 태그로 인식되는 듯하다
이모티콘 부분의 h7 태그를 지정하고 css를 입혀보았다

+ tags in <body> tag

<br> tag

줄 바꿈 tag
이 태그를 통해서만 줄 바꿈이 가능하다
코드 안에서 인위적으로 줄 바꿈 해둔 것은 적용되지 않는다

<html>

    <body>
        1st line<br>2nd line
        <br>
        the 
        first 
        line<br>
        the second line
    </body>

</html>

<p> tag

문단 제작 tag
하나의 문단을 만들 때 쓰이며 다음 p 태그에서는 자동으로 한 줄 공백을 만든다

<html>

    <body>
        <p>first paragraph</p>
        <p>second paragraph</p>
        <p>
            new line<br>
            third paragraph
        </p>
        not paragraph
    </body>

</html>

<b> tag

bold tag
글자를 굵게 만들어준다

<html>

    <body>
        <b>bold content</b>
        normal content
        <br>
        <b>굵은 글씨 단축키는 Ctrl+b</b>
        그냥 글씨
    </body>

</html>

<i> tag

italic tag
글자를 기울임 꼴로 만들어준다

<html>

    <body>
        <i>italic content</i>
        normal content
        <br>
        <i>기울임꼴 단축키는 Ctrl+i</i>
        똑바로 서있는 글자
    </body>

</html>

<a> tag

하이퍼링크를 걸어주는 태그
href == 클릭 시 다음 링크로 이동(단독 사용 시 targer=" _self"효과)
target == 링크를 여는 방법, href와 함께 쓰인다
- _self == 현재 페이지 (기본값)
- _blank == 새 탭 열기
- _parent == 부모 페이지로, iframe 등이 사용된 환경에서 쓰인다
- _top == 최상위 페이지로, iframe 등이 사용된 환경에서 쓰인다
- 프레임이름 == 직접 프레임이름을 명시해서 사용할 수도 있다

<html>

    <body>
        <a href="http://www.naver.com">Go Naver</a><br>
        <a href="http://google.co.kr" target="_blank">Go Google (새 탭)</a>
    </body>

</html>

<img> tag

이미지 삽입 tag
src에서 지정한 경로에 없을 경우?
- 출력되지 않는다
- x박스로 출력된다
속성
- src == 이미지의 경로
- width == 가로 길이
- height == 세로 길이

<html>

    <body>
        <p>
            이미지가 정상적으로 삽입 된 경우<br>
            <img src="images/logo.png" width="245">
        </p>
        <p>
            없는 이미지가 삽입 된 경우<br>
            <img src="no_img.png" width="100" height="50">
        </p>
    </body>

</html>

<table> tag

table tag
표를 만들어주는 태그이다
적당한 사용방법으로 보기는 어려운 태그이기에
<table> 태그보다는 <div> 태그 + CSS를 권장한다
속성
- <tr> == 표의 행을 나타내는 태그
- <td> == 표의 열을 나타내는 태그, <tr> 하위 태그이다

<table>
    <tr>
        <td>1,1</td>
        <td>1,2</td>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
    </tr>
    <tr>
        <td>3,1</td>
        <td>3,2</td>
    </tr>
</table>

<thead>, <tbody>,<th>
table 하위 tag
제목과 본문을 나누려고 한다면 이 태그를 쓰면 된다
<thead>
- 표의 제목 영역
- <table> 하위, <tr> 상위 태그이다
<tbody>
- 표의 본문 영역
- <thead>와 동등한 태그이다
<th>
- 제목 셀 영역
- 제목 부분에 <td> 대신 사용
- bold 적용, 가운데정렬 되어있는 글씨 양식을 가진다

<table>
    <thead>
        <tr>
            <th>학교</th>
            <th>창립순서</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>서울대학교</td>
            <td>3</td>
        </tr>
        <tr>
            <td>고려대학교</td>
            <td>2</td>
        </tr>
        <tr>
            <td>연세대학교</td>
            <td>1</td>
        </tr>
    </tbody>
</table>

<div> tag

레이아웃을 나누는 데에 주로 쓰이는 tag
특별한 기능은 없다
가상의 구역(레이아웃)을 설계하는 데에 쓰이는 태그
보통은 CSS와 연동해서 사용한다

<html>

    <body>
        <div style="background-color:cyan">1번 구역</div>
        <div style="width:150px; height:100px; background-color:#CF0">2번 구역</div>
    </body>

</html>

<span> tag

inline 속성의 tag
특별한 기능은 없다
block속성인 <div> 태그와는 다르게 넓이, 줄 바꿈이 자동 적용되지 않는다
보통은 CSS와 연동해서 사용한다

<html>

    <body>
        <span style="background-color:red">1번 span</span>
        <span style="background-color:blue">2번 span</span>
        <br>
        <span style="background-color:green">3번 span</span>
    </body>

</html>

<li> tag

list tag
단독으로 쓰이지 않는다
<ul>, <ol> 태그 안에 들어가며 쓰인다
이중 리스트를 만들으려면 <ul>,<ol>태그 하위에 다시 태그를 쓰면 된다
<ul>
- 순서없이 나열되는 (unordered list) 목록
<ol>
- 번호순으로 나열되는 (ordered list) 목록

<html>

<body>
    <ol>
        <li>번호목록 1번</li>
        <li>번호목록 2번</li>
    </ol>

    <ul>
        <li>비순서형 목록 1번</li>
        <li>비순서형 목록 2번</li>
        <li>비순서형 목록 3번</li>
        <ol>
            <li>비순서형 목록 하위 번호목록 1번</li>
            <li>비순서형 목록 하위 번호목록 2번</li>
        </ol>
    </ul>
</body>

</html>

<form> tag

입력 양식 tag
백엔드에서 주로 많이 다루어지는 태그
다양한 방법으로 입력된 정보가 백엔드 서버에 양식이 전달되고 처리된다
속성
- name == 폼 이름
- action == 데이터가 전송되는 백엔드 url
- method == 전송 방식(GET/POST)
- ...
활용되는 태그(type=" ")
- text == 일반 문자
- password == 비밀번호
- button == 버튼
- submit == 양식 제출용 버튼
- reset == 양식 초기화용 버튼
- radio == 한개만 선택할 수 있는 컴포넌트
- checkbox == 다수를 선택할 수 있는 컴포넌트
- file == 파일 업로드
- hidden == 사용자에게 보이지 않는 숨은 요소

<form>
    <p>
        <strong>아이디</strong>
        <input type="text" name="name" value="아이디 입력">
    </p>
    <p>
        <strong>비밀번호</strong>
        <input type="password" name="password" value="비밀번호 입력">
    </p>
    <p>
        <strong>성별</strong>
        <input type="radio" name="gender" value="M">남자
        <input type="radio" name="gender" value="F">여자
    </p>
    <p>
        <strong>응시분야</strong>
        <input type="checkbox" name="part" value="eng">영어
        <input type="checkbox" name="part" value="math">수학
    </p>
    <p>
        <input type="submit" value="제출">
    </p>
</form>