거북이개발자

[카카오톡 클론코딩]CSS 기초 문법(3) 본문

Web/HTML & CSS

[카카오톡 클론코딩]CSS 기초 문법(3)

류정식 2021. 1. 5. 13:17

1. pseudo selectors (1)

pseudo selector을 사용하면 기존의 id, class보다 좀더 정밀하게 CSS를 적용할 수 있다.

여러 코드들이 있고 대표적인것 예시 들을 보자.

 

 

(1) first-child

div:first-child{
        background-color:tomato;
      }

위의 코드를 통해서 맨처음 div에만 적용이가능하다.

 

(2) last-child

div:last-child{
        background-color: seagreen;
      }

아까와 비슷하게 마지막 div에 적용가능하게 해준다.

 

(3) nth-child

span:nth-child(even){
        background-color: yellowgreen;
      }

이런식으로 원하는 규칙의 태그에만 적용도 가능하다. even, odd를 넣으면 된다.

 

 

2. pseudo selectors (2)

때론 <div>안의 <span>에만 CSS를 적용하고 싶을때가 있을것이다. 이러한 자세한 적용도 가능하다.

<body> 
            <div>up outside</div>
            <p>
              hello world and hello boy
              <span>inside</span>
            </p>
            <div>down outside</div>
 </body>

 

이런 평범한 코드가 있다고하자. 결과 값도 매우 평범하다.

 

그럼 이제부터 각각의 코드를 조종해보겠다.

 

 

 

(1) 태그안의 태그 선택

p span{
        color:red;
      }

이런식으로 하면 모든 span태그에 적용이아닌 <p>안의 모든 <span>에 적용가능하다.

(2) > 기호 이용시

 p > span{
        color:red;
      }

이런식으로 하면 모든 span태그에 적용이아닌 <p>안에서 바로오는 <span> 에 적용가능하다. 단 다른 태그가 중간에

끼면 적용이 안된다.

 

(3) + 기호 이용시

p + div{
        text-decoration: underline;
      }

+기호는 p태그 다음에 바로 나오는 div에 적용된다. 즉 p태그 안이 아닌 동격의 다음 태그에 적용된다.

 

(4)구체적 조건으로 적용

<form>
            <input type="text" placeholder="text1" required/>
            <input type="text"  placeholder="text2" required/>
            <input type="password" placeholder="password"/>
</form>

이런코드가 있을시 결과도 평범하다

이런 코드에서 구체적으로 어떤 어트리뷰트를 제한값으로해서 CSS을 적용할 수 있다.

 input:required{
        background-color: aqua;
      }
    
      input[placeholder="password"]{
        background-color: tomato;
      }

바로 이런식으 required속성만 적용하고, placeholder="password"인 태그에만 적용이 가능하다.

 

3. pseudo selectors (3)

특정 상황인 한정적인 상황에서만 CSS를 적용하고 싶을때가 있을것이다.

몇몇 대표적인 예시를 보여주겠다.

 

 

(1)activae

 button:active{
        background-color: tomato;
      }

이런식으로 active를 적용시 마우스로 누르고 있을시 적용이된다.

 

 

(2)hover

button:hover{
        background-color: tomato;
      }

이런식으로 hover를 적용시 마우스로 올리고 있을때 적용된다.

 

 

(3)focus

 button:focus{
        background-color: tomato;
      }

이런식으로 focus를 적용시 키보드로 적용될때 적용된다.

 

 

(4)visted

 a:visted{
        color: tomato;
      }

방문했다는 표시를 해준다.

 

 

4. root설정

때론 자신이 자주 사용하는 색상, 폰트등을 편리하게 자주사용하고 싶을 수 있다.

이때 root로 설정시 좀더 편리하다.

 

:root{
--main-color: #fcce00;
      }

이런식으로 #fcce00의 색상을 --main-color로 설정해두면 다음에 색상 사용시 #fcce00이 아닌

 --main-color을 입력해도 동일하게 작동한다.

저작자표시

'Web > HTML & CSS' 카테고리의 다른 글

[카카오톡 클론코딩]카카오톡 클론코딩 목표  (0) 2021.01.06
[카카오톡 클론코딩]CSS 고급 문법  (0) 2021.01.05
[카카오톡 클론코딩]CSS 기초 문법(2)  (0) 2021.01.05
[카카오톡 클론코딩]CSS 기초 문법(1)  (0) 2021.01.04
[카카오톡 클론코딩]HTML 기초 문법  (0) 2021.01.03
'Web/HTML & CSS' Related Articles more
Comments