1) ' ! + enter '를 입력하면 아래와 같은 기본 스켈레톤 코드가 작성이 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html><head> 에는 눈에 보이지않는 문서에 관련된 설명, 설정 등의 요소가 들어간다.
<body> 에는 페이지에 표시되는 요소가 들어간다.
<title> 에는 브라우저 탭에 표시되는 제목을 입력할 수 있다. 아래 이미와 같이 제목이 설정된다.
<p class="largetext"> Everything is good. </p>
여는 태그(opening tag) 속성 내용(content) 닫는 태그(closing tag)
하나의 요소는 여는 태그(앞에 있는 태그)와 닫는 태그(뒤에 있는 태그)로 이루어지며, 그 안에 내용을 넣는다.
모든 요소가 다 닫는 태그가 존재하는 것은 아니다.
닫는 태그에는 슬래시( / )가 포함되어있다!
속성의 경우 적용하는 여러 방법이 있다.
위는 그중 하나로 요소의 이름 및 다른 속성들과는 공백으로 구분되어야한다.
2) HTML : HyperText Markup Language
HTML에서 각 요소들은 단순히 내용을 담기 위한 도구가 아닌 요소의 이름을 통해 각 요소의 의미 및 역할 또한 알 수 있다.
3) CSS : Cascading Style Sheet
웹 페이지의 디자인, 레이아웃을 구성하는 언어이다.
다음과 같이 속성들을 적용할 선택자를 선언한 후에 적용하고 싶은 속성과 그 값을 입력한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- ####### CSS 구문 ##########-->
<style>
.box {
box-sizing: border-box;
width: 400px;
height: 400px;
}
</style>
<!-- ###########################-->
</head>
<body>
</body>
</html>
CSS를 적용하기 위해서는 세 가지 방법 중 하나를 선택한다.
- 인라인(Inline) 스타일 : HTML 요소의 여는 태그 안에 style 속성 값으로 작성하여 CSS를 적용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 인라인(Inline) 스타일 -->
<div style="width:auto; color: aquamarine;"></div>
<!--_________________________________________-->
</body>
</html>
- 내부(Internal) 스타일 시트 : head안에 style 태그에 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 내부(Internal) 스타일 시트 -->
<style>
.box {
background-color: black;
width: 200px;
height: 200px;
}
</style>
<!--___________________________________________-->
</head>
<body>
.
.
.
</body>
</html>
여러 요소에 적용할 수 있기에 추천되는 방법이다.
- 외부(External) 스타일 시트 : 별도의 CSS 파일에 스타일 코드를 적은 후 HTML link 태그를 통해서 불러와 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 외부(External) 스타일 시트 -->
<link rel="stylesheet" href="stylecss.css">
<!--___________________________________________-->
</head>
<body>
</body>
</html>
3) CSS Selectors 의 종류와 명시도(Specificity)
CSS를 적용할 요소를 선택하는 방법을 알아보자.
선택자의 종류는 크게 기본 선택자 와 결합자(Combinators) 두 개로 나뉜다.
- 기본 선택자
- 전체 선택자 * : 모든 요소에 적용된다.
- 요소 선택자(tag) : 지정한 모든 태그( 콤마 (, ) 로 구분하기)를 선택한다
- 클래스 선택자 : 클래스의 이름을 설정하고 내부 스타일로 적용한다.
- 아이디 선택자(id) : 주어진 아이디 속성을 가진 요소들을 선택한다.
주어진 아이디를 가진 요소가 하나만 있을 때 사용하는 것을 권장한다.
- 결합자
- 자손 결합자( space로 구분 ) : 첫번째 요소의 자손 요소들 모두에게 적용된다!
- 자식 결합자( >로 구분 ) : 첫번째 요소의 직계 자식(한단계 아래만!) 에게만 적용된다.
# 명시도 : 겹치는 여러 스타일들 중에서 어떤 스타일을 적용할 것인지 결정하는 기준!
동일한 요소에서는 가장 마지막으로 명시된 스타일을 따른다.
명시도가 높은 순서는 다음과 같다.
!important
l
Inline 스타일
l
선택자
(id 선택자 - class 선택자 - 요소 선택자)
l
소스 코드 선언 순서
4) CSS 속성의 상속
CSS의 부모 태그의 속성이 다 상속되는 것은 아니다!!
Text 관련된 요소들을 상속되지만, Box model이나 position 관련된 요소는 상속되지 않는다.
.
.
.
<style>
.parent {
color: blue;
/* border 속성은 상속 X */
border: 1px solid black;
}
</style>
</head>
<body>
<div class="parent">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p> Velit in officiis, ipsam necessitatibus autem ess</p>
</div>
</body>
</html>
각각의 p 에는 border가 생기지않았다.