HTML 개발자 수업 50일차

728x90

1. body

[ 정의 ]

- 출력 내용을 담고 있는 최상위 태그

- 혼합형, 쌍 태그

- 자식: 태그 or PCDATA

[ 속성 ]

- bgcolor: 배경색

- background: 배경 이미지

[ 제목 태그, <hn> ]

- heading, 문서의 제목을 생성하는 태그

- n: 1 ~ 6 (중요도의 차이)

- 제목이 눈에 보이는 크기가 중요한게 아니라, 제목이 가지는 중요도가 중요하다.

- 쌍 태그 <hn></hn>

- 권장사항: h1부터 사용한다. 중간부터 사용 금지!!

문서의 가독성 저하
검색 엔진의 수집 대상 -> h1부터 탐색

<!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>
    <h2>제목입니다.</h2>
    <h3>제목입니다.</h3>
    <h4>제목입니다.</h4>
    <h5>제목입니다.</h5>
    <h6>제목입니다.</h6>
</body>
</html>

[ 수평선 태그, <hr> ]

- Horizontal Rule, 수평바, 컨텐츠 구분자

- 문단과 문단을 구분하는 역할

- 단독 태그, 블럭 태그(자동 개행)

<!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>
    <hr>
</body>
</html>

[ 문단 태그, <p> ]

- paragraph

- 문단을 표현할 때 사용

- 쌍 태그, 블럭 태그(자동 개행)

- 개행 태그 <br> 을 이용해서 문단 태그 <p>와 100% 일치하게 할 수 있지만, 사용하지 않는다. (금지)

모든 태그는 용도에 맞는 태그를 사용해야 한다. (시맨틱 웹, Semantic Web)

<!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>
    <p>내용입니다.</p>
    <p>내용입니다.</p>
    <p>내용입니다.</p>
</body>
</html>

[ 강조 태그 ]

- 화면에 특징있게 보여지거나 의미를 지정할 때 사용한다.

- 물리적 모양을 강조하는 태그

볼드체: <b>
이탤릭체: <i>
밑줄: <u>
밑/윗 첨자: <sub>

<!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>
    <b>볼드체입니다.</b>
    <br>
    <i>이탤릭체입니다.</i>
    <br>
    <u>밑줄을 긋습니다.</u>
    <br>
    H<sub>2</sub>0
    <br>
    MC<sub>2</sub>
    <br>
</body>
</html>

[ 순서 태그 ]

- <ol> + <li>

순서가 있는 목록
<ol> : Ordered List
<li> : List Item

- <ul> + <li>

순서가 없는 목록
<ul> : Unordered List

- <dl> + <dt> + <dd>

용어 정의 목록
<dl> : Definition List
<dt> : Definition Term
<dd> : Definition Description

<!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>

    <!-- 1. <ol> + <li> 순서가 있는 태그 -->
    <h1>오늘의 할일</h1>
    <ol type = "A">      <!-- ol 태그에 속성 type에는 5가지 종류가 있다 -->
       <li>강아지 목욕시키기</li>
       <li>장보기</li>
       <li>자바 복습하기</li>
       <li>
           개발 환경 설정하기
           <ol type="a">
               <li>JDK 설치하기</li>
               <li>
                   이클립스 설치하기
                   <ul>
                       <li>설치 파일 다운로드</li>
                       <li>압축 해제</li>
                       <li>실행</li>
                   </ul>
               </li>
               <li>오라클 설치하기</li>
           </ol>
       </li>
       <li>운동하기</li>
    </ol>
    
    <!-- 2. <ul> + <li> 순서가 없는 태그 -->
    <h1>오늘의 할일</h1>
    <ul type = "circle">     <!-- ul 태그 속성에는 3가지 타입(disc, circle, square) 이 있다. -->
       <li>강아지 목욕시키기</li>
       <li>장보기</li>
       <li>자바 복습하기</li>
       <li>개발 환경 설정하기</li>
       <li>운동하기</li>
    </ul>

     <!-- 3. <dl> + <dt> + <dd> -->
    <h1>수업</h1>
    <dl>
       <dt>Java</dt>
       <dd>이것은 자바다</dd>

        <dt>Oracle</dt>
        <dd>이것은 오라클</dd>

        <dt>HTML</dt>
        <dd>이것은 HTML</dd>
    </dl>

</body>
</html>

[ 링크 태그 1, <a> ]

- <a>, anchor

- 쌍 태그, 인라인 태그

- href 속성

reference a hyperlink
이동할 URL
웹상에 존재하는 모든 종류의 파일은 링크 대상이 될 수 있다.

- target 속성

_blank: 새로운 창에서 링크를 연다. (외부 링크로 많이 사용됨)
_self: 기본값, 현재 창에서 링크를 연다. (내부 링크로 많이 사용됨)
_parent
_top
프레임명

<!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>
    <!-- <a> href 속성 -->
    <a href = "https://naver.com">네이버(외부 링크)</a><br>
    <a href = "ex10_list.html">10번 예제 페이지(내부 링크)</a><br>
    <a href = "ex10_list.html">이미지</a><br>
    <a href = "필기.txt">텍스트 파일</a><br>
    <a href = "수업.zip">압축 파일</a><br>
    
    <!-- <a> href, target 속성 --> 
    <a href = "https://naver.com" targer = "_blank">새창이 열립니다.</a><br>
    <a href = "#!">빈 링크(아직 행동이 정의되지 않은 링크)</a><br>
</body>
</html>

[ 링크 태그 2, <a> ]

- Link + Anchor

- Anchor: 특정 위치로 스크롤이 알아서 이동(화면 전환) 한다.

- #앵커명

<!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><a name = "top">목차</a></h1>          <!-- 목차의 앵커는 "top"이다. -->

    <ol>
        <li><a href = "#item1">Java</a></li>
        <li><a href = "#item2">Oracle</a></li>
        <li><a href = "#item3">HTML</a></li>
        <li><a href = "#item4">CSS</a></li>
    </ol>

    <h2><a name = "item1">Java</a></h2>
    <p>이것은 자바다~~~~~~~~~~~~~~~~~~~~~~</p>
    <p><a href = "#top">맨 위로 올라가기</a></p>

    <h2><a name = "item2">Oracle</a></h2>
    <p>이것은 오라클이다~~~~~~~~~~~~~~~~~~~~~~</p>
    <p><a href = "#top">맨 위로 올라가기</a></p>
    
    <h2><a name = "item3">HTML</a></h2>
    <p>이것은 HTML이다~~~~~~~~~~~~~~~~~~~~~~</p>
    <p><a href = "#top">맨 위로 올라가기</a></p>
    
    <h2><a name = "item4">CSS</a></h2>
    <p>이것은 CSS이다~~~~~~~~~~~~~~~~~~~~~~</p>
    <p><a href = "#top">맨 위로 올라가기</a></p>
   
    
</body>
</html>

[ 인라인 태그 & 블럭 태그 ]

- 모든 태그는 인라인 태그 또는 블럭 태그에 속한다.

- 인라인 태그, Inline Tag

자신의 내용물을 인접한 다른 태그의 내용물과 같은 라인에 출력한다.
역할: 출력되는 구성 요소 역할, 내용물 역할

- 블럭 태그, Block Tag

자신의 내용물을 인접한 다른 태그의 내용물과 다른 라인에 출력한다.
자신의 내용물을 하나의 라인을 독점해서 출력한다.
너비 100%
역할: 출력되는 구조 역할, 레이아웃 역할

- 태그 중첩 규칙 (하나의 태그안에 또 다른 태그를 적는 경우)

블럭 태그는 자식으로 또 다른 인라인 태그를 가질 수 있다.
블럭 태그는 자식으로 또 다른 블럭 태그를 가질 수 있다.
인라인 태그는 자식으로 또 다른 인라인 태그를 가질 수 있다.
인라인 태그는 자식으로 또 다른 블럭 태그를 가질 수 없다. (부모의 성질에 위배 되기 때문이다.)

[ 목적이 없는 태그, <div>, <span> ]

- <div>, division

블럭 태그
HTML 모든 태그를 통틀어 가장 많이 사용하는 태그(압도적 1위)
목적이 없는 태그, 용도가 정해져 있지 않은 태그 > 용도를 개발자가 정할 수 있다.

- <span>, span

인라인 태그
목적이 없는 태그, 용도가 정해져 있지 않은 태그 > 용도를 개발자가 정할 수 있다.

[ 경로 표기법 ]

1. 상대 경로

현재 페이지가 있는 폴더를 기준으로 다른 자원의 경로를 표현하는 방법
누가 기준점이 되느냐에 따라 자원의 경로 표현이 달라진다.
항상 내가 기준이 된다. (나: 현재 페이지가 있는 폴더)
'./' 생략 할 수 있다. ('.': 현재 페이지가 들어있는 폴더, '..': 부모 폴더)

2. 절대 경로

어떤 폴더내의 파일에서 표현하던지 항상 기준점이 바뀌지 않는 표현
모든 파일들이 단 1곳을 기준점으로 정해놓고 표현한다.
항상 '/'로 시작한다.
'/': 최상위 루트 폴더를 뜻한다.

3. 로컬 경로

D:\class\java\test.java
웹 에서 사용 안함(금지!!!)
구형 브라우저들을 지원했으나 최근 브라우저 지원 X

4. 외부 경로

다른 사이트의 자원 경로
프로토콜 부터 시작
가끔씩 필요할 때 사용(장점: 비용 절감, 단점: 안정성 미확보)

<!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 background = "images/catty01.png>  1. 상대경로
<body background = "/images/catty01.png> 2. 절대경로
-->
<body background = "http://image.yes24.com/goods/101985361/XL"> <!-- 4. 외부경로 -->
</body>
</html>

MEMO >

# HTML에는 올바르지 않은 문법(에러)이여도, 실행이 되며 에러메세지도 따로 없다.(주의하고 또 주의할 것!)

# Legacy 레거시 태그 같은 경우 전부 서식으로 되어있으며, CSS를 조만간 배우면 레거시 태그는 거의 안쓰이기 때문에 공부를 깊게 할 필요는 없다.

# 인터넷 주소 입력시 "google.com" (X) ---> "https://www.google.com" (O),

--> 반드시 프로토콜(http://, https://)로 시작해야 한다.

# 디렉토리(Path) 구조 같은 경우 트리구조를 생각 해보자!!

728x90

저작자표시

'교육 > HTML' 카테고리의 다른 글

HTML 개발자 수업 52일차(2) - frame, html5 (0)	2021.06.10
HTML 개발자 수업 52일차(1) - form (1)	2021.06.10
HTML 개발자 수업 51일차 - image, table (0)	2021.06.09
HTML 개발자 수업 49일차 - Visual Studio Code(VSC) 설치, HTML (0)	2021.06.07

sleep

HTML 개발자 수업 50일차 - body

1. body

1. body

'교육 > HTML' 카테고리의 다른 글

댓글

티스토리툴바

HTML 개발자 수업 50일차 - body

1. body

1. body

'교육 > HTML' 카테고리의 다른 글

관련글

댓글

티스토리툴바