[220509 / Day 5] CSS 탭 만들어보기, transform, transition, box-shadow

1. 글자나 공간을 가운데 정렬하기

box-sizing 328p

boder: border+padding 값

 

블록 요소들은 text-align 으로 안 맞춰짐

 

2. tab 만들어보기

겹치게 하려면 position:absolute 해줘야함

보통 dl dt 많이 쓰지만 간단하면 div 로

이렇게

<div class="tab-box">

        <dl class="tab">

            <dt>1</dt>

            <dd><img src="img/tab1/1.jpg" alt=""></dd>

            <dt>2</dt>

            <dd><img src="img/tab1/2.jpg" alt=""></dd>

            <dt>3</dt>

            <dd><img src="img/tab1/3.jpg" alt=""></dd>

        </dl>

    </div>

이미지는 인라인이지만 예외로 넓이값 지정가능

 

 

3. 02.html 파일 필기

.depth1>a 이건 자식요소 a 를 부르겠다는 뜻

.depth2 a 이건 하위요소 a 를 부르겠다는 뜻

 

.depth1:hover>a 이렇게 해야 하위요소에 커서를 대도 전체로 선택됨

.depth2 a:hover 이건 li 와 크기 똑같기 때문에 이렇게 li 에 적용해도 됨

 

특정 넓이가 들어가야 하면 하위에 꼭 넓이 부여해야함 200px

 

.depth1:hover>.depth2{display: block;} 뎁2를 기본 none으로 하고 뎁1에 호버하면 뎁2를 블록처리한다는 뜻

 

4. 03.html 파일 필기

글자수가 많이 다른 탭을 만들면 마진을 주면 공간의 여백이 달라서 맞지 않음

 

04.html 스타일 안잡힘 다시!

같은 자리에 나타나게 하려면 gnb에 포지션 렐러티브

 

하위 메뉴에 포지션 엡솔루트를 주면 겹쳐짐 그래서 전체 메뉴에서 포지션 렐러티브를 줘야 함

.gnb .depth1 에 position: relative 를 넣어도 되지만 그러면 각 메뉴 기준으로 위치가 잡히기 때문에

.gnb 에 position: relative 를 잡아야 전체 메뉴 기준으로 위치가 잡힘

 

5. transform, transition

transform 449p : 값을 줘서 이미지 같은 것을 크기 조절, 위치 조절 등

변하는 것

 

transition

.box2:hover>div{transform: translate(50px,50px); transition-property: transform; transition-duration: 1s;}

=> 1초 기다렸다가 움직이라는 뜻

변하는 중간단계를 보여주는 것, 속성명을 지정해야 함 transition-property: background; 대상을 지정해줘야 원하는대로 변함 대상도 지정하고 각 듀플리케이트나 딜레이 등의 값도 지정해주어야 함 하나 지정하면 두 값 전체가 변하고, 두 값을 1s, 2s 이렇게 지정하면 각각 속성값이 적용됨

예: transition-property: background width; transition-duration: 1s; => 이렇게 하면

timing-function 해주면 진행상황과 타임에 따라 변하는 과정을 보여줌 cubic-bezier(.17,.67,.83,.67) 라는 걸 적용하면 통통 튀는 것을 연출 가능

박스보다 컨텐츠 넘어가는 걸 안보이게 하고 싶으면 overflow: hidden; 설정해야 함

transition: all을 하거나 property 값을 지정하지 않거나 all을 지정하지 않으면 요소의 모든 속성이 트렌지션 대상이 됨

 

transform-origin

변형 기준점은 원래 중간, 이 속성은 기준점 설정하는 것

 

6. border-radius 모서리를 둥글게

div:nth-of-type(4) {border-radius: 80px 80px 0 0}

=> 왼쪽 상단부터 수치 잡음

div:nth-of-type(3) {border-radius: 50px 30px;}

=> 대각선으로 왼쪽 상단, 오른쪽 하단이 50px, 오른쪽 상단, 왼쪽 하단이 30px

전체 넓이의 반이 반지름? / 이미지 파일은 무조건 overflow:hidden 처리해야 둥글게 보임

 

 

7. 그림자 처리 box-shadow 312p

속성은 따로 쓰지 않고 값만 나열하면 됨

번짐정도는 안해도 상관 없음

inset 은 안쪽 기본은 outset

색상은 rgba 많이 씀

텍스트는 inset 적용 안됨

 

 

다시 확인할 것: 이미지 멀티로 깔기?????? 270p 다시 확인, background 속성값 넣는 법 확인