[🌱목차🌱]
01. HTML 이란?
02. HTML 의 구조(Structure)
03. HTML의 기본문법, 중첩(Nested)

[🌱목차🌱]

HTML 이란?
HTML의 구조(Structure)
HTML의 기본문법, 중첩(Nested)
HTML의 기본문법, 주석(Comments)
인라인 태그와 블록 태그

+후기

01. HTML 이란?

:Hypertext Markup Language

웹 페이지를 구성하는 가장 기초적인 언어 입니다.

프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.

단어를 하나하나 살펴보자면 'Hypertext' 는 웹페이지에서 다른 페이지로 이동할 수 있도록 하는 링크를 말합니다.

'Markup'은 문서나 데이터의 구조를 명기하다 라는 뜻입니다. 마크업이 있냐 없냐의 차이를 보기 위해서 아래를 보시면

표시 (Markup)가 없을때


    
      
        
        
        
      
      
    
SeSAC 웹 풀스택 과정 . 월수금 13:00 ~ 19:00

표시 (Markup)가 있을때


    
      
        
        
        
      
      
    
- 과정명 : SeSAC 웹 풀스택 과정
- 교육시간 : 월수금 13:00 ~ 19:00

02. HTML 의 구조(Structure)


    
      
        
        
        
      
      
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

VS Code 에서 [! + tab버튼] 누르면 자동으로 완성되는 문장들입니다. 먼저 HTML5 문서는 반드시 <!DOCTYPE html>으로 시작하여 문서 형식을 HTML5로 지정합니다. 실제적인 HTML문서는 2번째 행부터 시작 되며 <html></html>사이에 작성됩니다. <head>와 </head>사이에는 HTML 문서 정보를 정의하는 코드가 포함되게 됩니다. (제목, 저장방식, 브라우저의 크기 등등) 웹 브라우저에 출력되는 모든 요소는 <body>와 </body>사이에 위치합니다.

HTML의 <head>는 페이지를 열 때 웹 브라우저인 화면에 표시되지 않습니다. head는 title 같은 페이지나, CSS의 링크, 파비콘(favicon), 그리고 다른 메타데이터(데이터에 대한 정보를 제공하는 데이터)를 포함합니다. 즉, HTML 문서의 title,style,link,script,meta에 대한 데이터로 화면에 표시되지 않습니다. title은 HTML 문서의 제목, style

은 HTML문서의 Style 정보 정의 ,link는 외부 리소스와의 연결 정보를 정의 , script는 JavaScript를 정의 meta는 페이지설명, 키워드, 저자, 화면 크기 등의 정보. 주로 브라우저 또른 검색 엔진에서 사용 됩니다.

HTML의 <body>태그는 HTML문서의 실제 콘텐츠를 정의하는데 사용되는 태그로 다양한 택를 사용하여 웹 페이지의 구조를 설계할 수 있습니다.

03. HTML의 기본문법, 중첩(Nested)

태그의 중첩은 태그 안에 또 다른 태그를 사용하는 것입니다. 태그는 중첩을 통해 부모 태그와 자식 태그의 관계가 만들어집니다. 태그 안에 다른 태그를 선언할 수 있지만, 태그를 중첩해서 사용할 때 중첩되는 태그는 부모 태그를 벗어 나서는 안됩니다.

[잘못된 태그 중첩]


    
      
        
        
        
      
      
    
<h1>Hello,<i>HTML</h1><i>

위 문장에서 부모 태그는< h1> , 자식 태그는 <i> 임을 알 수 있습니다. <i> 보다 부모인 <h1>의 종료 태그가 먼저 선언 되었습니다.

(부모랑 자식이 살고있는데 부모님이 독립을 해서 본가를 나가는 이상한 상황입니다...)

[올바른 태그 중첩]


    
      
        
        
        
      
      
    
<h1>Hello,<i>HTML</i></h1>

자식태그인 <i>의 종료 태그를 먼저 선언해준뒤 부모태그인 <h1>의 종료태그를 선언해야 합니다.


    
      
        
        
        
      
      
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello , World !</h1>
    <p>안녕하시렵니까. HTML5!!</p>
</body>
</html>

• <html></html>은 웹페이지를 구성하는 모든 요소들을 포함합니다. 예제를 보면 <html>은 <head> 와 <body> 를 포함하며 <head> 는 <meta> 와 <title> 요소를 <body> 요소는 <h1>, <p>를 포함합니다.

• 중첩 관계(부모자식 관계)로 웹페이지의 구조(structure)를 표현합니다. 그러나 때에 따라 정해진 태그만 중첩할 수 있습니다.

중첩이 되지 않는 경우인 block elements 와 inline elements에 대해서는 다음글 tag 에서 설명하겠습니다.

04. HTML 기본문법, 주석(Comments)


    
      
        
        
        
      
      
    
<!-- 안녕하세요 , 주석입니다 -->

주석(comment)는 개발자에게 코드를 설명하기 위해 사용합니다. 또 브라우저는 주석을 화면에 표시하지 않습니다.

사용자나 컴퓨터를 위한 것이 아닌 개발자를 위한 것이라고 할 수 있습니다. 코드만으로 설명이 어려울 때 부가적으로 설명하기 위해 사용하기도 합니다.

05. 인라인 태그와 블록 태그

블록 요소는 항상 새로운 line에서 시작하여 왼쪽에서 오른쪽으로 페이지의 전체 너비를 차지할 수 있고, 요소 앞 뒤에 줄바꿈이 있습니다. 블록 요소에는 <h1>~<h6>,<li>,<ol>,<il>,<div>태그 등이 블록 요소에 속합니다.

인라인 요소는 개행을 일으키지 않고, 필요한 만큼만 너비를 차지합니다. 즉, 여는 태그와 닫는 태그로 둘러쌓인 공간만을 차지합니다.

인라인 요소에는 <img>,<a>,<em>,<span>태그등이 인라인 요소에 속합니다.

코드에서 인라인 태그와 블록 태그의 차이점을 알아보면,


    
      
        
        
        
      
      
    
<!-- 주석 단축키: ctrl(cmd) + / -->

<!DOCTYPE html>
<!-- DOCTYPE html: html5로 문서를 작성하겠다 (Document Type 약자) -->

<html lang="ko">
<!-- lang 속성: language (en: english, ko: korean) -->
<head>
    <meta charset="UTF-8"> 
    <!-- 인코딩 방식 지정 / 인코딩: 우리가 작성한 코드를 컴퓨터가 이용할 수 있도록 변경  -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 모바일/반응형웹에서 인식할 수 있는 태그 -->
    <title>Document</title>
    <!-- 문서의 제목 -->
</head>
<body>
    <!-- 브라우저에서 보여주고 싶은 내용 -->
    <!-- start tag, end tag 사이에 넣고 싶은 content를 작성 -->
    <h1>나의 첫 HTML 문서입니다</h1>

    <!-- 중첩(nested) -->
    <!-- div: 블록요소, span: 인라인요소 -->
    <div style="background-color: red;">
        span의 parent
        <span style="background-color: blue;">div의 child</span>
    </div>
</body>
</html>

Document

나의 첫 HTML 문서입니다

span의 parent div의 child

전체너비를 차지하는 span의 parent인 <div>태그와 달리 inline요소인 즉, div의 child <span>태그는 필요한 너비만큼만 사용합니다.

+후기

부트캠프의 2회차 수업날이 밝았습니다.. 사실 전 이 날 밤을 새고 가서 .. 내가 교육을 들을 수 있을까 .. 했는데 막상 닥치니까 하게 되더라구요. 하지만 절대 밤을 새고 교육을 듣지 않으리라.. 다짐했습니다. 이 날은 웹 브라우저의 뼈대를 먼저 배웠습니다. 살을 붙이는 CSS는 다음 수업때 진행 됩니다. 다른 프로그래밍언어들과 달리 실행을 해도 오류가 어디서 난 건지 알려주지를 않아서 다소 불친절한 녀석입니다. 사실 전html을 한번도 해본 적이없는 html뉴비로서 졸리지만 설레는 마음으로 공부 했습니다. 뉴비에서 끝나지않기를,,, 빨리 CSS 빨리 JS배우고싶엉.,,,,

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

[SeSACXCodingOn] 웹풀스택과정 1W_2_05 : HTML_Semantic (0)	2023.07.19
[SeSACXCodingOn] 웹풀스택과정 1W_2_04 : HTML_Table (0)	2023.07.19
[SeSACXCodingOn] 웹풀스택과정 1W_2_03 : HTML 사용자 입력Form 태그 & Input 태그 (0)	2023.07.19
[SeSACXCodingOn] 웹풀스택과정 1W_2_02 : HTML TAG (0)	2023.07.19

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[SeSACXCodingOn] 웹풀스택과정 1W_2_01 : HTML 이란 + 회고

[🌱목차🌱]

01. HTML 이란?

02. HTML 의 구조(Structure)

03. HTML의 기본문법, 중첩(Nested)

04. HTML 기본문법, 주석(Comments)

05. 인라인 태그와 블록 태그

나의 첫 HTML 문서입니다

+후기

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

[🌱목차🌱]

01. HTML 이란?

02. HTML 의 구조(Structure)

03. HTML의 기본문법, 중첩(Nested)

04. HTML 기본문법, 주석(Comments)

05. 인라인 태그와 블록 태그

나의 첫 HTML 문서입니다

+후기

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

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역