CSS (9) 썸네일형 리스트형 09. CSS_bootstrap_form DOCTYPE html> ::: 09_bootstrap_Form ::: 부트스트랩(BootStrap) Form 적용하기 Navbar Home Link Dropdown Action Another action Something else here Disabled Search 이메일 내 용 Open this select menu One Two Three 08. CSS_bootstrap_table DOCTYPE html> ::: 08_bootstrap_table ::: 부트스트랩(BootStrap) 테이블 적용하기 # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter 07. CSS_bootstrap_textstyle(2) DOCTYPE html> ::: 07_bootstrap_textstyle(2) ::: 부트스트랩(BootStrap) 텍스트 스타일 적용하기(2) h1 제목 스타일 적용하기 1. 제목 스타일 적용하기 2. 제목 스타일 적용하기 3. 제목 스타일 적용하기 4. 제목 스타일 적용하기 5. 제목 스타일 적용하기 6. 제목 스타일 적용하기 서두 내용 스타일 적용.. 서두 내용 스타일 적용.. 서두 내용 스타일 적용.. 서두 내용 스타일 적용.. 서두 내용 스타일 적용.. 서두 내용 스타일 적용.. 서두 내용 스타일 적용.. 서두 내용 스타일 적용.. 서두 내용 스타일 적용.. 서두 내용 스타일 적용.. 서두 내용 스타일 적용.. 서두 내용 스타일 적용.. 06. CSS_bootstrap_textstyle DOCTYPE html> ::: 06_bootstrap_textstyle ::: 부트스트랩(BootStrap) 텍스트 스타일 적용하기 h1. 텍스트 사이즈 적용 h2. 텍스트 사이즈 적용 h3. 텍스트 사이즈 적용 h4. 텍스트 사이즈 적용 h5. 텍스트 사이즈 적용 h6. 텍스트 사이즈 적용 h1. 텍스트 사이즈 h2. 텍스트 사이즈 h3. 텍스트 사이즈 h4. 텍스트 사이즈 h5. 텍스트 사이즈 h6. 텍스트 사이즈 small 사이즈 적용하기 부트스트랩의 muted 속성 사용하기(보조 제목으로 사용됨) 05. CSS_bootstrap DOCTYPE html> ::: 05_bootstrap ::: 부트스트랩(BootStrap) [부트스트랩] - html, css, javascript를 이용해서 코드를 이미 만들어 놓았음 - 우리는 코드를 복사해서 사용만 하면 됨. - 수정하는 부분은 링크주소, 보여질 텍스트 내용.. 04. CSS_수직 네비게이션(2) DOCTYPE html> ::: 04_CSS기초_수직_네비게이션(2) ::: /* ul 스타일 */ ul { list-style-type: none; background-color: #f1f1f1; padding: 0; margin: 0; width: 200px; } /* 선 그리기 */ li { text-align: center; border-bottom: 1px solid #555; } li:last-child { border-bottom: none; } /* li a 스타일 */ li a { color: #000; padding: 5px; /* a 태그의 언더라인 없애기 */ text-decoration: none; display: block; } /* home이 있는 a태그의 스타일만 변경하기 *.. 03. CSS_수직 네비게이션(1) DOCTYPE html> ::: 03_CSS기초_수직_네비게이션(1) ::: /* ul 스타일 */ ul { list-style-type: none; background-color: #f1f1f1; padding: 0; margin: 0; width: 200px; } /* li a 스타일 */ li a { color: #000; padding: 5px; /* a 태그의 언더라인 없애기 */ text-decoration: none; display: block; } /* li a 태그에 마우스 오버시 처리 스타일 */ li a:hover { background-color: aqua; color: blue; } 수직 네비게이션(메뉴) Home Daum Naver Google 02. CSS_테이블 행단위 색 입히기(2) DOCTYPE html> ::: 02_CSS기초_테이블_행단위_색입히기(2) ::: /* table 스타일 */ table{ border-collapse: collapse; width: 100%; } /* th, td 스타일 */ th, td { text-align: center; padding: 8px; } /* tr태그의 홀수 행에 색 입히기 */ tr:nth-child(even) { background-color: yellow; } 테이블의 행에 마우스 오버시 색상 입히기 번호 이름 주소 1 홍길동 서울 강남구 대치동 2 홍길동 서울 강남구 대치동 3 홍길동 서울 강남구 대치동 4 홍길동 서울 강남구 대치동 이전 1 2 다음
