본문 바로가기
퍼블리싱

HTML&CSS 기초 - 요약 (의미,특징,사용법)

by lionbum 2022. 1. 16.

HTML이란?

웹페이지는 모두 HTML을 사용하여 만들어짐

 

 

 

 

HTML의 의미와 특징

Hyper Text Markup Language의 줄임말

Hyper Text : 링크 의미

Markup Language :  프로그래밍 언어의  종류/ 정보를 구조적&계층적으로 표현

HTML 파일 확장자 :  .html

 

 

 

 

HTML의 역사

제안&개발 : 1990년대 영국의 물리학자 팀 버너스

초기 개발 목적 :  연구원들의 정보와 문서 공유

 

 

 

 

태그란?

HTML은 태그들의 집합

태그로 코드 작성 ->  브라우저 인식 -> 내용 표현

 

 

 

 

태그 사용 방법

표현 방법 : <태그명> ~ </태그명>  

 

<h1>Hello, HTML</h1>

 

 

 

 

요소란

태그를 포함한 전체 

 

 

 

 

속성이란?

태그에 대한 추가 정보 제공, 태그 제어 설정값 지정.

 

 

 

 

속성을 사용하는 방법

시작태그 - 한칸 뛰고(공백) - 속성 이름="속성값" 

 

<h1 id="title">Hello, HTML</h1>

id  :  속성이름 

"title" : 속성값 

 

 

 

 

 

여러 속성을 사용하는 방법

공백으로 구분해서 사용

 

<h1 id="title" class="main">Hello, HTML</h1>

<h1> id class 2개의 속성을 선언

속성의 선언 순서 : class를 id보다 먼저 선언해도 결과는 같다

 

 

 

 

속성의 종류

글로벌 속성: 모든 태그에 사용 (글로벌속성 종류 보기

* 선택적으로 쓸 수 있는 속성

* 특정 태그에서 필요한 필수 속성

* 가장 많이 쓰이는  id,  class , title, style  속성은 글로벌 속성

 

 

 

 

 

태그의 중첩

태그 안에 태그 선언 가능 (중첩) 

 

[잘못된 중첩 태그]

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

<h1>안에서 <i>가 시작되었으니 부모인 <h1> 안에서 끝나야함 

 

[올바른 중첩 태그]

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

 

 

 

 

중첩 개수 

중첩이 얼마나 되는지 어떤 태그를 쓰던 상관 없음.

* 때에 따라 정해진 태그만 중첩할  있기도 함.

* 빈태그는 중첩이 불가 (종료태그가 없음) 

* (블록 vs 인라인)태그의 구조 특성으로 인해 중첩이 안되는 경우가 있음 

 

 

 

 

빈 태그란?

종료 태그가 없음 

빈 태그는 내용이 없어서 종료 태그가 필요하지 않음

  • <br>
  • <img src="">
  • <input type="">

 

 

 

 

빈 태그의 특징

내용만 없음 , 속성을 통해서 화면에 나타냄 or 화면표시 없이 다른 용도로 사용

브라우저가 직접 화면에 내용을 그려줘야 하는 경우

img , input -> replacement 태그, 대체되는 태그

br -> 실제로 화면에 출력될 내용이 없음, 줄바꿈 역할 

 

 

 

 

HTML에서의 공백

두 칸 이상의 공백을 모두 무시

 

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

 

 

 

 

HTML에서의 주석

화면에 노출되지 않고 메모의 목적

브라우저는 해당 부분을 해석하지 않음

<!-- 여기에 작성되는 내용들은 모두 주석 처리가 됩니다. -->
<!-- 주석은 여러 줄로 작성할 수도 있습니다.
    <h1>Hello, HTML</h1>
    위 <h1>태그는 브라우저가 해석하지 않습니다.
-->

시작 :  <!--

종료 :  --> 

 

주석 단축키 (emmmet) 

* cmd + / : 행 전체 주석 

* cmd + option + /  : 커서위치에서 주석 생성 

 

 

 

 

 

HTML의 기본 구조

웹 문서를 작성할 때 반드시 포함할 내용

1. 문서 타입 정의   2. <html>요소 

 

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

 

 

1. 문서 타입 정의

문서 타입 정의 :  DTD(doctype)

브라우저에 문서 버전을 알려 줌

문서 내 최상단에 선언

이전 선안방식 확인 

 

 

 

2. <html>요소

문서 타입 - <html>태그 -  <head>태그 -  <body>태그 

<html> 태그 :  lang  - 문서 어느 언어로 작성되었는지를 의미

<head>태그 :  브라우저 화면에 표시되지 않음 (문서 기본 정보 설정, 외부 스타일 시트 파일 및 js 파일을 연결)

<meta> 태그charset - 문자의 인코딩 방식을 지정

<body>태그 :  실제 브라우저 화면에 나타나는 내용,  태그 대부분이 모두 여기에 들어감

 

 

 

 

 

 

내용 출처 : https://www.boostcourse.org/web344/joinLectures/78637 

 

웹 UI 개발

부스트코스 무료 강의

www.boostcourse.org

 

728x90
반응형

댓글