정신과 시간의 방

1.CSS 적용방법

(1)인라인 스타일 (inline style)

    <b style="color: tomato;">

태그 안에 css 구문을 적어넣는 스타일

> 재사용이 불가하고, HTML과 CSS가 분리되지 않기에 비추

(2) 내부 스타일 시트 (internal style sheet)

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="./style.css">

  <style>
    .style-1 {
      color: olivedrab;
    }
  </style>

</head>

<b class="style-1">
<!--위 head에 적힌 것을 가져오는 것임-->

HTML 페이지 내부 Head 태그 안에 style 태그를 두고 그 안에 CSS 코드 작성하는 방식

> 재사용이 가능하나, CSS 코드가 많아질수록, HTML 작성하기가 복잡해짐.

(3) 링킹 스타일 시트 (linking style sheet)

 <!--head의 title 다음 부분에 적어넣음-->
 <!--href 뒤엔 참조할 CSS파일의 상대주소-->
 <link rel="stylesheet" href="./style.css">

외부 CSS 파일과 HTML 문서를 연결하는 것

CSS와 HTML이 분리 되어서 가독성 좋고, 하나의 CSS 파일을 여러 HTML 문서에서 참조할 수 있으므로 편함.

2. 선택자들

(0). 특징

* 똑같은 선택자에 관한 것일 경우, 뒤에 오는 것이 우선순위가 높다.

* 단일 선택자라면 Id > Class > Tag 순으로 우선순위가 높다.

* 선택자는 구체적일수록, 우선순위가 높다.

(1) Tag 선택자

* 형태: Tag이름 { }

p {
  color: olivedrab;
}

/* p태그는 전부 올리버랩 색깔로 바꾸겠다. */

  <p>
    p 요소
  </p>

(2) Class 선택자

* 형태: .클래스이름 { }

.blue {
  color: lightblue;
}

/*blue란 이름을 가진 모든 클래스에 적용*/

<b class="blue"> 
	b 요소, class는 blue 
</b>


<p class="blue">
    p 요소, class는 blue
</p>

<!--둘 다 글 색깔이 파래짐.-->

(3) Id 선택자

* 형태: #id이름 { }

#red {
  color: tomato;
}

  <p id="red">
    p 요소,id는 red
  </p>
  
  
  <!--id는 페이지 내에서 요소마다 고유해야 한다.-->

(4) 모든 요소 선택

* 형태: *{ }

* {
  font-weight: bold;
  color: darkorange;
}

(5) 다른 선택자에 겹겹으로 이어 붙이는 경우 (A이면서 B)

/* 선택자는 구체적일수록 우선순위 높음 */

/* p태그 이면서 blue라는 이름의 클래스를 가지는 것 (안 띄우고 적음) */
p.blue {
  color: slateblue;
}

/*한 요소가 blue 클래스, dark 클래스 둘 다 가지는 것*/
.blue.dark {
  color: mediumblue;
}

/*p 태그 이면서 blue 클래스와  dark 클래스 둘 다 가지는 것*/
p.blue.dark {
  color: darkblue;
}

(6) 그룹 선택자 (A와 B)

* 형태: 요소, 요소, 요소 { }

(여러 요소에 한번에 적용)

span, .dark, #red {
  text-decoration: underline;
}

(7) 자식 결합자만 골라서 CSS문 적용

a. 특정 클래스 밑의 모든 자손 결합자들에 적용

(클래스와 자손 사이에 Space bar가 있음을 명심하자.)

.outer li {
	color: olivedrab;
}

/* 둘 사이에 spacebar를 쓰면 outer 안 쪽에 있는  모든 자손들을 말한다. */

b. 특정 클래스 밑의 자식(1촌 자손) 결합자에만 적용

/* 자식(1촌 자손) 결합자 */
.outer > li {
	color: dodgerblue;
}

** 자식 클래스의 모든 자손에게만 밑줄 긋겠다면? (손주 부터)

.outer > li li {
	text-decoration: underline;
}

/* 위에서 배운 두 개를 혼용*/

(8) 형제 결합자(같은 level)사이 선택 적용

a. starter 클래스 쓴 태그 이후 부터 같은 레벨의 태그에 전부 italic 폰트 적용

.starter ~ li {
	font-style: italic;
}

	<ol>
		<li>한놈</li>
		<li>두시기</li>
		<li class="starter">석삼</li>
		<li>너구리</li>
		<li>다섯놈</li>
		<li>육개장</li>
		<li>칠푼이</li>
		<li>팔보채</li>
		<li>구공탄</li>
	</ol>

b. 바로 뒤따르는 동생 결합자에만 적용

.starter + li {
	font-weight: bold;
}

/*석삼과 너구리에만 적용*/

(9) 가상 클래스

: 클래스가 따로 안 쓰인 곳에도 특정 효과 적용하고 싶을 때 쓰임. CSS 내의 함수 같은 것을 이용하는 것.

/* ~번째 요소 가상 클래스 */
/* nth-chile(~): ~번째 요소를 표현 */
/* #, #n, #n+#, odd, even 등 시도해보기 (#은 숫자를 의미함) */
ol li:nth-child(even) {
	font-weight: bold;
	color: deeppink;
}


/* 마우스오버 가상 클래스 */
/* 마우스가 올라간 상태를 의미 */
li:hover,
ol li:nth-child(even):hover {
	font-weight: bold;
	color: blue;
}

/*짝수에 대해 다시 재정의한 이유는 짝수만 딥핑크한다는 것이 더 구체적이어서 우선적용 되버리기 
	때문에, 더 구체적으로 써서 우선순위를 높이는 것.*/

	<ol>
		<li>한놈</li>
		<li>두시기</li>
		<li class="starter">석삼</li>
		<li>너구리</li>
		<li>다섯놈</li>
		<li>육개장</li>
		<li>칠푼이</li>
		<li>팔보채</li>
		<li>구공탄</li>
	</ol>
    
    <!--짝수마다 딥 핑크 적용, 모든 li은 마우스 올리면 파란색으로 변함-->

3. 스스로 해보기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .style1 {
      color:darksalmon;
    }
  </style>

  <link rel="stylesheet" href="./pratice.css">
</head>
<body>

  <strong class="title"> 고양이 소리</strong>
  
  <br><br>

  <b>히트다 히트</b>

  <p class="style1">
    냥 냥 냥 냥 냥 냥
  </p>

  <strong class="title"> 소 소리</strong>

  <br>

  <b id="cow">
    음메~
  </b>

  <br>

  <u class="bird"> 
    짹 짹
  </u>

  <br>

  <u class="raven">
    까악 까악
  </u>

  <br>

  <u class="bird raven">
        짹 짹 까악 까악
  </u>

<br>

<ul class="football">
  <li><strong>주 전 선 수</strong></li>
  <li>손흥민</li>
  <li>황희찬</li>
  <li>이재성</li>
  <li class="defender">김민재</li>
  <li>김영권</li>
  <li>권경원</li>
  <li>이강인</li>
  <li>나상호</li>
  <li>정우영</li>
  <li>김진수</li>
  <li>후보선수
    <ul>
    <li>오현규</li>
    <li>황의조</li>
    <li>조규성</li>
    </ul>
  </li>
</ul>

<ol>
  <li>캔드릭 라마</li>
  <li>드레이크</li>
  <li>릴 웨인</li>
  <li>릴 야티</li>
  <li>제이콜</li>
</ol>
  
</body>
</html>

/*0. 내부 스타일 시트, 링킹 스타일 시트
  1. 태그 선택자, 클래스 선택자, 아이디 선택자
  2. 모든 요소 선택, 다른 선택자 겹겹으로 선택, 그룹 선택자
  3. 자손 결합자에 모두 적용, 자식 결합자에만 적용
  4. 형제 쭉 적용, 바로 밑 동생까지만 적용
  5. 요소 골라서 적용, 마우스 대면 색깔 바뀌기*/

  b {
    color: brown;
  }
  
  .title {
    color:darkgoldenrod;
  }

  #cow {
    color:chartreuse;
  }

  u.bird{
    color: lavender;
  }

  u.raven{
    color: aqua;
  }


  u.bird.raven{
    color: grey;
  }

  #cow, .bird, p {
    color:black;
  }

  .football li {
    color: red;
  }

  .football > li li  {
    color: purple;
  }

.defender ~ li {
  color: blue;
}

.defender + li{
  font-weight: bold;
}

ol li:nth-child(even){
  color: teal;
}

ol li:nth-child(odd){
  color: yellowgreen;
}

ul li:hover, ol li:hover, ol li:nth-child(even):hover, ol li:nth-child(odd):hover{
  font-weight: 800;
  color: aqua;
}

저작자표시

[HTML] CSS 적용 방법과 선택자들