[CSS] [1/11] 웹 퍼블리싱 끝장내기
모든 정보는 얄코 유튜브(새 창으로 열기)를 참고하였습니다.
1. CSS 적용 방법과 선택자들
css를 적용하는 방법이 3가지가 있다.
인라인 스타일 : body 내부 태그에 직접 스타일을 주는 방식이다. 확장성도 별로고 수정도 번거롭다. 쓰지 말자
내부 스타일 시트 : head에 <style>을 만들어 적용하는 방식이다. html파일에 들어가 코드가 길어진다는 단점이 있다. 재활용도 번거롭다. 짧은 문서에만 사용하자.
링킹 스타일 시트 : 파일을 분리해서 확장성에 좋다. 대부분 이 방법을 사용한다. 지금부터 이걸 사용할 것이다.
style.css 파일을 만들어서 <head> 안에 <link rel="stylesheet" href="style.css"> 작성해 주자.
같은 폴더 내에 있는 style.css를 꾸미는 용도로 사용한다는 뜻이다.
1.1 기본 & 그룹 선택자
/* 모든 요소 선택 */
* {
font-weight: bold;
color: darkorange;
}css파일 형태이다. 중괄호 앞에 어디에 쓰일지 선택하는데 * 은 모든 요소를 선택한다는 뜻이다.
/* 모든 요소 선택 */
* {
font-weight: bold;
color: darkorange;
}
/* 같은 선택자의 경우 뒤에 오는 것이 우선순위 높음 */
* {
color: plum;
}같은 선택자에 같은 값을 설정하면 아래에 설정한 값이 우선으로 설정된다.
/* 모든 요소 선택 */
* {
font-weight: bold;
color: darkorange;
}
/* 태그 선택자 */
p {
color: olivedrab;
}앞에 p를 적으면 <p> 태그에 달린 값에 적용된다.
위에 모든 컬러값을 설정했지만 p태그로 지정해 둬서
우선순위를 따져 p태그에 담긴 컬러가 olivedrab으로 설정된다.
<p>
p 요소
</p>
<p class="blue">
p 요소, class는 blue
</p>/* class 선택자 */
/* 태그보다 우선순위 높음 */
/* 페이지상의 여러 요소가 같은 class를 가질 수 있음 */
.blue {
color: lightblue;
}<p> 태그에 class를 설정해 두면 .class이름 으로 더 정확하게 설정할 수 있다.
우선순위도 <p> 태그 전체로 설정한 것보다 높다.
<p class="blue dark">
p 요소, class는 blue와 dark
</p>html에서 class를 다중으로 설정할 수 있다. 띄어쓰기로 나누어진다.
.blue.dark {
color: mediumblue;
}
p.blue.dark {
color: darkblue;
}css에서 blue클래스이면서 dark클래스인걸 적용할 땐 점으로 이어 붙인다
점 앞에 태그(p)를 지정해서 더 정확하게 설정 가능하다.
<p id="red">
p 요소, class는 blue, id는 red
</p>/* id 선택자 */
/* class보다 우선순위 높음 */
/* id는 페이지상에서 요소마다 고유해야 함 */
#red {
color: tomato;
}제일 우선도가 높은 id 선택자이다. id가 하나밖에 존재하지 않아 무조건 적용된다.
#으로 검색한다.
/* 그룹 선택자 */
span, .dark, #red {
text-decoration: underline;
}쉼표로 여러 개의 값을 한 번에 설정할 수 있다.
1.2 결합자와 가상 클래스
<ul class="outer">
<li>육류</li>
<li>채소</li>
<li>유제품</li>
<li>과일
<ul>
<li>사과</li>
<li>포도</li>
<li>딸기</li>
<li>키위</li>
</ul>
</li>
</ul>ul리스트에 클래스를 주었다.
/* 자손 결합자 */
.outer li {
color: olivedrab;
}모든 자손 li가 올리브색이 된다.
/* 자식(1촌 자손) 결합자 */
.outer > li {
color: dodgerblue;
}꺽쇠 괄호를 두면 1촌 자식만 적용된다.
.outer > li li {
text-decoration: underline;
}자손(li)의 자손(li)들만 밑줄 적용시킨다.
<ol>
<li>한놈</li>
<li>두시기</li>
<li class="starter">석삼</li>
<li>너구리</li>
<li>다섯놈</li>
<li>육개장</li>
<li>칠푼이</li>
<li>팔보채</li>
<li>구공탄</li>
</ol>
ol리스트 안 3번째 li에 starter클래스를 주었다.
/* 뒤따르는 모든 동생들 결합자 */
.starter ~ li {
font-style: italic;
}~은 뒤에 있는 모든 걸 뜻한다. starter클래스 뒤에 모든 li들이 기울어진다.
/* 뒤따르는 바로 다음 동생 결합자 */
.starter + li {
font-weight: bold;
}+는 뒤에 있는 하나만 적용시킨다.
/* 첫 번째, 마지막 요소 가상 클래스 */
ol li:first-child,
ol li:last-child {
color: yellowgreen;
}ol 안에 li 첫 번째, 마지막 값만 컬러 주는 방법이다.
/* ~가 아닌 요소 가상 클래스 */
.outer > li:not(:last-child) {
text-decoration: line-through;
}outer클래스 li 중에 마지막줄이 아닌 걸 취소선 긋는다.
ul:not(.outer) li {
font-weight: bold;
}ul 중에서 outer가 아닌 li들을 굵게 표시한다.
/* ~번째 요소 가상 클래스 */
/* #, #n, #n+#, odd, even 등 시도해보기 */
ol li:nth-child(5) {
font-weight: bold;
color: deeppink;
}ol의 li 중 5번째만 설정해 준다.
만약 숫자 뒤에 n 붙이면 n번째마다 적용되고,
#n+숫자 적으면 적은 숫자만큼 건너뛰고 #n번 반복한다.
ol li:nth-child(2n+3) /* 으로 입력한 모습 */
마지막으로 마우스가 올라갔을 때 반응하는 클래스이다. :hover을 사용한다.
/* 마우스오버 가상 클래스 */
li:hover {
font-weight: bold;
color: blue;
}
글자색을 파란색으로 변하게 하는데, 아까 위에 핑크색은 우선순위가 더 높아서 적용이 안된다.
쉼표로 같이 적용시켜보자.
li:hover ,ol li:nth-child(5):hover{
font-weight: bold;
color: blue;
}