★ Front-end, Client-side Programing 1. HTML 골격 > 블럭 태그 내용물 > 인라인 태그 + 텍스트 2. CSS 서식 3. JavaScript 프로그래밍 기능 ★ JavaScript 브라우저에서 동작하는 프로그래밍 언어 Netscape > Navigator 초기 : 가볍다 + 쉽다 = 기능 적음 > 현재(2014년 이후) : 어려워짐.. C 계열 언어 > 기본 구문이 자바와 유사 Java JavaScript LiveScript > JavaScript 초반 > 폼태그 유효성 검사 + 링크 조작 + 이미지 조작 등.. 중반(~2013) > 모든 태그 조작 > DOM 후반(2014~) > ECMA2015(ES6) > Node.js 출시 (구글 크롬 V8 엔진) > 비 브라우저 ..
★ CSS3 레이아웃 flex(선형 레이아웃), grid(평면 레이아웃) ★ Grid Grid 함수 Grid Container - Grid 전체 영역 Grid Item - 내부 요소 - Grid Cell - Grid의 한칸 Grid Line - Grid Cell을 구분하는 각각의 선 Grid Number - Grid Line 번호 Grid Gap - Grid Cell 사이의 간격 사용 방법 .container { display : grid; } .container { /* 행과 열의 개수 + 크기 > 2행 3열*/ grid-template-rows: 100px 100px; grid-template-columns: 100px 100px 100px; } 행과 열 옵션을 주어 배열을 만들어냄 실행 결과 퍼센트..
★ 반응형 웹, 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을 사용하였을 경우 ..
