[HTML/CSS] HTML와 CSS에 대해
HTML이란?
HTML : (Hyper Text Markup Language) : 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용한다. HTML은 프로그래밍 언어가 아니다. 컨텐츠의 구조를 정의하는 마크업 언어이다.
<h1> 안녕하세요 </h1>
- 여는 태그(opening tag) : 요소의 이름으로 구성하고, 여닫는 꺾쇠 괄호로 감싼다. 여기에서는
<h1>
을 말한다. - 닫는 태그(closing tag) : 요소의 이름 앞에 /(슬래시)가 포함된다. 이것은 요소의 끝을 나타낸다.
</h1>
을 뜻한다. - 컨텐츠(content) : 요소의 내용(content). 예제에서는 "안녕하세요"에 해당한다.
- 요소(element): 여는태그와 닫는태그, 그리고 컨텐츠를 가리킨다. 예제에서는
<h1>안녕하세요</h1>
덧붙여, 요소는 속성을 가질 수 있다.
<p class="creat"> 이것은 예제입니다 </p>
위와 같이 class="creat"에 해당하는 부분이 속성(Attribute)이다.나중에 class 속성을 특정해서 스타일이나 다른 정보를 설정할 때 사용할 수 있는 식별자를 지정할 수 있다.
<속성을 쓸 때 유의해야할 점>
-
요소 이름 (또는 요소가 하나 이상 속성을 이미 가지고 있다면 이전 속성)과 속성 사이에 공백이 있어야 한다.
-
속성 이름 뒤에는 등호(=)가 와야한다.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의 속성 값 중 하나다.
- rule set(셀렉터로 구분)은 반드시 { 중괄호 } 로 감싸야한다.
- 각 선언 안에서, 각 속성을 해당 값과 구분하기 위해 콜론 :을 사용해야한다.
- 각 rule set 안에, 각 선언을 그 다음 선언으로 구분하기 위해 세미콜론 ; 을 사용해야한다.
예시는 다음과 같다.
p {
color : red;
width : 500px;
heigth : 200px;
border : 1px solid black;
}
요소의 여러 타입을 선택하고 하나의 rule set을 적용할 수도 있다. 여러 요소를 선택하려면 콤마로 구분해야한다.
p,h1,li {color: blue;}
Author And Source
이 문제에 관하여([HTML/CSS] HTML와 CSS에 대해), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dev_monroe/HTMLCSS-HTML저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)