Python_WEB/HTML (151) 썸네일형 리스트형 HTML5 - 190609 Basic Study 31(가시 속성) 1. HTML Code 가시 속성 콘텐츠를 숨기는 원리 버튼만들기 버튼 welcome to my world 무공화꽃이 피엇습니다 다람쥐 가오리 안녕하세요 감사합니다. 돌아가기 box1 100+(10+10+10)*2 box2 100+10*2 box3 box4 2. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } a{ text-decoration:none; } #btn{ width:100px; height:80px; background:gold; margin:30px; text-align:center; line-height:80px; border-radius:20px; } #btn a{ background:pink; displa.. HTML5 - 190609 Basic Study 30(Sitemap 제작 - 2) 1. Sitemap 사이트의 설계도. 크롤링 로봇이 이용할 수 있는 웹사이트의 접근 가능한 페이지의 목록. 2. HTML Code sitemap TOEFL TOEFL 시험 소개 TOEFL 프로그램 소개 TOEFL 강의 시간표 TOEFL 등록 문의 TOEFL 수업 후기 TOEFL 강사 소개 TOEIC TOEIC 시험 소개 TOEIC 프로그램 소개 TOEIC 강의 시간표 TOEIC 등록 문의 TOEIC 수업 후기 TOEIC 강사 소개 ENGLISH ENGLISH 프로그램 소개 ENGLISH 강의 시간표 ENGLISH 등록 문의 ENGLISH 수업 후기 ENGLISH 강사 소개 JAPANESE JAPANESE 프로그램 소개 JAPANESE 강의 시간표 JAPANESE 등록 문의 JAPANESE 수업 후기 JA.. HTML5 - 190609 Basic Study 29(Sitemap 제작 - 1) 1. Sitemap 사이트의 설계도. 크롤링 로봇이 이용할 수 있는 웹사이트의 접근 가능한 페이지의 목록. 2. HTML Code sitemap TOEFL TOEFL 시험 소개 TOEFL 프로그램 소개 TOEFL 강의 시간표 TOEFL 등록 문의 TOEFL 수업 후기 TOEFL 강사 소개 TOEIC TOEIC 시험 소개 TOEIC 프로그램 소개 TOEIC 강의 시간표 TOEIC 등록 문의 TOEIC 수업 후기 TOEIC 강사 소개 ENGLISH ENGLISH 프로그램 소개 ENGLISH 강의 시간표 ENGLISH 등록 문의 ENGLISH 수업 후기 ENGLISH 강사 소개 JAPANESE JAPANESE 프로그램 소개 JAPANESE 강의 시간표 JAPANESE 등록 문의 JAPANESE 수업 후기 JA.. HTML5 - 190609 Basic Study 28(positon과 float를 이용한 레이아웃 설계) 1. HTML Code 위치 속성2 버튼1 버튼1 버튼1 버튼1 버튼1 2. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } /* 목록 기호 없애기 */ ul, li{ list-style:none; } ul{ overflow:hidden; position:relative; left:200px; top:100px; } ul li{ float:left; padding:10px; } ul li:hover{ background:pink; } 3. HTML / CSS 파일 4. HTML 미리보기 HTML5 - 190609 Basic Study 27(위치 속성) 1. HTML Code 위치 속성 박스1 박스2 박스3 2. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } ul, li{ list-style:none; } h1{ width:100%; background:pink; width:70%; margin:auto; text-align:center; height:80px; line-height:80px; /* line-height:calc(80px); */ } div{ width:150px; height:150px; border:3px solid black; } #box1{ background:red; position:absolute; left:50px; top:50px; z-ind.. HTML5 - 190609 Basic Study 26(:taget 활용하기) 1. HTML Code css 선택자 :target활용하기(탭 메뉴) aaa bbb ccc 여기는 aaa입니다 여기는 bbb입니다 여기는 ccc입니다 2. CSS Code @charset "utf-8"; /* CSS Document */ div{ width:200px; height:100px; background:pink; /* border:1px solid red; */ /* display:none; */ height:0; overflow:hidden; transition:1s; } #aaa:target{ /* display:block; */ height:150px; border:1px solid red; background:gold; } #bbb:target{ /* display:block; */ b.. HTML5 - 190609 Basic Study 25(상태,링크,반응 선택) 1. 상태 선택자 :checked input:checked :focus input:focus :enabled input:enabled :disabled input:disabled :target input:target 2. 링크 선택자 :link a:lilnk :visited a:visited 3. 반응 선택자 선택자:active div:active 선택자:hover div:hover 4. HTML Code 상태 선택자, 링크 선택자, 반응 선택자 :active :hover :checked :focus :enabled :disabled :target :link :visited 링크 선택자 문자 선택자 :first-letter :first-line :after :before ::selection welcom.. HTML5 - 190609 Basic Study 24(CSS 속성 선택자) 1. 속성 선택자 기본속성 선택자[속성=값] input[type=text] 문자열속성 선택자[속성~=값] 공백 div[data-role~=row] 선택자[속성|=값] 하이픈 div[data-role!=row] 선택자[속성^=값] 시작 div[data-role^=row] 선택자[속성$=값] 끝 div[data-role$=row] 선택자[속성*=값] 포함 div[data-role*=row] 2. HTML Code CSS 2일차 newspaper newspaper newspaper newspaper newspaper 3. CSS Code @charset "utf-8"; /* CSS Document */ /* p 태그에 클래스 속성이 newspaper에 background 적용 */ p[class=newspap.. 이전 1 ··· 13 14 15 16 17 18 19 다음
