6.CSS-2

html에서 <!--   -->가 주석이였다면

css에서는 /*   */ 가 주석이다.

 

div태그는 블록 영역이 설정되고 자동으로 줄바꿈된다.

span태그는 인라인 요소들을 하나로 묶을 때 사용된다. 줄바꿈x

 

 

css를 적용하는 방법에는 세 가지 방법이 있다.

1. 인라인 스타일(inline style) : html 태그마다 style 속성으로 css 코드를 적용하는 방법이다.

여러 요소들에 공통 속성을 재사용하여 부여할 수 없으며, html 코드와 css 코드가

 분리되어 있지않기 때문에 특별한 경우 빼고 사용하지 않는다.

                                                 

 추론 : 일일히 속성으로 적용하기에는 길이도 길어지고 일괄적으로 수정하기 어려울 것이다. 

 

2. 내부 스타일 시트(internal style sheet) : head 태그 안에 style 태그를 두고 그 안에 css코드를 작성하는 방식.                    html과 css의 전체 코드량이 많지 않고 css가 해당 html  문서에만 적용될 경우

유용하게 사용될 수 있다.

 

3. 링킹 스타일 시트(linking style sheet) : 외부의 css 파일을 html 문서에 연결하는 방법이다.

HTML과 CSS의 코드가 분리되고 CSS 코드를 여러 HTML 파일에서 공통으로 사용할 수 있으므로

가장 널리 사용되는 방식이다.

 

--------------------------------------------------------------------------------------------------------------

 

css 적용시 같은 선택자의 경우, 뒤에 오는 것이 우선순위가 높다.

 

태그 선택을 할 때의 예시 : 모든 <p> 태그에 css적용하고 싶으면

                                           p { }

 

class 선택자는 태그보다 우선순위가 높고, 페이지상의 여러 요소가 같은 class를 가질 수 있다.

class 선택할 때 예시(class="blue") : .blue{ }      

 

id 선택자는 같은 id는 단 한개만 존재해야한다.

id 선택자 예시 (id="red") : #id{ }

 

--------------------------------------------------------------------------------------------------------------

 

기본&그룹 선택자 css코드

/*모든 요소 선택*/   , /**/는 주석!

같은 선택자인 경우 뒤에 오는 것이 우선 순위가 높다.

*{ }

 

/*태그 선택자*/

 p {}     모든 p태그에 적용한다.

 

/*class선택자*/

태그보다 우선 순위 높음.

페이지상의 여러 요소가 같은 class를 가질 수 있음.

.blue {}          blue 클래스를 가진 모든 태그에 적용한다.

 

다른 선택자에 이어붙일 수 있다.(태그,클래스 등)

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

ex)  p.blue {color:red;}   p태그 안에 있는 모든 blue 클래스들은 red 색상이다.

.blue.dark{color:blue;}   모든 blue 클래스와 dark 클래스들은 blue 색상이다.

p.blue.dark{color:black;}  p태그 안에 있는 모든 blue 클래스와 dark 클래스들은 black 색상이다.

 

주의. html 태그에서 2개의 class를 지정할 때 

<p class= "blue dark"> 띄어쓰기를 해서 지정한다. 

"blue" 클래스와 "dark" 클래스를 지정했다는 코드. "blue dark" 클래스가 아님.

 

/*id 선택자*/

class보다 우선순위가 높고, 페이지상에서 요소마다 고유해야한다.

#red {}

 

/*그룹 선택자*/ 

span, .dark, #red {}  쉼표로 여러 그룹을 선택할 수 있다.

 

 

------------------------------------------------------------------------------------------------------------

결합자와 가상 클래스

/*자손 결합자*/

.outer li {}    outer클래스 안에 있는 모든 li 태그에 적용한다.

<ul class="outer"> 
   <li>한자</li>
   <li>영어</li>
   <li>숫자
       <ul>
          <li>1</li>           
          <li>2</li>          
       </ul>
   </li>
</ul>

 

 

/*자식(1촌 자손) 결합자*/
.outer > li {}    outer클래스 안에 있는 1촌 자손인 li 태그에만 적용한다.

<ul class="outer"> 
   <li>한자</li>
   <li>영어</li>
   <li>숫자
       <ul>
          <li>1</li>           
          <li>2</li>          
       </ul>
   </li>
</ul>

 

 

.outer > li li {}  outer클래스 안에 있는 li 태그의 자손에만 태그에만 적용한다.

<ul class="outer"> 
   <li>한자</li>
   <li>영어</li>
   <li>숫자
       <ul>
          <li>1</li>           
          <li>2</li>          
       </ul>
   </li>
</ul>

 

 

/*뒤따르는 모든 동생들 결합자*/
.starter ~ li {}     starter클래스와 같은 위치? 등급에 있는 li 태그에만 적용한다.

ex)    <ol>

            <li> 1 </li>

            <li class="starter"> 2 </li>
            <li> 3 </li>

            <li> 4 </li>
         </ol>

 

 

/*뒤따르는 바로 다음 동생 결합자*/
.starter + li {}      starter클래스 바로 다음에 있는같은 등급의 li 태그에만 적용한다

ex)    <ol>
            <li> 1 </li>
            <li class="starter"> 2 </li>
            <li> 3 </li>
            <li> 4 </li>
         </ol>

 

 

/*첫 번째, 마지막 요소 가상 클래스*/
ol li:first-child,           쉼표로 여러개 선택.
ol li:last-child {}

 

<ol>

   <li>1</li>

   <li>2</li>

   <li>3</li>

</ol>

 

 

/*~가 아닌 요소 가상 클래스*/
.outer > li:not(:last-child) {}            outer클래스의 직계 자손중 li 태그중에 마지막 자손을 제외.

<ul class="outer"> 
   <li>한자</li>
   <li>영어</li>
   <li>숫자                <마지막 자손을 제외.
       <ul>
          <li>1</li>           
          <li>2</li>          
       </ul>
   </li>
</ul>

 

ul:not(.outer) li {}           ul 태그에서 outer 클래스가 아닌 ul 태그의 li들.

 

<ul class="outer"> 
   <li>한자</li>
   <li>영어</li>
   <li>숫자
       <ul>
          <li>1</li>           
          <li>2</li>          
       </ul>
   </li>
</ul>

 

추론 : 가장 먼저 쓰인 최상위 ul 태그 에다가 outer라는 클래스로 묶었지만

그 자손들인 ul태그들은 outer 클래스가 아닌것이고

그렇기 때문에 not(.outer) 를 쓰는 것이다?

그래서 not(.outer)를 쓰지 않고 .outer{} 를 입력하면 전체가 바뀐다.

전체를 outer로 묶었지만 그 안에 있는 요소들은 outer가 아닌? 것이다

 

/*~번째 요소 가상 클래스*/
/*#, #n, #n+#, odd(홀수), even(짝수) 등 시도해보기*/

ol li:nth-child(3) {}         nth는 n번째를 뜻한다. 즉 ol 태그의 li 태그 중 3번 째 자손.

<ol> 
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
</ol>

 

ol li:nth-child(2n) {}     2n은 2의 배수를 뜻한다. 

<ol> 
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
</ol>

 

ol li:nth-child(2n+2) {}     2의 배수 +2    

<ol> 
   <li>1</li>
   <li>2</li>           n이 0일 때 0+2
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
</ol>

 

ol li:nth-child(odd) {}     odd는 홀수를 뜻함.

<ol> 
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
</ol>

 

ol li:nth-child(even) {}     even는 짝수를 뜻함.

<ol> 
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
</ol>

 

/*마우스오버 가상 클래스*/    마우스가 올라간 li 태그에 적용.

                                               만약 적용이 안되면 구체적으로 적용해준다.
li:hover {}

 

 

가상 셀렉터에는 

hover, active, focus, visited가 있다

 

:hover 를 이용하면 마우스가 해당 요소 위에 있을 때 요소의 스타일을 변경할 수 있다.

쉽게 말하면 마우스를 클릭 안 하고 대고만 있어도 스타일이 변한다.

:active 를 이용하면 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지의 요소 스타일을 변경할 수 있다

:focus 를 이용하면 마우스가 해당 요소를 클릭하면 요소 스타일을 변경할 수 있다. 탭키도 가능

:visited 는 이미 방문한 링크를 선택해 스타일을 줄 때 사용된다.

 

추론 :마우스 클릭 서순을 생각해보면

visited가 제일 우선 순위를 가지고 그 다음 hover, active, focus 순으로 우선순위를 가진다.