Duckey Kim

I am an amazing person.

[css]_1

3 minute read

CSS 문법

선택자 { 속성: 속성값; }
속성: 속성값; 이 형태를 이룬다.

속성과 값의 역할

property & value를 활용하여 검색된 상태에 css를 명령한다.

/* comment*/

주석처리 ctrl+/

selector {
    color: 속성값;
    width: 속성값;
}

이런 형태를 사용하는 것이 좋다.

<div> hello</div>
<span>hello</span>

div {   div라는 태그를 찾겠다 (선택자)
    color: red;   글자색 속성의 값을 red를 주었다.
    font-size: 20px; 글자의 크기를 20px 주었다.
    font-weight: bold; 글자의 두께는 두껍게

}

CSS 선언 방식

in-line방식

html의 전역속성인 style사용하여 html에 직접 작성한다.

<div style="color: red; font-size: 20px; font-weight: bold;">
hello</div>

선택자가 필요없는 방식이지만 굳이 선호할 필요는 없다.

내장 embeded 방식

style태그내에서 선택자를 설정한다.

<head>
    <style>
        div{
          color: red;
         font-size: 20px;
         font-weight: bold;
         }
    </style>
</head>
<body>
<div>hello</div>
</body>

HTML의 <link>를 이용하여 css를 적용한다.

<link rel="stylesheet" href="main.css">

@import방식

CSS에서 @import를 활용하여 외부css를 가져온다.
직렬연결이기때문에 사용시 주의해야한다.

@import url(".main2.css");

선택자(selector)

전체 선택자 (Universal Selector)

모든 요소를 선택한다. * 사용

* {
    color: red;
}

태그 선택자(Type Selector)

태그이름을 선택한다.

a { 
    color: red;
}

클래스 선택자 (Class Selector)

html의 class를 선택한다.

.a {
    color:red;
}

아이디 선택자 (Id Selector)

HTML의 id속성의 값을 찾는다.
단 id는 하나만 갖을 수 있기때문에 활용도가 좀 적다.

#a {
    color: red;
}

복합 선택자 (Combinator)

일치 선택자(Basic Combinator)

a.b 이 형태이면 a의 태그이면서 b라는 클래스를 찾는다.

자식 선택자(Child Combinator)

a>b a의 자식요소 b를 찾아라

ul>.orange { 
    ul태그를 찾고 그 아래에 있는 
    태그에서 orange class를 찾아라
}

후손 선택자(Descendant Combinator)

a b 띄어쓰기가 기호로 사용된다.
a안에 있는 모든 태그들중 b를 찾는다. 자식 요소도 후손 요소에 포함된다.

인접 형제 선택자 (adjacent Sibling Cobinator)

부모 요소를 공유하는 선택자.
특별한 선택자의 다음에 있는 형제요소를 선택한다.
a+b a를 찾은다음 b를 찾는다.

일반 형제 선택자(General Sibling Combinator)

부모요소를 공유하는 선택자
a-b a를 찾은다음 모든 b를 찾는다.

가상 클래스 선택자 (Pseudo-Classes Selectors)

: 기호를 사용한다.
이벤트가 일어날때 사용하는 선택자이다.
주로 Javascript를 사용한다.

hover

a:hover 마우스가 a에 올라가 있는 동안에만 css적용하겠다.
아래코드는 css를 함께보기위해 embeded로 작성되었다.

<style>
    .example{
        font-size: 20px;
        font-weight: bold;   a태그를 찾아서 css적용해라
    }

    .example:hover {
        font-size: 40px;     a태그를 찾고 마우스가 올라갔을때!
        color: red;
        transition: 0.1s;    색깔을 바꾸고 변화하는 시간은0.1초씨
    }
</style>
<body>
<a class="example" href="https://google.com">google.com</a>
</body>
google.com

처음에는 a태그에 클래스를 기입을 하지않앗다 </br> 그러다 보니 홈페이지에 있는 a태그에도 hover가 </br> 적용되어서 a태그에 class를 기입하였다.</br>

google.com에 마우스를 올리면 css가
변화하는 것을 볼 수 있다.

active

a:active a선택자가 마우스로 클릭되어질 동안 css적용된다.

<style>
    .box{
       width:200px;
       height:200px;
       background:red;
       transition:0.4s; 
    }
    transition 속성을 active에 입력하는 것이
    더 좋을 것이라고 생각하였지만 active 에 넣으면
    클릭을 했을때에만 transition 이 적용되기때문에
    마우스를 클릭,클릭을 하지 않았을때에도 똑같이 
    적용되어야 하기때문에 .box에 넣는 것이 더 
    효율적이다


    .box:active {
        width:400px;
    }
</style>
<body>
<div class="box"></div>
</body>

빨강색 상자를 클릭하면 가로의 크기가 늘어나고
클릭을 때면 가로크기가 원상태로 돌아가는 것을 볼 수 있다.

focus

a:focus a가 포커스 되었을때만 활용된다.
대화형콘텐츠에서 사용가능하다.
포커스란 웹페이에서 키보드를 눌렀을때 반응하는
위치를 말하는 것이다.
input img tabindex

<style>
    input {
       width:100px;
       outline: none;
       border: 1px solid lightgray;
       padding: 5px 10px;
       transition: 0.1s;
    }

    input:focus {
        border-color: red;
        width:200px;
    }
</style>
<body>
<input type="text">
</body>

흔히 알고있는 대화형컨텐츠인 input창에
커서가 생기면서 focus selector가 적용되는 것을 볼 수 있다.

child 선택자

a:xxx-child 이문법형태를 이룬다. 조상,부모가 필요하다.
여기서 중요해야할 것은 xxx-child가 맞는데 만약에
a태그가 아니라면 이 선택자는 선택될 수 없다.
문법을 볼때 오른쪽에서 왼쪽으로 보는 것이 더 도움이 된다. 아니면 xxx번째 를 선택하고 싶다면 :xxx-child를 써도 된다.
a:first-child

first child

a:first-child a중에서도 형제요소중 첫번째가 선택된다.

<style>
        .fruits0 li:first-child {
          color: red;
          .fruits0의 후손들중에서 li태그의 첫번째 형제요소를 선택해서
          css를 적용한다.
        }

</style>
<body>
 <ul class="fruits0">
    <li>딸기</li> <- fruits0의 후손들중에서 li의 맨처음이다
    <li>사과</li>
    <li>오렌지</li>

    <li>망고

    </li>
 </ul>
 </body>
  • 딸기
  • 사과
  • 오렌지
  • 망고

last-child

first-child와는 다르게 마지막 선택자를 고르겠다.
a:last-child a중에서도 마지막 a를 찾겠다.

nth child

a:nth-child a중에 n번째를 선택하겠다.0부터 시작한다.

<style>
      .fruits3 li:nth-child(n+2){

        color: red;
      }
    </style>
<body>
    <ul class="fruits3">
        <li>딸기</li>
        <li>사과</li>
        <li>오렌지</li>

        <li>망고

        </li>
    </ul>
</body>
  • 딸기
  • 사과
  • 오렌지
  • 망고

2번째부터 li태그에 css적용하겠다.

nth of type

a:nth-of-type(n) 의 형태를 띈다. 만약 a가 tag가 아닌 class일 경우 a가 포함된
태그를 찾아서 거기서 child들을 찾는다.

<style>
        .fruits1 {
            font-size: 20px;
        }

        .fruits1 .red:nth-of-type(1) {
            color: red;
            nth-of-type(n)을 활용할때는 .red처럼
            class를 쓰지말자. 같은 type의 태그를 찾는거기때문에
            red클래스가 쓰인 <li> 태그를 찾기때문이다.
        }
</style>
<body>
    <ul class="fruits1">
        <li>오렌지</li>
        <li class="red">딸기</li> .red클래스인 첫번째인 이구간을
                                  선택하고 싶지만 type같은 태그
                                  li를 선택하게된다. 그런데 그것이 .red클래스가
                                  아니라서 css가 적용되지 않는다.
        <li>망고</li>
        <li class="red">사과</li>

    </ul>  
</body>
  • 오렌지
  • 딸기
  • 망고
  • 사과

부정 선택자 (Negation Selector)

a:not(b) 형태를 띈다. b가 아닌 애들중에 a를 선택하겠다.

    <style>
        .fruits2 li:not(.strawberry){
            color:red;
        .fruits 클래스 후손이며
        .strawberry 클래스가 아닌 li태그들을 선택하겠다.
        }
    </style>
<body>    
    <ul class="fruits2">
        <li>오렌지</li>
        <li class="strawberry">딸기</li>
        <li>망고</li>
        <li>사과</li>
    </ul>
</body>
  • 오렌지
  • 딸기
  • 망고
  • 사과

Updated:

You May Also Enjoy

[spring]mybatissystemexception

less than 1 minute read

org.springframework.web.util.NestedServletException: Request processing failed; nested exception is org.mybatis.spring.MyBatisSystemException

[leetcode] 8_1281

less than 1 minute read

Leet Code 1281. Subtract the Product and Sum of Digits of an Integer