HTML
HTML은 Hypertext Markup Language의 약자로 웹 페이지를 만드는 데 사용하는 언어입니다. 우리가 브라우저를 통해 보는 페이지는 모두 HTML로 작성되어 있습니다.
HTML에서 Hypertext의 의미는 링크를 통해 다른 문서로 이동할 수 있는 문서를 뜻합니다. 또한 HTML은 마크업 언어로써, 여러 가지 태그를 이용하여 제목이나 문단 등을 구분해 정보를 구조화할 수 있습니다. 마크업 언어는 주어진 데이터를 구조화하고 형식을 나타낸다는 점에서 변수나 함수 등을 이용해 기능을 구현하는 프로그래밍 언어와 차이가 있습니다.
HTML 구조
HTML은 트리구조로 이루어져 있으며 이는 나무의 뿌리가 기둥에서 부터 여러 갈래로 갈라지는 것처럼 부모 요소 안에서 여러 가지 자식 태그들이 갈라져 나온 형태입니다.
HTML 문서를 작성할 땐 <!DOCTYPE html> 태그를 시작으로 브라우저에 해당 문서가 HTML임을 명시하고 <html>태그로 전체 틀을 구성합니다. 그리고 해당 태그 안에서 크게 <head>와 <body>로 영역을 나눕니다. 바디 태그 사이에는 사용자 눈에 보이는, 즉 브라우저를 통해 표시될 내용을 담고 헤드 태그 사이에는 사용자 눈에 보이지 않지만, 브라우저가 해당 문서를 해석하는데 필요한 여러 정보(metadata)를 표기합니다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>HTML 태그
HTML은 열린 태그 <>과 단힌 태그 </>사이에 콘텐츠를 위치하여 문서의 구조를 표현할 수 있습니다. 문법 자체는 비교적 학습하기 쉬운 편입니다. 각각의 태그들은 목적에 따른 여러가지 속성을 가지고 있으며 이에 대한 속성값을 지정할 수 있습니다.
title 태그
웹 페이지의 제목을 나타내는 태그입니다.
<title>첫 실습</title>
h 태그
문단의 제목을 나타내는 태그이며 숫자가 작을수록 글자의 크기가 커집니다.
<h1>제목 태그</h1>
<h2>제목 태그</h2>
<h3>제목 태그</h3>
<h4>제목 태그</h4>
<h5>제목 태그</h5>
<h6>제목 태그</h6>
hr 태그
수평 가로선을 정의하는 태그입니다.
<hr>
HTML 엔티티(entity)
HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어(reserved characters)라고 부릅니다. 이러한 HTML 예약어를 HTML 코드에서 사용하면, 웹 브라우저는 다른 의미로 해석합니다. 따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 합니다.
글 자
<작성중>
CSS
CSS는 Cascading Style Sheets의 약자로 기본적인 스타일이 이미 지정된 HTML 요소를 개발자가 직접 다양한 스타일로 디자인할 수 있는 언어입니다.
CSS 기본 문법
CSS 문법은 크게 설렉터와 선언 블록으로 나뉩니다. 먼저 셀렉터로 스타일을 지정할 HTML 요소나 id, class 등을 선택한 뒤 그에 대한 스타일을 선언 블록인 중괄호{} 사이에 지정하는 방식입니다. 그리고 각각의 스타일 속성들은 세미콜론;으로 구분합니다.
body {
color: green;
font-size: 24px;
background-color: black;
}내부 스타일 시트
HTML 문서의 <head> 태그 내에 <style> 태그를 삽입하고 해당 태그 사이에 CSS 문법을 작성해 스타일을 지정할 수 있습니다. 이 경우 해당 HTML 문서에만 스타일이 적용됩니다.
<!DOCTYPE html>
<html>
<head>
<title>첫 실습</title>
<style type="text/css">
h1 {
color: red;
background: lightblue;
}
</style>
</head>
<body>
<h1>제목</h1>
</body>
</html>
외부 스타일 시트
HTML 문서 내부가 아닌 외부에서 CSS 파일을 작성했다면, HTML 문서의 <head> 태그 내에 <link> 태그를 삽입하여 HTML 문서에 CSS를 연결할 수 있습니다. <link> 태그의 rel 속성을 stylesheet로 지정하고 href 속성으로 CSS 파일 경로를 지정하여 연결할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>첫 실습</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>제목</h1>
</body>
</html>GitHub
https://github.com/Qkrwnsgus0522/Web
GitHub - Qkrwnsgus0522/Web
Contribute to Qkrwnsgus0522/Web development by creating an account on GitHub.
github.com
