1. 알아두면 좋을 선별자
선별자의 종류는 당연히 무궁무진하다.
그래서 당연히 필요한 것들은 그 때마다 찾아서 사용하는 것이 좋다.
하지만 주로 많이 사용하는 것들은 이 게시글에 남겨두려 한다.
아래의 사이트는 이런 선별자들의 종류들을 담고 있다.
https://www.w3schools.com/cssref/css_selectors.asp
CSS Selectors Reference
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
2. 스타일의 적용은 부모-자식 관계를 따져요
응?
갑자기?
부모 자식?
이란 생각이 들 수 있지만 이 개념은 CSS에서 아주 중요한 개념이다.
아래의 코드를 살펴보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>05_다양한selector.html</title>
<link rel="stylesheet" href="mystyle05.css">
</head>
<body>
<h3>다양한 Selecter 연습</h3>
<p>대한민국</p>
<div>
<p>오필승코리아</p>
</div>
<hr>
</body>
</html>부모-자식 관계라는 것은 태그의 상위 하위 관계를 뜻한다.
여기서 12행의 <p> 태그와 10행의 <p>태그를 보자.
12행의 <p> 태그의 부모 태그는 무엇일까? 11행의 <div> 태그이다.
10행의 <p> 태그의 부모 태그는 무엇일까? 7행의 <body> 태그이다.
부모 태그란 단순하게 위에 있는 태그가 아니라 더 큰 상위의 태그를 뜻한다.
(수학시간의 집합을 떠올리면 아마 이해가 쉽지 않을까?)
이 개념을 생각하며 아래 .css 파일의 코드를 봐보자.
@charset "UTF-8";
p { /*모든 <p>요소*/
font-family: 궁서체;
font-size: 40px;
font-style: italic;
font-weight: bold;
}
div p {/* <div> 안에 있는 모든 <p>요소 */
background-color: red;
}
이 코드 안에는 다양한 선별자 중 세 종류가 적혀져 있다.
그리고 이 코드가 적용될 때 부모-자식 관계에 따라 다르게 적용되는 것을 확인할 수 있다.
위의 코드 내용을 적용시키면 <p>로 묶여있는 대한민국과 오 필승 코리아의 글씨체가 조정이 되고 <div> 안에 들어있는 <p>의 값인 오필승코리아만 배경 색깔이 빨간색으로 바뀌는 것을 확인할 수 있다.
* 추가로 한번에 여러 가지 선별자를 동시에 지정할 수도 있다.
h2, p {
color: khaki;
}위의 코드는 <h2> 와 <p> 의 선별자의 글자 색깔을 동시에 바꾸어준다.
3. 부모-자식 관계를 더 명확하게 따지는 셀렉터
div>span>p {
text-decoration:line-through;
}
위의 사진과 코드를 보자.
div>span>p 가 눈에 띈다.
무슨 뜻일까?
여기서 > 는 부등호의 의미보단 부모에서 자식으로 경로를 찾아가라고 지정해주는 역할로 생각하면 된다.
그러니까 <div> 안에 있는 <span> 안에 있는 <p> 태그 안에 있는 텍스트에 스타일을 준 것이다.
4. 박스 모델에 스타일 적용해보기
박스 모델이란 html에서 흔히 쓰는 네모 상자를 뜻한다.
참고 : https://www.w3schools.com/css/css_boxmodel.asp
CSS Box Model
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
이 박스 모델은 아래와 같은 그림처럼 구성되어있다.
먼저 html 문서에 블럭을 하나 잡고 박스 모델을 하나 만들었다.
id는 mybox라고 붙였다.
<div id="mybox">Box Model</div>
그리고 스타일 문서에서는 mybox라는 아이디를 사용해서 스타일을 적용했다.
#mybox{ /*Box Model*/
width: 320px;
padding: 10px;
border: 5px solid black;
}
이것의 결과물은 아래와 같다.
5. 숨기기
html을 공부할 때 style=display: none;을 통하여 값은 있지만 출력하지 않게 하는 방법을 배웠다.
CSS의 스타일을 사용하여도 값을 출력하지 않게 하는 방법이 있다.
모든 출력하는 것을 0으로 만들어버리는 방법이다.
어느 코드의 class를 hide라고 정한 뒤 hide에 .css파일 안에서 아래와 같은 코드를 주었다.
.hide {
width: 0;
height: 0;
margin: 0;
padding: 0;
font-size: 0;
}
이렇게 주면 모든 출력값이 0이 되어버려서 결국 화면에는 출력되지 않는다.
필요할 때 사용할 수 있는 방법 중 하나로 알고 있으면 된다.
'⁂ CSS > : 기본 익히기' 카테고리의 다른 글
| [CSS] #2-3 Reset(리셋) (0) | 2022.08.01 |
|---|---|
| [CSS] #2-2 고급 선별자 사용해보기 (0) | 2022.08.01 |
| [CSS] #1-3 External CSS (0) | 2022.07.29 |
| [CSS] #1-2 Internal CSS (0) | 2022.07.29 |
| [CSS] #1-1 CSS 이해하기 그리고 Inline CSS (0) | 2022.07.29 |