본문 바로가기
PROGRAMMING/HTML CSS

[HTML/CSS] HTML 태그

by 안녕나는현서 2021. 8. 6.
728x90

- HTML 기본구조 / 글자 태그(최근에는 스타일시트를 사용하므로 자주 사용하지 않음)

<!DOCTYPE html><!--이 문서가 html5 문서임을 브라우저에 선언-->
<html><!--여기서부터 html문서의 시작임을 브라우저에게 알림-->

<head><!--문서의 헤드(상단, 고정된 메뉴)-->

    <!--title : 탭제목으로 표시할 타이틀 태그-->
    <title>Title</title>

</head>

<body><!--문서의 바디(하단, 변화하는 내용, 웹페이지에 보여질 내용)-->

    <!--h : 제목태그, 1~6, 숫자가 클수록 글씨 크기는 작아짐, 일반적으로 1~3 주로 사용-->
    <!--시작태그 부분이 속성블록 '속성이름=속성값'으로 정의-->
    <h1>h1 기초</h1>
    HELLO HTML5
    <hr/> <!--가로로 그어지는 줄-->

    <h2>h2 본문</h2>
    <p>문단을 시작(지정)할 때 <br/> p태그를 사용하고 <br/> 줄바꿈을 할 때 br태그를 사용한다.</p>
    
    <h3>h3 문단</h3>
    <p><b>문단1 만들기</b></p>          <!--b : 두껍게 bold // strong 태그도 같은 효과-->
    <p><i>문단2 만들기</i></p>          <!--i : 기울게-->
    <p><small>문단3 만들기</small></p>  <!--small : 작게-->
    <p>문단<sub>4</sub>만들기</p>       <!--sub : 아래 첨자-->
    <p>문단<sup>5</sup>만들기</p>       <!--sup : 위 첨자-->
    <p><ins>문단6 만들기</ins></p>      <!--ins : 밑줄 // u태그도 같은 효과-->
    <p><del>문단7 만들기</del></p>      <!--del : 가운데 줄-->
    <p><mark>문단8 만들기</mark></p>    <!--mark : 하이라이트 효과-->
    <hr/>
</body>
</html>

 

 

- 앵커 태그(a) : href속성을 사용하여 이동하고자 하는 웹 페이지를 지정 (하이퍼링크 태그)

<!--- a : 하이퍼 링크를 만들어주는 태그-->
<!---href : hyper reference // target="_blank : 비어있는 새 탭에서 링크 열기-->
<a href="https://google.com" target="_blank">구글</a>
<br />
<a href="https://naver.com" target="_blank">네이버</a>
<br />
<a href="https://daum.net" target="_blank">다음</a>

 

 

- 목록태그(ol, ul)

<!--ol : ordered list (순서가 있음)-->
<h1>ol tag</h1>
<ol> 웹 브라우저 종류 <!--목록의 제목-->
    <!--li : 목록의 요소-->
    <li>구글</li>
    <li>다음</li>
    <li>네이버</li>
    <ul>
        <li>중첩해서도 사용 가능</li>
    </ul>
</ol>
<br/>

<!--ul : unordered list (순서가 없음)-->
<h1>ul tag</h1>
<!--type : 글머리 기호 모양 // disc(채워진 원-디폴트값) circle(비어있는 원) square(채워진 사각형) none(없음)-->
<ul type='circle'>
    <li>구글</li>
    <li>다음</li>
    <li>네이버</li>
</ul>

 

 

- 테이블 태그(tr, th, td)

<h1>내가 학습한 프로그래밍 언어</h1>
<!---table : 테이블 구조의 태그 생성 // border="1" : 1픽셀의 외곽선-->
<table border="1">
    <!---tr : table row-->
    <tr>
        <!---th : table header-->
        <th>html/css</th>
        <!---td : table data-->
        <td>python</td>
    </tr>
    <tr>
        <th>데이터수집(크롤링)</th>
        <td>머신러닝</td>
    </tr>
    <tr>
        <th>중급</th>
        <td>중급</td>
    </tr>
</table>

<table border="1">
    <tr>
        <!--colspan="3" : 3개의 행을 하나로 병합-->
        <th colspan="3">colspan 3</th>
        <!--rowspan="3" : 3개의 열을 하나로 병합-->
        <th rowspan="3"><img src="https://static.hubzum.zumst.com/2017/08/14/15/ac62daddb2694bb89b98078724b0005c.jpg" width="300" alt="태극기"/></th>
    </tr>
    <tr>
        <td>td</td>
        <td rowspan="2">rowspan 2</td>
        <td>td</td>
    </tr>
    <tr>
        <td>td</td>
        <td>td</td>
    </tr>
</table>

 

 

- 이미지태그(img)

<!--src : source 이미지 주소 삽입-->
<!--alt : 이미지가 없을 경우 출력되는 텍스트-->
<!--width : 이미지 너비 // heith : 이미지 높이 // 원본 비율 깨짐 방지 위해 보통 하나만 설정-->
<img src="https://storage.googleapis.com/planet4-korea-stateless/2018/04/5d7e8f3d-gp0strov6_medium_res.jpg" alt="펭귄" width="300"/>

 

 

- 입력 태그(input)

<!--form : 사용자가 입력하거나 선택한 정보를 서버로 전송하기 위해서 쓰는 태그-->
<!--action : 입력 데이터 전달 위치 // method : 입력 데이터 전달 방식-->
<form action='파일명 or 경로' method='POST'>
    <h1>입력 양식의 type 속성</h1>
    <input type="button" onclick="alert('클릭했습니다.')" value="push!"><br/>
    <input type="text" name="ID"><br/>
    <input type="password" name="PASSWORD"><br/>
    <input type="radio" name="radio"><br/>          <!--단일선택-->
    <input type="checkbox" name="checkbox"><br/>    <!--다중선택-->
    <input type="file" name="file"><br/>
    <input type="hidden" name="hidden"><br/>        <!--보이지 않음-->
    <input type="image" name="image"><br/> 
    <input type="reset" name="reset"><br/>          <!--초기화-->
    <input type="color" name="color"><br/>          <!--색상선택양식-->
    <input type="date" name="date"><br/>            <!--날짜선택-->
    <input type="datetime" name="datetime"><br/>    
    <input type="datetime-local" name="local"><br/>
    <input type="email" name="email"><br/> 
    <input type="month" name="month"><br/>
    <input type="number" name="number"><br/> 
    <input type="range" name="range"><br/> 
    <input type="search" name="search"><br/> 
    <input type="tel" name="tel"><br/> 
    <input type="time" name="time"><br/> 
    <input type="url" name="url"><br/> 
    <input type="week" name="week"><br/> 
    <input type="submit" value="LOGIN"><br/>       <!--폼 전송버튼-->
</form>

 

 

- 공간 분할 태그(div, span)

<h1>div태그</h1>
<!--div : 블록형식으로 공간을 분할, 차곡차곡 쌓아올려지는 형식
            앞뒤 줄 바꿈 가능, 너비/높이 설정 가능-->
<div>div태그의 영역1</div>
<div style="background-color: darksalmon;">div태그의 영역2</div>
<div>div태그의 영역3</div>
<div style="background-color: darkseagreen;">div태그의 영역4</div>
<br/>
<h1>span 태그</h1>
<!--span : inline 형식으로 공간을 분할, 한 줄안에 차례차례 위치하는 형식
            줄바꿈 불가능, 주변 텍스트에 연결되어 표시, 너비/높이 설정 불가-->
<span>span태그의 영역1</span>
<span>span태그의 영역2</span>
<span>span태그의 영역3</span>
<span>span태그의 영역4</span>
<br/>

 

 

- 시맨틱 태그

<h1>HTML5 시맨틱 구조 태그</h1>
    <!--시맨틱(semantic) : 의미론적인-->
    <!--눈으로 레이아웃을 구분하여 쉽게 웹페이지의 형태를 구분하는 사람에 비해,
        컴퓨터는 특정 태그가 어떤 기능을 하는지 분별 어려워서 효율적인 데이터 추출 불가능
        따라서 특정 태그에 의미를 부여해서 웹페이지를 만들게 됨-->
        <!--header : 헤더를 의미, 제목-->
        <header>
            <h1>HTML5 Header</h1>
        </header>
        <!--nav(navigation) : 네비게이션을 의미, 문서의 어느 위치든 배치 가능-->
        <nav>
            <h2>navigation1</h2>
            <h2>navigation2</h2>
            <h2>navigation3</h2>
        </nav>
        <!--aside : 사이드에 위치하는 공간을 의미-->
        <aside>login</aside>
        <!--section : 여러 중심 내용을 감싸는 공간을 의미, 여러 article 포함 가능, 웹 상에서 배포 불가-->
        <section>
            <!--article : 글자가 많이 들어가는 부분을 의미, 웹 상의 실제 내용, 웹 상에서 배포 및 재사용 가능-->
            <article>
                <h3>내용1</h3>
                <p>내용1 내용 내용 내용 내용 내용 <br/>
                    내용 내용 내용 내용 내용 내용
                </p>
            </article>
            <article>
                <h3>내용2</h3>
                <p>내용2 내용 내용 내용 내용 내용 <br/>
                    내용 내용 내용 내용 내용 내용
                </p>
            </article>
        </section>
        <!--footer : 푸터를 의미, 바닥글-->
        <footer><address>광주광역시</address></footer>
728x90
저작자표시 비영리 변경금지

'PROGRAMMING > HTML CSS' 카테고리의 다른 글

[HTML/CSS] CSS 선택자  (0) 2021.08.06

관련글

댓글

티스토리툴바