본문 바로가기
Front/HTML

HTML5 태그1

by 자바꿈나무00 2023. 1. 3.

2023/01/03
<sourcetree기본설정>
뉴탭- 클론- 깃에서 code- 클론 HTTPS카피- 소스트리-뉴탭-클론-탐색- 카피한 것 붙여넣기
-창에서 빈 곳 아무거나 클릭-로그인창 클릭-새창 뜨면 로그인 클릭
(오류 빈창이 뜨는 건 연결 기본 브라우저 설정이 다를 경우)

<vscode설치>
vscode설치 기본 그대로
설정- 파일- enc-utf8
글꼴 Hack
Mouse wheel zoom체크
tab size4

<extensions 권장 설치항목>
korean -install-restart
dracula them(테마는 개인취향이라 비필수)
HTML Snippets
Auto Rename Tag
Quick HTML Previewer
indent-rainbow
Prettier - Code formatter


vsc-.git이 아닌 frontend 열기-좌측 창에서 새폴더 '01_HTML'(F2로 이름변경)


[Web]
1. Internet(Internetwork) : 네트워크를 통해 연결된 상태로 정보 공유하는 목적, 프로토콜을 이용해 통신함.
2. Web(World Wide Web) : 인터넷 위에서 동작하는 서비스.
+역사 지식 : 웹 표준 관리하는 표준단체인W3C(World Wide Web) Consortium) 존재.

2.2 웹 처리 과정
- 서버와 클라이언트의 역할을 나누고 마크업 언어를 통해 자료 공유.
- HTTP(Hyper Text Transfer Protocol) 또는 HTPS(Hyper Transfer Protocol Secure)를 사용한다.


[HTML5 (Hyper Text Markup Language 5)]
-마크업 언어는 태그를 사용해 문서의 구조 정의
- 파일 확장자는 html, htm중에 설정해야함
- 주석 : '<!-- -->'
- HTML 문서 내에서 공백은 몇 개를 입력하든 한 개만 인식
- 한 개 이상의 공백 추가하려면 '&nbsp;'사용(multitag)

태그
- 하나만 쓰는 경우도 있지만 대부분 <>, </>
- 대/소 구분 없지만 관례상 소문자 권장
==========================================
[제목 태그(body tag)]
- Heading의 줄임 '<h1></h1>' (1~6)

==========================================

[실습]
우클릭-새파일'01_HelloWorld.html'
-(창으로 여는 3가지 방법)
우클릭-파일탐색기에서 표시 (1) ,
직접 화면에서 우클릭 open browser(2),
preview(3)

*브라우저에서 F12 개발자 도구(C+ Shift + i)

https://html.spec.whatwg.org/multipage/named-characters.html
multitag 주소 참고

<!--HTML5 문서 형식 선언-->
<!DOCTYPE html> <!-- 문서 유형 -->
<!--html 문서의 시작과 끝을 표시하는 태그-->
<html lang = "ko">
    <!--html 문서의 각종 정보와 제목, 문서 자체에 대한 설명 및 스크립트, 
    스타일 시트의 링크 또는 선언을 포함하는 태그
    -->
    <head>
        <!--인코딩 방식 설정-->>
        <meta charset = "UTF-8" >

        <!--익스플로러에서 현재 문서를 최신 모드로 해석하게함-->>
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <!--접속한 기기의 화면에 맞춰 확대/축소하게 설정-->     
        <meta name="viewport" content="width=device, initial-scale=1.0">
       
        <!--검색어로 사용될 키워드 지정-->
        <meta name=" keywords" content="KH, 정보교육원">

        <!--페이지를 작성한 프로그램-->
        <meta name="generator"content="VSCode">

        <!--페이지에 대한 설명-->
        <meta name="description" content="이 페이지는 HTML 구조와 관련된 태그들을 공부하는 페이지입니다.">
        
        <!--페이지의 제목을 나타내는 태그-->
        <title>HTML 구조</title>
    </head>
    
    <!--
        화면에 출력해서 보여주는 모든 내용을 담는 태그
    -->
        
    <body>
        <h1>Hello World!!</h1>
        &Afr;
        안녕하세요. 만나서&nbsp;&nbsp;&nbsp;       반갑습니다.
    </body>
</html>


--------
< 02_글자관련태그.html>
HTML폴더에 '02_글자관련태그.html'파일생성
-'!'만 입력해서 Emmit 사용(기본구조 생성)
shift + alt +화살표 해서 한줄 복사
' <h1>h1태그입니다.</h1>
<h2>h2태그입니다.</h2>
<h3>h3태그입니다.</h3>
<h4>h4태그입니다.</h4>
<h5>h5태그입니다.</h5>
<h6>h6태그입니다.</h6>
<h7>h7태그입니다.</h7>
<h8>h8태그입니다.</h8>'크기 확인해보기
제목을 나타내는 태그는 한 줄을 차지하고 크기 지정이 되는데, 1~6 범위 이내가 아닌
수를 입력하면 제목태그에 해당되지 않는다. 그래서 줄바꿈이나 크기지정이 되지 않는다.
------------------------------------------------

<hr> : 줄바꿈, 수평선 추가
<br> : 줄바꿈
<p> : 단락 구분 태그 Paragraph태그
<pre> : 입력한 대로 화면에 표시
<b> , <strong>: 강조(b는 그냥 굵게 표시하고 strong은 굵게 표시 + 의미있는 경우)
<u> : 밑줄
<s> : 취소선 긋기
<i> , <em> : i는 그냥 기울임, 강조하는 느낌일 때 em
<mark> : 형광펜
<q> : 인용
<sub> : 아래 첨자
<sup> : 위 첨자
<abbr> : 약어지정 

<!DOCTYPE html>
<html lang="en">
<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>
</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>
    <!-- <hr> : 줄바꿈, 수평선 추가 -->
    <hr>
    <h1>따뜻한 --<h1></h1><br>
    shallow.

<p>첫 번째 단락입니다.</p>
<p>두 번째 단락입니다.</p>

<p>
    p태그는 문단 영역을 나누는 태그지만 한 개의 공백만    표시하며 줄바꿈 입력을 <br> 별도의 태그로 지정해야&nbsp;한다.
</p>

<!--소스코드를 작성하는 태그-->
<!--입력한 대로 화면에 표시하는 태그-->
<!--pre태그는 여러 칸 띄우기 혹은 줄바꿈 등을                   포함해서 입력한 내용 그대로 표현하는 태그-->   
<pre>
    <code>
        function add(num1, num2) {
            let sum = 0;
            
            sum = num1 +  num2;
            
            return sum;
        }
    </code>
</pre>

<hr>

일반 글꼴<br>
<b>글자를 굵게 표시하는 태그b</b><br>
<strong>글자를 굵게 표시하는 태그strong</strong>

<br>

<i>글자를 기울이는 태그</i>
<br>
<em>글자를 기울이는 태그</em>

<br>

<u>돌체라떼는 3샷 밑줄</u>

<br>

<br>
<s>글자에 취소선을 넣는 태그</s>
<br>

<br>
<mark>형광펜 효과를 내는 태그</mark>

<br>

<!--인용문구를 나타내는 태그-->
<blockquote cite="http://www.naver.com"> 인용문구를 나타내는 태그</blockquote>
<q cite="http://www.naver.com">인용문구를 나타내는 태그</q>
<p>
    참고 사이트 :  <cite>http://www.naver.com</cite> 
</p> 

기본 글자에 <sub>아래첨자</sub>를 나타내는 태그와<sup>위 첨자를 </sup> 나타내는 태그
<br>

<abbr title="HyperText Markup Language5">HTML5</abbr>,
<abbr title="Cascading Style Sheets 3">CSS3</abbr>

<br>

<strong><h3>글자 관련 태그 응용</h3></strong>
<p>
<br>
    태그들은 해당 태그 내에서 중첩 가능하다. 
    <b>굵은 글자</b>를 사용할 수도 있고 <strong><i>기울이거나</i></strong>,
    <s>취소선</s>을 넣는 등 다양하게 사용할 수 있다.
    <br>
    <mark>형광펜</mark>을 넣어 글자를 강조할 수 있다.
</p>>


<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>




</body>
</html>


------------------------------------------------------------------------------------------------------------
[03_목록관련태그. html]
1. 순서 없는 목록 태그 <ul>(각 항목 앞에 원이나 사각형의 불릿이 붙는다.)
ul(Unordered List)
li(List Item)
<ul>
<li>내용1</li>
<li>내용2</li>(종료 /li태그 생략 가능,
다음 시작li태그 만날 때 까지를 하나의 탭으로 봄)
</ul>

2. 순서 있는 목록 태그(Ordered List)
- start 속성 : 항목의 시작 번호 변경가능(기본값1)
- reversed 속성 : 역순으로 항목 표시 <ol reversed>
li*4 하면
<li></li>
<li></li>
<li></li>
<li></li>
3. 설명 목록 태그(Description Title)
- <dl>

<!DOCTYPE html>
<html lang="ko">
<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>목록 관련 태그</title>
</head>
<body>
    <h1>목록 관련 태그</h1>

    <h2>1. 순서 없는 목록 태그</h2>
    <h3>화면 구현 수업 내용</h3>
    <ul>
        <li>HTML5</li>
            <ul>
                <li>글자 관련 태그</li>
                <li>글자 관련 태그</li>
            </ul>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>

    <h2>2. 순서 있는 목록 태그</h2>
    <h3>화면 구현 수업 내용</h3>
    <ol type="I" start="5" reversed>
        <li>HTML5</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Query</li>
    </ol>

    <h2>3. 설명 목록 태그</h2>
    <h3>화면 구현 수업 내용</h3>
    <dl>
        <dt>HTML5</dt>
        <dd>웹에서 정보를 표현할 목적으로 만든 마크업 언어</dd>
        <dd>마크업 언어란 태그를 사용해 문서의 구조를 정의하는 언어</dd>
        <dt>CSS3</dt>
        <dd>미리 약속된 속성을 사용해서 레이아웃과 스타일 정의</dd>
    </dl>
</body>
</html>





실습

<!DOCTYPE html>
<html lang="en">
<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>자바(Java) 학습내용</title>
</head>
<body>
    <h1>자바(Java) 학습내용</h1>
    <b><h3>담당강사 : 문인수</h3></b>

    <p><h4>이메일 : ismoon@iei.or.kr</h4></p>

    <hr>

    <ul>
            <li>프로그래밍 언어</li>
        <ul>
            <li><s>java</s></li>
        </ul>

        <li>데이터베이스</li>
        <ul>
            <li><s>Oracle</s></li>
        </ul>
        <li>화면구현</li>
        <ol>
            <li>
                <mark>HTML5</mark>
            </li>
            <li>CSS3</li>
            <li>JavaScript</li>
            <li>jQuery</li>
        </ol>
        <s><li>서버 개발 기술</li></s> 
        <!--ol[type="i"]>(li>s)+li*3-->
        <ol type="i">
            <li><s>JDBC</s></li>
            <li>Servelet</li>
            <li>JSP</li>
            <li>AJAX</li>
        </ol>
        <li>프레임워크</li>
        <ol>
            <li>MyBatis</li>
            <li><strong>Spring</strong></li>
        </ol>     
    </ul>



</body>
</html>


------------------------------------------------------------------------
[04_표관련태그.html]
표 태그(Table)
<table>
<tr>Table Row
<th> Table Header
<td> Rable Data
*border : 표의 테두리 두께 ex) <table border="1">
*폭, 너비<th width="120px" height="50px">브라우저명</th>

----------------------------------------------------------------
[표 속성] border속성
- colspan : 가로로 셀 병합
- rowspan : 세로로 셀 병합
<style>
/*
셀렉터 {
속성명 : 속성값;
속성명 : 속성값;
...
}
*/
</style>
----------------------------------------------------------------
[표 제목 태그]
<figure>
<figurecaption>
테이블의 설명이나 이미지의 설명에 사용
----------------------------------------------------------------
[표 구조 태그]
<thead> : 제목 영역 / 표에 하나만 가능
<tbody> : 본문 영역 / 여러 개 가능
<tfoot> : 요약 영역 / 표에 하나만 가능

<!DOCTYPE html>
<html lang="en">
<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>표 관련 태그</title>
    <style>
        /*
        셀렉터 {
            속성명 : 속성값; 
            속성명 : 속성값; 
            ...
        }
        */
        /* td {
            width: 80px;
            height: 80px;
        } */
        thead {
            background-color: palevioletred;
        }
        tbody {
            background-color: powderblue;
    
        }
        tfoot {
            background-color: darksalmon;
            color:brown;
            text-decoration: underline;
        }

/*
        tbody {
            font-size: 2em;
        }
*/
    </style>
</head>
<body>
    <h1>표 관련 태그</h1>
    <h2>기본적인 표 만들기</h2>

    <!--border : 표의 테두리 두께-->
    <figure>
        <table border="1">
            <tr>
                <!--wigth, height 속성을 이용해 가로,세로, 길이 지정이 가능-->
                <th width="120px" height="50px">브라우저명</th>
                <th width="80px">제조사</th>
                <th width="300px">홈페이지</th>
            </tr>
            <tr>
                <td>익스플로러</td>
                <td width="80px">MS</td>
                <td>https://www.microsoft.com</td>
            </tr>
            <tr>
                <td>크롬</td>
                <td>googole</td>
                <td>https://www.google.com</td>
            </tr>
            <tr>
                <td>사파리</td>
                <td>애플</td>
                <td>https://www.apple.com</td>
            </tr>
    
        </table>
        <figurecaption>&nbsp;&nbsp;이 표는 웹 브라우저에 대한 내용을 정리한 표이다.</figurecaption>
        <figurecaption>&nbsp;figure를 이용해서 테이블의 설명이나 이미지의 설명에 주로 사용한다.</figurecaption>
    </figure>

    <h2>표의 행,열 병합</h2>
    <h3>회원 정보</h3>
    <!--table[border="1"]>(tr*4>td*4)*4--> 
    <table border="1">
        <caption>
            <mark><b><i>웹 브라우저의 종류</i></b></mark>
        </caption>
        <tr>
            <td colspan="2" rowspan="2" width="120px" height="120px">사진</td>
            <td width="80px">이름</td>
            <td width="250px"></td>
        </tr>
        <tr>
            <!--
            <td></td>
            <td></td>
            -->
            <td>연락처</td>
            <td></td>
        </tr>
        <tr>
            <td width="60px" height="50px">주소</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td>w
            -->
        </tr>
        <tr>
            <td height="100px">자기소개</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td>
            -->
        </tr>
    </table>

    <h2>표 구조 태그</h2>
    <table border="1">
        <thead> 
            <tr>
                <th>이름</th>
                <th>나이</th>
                <th>주소</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>이슬</td>
            <td>13</td>
            <td>경기도 용인시</td>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>39</td>
            <td>서울</td>
        </tr>
        <tr>
            <td>모니</td>
            <td>11</td>
            <td>용인</td>
        </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">총 인원</td>
                <td>3명</td>
             <tr>
        </tfoot>
    </table>
</body>
</html>

'Front > HTML' 카테고리의 다른 글

HTML개요  (0) 2023.01.19
하리보 전시 입구 사진 HTML, 구현  (0) 2023.01.11
HTML5 type & tags  (0) 2023.01.05
HTML5 태그2  (0) 2023.01.04

관련글

티스토리툴바