본문 바로가기

FrontEnd/CSS12

CSS변환 변환 회전이나 원근법 기울임 등 전환보다 더 디테일한 애니매이션 효과를 준다. 2D 변환과 3D 변환 함수가 있다. 2D변환 함수 함 수 명 설 명 단 위 translate(x,y) x축, y축 동시 이동 px translateX(x) x축 이동 trasnlateY(y) y축 이동 scale(x, y) x, y 크기 변경 배수 scaleX(x) x축 scaleY(y) y축 rotate(degree) 회전 deg skew(x, y) x, y축 기울임 skewX(x) x축 기울임 skewY(y) y축 기울임 matrix(n,n,n,n,n,n) 2차원 변환 효과 3D변환 함수 함 수 명 설 명 단 위 translateZ(z) z축 이동 px translate3d(x, y, z) x, y, z축 이동 scale.. 2022. 9. 11.
CSS전환 전환(transition) 요소를 다른 요소로 변환시키는 것 전환 속성 속 성 설 명 값 transition-property 요소의 전환(시작과 끝)효과를 지정하는 단축 속성 all : 모든 속성에 적용 속성 이름 : 전환효과를 사용할 속성 이름 명시 transition-duration 요소의 전환효과의 지속시간 속성 0s : 지속시간 없음 시간 : 지속시간 값 transition-timing-function 전환 효과의 타이밍(easing)함수를 지정 여러가지 함수가 있음 transition-delay 전환 효과가 몇 초 뒤에 시작할지 대기시간 지정 0s : 대기시간 없음 시간 : 대기시간(s) 지정 transition-property와 transition duration 속성 1초 동안 width 3.. 2022. 9. 11.
CSS정렬 - Flex Items Flex Items 속성 속 성 설 명 값 order Flex Item의 순서 0 : 순서 없음 숫자 : 숫자가 작을 수록 먼저 flex-grow Flex Item의 증가 너비 비율 0 : 증가 비율 없음 숫자 : 증가 비율 flex-shrink Flex Item의 감소 너비 비율 1 : Flex Container 너비에 따라 감소 비율 적용 숫자 : 감소 비율 flex-basis Flex Item의 공간 배분 전 기본 너비 auto : 요소의 content 너비 단위 : px, em, rem 등 단위로 지정 order 속성 작을수록 정렬된다. flex-grow 속성 Flex Container에 나머지가 있을 경우 나머지 부분을 어느 비율로 채울 것인가를 계산 flex-grow가 0일 경우 지정해준 크기.. 2022. 9. 11.
CSS 정렬 - Flex Container (2) Flex Container 속성( 주황색 defalut ) 속 성 설 명 값 flex-wrap Flex Items 묶음(줄 바꿈) 여부 nowrap : 묶음(줄 바꿈) 없음 wrap : 여러 줄로 묶음 wrap-reverse : wrap의 반대 방향으로 묶음 justify-content 주 축의 정렬 방법 flex-start : Flex Items를 시작점으로 정렬 flex-end : Flex Items를 끝으로 정렬 center : Flex Items 가운데 정렬 space-between : 각 Flex Item 사이를 균등하게 정렬 space-around : 각 Flex Item의 외부 여백을 균등하게 정렬 align-content 교차 축의 여러 줄 정렬하는 방법 stretch : Flex Item.. 2022. 9. 11.
CSS 정렬 - Flex Container (1) 플렉스 1차원 레이아웃을 정렬하는 방법 * 1차원이라고 하는 이유? x축이나 y축으로 하나의 축으로 정렬하기 때문 Flex정렬하는 속성은 Flex Container(부모요소)에 지정하는 속성과 Felx Item(자식요소)에 지정하는 속성으로 나뉘어져 있다. Flex Container 속성 속 성 설 명 값 display Flex Container의 화면 출력(보여짐) 특성 flex : 블록 요소와 같이 Flex Container 정의 inline-flex : 인라인 요소와 같이 Flex Container 정의 flex-direction 주 축을 설정 row : 행 축 ( 좌 -> 우 ) row-reverse : 행 축 ( 우 -> 좌 ) column : 열 축 ( 위 -> 아래 ) column-rever.. 2022. 9. 11.
CSS 배치 배치 속성 속 성 설 명 값 position 요소의 위치 지정 기준 static : 기준 없음 relative : 요소 자신을 기준 absolute : 위치 상 부모 요소를 기준 fixed : 뷰포트(브라우저)를 기준 sticky : 스크롤 영역 기준 top, bottom, left, right 요소의 각 방향별 거리 지정 auto : 브라우저가 계산 단위 : px, em, rem등 단위로 지정 z-index position 속성의 값이 있는 경우 위에 쌓임(static제외) → z-index속성의 값이 높을수록 위에 쌓임 → HTML의 다음 구조일수록 위에 쌓임 auto : 부모 요소와 동일한 쌓임 정도 숫자 : 숫자가 높을 수록 위에 쌓임 position속성의 값들 relative : 디폴드로 자신이.. 2022. 9. 9.
CSS 글꼴과 배경 글꼴 속성 속 성 설 명 값 font-style 글자의 기울기 normal : 기울기 없음 italic : 이텔릭체 oblique : 기울어진 글자 font-weight 글자의 두께(가중치) nornal, 400 : 기본 두께 bold, 700 : 두껍게 bolder : 상위(부모) 요소보다 더 두껍게 lighter : 상위(부모) 요소보다 더 얇기 100 ~ 900 : 100단위 숫자 9개 font-size 글자의 크기 16px : 기본크기 단위 : px, em, rem등 단위로 지정 % : 부모 요소의 폰트 크기에 대한 비율 samller : 상위(부모) 요소보다 작은 크기 larger : 상위(부모) 요소보다 큰 크기 xx-small ~ xx-large : 가장 작은 크기 ~ 가장 큰 크기 (7단계.. 2022. 9. 9.
CSS 박스모델 (2) CSS 박스모델 속 성 설 명 값 border 요소의 테투리 선을 설정함 요소가 커짐 border: 선-두께 선-종류 선-색상; border의 세부속성 세 부 속 성 설 명 사용법 값 border-width 선의 두께 top, right, left, bottom (top, bottom), (left, right) top, (left, right), bottom top, right, bottom, left border-style 선의 스타일 none : 선없음 (defalut) solid : 실선 dotted : 점선 dashed : 파선 double : 두 줄 선 groove : 홈이 파져있는 모양 ridge : 솟은 모양 inset : 요소 전체가 있는 모양 outset : 요소 전체가 나온 모양 bo.. 2022. 9. 9.
CSS 박스모델 (1) css의 단위 단 위 설 명 px 한 픽셀 % 백분율 em 조상 요소의 글꼴 크기기준으로 해서 크기를 사용 rem 루트 요소(html)의 글꼴 크기 vw 뷰포트 가로 너비의 백분율 vh 뷰포트 세로 너비의 백분율 em예제 .parent { width: 300px; height: 200px; background-color: royalblue; } .child { width: 20em; height: 50%; background-color: orange; } rem예제 CSS html { font-size: 14px; } HTML .parent { width: 300px; height: 200px; background-color: royalblue; } .child { width: 20rem; height:.. 2022. 9. 9.
CSS 속성 박스모델 : HTML요소의 기본적인 모양을 만들어 내는 것 가로, 세로, 내부여백, 외부여백 글꼴, 문자 : 폰트 및 글자 크기 두께 글자와 관련된 제어할 수 있다 배경 : 배경 이미지, 배경 색상을 제어 배치 : 원하는 위치에다가 가져다 놓을 수 있음 플렉스(정렬) : 수평 정렬하는 기능 전환 : 상태가 변할 때 전/후 상태를 매끄럽게 애니매이션 해주는 기능 변환 : 크기를 변환, 회전을 해줌 2D변환과 3D변환이 있음 띄움 : 요소를 공중에 띄움; 띄워진 주변으로 글자가 흘러가면서 작성 가능 애니매이션 : 전환보다 더 복잡한 애니매이션 기능이 가능 그리드 : 2차원의 레이아웃을 만들기 위한 기능 다단 : 하나의 페이지에서 단을 여러개로 나눌 수 있음 필터 : 사진 필터 2022. 9. 9.
CSS 선택자 기본 전체 선택자 (*) * { } 태그 : 태그의 이름을 선택 li { color: red; } 클래스 선택자 : 지정된 클래스 이름을 선택 .orange { color: orange; } 아이디 선택자 : 전역속성 아이디 이름을 선택 #orange { color: orange; } 복합 자식 선택자 : ABC > XYZ ul > .orange { color: orange; } 하위 서택자 : ABC (띄어쓰기) XYX ul .orange { color: orange; } 인접 형제 선택자 : ABC + XYZ; ABC 바로 다음 XYZ 오랜지 클래스의 바로 다음 li태그 .orange + li { color: orange; } 인접 형제 선택자 : ABC ~ XYZ; ABC 바로 모든 XYZ 오랜지 .. 2022. 9. 8.
CSS Basic CSS HTML의 스타일을 입히는것 CSS 문법 선택자 { 속성: 값; } 선택자 : 적용할 대상 속성 : 스타일의 종류 값 : 스타일의 값 ; : 범위의 끝 CSS선언방식 내장 방식 링크 방식 인라인 방식 @import규칙 내장 방식 html head부분에 인라인 방식 html body에 정의하는 방식 contents 링크 방식 css문서를 html head부분에 정의하는 방식; 병렬방식; @import방식 css내에 @import규칙으로 또 다른 css문서를 가져와 연결하는 방식; 직렬방식 @import url("./box.css"); 2022. 9. 8.

티스토리툴바