css3

[2021/12/31]국비지원 CSS3 11-(1) psuedo-class, property selector

psuedo-class :first-child :nth-child(n) : n번째 :nth-child(odd) : 홀수번째 :nth-child(even) : 짝수번째 :nth-child(3n) : 3배수 :last-child :nth-last-child(n) : 뒤에서 n번째 :empty : 비움 :first-of-type :nth-of-type(n) :nth-last-of-type(n) :last-of-type :only-child :only-of-type dl dt dd에서는 type이 더 직관적 (이라고 함) 1 2 3 4 5 6 7 9 dt dd dt dd dt dd dt dd 결과물 property selector : 속성선택자 띄운 칸 : 하위의 모든 해당 element > : 자식 eleme..

[2021/12/30]국비지원 CSS3 10-(6) 과제3 : 아코디언형 메뉴

아코디언형 메뉴 : a로 그럴싸 하게 흉내낼 수는 있으나 창 이동이 아니기 때문에 본래는 button 태그로 하는 게 맞고, javascript와 onclick 등으로 구현해야 열고 닫고 둘 다 되는 아코디언형 메뉴를 만들 수 있음 작업내용 아코디언 메뉴 HTML5 HTML5는 화면 상에서 그림을 그리는 등 더 많은 기능을 추가한 마크업 언어입니다. 또한 HTML5는 단순히 마크업 언어로서의 기능 뿐만 아니라 자바스크립트를 사용해 프로그램을 만들 수 있는 API까지 포함하고 있습니다. CSS3 CSS는 웹 디자인이나 웹 개발에 있어서 핵심적인 요소입니다. 특히 현재 개발 중인 CSS3는 기존의 CSS에서는 할 수 없던 여러 가지 효과를 쉽게 만들 수 있고 CSS3만으로도 간단한 애니메이션을 만들 수도 있..

[2021/12/30]국비지원 CSS3 10-(5) psuedo-class :target

psuedo-class :target : a link href ="id이름" 으로 저격한 대상 클릭하면 해당 대상에 지정된 효과가 출력됨 고전주의 낭만주의 사실주의 상징주의 고전주의는 17세기 중엽 프랑스를 중심으로 활발히 전개되어 유럽 전역으로 퍼져갔다. 고대 그리스와 로마의 고전을 모방, 발전시키려는 문학운동으로 형식과 이성을 존중하였다. 프랑스의 라신,몰리에르, 영국의 알렉산더 포프, 독일의 실러, 괴테 등이 대표적인 작가이다. 낭만주의는 17세기 말엽에 프랑스의 장 자크 루소가 인간의 자유와 자연에의 복귀를 부르짖은 것에 힘을 얻어 18세기 말부터 19세기 초까지 유럽 전역에서 일어나 고전주의의 정통성에 도전하였다. 프랑스의 빅토르 위고, 독일의 노발리스, 영국의 윌리엄 워즈워스, 콜리지, 바이런..

[2021/12/30]국비지원 CSS3 10-(4) navigation

hover & transition navigation1 Home 웹 개발 웹 디자인 HTML5 + CSS3 JQuery 웹 + 모바일 게시판 Q & A 방명록 프로필 navigation2 Home 웹 개발 웹 디자인 HTML + CSS3 JQuery 웹 + 모바일 게시판 Q & A 방명록 프로필 navigation3 ( 과제2 ) Home home 웹 개발 웹 개발 게시판 게시판 프로필 프로필 정식으로 사이트 짤 생각이면 브라우저 식별 대상은 꼭 신경 써줘야 함 결과물1 결과물2 결과물3

[2021/12/30]국비지원 CSS3 10-(2) transition, transition3d

★★★★★ 브라우저 식별 접두사가 필요한 속성 ★★★★★ transition : animation property, duration, function, duration delay animation property all background color height width transform duration : start to end. /s, /ms function : animate type, timing etc linear : 일정 속도 ease : 서서히 가속 후 급감속 ease-in : 최속 후 감속 ease-in-out : 처음 0속, 중간 최속, 서서히 감속 cubic bezier : 속도값 직접 입력 cubic-bezier(.17,.67,.83,.67) ✿ cubic-bezier.com cubi..