Today I learned : Day 2 Html&Css

1. 더 자세히 특정하기

# style.css
h1.destination {
	font-family: cursive;
}

# index.html 
<h1 class="destination"> Seoul </h1>
<h2 class="destination"> Busan </h1>

h1의 destination class에만 적용시켜주고 싶은 css를 특정하기.

2. nested 구조 특정하기

# index.html 
<div class="description"> 
<h1> Seoul </h1>
<p> Seoul is famouse city... </p>
</div>
<h1> Beijing </h1>

#style.css
.description h1 {
	color: teal;
}

html에서 모든 요소들은 포함관계에 있다. 이를 nested라고 하는데 index.html 파일을 보면 destination class를 가진 div 하위에 h1과 p가 있는 것을 볼 수 있다. 이 때 Seoul의 색상을 바꾸고 싶다면 어떻게 할 수 있을까? 이 경우 “description 클래스의 h1만 바꿔라” 라고 특정할 수 있는데 띄워쓰기로 특정하고 싶은 요소를 나타낸다. 주의할 것은 라인의 맨 마지막 요소(여기서는 h1)만 teal로 바뀐다는 것이다. 이렇게 요소를 구체적으로 특정하는 방법은 광범위한 선택보다 항상 적용되는 우선순위가 높다.

3. 우선순위

2. nested 구조 특정하기

# index.html 
<div class="description"> 
<h1> Seoul </h1>
<p> Seoul is famouse city... </p>
</div>
<h1> Beijing </h1>

#style.css
.description h1 {
	color: teal;
}
h1 {
	color: rebeccapurple;
}

Beijing은 rebeccapurple 색으로 변하겠지만 Seoul은 그대로 teal 색상으로 남을 것이다.

4. !important

#style.css
.description h1 {
	color: teal;
}
h1 {
	color: rebeccapurple !important;
}

위의 우선순위를 간단히 무시해버리는 방법이 있는데 CSS의 룰 중 가장 강력한 우선순위이다. !important를 해당 속성 뒤에 적어주면 다른 우선순위를 무시하고 적용된다.

5. text 꾸미기

# style.css
body {
	font-size: 18px;
	font-family: Helvectica;
	font-weight: bold;
	text-align: center;
}

body에 적용하면 html body전체 스타일링을 할 수 있다.

6. color

# style.css
p {
	background: white;
	color: black;
}

css의 color에는 background 와 foreground가 있는데 background는 말 그대로 배경, foreground는 요소가 나타낼 색상이다. 예를 들어 p에 적용하면 글자색이 color가 된다.

7. opacity

# style.css
.caption {
	background: white;
	color: black;
	opacity: 0.75
}

opacity는 투명도를 조절할 수 있다.

8. background image

# style.css 
.image {
	background-image: url("https://www.naver.com/lion.jpeg");
}

배경으로 특정 이미지를 주고 싶을 경우에는 background-image 태그를 사용해 url을 주는 방식으로 사용할 수 있다.

9. etc

# style.css
.caption li{
	list-style: square
}