달밤에 코딩하기/HTML CSS 공부하기 (27) 썸네일형 리스트형 #26- CSS - Grid Grid란 Grid란 행.열의 2차원 레이아웃 제공. 여러 item을 감싸는 container로 구성되어 있음 기본 구성 A B C D E F G H I 속성 예시 /* container1과 container2의 결과 값은 같다*/ .container1 { display : grid; grid-template: "header header header" 80px "a main b" 100px ". . ." 100px "footer footer footer" 200px / 1fr 100px 2fr; } .container2 { display : grid; grid-template-rows : 80px 100px 100px 200px; grid-template-columns : 1fr 100px 2fr; gr.. #25 - CSS - Flex Flex란 한뱡향 1파원에 대한 레이아웃 시스템. 여러 item을 감싸는 container로 구성되어 있다. 1 2 3 .container{ display : flex; flex-flow : row nowrap; } /* 증가너비 감소너비 기본너비 */ .item1{ flex : 1 2 300px; } /* 증가너비 감소너비 */ .item2{ flex : 2 1; } 속성 설명 적용 위치 속성 개별 속성 의미 값 Flex Container display item 수평 정렬 속성 부여. flex와 inline-flex 설정 값에 따라 Container가 어떤 속성을 가질지 설정 가능 1. flex : Block 속성을 flex 부여 2. inline-flex : inline 속성을 flex 부여 flex.. #24 - CSS - 멀티 컬럼 멀티 컬럼 설명 여러개의 컬럼을 설정 속성 예시 /* 컬럼너비 컬럼개수 */ /* 선두께 선종류 선색상 */ /* 좌우 여백 */ .colmn{ columns : 100px 2; column-rule : 1px solid red; column-gap : 20px; } 속성 설명 속성 개별 속성 의미 값 columns - 컬럼 설정 columns-width 컬럼 최소 너비. 이하로 떨어질 경우 컬럼 개수가 변경 됨 auto, 숫자+단위 columns-count 컬럼의 개수 auto, 숫자+단위 column-rule - 단과 단 사이 선 설정. Boder 속성과 동일 column-rule-width 선 두께 column-rule-style 선 종류 column-rule-color 선 색상. 지정하지 않으면 .. #23 - CSS 애니메이션 - keyframe 애니메이션 설명 요소의 애니메이션을 설정 속성 예시 /* 애니메이션이름 지속시간 타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생정지 */ /* 애니메이션이름 지속시간 설정 필수, 이후는 옵션 */ .class1{ width : 50%; height : 50%; color : red; animation : aniSet .5s ease-in; } /* keyframe 애니메이션이름 */ @keyframe aniSet{ 0% { width : 50%;} 100% { width : 100%;} } 속성 설명 속성 개별 속성 의미 값 animation - 요소의 애니메이션을 지정하는 keyframe과 연결하고, 이를 제어 animation 애니메이션 이름 텍스트 animation-name 지속시간 시간 단위 .. #22 - CSS 애니메이션 - 변환 변환 설명 요소를 이동, 회전, 확대, 축소 등 요소를 변환할 수 있는 속성. 변환 단축 입력 방법 속성 예시 /* 변경이름(변경값) */ .class1{ width : 50%; height : 50%; color : red; transition : .5s ease-in; } .class1::after{ width : 100%; height : 100%; color : blue; transform : translate(10px,10px) rotate(45deg); } 속성 설명 속성 의미 값 transform 요소를 변환시킬 수 있다. 아래 값으로 요소 변환을 제어한다. 이동 변경 translate(x값,y값) translate3d(x값,y값,z값) translateX(x값) translateY(y값) .. #21 - CSS 애니메이션 - 전환 전환 설명 트랜지션은 애니메이션을 만들 때 주로 사용되며, 작동은 아래와 같다. CSS의 시작과 끝 값 확인 taransition 속성을 통하여 중간 값을 알아냄 시작~중간~끝을 이어 애니메이션을 만듦 전환 단축 입력 방법 /* 속성이름 지속시간 딜레이시간 타이밍함수 */ /* 속성 일부 제어 */ .class1{ width : 50%; height : 50%; color : red; transition : height .5s .5s ease-in, color .5s .5s ease-in; } .class1::after{ width : 100%; height : 100%; color : blue; } /* 속성 전체 제어 */ .class2{ width : 50%; height : 50%; transit.. #20 - CSS 기초 - 배경 배경 속성 설명 속성 예시 /*---- 색 이미지경로 반복 위치 스크롤특성 ----*/ .background{ background : black url('img/main.png') no-repeat right bottom scroll; } /*---- 이미지경로 반복 위치 + 다중 이미지 사용 ----*/ .background{ background : url('img/main.png') no-repeat right bottom, url('img/main.png') no-repeat right bottom, url('img/main.png') no-repeat right bottom; } /*---- 색 ----*/ .background{ background : black; } 속성 설명 속성 개별 속성 .. #19 - CSS 기초 - 정렬 정렬 속성 설명 속성 예시 /*-------float-------*/ .class1{ float : left; } /*-------clear-------*/ .class2{ clear : both; } /*-------위치-------*/ .class3{ position : absolute; top : 20px; left : 20px; bottom : 20px; right : 20px; } 속성 설명 속성 의미 값 float 요소를 띄움. 수평 정렬할 때 주로 사용. float right일 경우 첫번째 요소가 가장 오른쪽으로 배치 됨 float를 해제하기 위해 두가지 방법을 사용. 최 하단 참고 none, left, right clear 형제 요소에 적용하여 float 속성을 지움 none, left, .. 이전 1 2 3 4 다음
