.png)
💻 CSS
- Cascading Style Sheet의 약자이다.
- Cascade : 폭포수
- Rule 기반의 언어
🤔 왜 폭포수 라는 단어가 들어갈까?
- 스타일의 우선순위
h1{ color:red; ... ... ... color:black; }만일, <h1>이라는 태그의 스타일을 지정할 때, 너무 길어서 color을 먼저 쓴지 모르고 뒤에 또 쓴다면 뒤를 따른다.
- 스타일의 상속<ul> <li> <li> <li><ul> 에 스타일이 적용되어 있다면, <li>에 스타일을 적용하지 않아도 <ul>의 스타일이 <li>에게 상속된다.
🛠️ 선택자(Selector)
css의 구조는 이렇게 되어있는데 선택자에 대해 배워볼 것이다.
1.선택자 종류
① 타입 셀렉터
- 모든 타입에 적용이 된다.
h2{ color:purple; }② 아이디 셀렉터
지정된 id 하나에 적용된다.
html 파일<h1 id="test1">안녕하세요</h1>style.css
#test1{ color:purple; }③ 클래스 셀렉터
지정된 클래스 모두 적용된다.
html 파일<h1 class="test1">안녕하세요</h1> <h1>저는</h1> <h1 class="test1">000입니다.</h1>style.css
.test1{ color:purple; }안녕하세요 000입니다에만 스타일이 적용된다.
2. 속성 선택자
<a href="naver.com" target="_blank">style.css
a[target]{
color:purple;
}혹은 a[href="naver.com"]{ 속성 : 속성값; } 으로 사용이 가능하다.
a[href^=value]{
속성 : 속성값;
/* value로 시작하는 값을 찾아 style 적용 */
}
a[href$=value]{
속성 : 속성값;
/* value로 끝나는 값 찾아 style 적용 */
}
a[href*=value]{
속성 : 속성값;
/* value가 포함된 값을 찾아 style 적용 */
}3. 가상 클래스 선택자
selector : 조건{
속성 : 속성값;
}조건에 들어갈 수 있는 것은 어떤 것이 있을까?
- first-child, last-child, nth-child
- first-child와 같은 경우, 첫번째 색깔만 변경한다.
<ol title="movie List">
<li>주토피아</li>
<li class="movie">토이스토리</li>
<li class="movie">원더맨</li>
<li class="movie">스파이더맨</li>
</ol>하지만, 주토피아를 제외한 뒤를 class로 묶고,
.movie :first-child{
color: red;
}first-child 조건을 추가한다면 빨간색으로 변하지 않는다
→ 이유 : <ol>가 부모이기 떄문에 부모의 첫 번째 자식은 주토피아이기 때문에 두 번째인 토이스토리가 적용되지 않는 것이다.
이러한 문제점을 보완해주는 것이 아래다.
- first-of-type, last-of-type, nth-of-type
<body>
<section>
<div>toystory</div>
<p>zootopia</p>
<p>insideout</p>
</section>
</body>p태그의 2번째가 커지고 싶다면, nth-of-type() 을 통해 css를 아래와 같이 수정해주면 된다.
p:nth-of-type(2){
font-size: 20px;
}
- not()
selector:not(selector2){
속성 : 속성값
}selector에서 selector2가 제외된 것의 스타일이 변경된다.
4. 동적가상클래스선택자
- user의 동작에 따라 달라진다.
ex) 마우스를 버튼 위에 올리는 것
1) link, visited
- 링크에 관련된 선택자
a href 에서 링크를 설정해주면 위와 같이 클릭 전과 후의 색이 다르다.
a:link{
color: tomato;
}
a:visited{
color: yellow;
}
방문하기 전의 글자 색은 -> link 를 통해
방문 후의 글자 색은 -> visited를 이용하여 설정이 가능하다.
2) hover, active, focus
button:hover{
color: aquamarine;
}
button:active{
background-color: blue;
}
button:focus{
background-color: bisque;
}버튼에 마우스를 올렸을 때 -> hover
버튼을 마우스로 클릭하고 있을 때 -> active
집중이 될 때(ex. 댓글창에서 댓글을 입력할 때) -> focus
4. 선택자 결합
ul li{
color:red;
}만약 ul이 변한다면 li도 변하는데 li만 변하고 싶을 때 spacing을 사용해주면 된다.
같은 라인에 있는 것이 형제다.
4-1) 일반형제선택자결합
태그1 ~ 태그2{
color=red;
}태그 1과 태그2는 형제관계여야한다. 만약 태그1이 code라면
태그2는 형제 중 자신보다 아래 있는 것에서 선택가능해서 태그 2만 변경이 된다.
4-2) 인접형제선택자결합
태그1 + 태그2{
color=red;
}일반형제선택자결합과 달리 자신의 바로 아래있는 것만 스타일이 변경이된다. 만약
code ~ div{
color=red;
}가 된다면 code 바로 아래가 p태그이기 때문에 이 스타일은 적용이 되지 않는다.
* 그룹화
p{
color: purple;
}
h1{
color: purple;
}
p,h1{
color: purple;
}만약 p와 h1 태그가 같은 style 효과를 가진다면 그룹화를 통해 묶을 수 있다.
