★ 반응형 웹, 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을 사용하였을 경우 ..
★ OutLine 바깥쪽 테두리를 만드는 역할 테두리 : border 사용 테두리 표현 O, 주변에 영역 침범 X : Outline 사용 사용법 #box2 { /* border : 10px solid cornflowerblue; */ outline : 10px solid cornflowerblue; } border와 비슷하지만 차이가 있음 size에 영향을 안미치고, 테두리가 생김으로 인해서 다른애들을 밀어내는 현상이 없음 실행 결과 ■ Text 상자를 이용한 OutLine HTML 코드 CSS 코드 : border를 주었을 경우 input[type=text] { display: block; /* 한줄 배치 */ margin-bottom: 5px; outline : none; } input[type=te..
★ 변형, Transform 위치, 크기, 회전, 왜곡 등 1. transform : translate() : 위치 변형(이동) 2. transform : scale() : 크기, 배율 변형(확대|축소) 3. transform : rotate() : 회전 변형 4. transform : skew() : 왜곡 변형(비틀기) 5. transform : matrix() : 1~4번 포함. 사용자 정의형 > 행렬 6. transform-origin : 변형 > 기준점(원점) 지정 ■ 사용 ex) ex1) transform : translate(x, y) x축, y축으로 이동 #box1 { background-color: tomato; transform : translate(50px, 0px); } 실행 결과 e..
