공부하는 히욤이

[부스트코스] 웹 UI 개발 : HTML 이해하기 본문

boostcourse/웹 UI 개발

[부스트코스] 웹 UI 개발 : HTML 이해하기

히욤이 2019. 3. 28. 22:33

1) HTML 소개

HTML

 - Hyper Text Markup Language

 

 

HTML의 의미와 특징

  • 웹 페이지를 만드는 언어

  • Hpyer Text = 링크

  • Markup Language = 프로그래밍 언어의 한 종류

  • 파일 확장자 : html

 

HTML의 역사

  • 팀 버너스리가 연구원들의 정보와 문서를 공유하기 위해 개발
  • 현재 웹 문서의 형태와는 다르지만 정보 공유의 목적은 같음

 

 

2) HTML 문법 - 태그

HTML 문법

  • 태그
  • 속성
  • 태그의 중첩
  • 빈 태그
  • 공백
  • 주석


태그(TAG)

  • 태그의 가장 기본적인 형태
1
<h1>Hello, HTML</h1>
 cs

  • 키보드의 꺽쇠 기호(< , >)을 이용하여 선언

  • 두개가 한 쌍으로 선언

 

<h1> : 시작 태그, 여는 태그

</h1> : 종료 태그, 닫는 태그

태그로 감싸진 부분이 내용 : 실제로 브라우저에 나타나는 내용

요소 : 내용을 포함한 전부


태그는 XML이나 SGML, XHTML과 같은 마크업 언어에서도 사용

 

 

 

3) HTML 문법 - 속성

속성

  • 태그에 추가적으로 정보를 제공하거나 태그의 동작이나 표현을 조절 할 수 있는 설정 값

속성을 사용하는 방법

  • 이름과 값으로 이루어져 있음
  • 시작 태그 안에 선언
  • 태그 이름 뒤에 공백으로 구분 후 속성 이름 = "속성값"으로 표현(반드시 붙여 써야함)
  • 쌍따옴표("")나 홑따옴표('') 둘 다 사용 가능
1
<h1 id="title">Hello, HTML</h1>
 cs

 

여러 속성을 사용하는 방법

  • 하나의 태그에 여러개의 속성 선언 가능
  • 속성들의 선언 순서는 중요하지 않음
1
<h1  id="title" class="test">Hello, HTML</h1

 

속성의 종류

  • 모든 태그에 사용 할 수 있는 글로벌 속성과 특정 태그에서만 사용 가능한 속성
  • 선택적으로 쓸 수 있는 속성과 특정 태그에서 필요한 필수 속성
  • id와 class는 글로벌 속성

 

 

4) HTML 문법 - 태그 중첩

태그 중첩(NESTING TAGS)

  • 태그 안에 다른 태그 선언 가능 ( 정해진 태그만 중첩 할 수 있기도 함)
    단, 부모 태그를 벗어나면 안됨

올바른 예

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

 

잘못된 예

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

 

 

 

5) HTML 문법 - 빈 태그

빈태그(Empty Tag)

  • 시작 태그만 존재하고 종료 태그는 존재하지 않는 태그

  • 종료 태그가 없어 내용이 들어갈 수 없기 때문에 빈 태그

1
2
<br>
<img src="">
 cs

 

 

빈 태그의 특징

  • 내용만 비어있을 뿐 속성을 통해서 화면에 나타내거나 화면에 표시되지 않더라도 다른 용도로 사용되는 태그

  • 브라우저가 직접 화면에 내용을 그려줘야 하는 경우 : replacement 태그, 대체되는 태그라고 함

  • 실제로 화면에 출력될 내용이 없어 다른 용도로 쓰이는 태그도 존재

 

 

6) HTML 문법 - 공백

HTML은 한 칸 이상의 공백을 모두 무시

1
2
3
4
5
6
<h1>Hello, HTML</h1>
<h1>Hello,             HTML</h1>
<h1>
    Hello,
     HTML
</h1>
 cs

위 세 코드 모두 동일한 결과가 나옴

 

 

 

 

7) HTML 문법 - 주석

주석(Comment Tags)

  • 화면에 노출되지 않고 메모의 목적으로만 사용

1
<!-- 내용 -->
 cs

시작 태그 : <!--

끝 태그 : -->

 

 

 

 

8) 문서의 기본 구조

HTML의 기본 구조

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>Hello, HTML</h1>
    </body>
</html>
 cs

 

 

 

DOCTYPE

어떤 버전으로 작성되었는지, 브라우저에게 알려주는 선언문

문서 내에 최상단에 위치 해야 함

다른 태그가 DOCTYPE 보다 먼저 나오면 안 됨

 

lang 속성 : 언어 코드

<head> : 브라우저 화면에 표시되지 않고 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 역할

<meta> : charset 속성은 문자의 인코딩 방식 설정

<title> : 탭 바에 노출되는 제목 태그

<body> : 실제 브라우저에 나타나는 내용이 들어가는 태그



 

 

 

<해당 포스트는 교육 목적을 위해 '부스트코스'의 강의를 듣고 강의자료를 개인적으로 정리한 것으로 모든 내용의 출처와 저작권은 부스트코스에 있습니다.>

'boostcourse > 웹 UI 개발' 카테고리의 다른 글

[부스트코스] 웹 UI 개발 : 폰트, 텍스트  (0) 2019.07.30
[부스트코스] 웹 UI 개발 : 단위, 배경, 박스모델  (0) 2019.07.29
[부스트코스] 웹 UI 개발 : CSS 이해하기  (0) 2019.07.27
[부스트코스] 웹 UI 개발 : 콘텐츠모델, 시멘틱마크업, 블록 & 인라인  (0) 2019.07.24
[부스트코스] 웹 UI 개발 : HTML 태그  (3) 2019.03.28
'boostcourse/웹 UI 개발' Related Articles more