2023.03.13 월 (HTML 실습)

📖 Coding Study/웹 디자인

2023.03.13 월 (HTML 실습)

공부못함 2023. 3. 13. 23:08

HTML이란?

- 하이퍼 텍스트를 만들기 위한 마크업 언어이다.

- HTML을 이용하여 웹 페이지 작성이 가능하다.

- 계층구조(트리구조, 내포구조)를 갖고있다.

<!doctype html>
<html>
    <head>
        <title>웹 페이지의 제목 </title>
        <meta charset='utf-8'> 한글
    </head>
    
    <body>
        <h1> 문서 전체에 대한 제목 </h1>
            <p>본문.</p>
        <img src="zxcv.PNG" alt="이미지 없다." width="400" height="400">
        <img src="qweer.PNG" alt="이미지 없다." width="400" height="400">
        <hr>
        <h2><em>&lt; 소제목 &gt;</em></h2>
            <p> 본문 </p>

            <p> 본문 </p>
            <img src="asdf.PNG" alt="이미지 없다." width="400" height="400">
            <img src="gfdg.PNG" alt="이미지 없다." width="400" height="400">
            <img src="afs.PNG" alt="이미지 없다." width="400" height="400">
            <hr>
        <h2><strong>&lt; 소제목 &gt;</strong></h2>
            <p> 본문 </p>
        
            
    </body>
</html>

<!doctype html> = 이 문서가 html로 작성된 문서라는 것을 브라우저에게 알려주는 역할

<html> ... </html> = 트리구조에서 최상위에 위치

<head> ... </head> = title, style, meta 등을 포함

- title : 웹 페이지의 제목을 표현하는 요소

- style : CSS 구문

- meta : 브라우저에게 웹 페이지를 처리할 때 필요한 부가적인 정보들을 알려줌 (charseet)

- 한글 인코딩의 종류는 두 가지이다 (UTF-8, EUC-KR). 웹 페이지를 제작할 때 세팅해둔 인코딩 방식과 브라우저의 인코 딩 방식이 다르면 글자가 깨져보인다.

<body> ... </body> = 실제 브라우저 상에 나타나는 웹 페이지의 내용을 담고 있음. (문서의 몸체)

- h1, p, img등이 있다.

요소의 구분

1. 내용이 있나 없나 (Element vs Empty Element)

2. 계층 구조상으로 엘리먼트를 내포할 수 있나 없나 (단말 노드 엘리먼트 vs 비 단말 노드 엘리먼트)

3. 브라우저에 표시될 때, 영역을 확보하나 안 하나 (블록 엘리먼트 vs 인라인 엘리먼트)

HTML의 태그들

1. Heading

- h1부터 h6까지 있다.

h1 은 문서 전체를 아우를 수 있는 대표 제목

h2는 h1안에 들어갈 소제목

h3는 h2안에 들어갈 소제목

2. Paragraph (p)

- <strong>, <b>, <i>, <em> 등

3. Entity (=코드집, 코드체계, 제어문자)

- 꺽쇠 기호를 출력하고 싶을 때, &lt (<), &gt (>)으로 표현

4. img

- <img src="images/sun.jpg"> 라고 하면, images 폴더 안에서 sun.jpg파일을 찾음

- 이미지 파일들은 한 폴더로 관리하는 것이 좋다.

- 이미지의 가로, 세로 크기를 조절할 수 있다.

LIST

'📖 Coding Study > 웹 디자인' 카테고리의 다른 글

2023.04.03 월 (HTML position) (0)	2023.04.03
2023.03.29 수 (CSS 실습) (0)	2023.03.29
2023.03.27 월 (CSS) (0)	2023.03.27
2023.03.22 수 (HTML 멀티미디어 자료 태그) (0)	2023.03.22
2023.03.15 수 (img태그, 하이퍼 링크 태그, 목록 태그) (0)	2023.03.16

현재글2023.03.13 월 (HTML 실습)

📘공부 기록장

인문학과 돈을 좋아하는 태생 문과 컴공 부적응자의 블로그

10-05 21:50

Today :
Yesterday :

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

📘공부 기록장