> property를 스스로 알아내는 법
만약 제목을 가운데 정렬하고 크기를 더 키우고 싶다면?
검색을 해보자.
'css text size property' 검색.
https://www.w3schools.com/cssref/pr_font_font-size.asp
value에 대한 이야기도 있다.
이제 가운데 정렬을 해보자
"css text align property'
https://ofcourse.kr/css-course/text-align-%EC%86%8D%EC%84%B1
글꼴도 변경해볼까?
'css text font property'
https://www.w3schools.com/cssref/pr_font_font.asp
font관련 속성만 나온다.
'css text font value'
그러면
font-family라는 프로퍼티가 나온다.
https://developer.mozilla.org/ko/docs/Web/CSS/font-family
https://developer.mozilla.org/ko/docs/Learn/CSS/Styling_text/Fundamentals
아, 한글 폰트는 어렵다 pass
검색이나 에디터의 자동완성으로 페이지를 완성해보자.
h1 {
font-size: 50px;
text-align : center;
}> 선택자를 스스로 알아내는 법
아까 작성한 코드에서 underline만 빼고 color를 다 지워보자.
<style>
a {
text-decoration: none;
}
h1 {
font-size: 50px;
text-align : center;
}
</style>이렇게 작성된 상황이다.
다만 <a>(링크)태그가 걸려있는 코드는 방문을 했을 떄는 보라색, 그렇지 않았을 때는 파란색의 색깔로 자동으로 설정이 되어있다. 이렇게 방문 여부에 따라서 달라지는 색상을 설정하고 싶을 때는 어떻게 해야할까?
모든 링크가 달린 페이지는 검은색
방문을 하면 빨간색으로
바꾸게 하는 방법이 있을까?
class 속성을 넣어주자.
<ol>
<li><a href="1.html" class = "saw">청춘</a></li>
<li><a href="2.html" class = "saw">고백</a></li>
<li><a href="3.html">비눈물</a></li>
</ol>이렇게 되면 class가 saw인 코드가 두 줄 생겼다. <head>에
saw {
color:gray;
}이렇게 작성하자. 안된다. 이유는 saw라는 변수는 다른 속성에도 쓰일 수 있기 때문에 적용하지 못한다. 그래서 우리는 saw가 class 속성이라는 것을 알려줘야한다.
.saw {
color:gray;
}이렇게 .OO을 작성하면 "saw"라는 클래스 속성을 가지고 있는 코드를 가리킨다.
클래스는 대상을 그룹핑하는 기능을 한다. 덕분에 다음과 같이 페이지가 변한다.
또한 우리가 머물고 있는 청춘 페이지의 색깔만 빨갛게 하고 싶다. 어떻게 할까.
<li><a href="1.html" class = "saw active">청춘</a></li> .saw {
color:gray;
}
.active {
color: red;
}띄어쓰기로 클래스는 분류가 되며, 두 가지의 클래스로 해당 코드를 지정할 수 있다. 하지만 이 코드는 코드의 순서때문에 아래의 색깔이 적용될 뿐 두가지 클래스 선택자의 속성이 적용된 것이다.
조금 더 분명하게 지정하고 싶으면 어떻게 할까?
<li><a href="1.html" class = "saw" id="active">청춘</a></li>id 선택자를 넣어주는 것이다.
#active { color: red; }
.saw { color:gray; }만일 이렇게 id선택자가 클래스 선택자보다 일찍 쓰였다 하더라도
id선택자의 색깔로 적용이 된다.
id 선택자는 class 선택자보다 우선적으로 적용되는 것이다.
id 선택자 > class 선택자 > a 선택자
***같은 선택자끼리는 마지막에 적용된 코드대로 적용이 된다.
왜 이러한 우선순위가 다를 것일까? 포괄적인 태그 선택자보다 구체적인 태그 선택자의 우선순위가 더 높다.
id의 값은 단 한번만 등장해야 한다. 예를 들어 아까 쓰인 id인 active는 또 쓰일 수 없다는 것이다. 가장 구체적인 선택자이다.
class도 구체적인 선택자라고 할 수 있다.
하지만 헷갈린다 검색해보자.
'css selector' 검색
https://www.w3schools.com/cssref/css_selectors.asp
대충 뭔 뜻인지 이해가능할 것이다.
'HTML & CSS > 생활코딩 - CSS' 카테고리의 다른 글
| CSS 기초 개념 - 그리드 #05 (0) | 2020.09.26 |
|---|---|
| CSS 기초 개념 - 박스 모델 활용 #04 (0) | 2020.09.25 |
| CSS 기초 개념 - 박스 모델 #03 (0) | 2020.09.24 |
| CSS 기초 개념 - 기본 문법 #01 (0) | 2020.09.22 |
| CSS 기초 개념 - 탄생 배경 #00 (0) | 2020.09.21 |
