HTML/CSS 정리05

지현·2022년 5월 10일

HTML/CSS

목록 보기

6/12

네모칸에 중앙 맞추기 (center)

가로는 text-align으로 맞춰주고 세로는 line-height와 padding값, height값을 조절해서 맞춘다.

box-sizing

box sizing :
content-box – width 속성 값을 콘텐츠 영역 너비값으로 사용(기본값)
border-box – width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용.

블록요소 중앙 맞추기 (텍스트 얼라인으로 못함)

#box1{padding-top: 50px; box-sizing: border-box;}
#box1>div{margin: auto; text-align: center; line-height: 50px;}
->box-sizing 이용

#box2{position: relative;}
#box2>div{position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px;}
-> box2에 relative 맞추고 왼/위 넓이 절반씩 빼주기

#box3{position: relative;}
#box3>div{position: absolute; left: 0; top: 0;right: 0;bottom: 0; margin: auto;}
->box3에 relative 맞추고 상하좌우 0씩 주고 마진오토

메뉴바

메뉴바 아래에 또 다른 메뉴바 만들기
ul 안에 ul 만듦 (depth를 늘려가기)

 <div class="header">
        <ul class="gnb">
            <li class="depth1"><a href="#">회사소개</a>
                <ul class="depth2">
                    <li><a href="#">회사개요</a></li>

요런 느낌

position absolute 하면 원래 위치에서 떨어져나오는 것이기 때문에 width값 종속 안되니까 따로 설정해줘야해

네비게이션바 만들기 中

위치에 hover되면 depth2나오게 하기
.gnb .depth1:hover>.depth2{display: block;}

Transform

2차원 (X,Y축)
3차원 (X,Y,Z축)
거의 2차원만씀

transform과 변형함수

translate(x,y) 지정한 크기만큼 x축과 y축으로 이동
scale(x,y) 지정한 크기만큼 x,y 축으로 확대
rotate(각도deg) 지정한 각도만큼 회전합니다.
skew(x,y) 지정한 각도만큼 x,y축으로 왜곡

transform 은 형태의 변형
transform-origin 변형 기준점

transition

-property : 대상을 설정(대상 속성 지정) (n,n)
-duration : 진행 시간을 설정 (ns,ns)
-timing-funtion : 속도 곡선 설정 (가속/감속도)
linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier
-delay : 지연 시간 설정(트랜지션 시작 전 지연 시간) (ns,ns)

border-radius 박스 모서리 둥글게 만들기

border-radius: n n n n
왼쪽위부터 시계 방향으로 돌아감

border-radius: 50%;overflow: hidden;}  <이미지 넘치면 overflow:hidden 하기
border-radius: 50px 30px;}
border-radius: 80px 80px 0 0;}
border-radius: 100px 50px 100px;}
border-radius: 50%; border-bottom-right-radius: 20px;}