CSS 나머지 기능, 선택자

목차

 

-label for(라벨의 역할), 체크박스

-선택자

-중복 id 중에 원하는 것만 선택하고 싶을 때.

-속성 선택자

-display:none;

-input박스 너비조정 가능한 이유

-display: none; 를 checked에만 적용하면?

-인접 접근자

-nth-child(숫자)

-transition: 0.35s

-메뉴 숨기기/ 보이기 (애니메이션 효과 주기)

-라벨 클릭하면 바뀌는 원리

-transform: translateY(-50%);

-position: fixed;

-clear: both;

-연습하는 법

 

 

라벨의 역할

 

label for=""

 

웹 접근성 ↑

(글자 클릭해도 눌림.)

input type="text" : 인풋박스

웹접근성 늘리려면?

 

    <input type="text" id="icon" >
    <label for="icon">

 

체크박스(온오프 스위치)도 인풋박스와 동일하다.( type만 다름)

 

 

/* <<항상 css 파일 연결 잘됐는지 확인 먼저 해야한다.>>*/

 

선택자

 

.  #  element name-body, div, a, ul, li...- > 등이 있다.

 

 

중복 id가 있으면 안되지만, 먹히긴한다.

중복 id 중에 원하는 것만 선택하고 싶을 때.

속성 선택자

input[id="id이름"]{}

input이라는 속성에서 id가 "id이름"인 것만 선택하겠다.

 

 

display:none;

 

엘리먼트만 안보일 뿐이지 실제로는 동작한다.

렌더만 안되는 것.

예시) 체크박스에 적용할 경우, 체크의 위치가 사라지면서 글자가 앞으로 땡겨진다.

 

input박스 너비조정

 

input[id="icon"]{
    width: 50px;
인라인인데 너비가 먹힘. 인풋"박스"이기 때문.

 

 

연속적으로 input을 적용하면?

input[id="icon"]:{
    width: 50px;

}
input[id="icon"]{
    width: 10px;

}

 

절차 지향형이라 뒤에꺼가 먹힌다.

 

 

응용>>

 

input[id="icon"]:checked{
    width: 50px;

}
input[id="icon"]{
    width: 10px;

}

--> 체크가 되면 너비가 50px, 안되어있으면 10px이다. 애니메이션 효과를 줄수있다.

 

(" : " 가 if랑 같은 거 인듯?)

 

 

input[id="icon"]:checked + label{

    background: red;
}

체크될때마다 백그라운드 레드 적용을 하겠다는 의미

 

display: none; 를 checked에만 적용하면?

check 됐을 때만 체크박스가 안보인다!!

체크 해제되면 보임

 

인접 접근자

 

input[id="id"] + label /* <- 인접 엘리먼트 네임*/

같은 선상에 있는 엘리먼트에게 스타일을 준다.

(참고로 라벨도 인라인 속성이다)

 

 

 

nth-child(숫자)

안에 있는 애들 중에 몇번째 있는 애들에게 스타일을 적용하겠다.

ex) input[id="id"] + label > span:nth-child(1)

 

의미: input 엘리먼트 중 id가 "id"인 속성 근처에 있는 label 엘리먼트 하위 태그 span 중 첫번째에게 스타일을 적용

 

 

 

transition: 0.35s;

움직이는 속도 (처리 속도): 0.35초 동안 발생하게 하라.

 

 

메뉴 숨기기/ 보이기 (애니메이션 효과 주기)

 

 

줄을 세개를 만드는 방법(메뉴모양)

 

1. 선을 그냥 세개를 긋고 위치를 잡아준다.

 

2. cursor: pointer;

커서가 손가락 모양으로 바뀌는것. 사람들에게 클릭이 된다는 걸 알려줘야함.

 

 

라벨 클릭하면 바뀌는 원리

1. 첫번재, 세번째 스판을 중앙으로 옮겨 선을 하나로 보이게 만듦.

2. 두 선은 x자로 위치를 바꿈

3. 중앙선은 없애버림.

4. X선 완성

 

 

라벨에는 relative (상위 엘리먼트)주고
span에는 absolute (하위 엘리먼트)준다. (label > span)

공식 :  랠러티브 안에 앱솔루트가 들어가면,  span이 라벨안에서만 논다.

위와 같은 포지션을 적용해줬을 때, top px이 0이라서 세개의 선이 한줄로 보이는 것이다.

가운데 선을 시작점을 선의 중간으로 줘야함.

: 선의 반만큼을 위로 땡겨준다.

 

 

transform: translateY(-50%);

 

 

을 사용한다.

 

자기 높이의 (Y축의) 50퍼센트(절반)을 올린다.
엘리먼트를 비틀거나 변형할 때 쓰는 함수

position: fixed;

카테고리가 따라다니는 것 같은 효과

left: -300px

브라우저 바깥으로 빠지면서 안보이게 됨.

 

clear: both;

 

상위 배열(left, right)속성을 초기화.

 

 

 

연습하는 법

 

 

1. 레이아웃을 빠르게 안정적이게 만들어라.

2. 어려운거 버리고 구현할만한 것만해라.

3. 큰 레이아웃이 쉽지 작은 것은 어렵다.

 

***디비컷*** 이라는 사이트를 이용해라.