HTML (HyperText Markup Language)
html은 웹페이지를 만들기 위한 가장 기초적인 마크업 언어입니다. html은 태그로 이루어져있고, 태그들을 이용하여 웹 브라우저 상에 텍스트, 이미지, 하이퍼링크등을 표시합니다. 태그들은 < >(꺾쇠)사이에 표기되며, 몇개의 태그들을 제외하고 <tag>내용</tag>처럼 반드시 닫아주어야 합니다.
html은 혼자 쓰이기 보다는 CSS, 자바스크립트 등과 함께 쓰여 브라우저에 디자인적, 기능적 요소를 더해서 사용됩니다.
이하는 html문서를 작성하기 위한 가장 기초적인 html5의 기본 틀입니다.
<!DOCTYPE html><!DOCTYPE> : 문서의 시작부분에 명시하며, 문서유형을 나타내 줍니다. 해당 문장은 웹 브라우저에게 html문서를 처리 하라고 알려주게 됩니다.
<html lang="ko"><html> : html문서가 시작되고 끝남을 알리는 의미의 태그입니다. html 태그에는 lang이라는 속성으로 사용하는 언어를 지정해 주어야합니다. 언어를 지정하는 이유는 화면 낭독기 프로그램을 이용할때 lang속성에 지정된 언어에 따라서 읽는 억양이나 음성이 달라집니다. 또한, 검색할 때 검색범위를 영어(en), 한국어(ko)등으로 제한할 때도 영향을 주기 때문에 명시해주는 것이 좋습니다.
<head>
'''
</head><head> : head태그에는 문서에 대한 정보나 스타일시트, 스크립트등이 들어가는 부분이며, 웹페이지 상에는 직접 나타나지 않습니다.
<meta charset="UTF-8">
<meta name="author" content="Bam"><meta> : meta 태그는 속성을 이용하여 문서의 정보를 지정하거나 알리는데 사용됩니다. 검색 엔진들은 보통 meta태그안의 정보를 토대로 검색을 합니다.
-
charset : 문서의 인코딩 방식을 지정한다.
-
name : author(문서의 작성자), description(문서에 대한 설명), keywords(문서의 검색 키워드), generator(문서가 작성된 프로그램), application-name(표시되는 웹의 이름)의 속성값들을 가지고 있다.
-
content : name속성과 반드시 함께 사용하며 속성값에 대한 내용을 기재한다.
<title>BamHTML</title>
<title> : 브라우저의 제목표시줄에 표시되는 제목을 입력하는 태그입니다.
<body>
'''
</body><body> : 웹 브라우저상에 표시되는 내용들을 갖는 태그입니다. head태그 부분에 들어가는 태그들을 제외한 거의 모든 태그들이들어가는 태그입니다.
CSS(Cascading Style Sheet)
html을 이용해서 웹 브라우저를 작성할 때 태그의 요소를 일일히 지정해 주어야 한다. 그러다보니 많은 시간을 들이게 되고 유지보수도 어려워지게 되었습니다. 그렇기 때문에 디자인을 편하게 작성하고 유지보수 하기 위해서 css가 등장하게 되었습니다. html을 css와 함께 사용하면서 html은 웹브라우저의 내용에 집중하고 css는 디자인적인 측면에 집중할 수 있는 형태가 되었습니다.
css는 html문서의 <head>태그 안에 내용을 기재하거나 .css 파일을 통해 따로 만들어서 문서에 삽입합니다.
이하는 내부스타일의 css입니다.
선택자 : 선택자에는 전체 선택자, 태그 선택자, 클래스 선택자등 다양한 선택자들이 존재하며 이 선택자에 해당하는 요소를 { }안의 내용대로 바꾸겠다는 의미를 가집니다. 선택자는 종류가 다양하기 때문에 나중에 다른 포스트를 통해 알아보겠습니다.
속성 : 선택자가 가진 속성중 변경할 속성을 한개 혹은 한개 이상을 { } 안에 넣습니다.
속성값 : 해당 속성에 대한 값을 콜론뒤에 넣고 반드시 세미 콜론을 넣어 속성:속성값 쌍을 구분해 줍니다.
'Programming > HTML, CSS' 카테고리의 다른 글
| [HTML] 리스트를 만들어주는 태그들 (0) | 2020.08.19 |
|---|---|
| [HTML/CSS] 특수문자 입력하기 (0) | 2020.08.19 |
| [HTML] HTML 태그 정리, 텍스트 관련 태그들 (인라인 요소) (0) | 2020.08.19 |
| [HTML] HTML 태그 정리, 텍스트 관련 태그들 (블록 요소) (0) | 2020.08.18 |
| [HTML/CSS] 블록 요소와 인라인 요소 (0) | 2020.08.18 |
댓글