★ 반응형 웹, Responsive Web 반응형 레이아웃 웹 소비 장치 > 다양화 이전 : PC(다양한 해상도) 이후 : PC, 태블릿, 스마트폰 등.. (훨씬 다양한 해상도) 웹 페이지의 크기?? 1. 페이지 각각 생성 PC > PC 해상도에 맞는 페이지 제작 MObile > Mobile 해상도에 맞는 페이지 제작 2. 페이지 1회 생성 > 반응형 레이아웃 > CSS 미디어 쿼리 PC > PC 해상도에 맞게 출력 Mobile > Mobile 해상도에 맞게 출력 사용 방법 @media (조건) { CSS 영역 } @media screen and (해상도 조건) { 해상도 조건에 맞는 기기를 위한 CSS 정의 } ■ 사용 ex) HTML 코드 상자 기본 CSS 코드 #box { border : 1px s..
★ CSS 변수 변수 선언 --변수명 : 값 변수 값 1. 열거형(색상) 2. 열거형(그외, left, center, solid, dashed..) 3. 수치(10px) 변수 사용(호출) var(--변수명) ■ HTML 코드 상자1 상자2 상자3 ■ CSS 코드 : 지역변수로 설정을 했기때문에 적용이 자신의 지역에만 가능함. #box1 { --fore-color : blue; color : var(--fore-color); } #box2 { /* 선언되지 않은 변수 > 초기값(기본값) 적용됨 */ color : var(--fore-color); } ■ CSS 코드 : 해결법 -> 부모지역에 변수를 설정하면 적용이 가능하다. #list { --main-color : gold; } #box1 { color ..
★ 객체의 움직임 1. transition 2. animation > transition + 버전업 ★ Animation animation-name : [애니메이션 이름] animation-duration: [시간초] animation-fill-mode: [시간이 다찼을 때 어떻게 할지] animation-timing-function: linear; animation-delay : [딜레이 시간] animation-iteration-count: [반복 횟수][infinite를 주면 무한 반복] animation-direction: [reverse : 역으로 진행 | alternate : 원래방향->역방향 재생 반복 | alternate-reverse : 역방향으로 시작 해서 alternate] 사용 an..
★ 문제 1 : 글 상자에 마우스를 올리면 내용을 아래로 스크롤하시오. HTML 코드 transition Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi veniam, expedita illum hic nulla quas repellendus, fuga in, perferendis possimus cupiditate ducimus optio nihil vel ratione quod atque porro error? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi veniam, expedita illum hic nulla qu..
★ 전환, Transition 객체의 속성(상태)값이 변화되는 과정을 시간 순서대로 보여주는 속성 수치형 속성에만 적용 가능(숫자, 색상) 사용방법 transition-property : width; transition-duration: 1s; 한줄로 타이핑 가능 transition : .5s all; ■ HTML 코드 상자 ■ CSS 코드 ■ 실행 결과 ■ 다양한 ex1) #box { border : 10px solid black; width : 200px; height: 200px; background-color: gold; margin : 100px; transition-property : all; transition-duration: 10s; } #box:hover { width : 400px; ..
★ Display flex box, flexialbe box 레이아웃 구성 > 내부 요소의 배치 float / position / margin 기본 상태(display : flex) 메인축 방향 : 가로(아이템이 나열되는 방향) 수직축 방향 : 세로 아이템 크기 : 너비(요소 크기만큼) 아이템 크기 : 높이(부모 크기만큼) 아이템 크기 : 메인축(요소 크기만큼) 아이템 크기 : 수직축(부모 크기만큼) display : flex; 실행 결과 기존 방법 1 : float를 사용 하였을 경우 #box::after { content:''; display : block; clear:left; } #box .item { float : left; } 기존 방법 2 : display : inline을 사용하였을 경우 ..
★ Column 다단 구조 p { column-count : 3; } 컬럼과 컬럼 사이의 간격 column-gap : 20px; 컬럼 테두리 column-rule : 1px solid gray; 실행 결과 ■ Card Layout HTML 코드 Card Layout Lorem ipsum dolor sit amet. Nam in atque praesentium tempore? Asperiores perferendis voluptates nostrum impedit! Est tempore quaerat id adipisci. Obcaecati corrupti earum ad vitae? Eaque eum fugiat dignissimos labore. Consequuntur dicta nulla unde t..
★ 모서리 둥글기 border-radius : px, % 단축의 길이 1/2 = 최댓값 사용 방법 border-radius : 10px; 실행 결과 사용 방법 2 최대 값 : 50% border-radius: 10%; 실행 결과 2 사용 방법 3 border-top-left-radius: 30px; border-bottom-right-radius: 30px; border-top-right-radius: 100px; border-bottom-left-radius: 100px; 실행 결과 3 이미지에 radius 주기 실행 결과 ★ 아이콘 window + . 버튼 클릭시 아이콘들이 나옴 대중적으로 많이 쓰는 사이트 https://fontawesome.com/start 구글에서 제공하는 사이트 https://..
