[HTML/CSS] HTML와 CSS에 대해

HTML이란?

HTML : (Hyper Text Markup Language) : 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용한다. HTML은 프로그래밍 언어가 아니다. 컨텐츠의 구조를 정의하는 마크업 언어이다.

<h1> 안녕하세요 </h1>

1. 여는 태그(opening tag) : 요소의 이름으로 구성하고, 여닫는 꺾쇠 괄호로 감싼다. 여기에서는 <h1>을 말한다.
2. 닫는 태그(closing tag) : 요소의 이름 앞에 /(슬래시)가 포함된다. 이것은 요소의 끝을 나타낸다. </h1>을 뜻한다.
3. 컨텐츠(content) : 요소의 내용(content). 예제에서는 "안녕하세요"에 해당한다.
4. 요소(element): 여는태그와 닫는태그, 그리고 컨텐츠를 가리킨다. 예제에서는 <h1>안녕하세요</h1>

덧붙여, 요소는 속성을 가질 수 있다.

<p class="creat"> 이것은 예제입니다 </p>

위와 같이 class="creat"에 해당하는 부분이 속성(Attribute)이다.나중에 class 속성을 특정해서 스타일이나 다른 정보를 설정할 때 사용할 수 있는 식별자를 지정할 수 있다.

<속성을 쓸 때 유의해야할 점>

1. 요소 이름 (또는 요소가 하나 이상 속성을 이미 가지고 있다면 이전 속성)과 속성 사이에 공백이 있어야 한다.

2. 속성 이름 뒤에는 등호(=)가 와야한다.3. 속성 값의 앞 뒤에 열고 닫는 인용부호(""또는'')가 와야한다. 또한 요소를 다른 요소 안에 넣을 수 있는데, 그것을 요소 중첩(nesting)이라고 부른다.

<p> It <strong>is</strong> working. </p>

빈 요소(Empty elements)

자식 노드를 가질 수 없는 요소.

<HTML의 빈 요소 목록>

<area><base><br><col>
<embed><hr><img><input>
<keygen><link><meta><param>
<source><track><wbr>

CSS 란?

CSS : (Cascading Style Sheets) 웹 페이지를 꾸밀 때 작성하는 코드이다. HTML과 같이 CSS는 프로그래밍 언어가 아니다. 마크업(Markup)언어도 아닌 Style Sheet 언어다.

p {color : red;}

전체 구조는 rule set이라고 부른다. (줄여서 "rule")

• 선택자(selector) : rule set의 맨 앞에 있는 HTML 요소 이름. 예시에서는 p 에 해당한다.선언(declaration) : color : red와 같은 단일 규칙. 꾸미기 원하는 요소의 속성을 명시한다.
• 속성(property) : 주어진 HTML 요소를 꾸밀 수 있는 방법. 예시에서 color에 해당한다.속성 값(property value) : 속성의 오른쪽에 위치한 red가 color의 속성 값 중 하나다.

1. rule set(셀렉터로 구분)은 반드시 { 중괄호 } 로 감싸야한다.
2. 각 선언 안에서, 각 속성을 해당 값과 구분하기 위해 콜론 :을 사용해야한다.
3. 각 rule set 안에, 각 선언을 그 다음 선언으로 구분하기 위해 세미콜론 ; 을 사용해야한다.

예시는 다음과 같다.

p {
	color : red;
	width : 500px;
	heigth : 200px;
	border : 1px solid black;
}

요소의 여러 타입을 선택하고 하나의 rule set을 적용할 수도 있다. 여러 요소를 선택하려면 콤마로 구분해야한다.

p,h1,li {color: blue;}