[부스트코스] 비전공자를 위한 HTML/CSS 1.HTML 이해하기

퍼롱's·2021년 9월 1일
0

🍋TIL🍋

목록 보기
1/3
post-thumbnail

HTML이란?

  • HTML은 Hyper Text Markup Language의 약자로, 웹 페이지를 만들 때 사용되는 프로그래밍 언어이다
  • 파일 확장자로 .html을 사용하며 파일 안에 html 코드 작성

HTML 문법

  • 태그(Tag)
    • HTML은 태그들의 집합이며, 태그는 가장 기본적이고 중요한 규칙
    • '무언가를 표시하기 위한 꼬리표, 이름표'
    • <,>기호로 표현하며 <,>사이에 태그 이름을 작성
    • 시작 태그와 종료 태그(닫는 태그)로 이루어지며 종료 태그는 태그 이름 앞에 '/'기호를 추가하여 표현
    • HTML뿐 아니라 다양한 마크업 언어에서 사용

  • 요소(Element)
    • 내용을 포함한 태그 전체를 요소라고 함
    • 태그와 요소는 엄연히 의미가 다르므로 유의

  • 속성(Attribute)
    • 시작 태그 이름 뒤에 공백으로 구분한 후 속성이름과 속성값 작성
    • 속성이름="속성값" 으로 작성하며 속성값은 작은따옴표('')나 큰따옴표("")로 감싸서 표현
    • 속성이름과 속성값은 '='으로 연결하며 그 사이에 어떤 공백도 허용하지 않음
    • 여러 속성을 선언할 수 있으며 공백으로 구분해서 사용
    • 속성들 사이에 선언 순서는 없음

  • 태그 중첩(Nesting Tags)
    • 태그 안에 다른 태그 선언 가능
    • 태그를 중첩해서 사용할 때 중첩되는 태그는 부모 태그를 벗어날 수 없음 (자식태그보다 부모태그의 종료태그가 먼저 선언될 수 없음)

  • 빈 태그(Empty Tag)
    • 내용이 없는 태그로 종료 태그가 필요하지 않음
    • 내용이 비어있지만 화면에 나타날 수도 있고 화면에 표시되지 않아도 다른 용도로 사용되는 태그
    • 브라우저가 직접 화면에 내용을 그려줘야 하는 경우가 대표적이며 이 경우 대체되는 태그, replacement 태그라고 함

  • 공백(Space)
    • HTML은 두 칸 이상의 공백과 개행을 모두 무시함

  • 주석(Comment Tags)
    • 화면에 노출되지 않고 메모의 목적으로만 사용
    • 브라우저는 주석을 인식하지 않으며, 주석은 사용자를 위한 것이 아닌 개발자를 위한 것
    • <!— —>로 표시하고 사이에 내용을 넣어주면 됨

HTML 기본 구조

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>Hello, HTML</h1>
    </body>
</html>

  • Doctype : 문서 타입 정의, 반드시 문서 내 최상단에 선언
  • html : lang 속성은 어느 언어로 작성되었는지를 의미
  • head : 브라우저 화면에 표시되지 않으나 문서의 기본 정보를 설정하거나 외부 파일을 연결하는 역할을 함
  • meta : head 태그 내에 위치하는 태그이며, charset속성으로 인코딩 방식을 지정
  • body : 브라우저 화면에 표시되는 내용이 들어감

출처 : 비전공자를 위한 HTML/CSS

profile
유지경성

0개의 댓글

관련 채용 정보