CSS 의사클래스(pseudo class), list, table, box-sizing, transform, transition, calc( ), media query, from태그

- 의사 클래스 -

CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있습니다

a:link  : 아직 방문하지 않은 요소의 상태

a:visited : 방문한 후의 상태

a:active : 클릭할 때의 상태

a:hover : 마우스가 올라갔을 때의 상태

 

 

◆ CSS List 

 

list - style - type : 마커 모양

                  - position : 마커 위치 

                  - image : 마커 이미지 

 

* 클래스 이름을 사용해 원하는 리스트만 가져오고 싶을 때 = ul.원하는 클래스 이름 (공백없이 바로 클래스 선택자 사용)

<ul class="launch">
        <li>sushi</li>
        <li>salad</li>
        <li>noodle</li>
    </ul>
    <ol class="frontend">
        <li>html</li>
        <li>css</li>
        <li>js</li>
    </ol>
    <ul class="korean">
        <li>가</li>
        <li>나</li>
        <li>다</li>
    </ul>
    <ol class="num">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ol>

ul.launch{ /* ul중 class이름이 launch인 요소 */
    background: rgb(135, 175, 210);
    padding: 20px;
    
}
ul.launch li{ /* ul중 class이름이 launch인 요소의 자손 중 li요소 */
    background-color: lightblue;
    margin: 10px;
    padding: 10px;
    color: blueviolet;
}

ol.frontend{
    background-color: antiquewhite;
    padding: 30px;
}
ol.frontend li{
    list-style-position: inside;
    background-color:rgb(185, 128, 128);
    list-style-position: outside;
    padding: 10px;
    margin: 0 40px;
}

 

◆ CSS Table

 

html 구조 = < table id = "table" >

                         < tr >

                             < th > 테이블 제목1 < /th >

                             ...

                         < /tr >

                          < tr >

                             < td > 행1의 셀1 < /td >

                             ...

                         < /tr >

#table{
    width: 100%;
    height: 400px;
    border-collapse: collapse;
}
#table th{ /*테이블 헤드*/
    background-color: cornflowerblue;
    color: white;
    border: solid black;
    padding: 15px;
    text-align: left;
}
#table td{
    border: solid;
    padding: 10px;
    vertical-align: bottom;
}
#table tr:nth-child(2n){ /*짝수번째 행에 스타일 적용*/
    background-color: aliceblue;
}
#table tr:hover{ /*짝수번째 행에 스타일 적용*/
    background-color: rgb(81, 151, 212);
}

 

◆ Box Sizing

 

우리는 요소의 실제 넓이와 높이를 아래와 같이 계산한다.

width + padding + border = actual width of an element
height + padding + border = actual height of an element

그런데 이렇게 하면 내가 설정했던 width, height 에 비해 요소가 커지게 된다. 이를 해결하기 위해 box-sizing을 사용한다.

* {
  box-sizing: border-box;
}

위와 같이 적용하면 설정해놓은 width와 height를 유지할 수 있다.

 

 

◆ Transform

• translate ( 50px, 100px ) → x축으로 50px, y축으로 100px만큼 이동
• rotate ( 20deg ) → 20도 회전
• scale ( 2, 3 ) → x축으로 2배 늘리고, y축으로 3배 늘림
• skew ( 20deg, 10deg ) → x축으로 20도 기울이고, y축으로 10도 기울임
• matrix ( 1, 0.3, 0.3, 1, 0, 0 ) → matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

 

◆ Transition 

css 속성 변화를 스무스하게, 설정한 시간안에 변화시켜준다. 높이, 넓이, transform변화에 적용할 수 있다.

#flexBox div:nth-child(3){
    width: 150px;
    height: 50px;
    background-color: blueviolet;
    align-self:center;
    flex-grow: 1;
    transform: skewX(30deg);
    /*높이 변화는 3초동안, transform 변화는 5초동안 진행한다*/
    transition: height 3s, transform 5s;
}
#flexBox div:nth-child(3):hover{
	/*마우스 포인터가 요소에 올라가면 높이를 200px로, x축으로 -30도 기울인다*/
    height: 200px;
    transform: skewX(-30deg);
}

 

 

◆  clac( ) 

CSS 속성의 값으로 계산식을 지정할 수 있습니다.

atribute를 가져와서 계산할 수도 있고, 웹페이지 넓이에 따라 글자크기를 변화시키고 싶을 때 유용하다.

h1 {
  font-size: calc(1.5rem + 3vw);
}

 

 

◆  media query (반응형 디자인을 위한)

/*최소 640px 이상부터 적용*/
@media screen and (min-width: 640px){
    ul.launch{
        background: pink;

    }
    ul.launch li{
        background-color:mediumorchid
    }
}

: 화면이 640px 이상이 되는 순간부터 해당 스타일이 적용된다

 

 

◆  Form 태그

 

label 태그와 input 태그를 같이 써준다.

라벨에 for=' ' input에 name=' '을 써서 둘을 명시적으로 연결하면 라벨을 눌렀을 때도 input으로 포커싱된다.

 

<form>
        <label for="calc">
            clac를 연습하기 위한 form태그입니다
        </label>
        <input name="calc"/>
</form>