Python_WEB/HTML (151) 썸네일형 리스트형 HTML5 - 190622 Basic Study 47(Animation 효과) 1. animation animation : 통합 속성 animation-delay : 몇 초 후에 재생 animation-direcition : 진행방향 animation-duration : 몇 초 동안 재생 animation-iteration-count : 반복 횟수 animation-name : 이름 지정 animation-play-state : 재생 상태 지정 animation-timing-function : 함수 2. @keyframes animation과 함께 사용 3. HTML Code 애니메이션 속성 Rotation 4. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } div#ani{ width:200px; h.. HTML5 - 190622 Basic Study 46(Transition Graph) 1. HTML Code 움직이는 그래프 만들기 data1 data2 data3 data4 data5 2. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } #graph{ width:610px; border:3px solid black; } .bar{ width:10px; height:50px; background-color:red; margin:5px; transition-duration:5s; } #graph:hover>div.bar{ width:600px; transition-timing-function:linear; background-color:orange; } div.bar:nth-child(1){ transition.. HTML5 - 190622 Basic Study 45(transition 효과 주기) 1. Transition transition transition-delay transition-duration transition-property : 전환효과가 적용될 속성을 지정(기본값 all) transition-timing-function: ease linear ease-in ease-out ease-in-out 2. HTML Code transition 효과 주기 box 3. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } .box{ width:100px; height:100px; background:red; } /* 글자중앙으로 맞추기 */ .box{ text-align:center; line-height:100px.. HTML5 - 190616 Basic Study 44(WebSite Layout Basic 2) 1. Section HTML Code Main Article Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pell.. HTML5 - 190616 Basic Study 43(WebSite Layout Basic 1) 1. Website 제작 실습 - 구성 요소 : Header / Section / Footer / Navigation-gnb / Navigation-gnb-submenu Navigation-lnb / Navigation-lnb-submenu / aside - 총 3행 분할 구조 ㄱ. 1행 : Header / Navigation-gnb / Navigation-gnb-submenu / Navigation-lnb / Navigation-lnb-submenu ㄴ. 2행 : Section / aside ㄷ. 3행 : Footer 2. CSS 초기화 코드(동일한 출력 만들기) *{ margin:0 auto; padding:0; } ul,li,ol{ list-style:none; } a{ text-decoration.. HTML5 - 190616 Basic Study 42(박스 가로 방향 배치) 1. HTML Code 박스 가로 방향으로 배치하기 주메뉴1 서브메뉴1 주메뉴2 서브메뉴2 주메뉴3 서브메뉴3 박스 가로 방향으로 배치하기 2. CSS Code @charset "utf-8"; /* CSS Document */ /* CSS 초기화 선수작업 */ *{ margin:0; padding:0; } ul,li,ol{ list-style:none; } a{ text-decoration:none; color:black; } /* 박스 가로방향으로 배치하기 */ /* 1) float:left */ #papa{ /* float:left; */ } /* 2) display:inline-block */ #papa li{ /* display:inline-block; */ border:1px solid red;.. HTML5 - 190616 Basic Study 41(Float 해제 방법) 1. Float 해제 방법 float를 해제하지 않으면 다음 박스들에 속성이 제대로 지정되지 않음. 박스를 감싸는 박스에 부여된 배경, 테두리 여백 등이 하나도 나오지 않음. 레이아웃을 제대로 표현하는데 float 해제는 반드시 필요함. 부모 요소에 height를 주면 float 해제 효과가 있으나 본문 내용에 height를 주면 유지보수가 힘들어지니 container 본문 부분에서는 꼭 필요한 경우가 아니면 height를 주지 않음. 2. HTML Code CSS 레이아웃 공식정리하기 박스1 서브메뉴1 박스2 서브메뉴2 박스3 서브메뉴3 CSS 레이아웃 공식정리하기 3. CSS Code @charset "utf-8"; /* CSS Document */ /* CSS 초기화 선수작업 */ *{ margin.. HTML5 - 190615 Basic Study 40(Note) HTML 강좌 19 배경속성 background : 통합속성 background-color background-image background-repeat background-position background-attachment background-repeat:no-repeat background-repeat:repeat-x background-position:0 0 픽셀단위, 키워드 안뒤, % 단위 50px 50px left top center right bottom 50% 50% background-attachment:fixed background-attachment:scroll 중첩 배경 이미지 gif 나 png 투명 바탕이 지원됨 UI UX 97번 이미지 클립핑 HTML 활용예제 17번 activ.. 이전 1 ··· 11 12 13 14 15 16 17 ··· 19 다음
