HTML과CSS 기초(1)

2019. 8. 11. 12:01

1. HTML(Hyper Text Markup Language)의 의미

HTML은 웹페이지를 만들기 위한 가장 기초적인 언어입니다. 검색엔진 또한 HTML 문법에 영향을 받아서 검색을 진행합니다. 그렇기 때문에 역할에 맞는 적절한 HTML 문법을 사용하는 것이 중요합니다.

2. HTML 기본 태그

<html>, <head>, <body>: 이 태그들은 옵셔널태그로써 구조가 눈에 잘 들어오게 합니다.
<!DOCTYPE html>: HTML5 사용을 위한 태그이기에 필수적으로 넣어줘야 합니다.
<title>~</title>: 페이지의 제목을 입력하는 태그입니다. 여기에 입력된 내용은 페이지 안에서 나오는 것이 아니라 웹 플랫폼 인덱스 부분에 나옵니다.
<meta charset="utf-8">: 한글 출력을 위한 태그입니다. 한글을 웹에서 출력하려면 반드시 입력해야 합니다.
<h1>~<h6>: 머리말 태그, <h1>~<h6>의 태그가 모두 기본적으로 글자를 두껍게 나타내며, h뒤에 나오는 수가 커질수록 글자크기는 작아집니다.
<p>: 문단을 구분할 때 사용하는 태그, 위아래에 여백을 만듭니다.
<b>: 글자를 두껍게 나타내는 태그입니다.
<i>: 글자를 갈겨쓰기 하는 태그입니다.(italics)
<strong>: 볼드체를 적용하고, 글자를 강조한다는 의미를 갖고 있습니다.
<em>: 갈겨쓰기를 적용하고, 글자를 강조한다는 의미를 갖고 있습니다.
<br>: 줄 바꿈 하는 태그, 문장 끝에 사용하며 문서 파일에서 엔터를 누른 것과 같은 형태를 보여줍니다.
<strong>과 <b>, <em>과 <i>의 차이는 눈에 보이지 않습니다. 단지 프로그램 상에서 해당 단어를 강조하기 위해 사용하며, 스크린 리더 등을 사용하면 강조하여 읽습니다.

3. CSS(Cascading Style Sheets)의 의미

CSS는 문서의 내용과 표현을 분리해서 CSS파일만 수정하면 한 번에 많은 표현을 일괄적으로 수정할 수 있도록 돕습니다.

즉, html요소들의 각종 레이아웃, 디자인 등 사용자에게 어떻게 보이는지 정의하는 스타일 시트 언어입니다.

4. CSS 개요

CSS를 사용하는 방법은 다음과 같습니다.

※파일을 만들어서 사용할 때는 아래의 태그를 html에 꼭 입력해야 합니다.※

(HTML/CSS) 마우스 오버(hover), 상속, 명시도, display (6) (0)	2019.08.16
(HTML/CSS)box model과 background(5) (0)	2019.08.14
(HTML/CSS)텍스트, span (4) (0)	2019.08.13
(HTML/CSS) div, 클래스(class), 아이디(id) (3) (0)	2019.08.12
(HTML/CSS)이미지, 픽셀, 하이퍼링크(2) (1)	2019.08.11

포림프 노트