coding/html (19) 썸네일형 리스트형 0517 / psuedo.html & css - psuedo.html DOCTYPE html> Document 웹 기초 기본형 마우스 올릴 경우(:hover) 마우스 버튼 누를 경우(:active) 내부요소의 앞에 기능 추가(:before) 내부요소의 뒤에 기능 추가(:after) anker첨부되어 방문한 적이 있는 경우(a:visited) 체크시 처리(input:checked + span) Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum natus autem reprehenderit deserunt quas! Illo fugit itaque perferendis laudantium repudiandae modi molestias libero rem, maiores qui illum .. 0517 / layout.html & css (header 영역 추가) - layout.html 웹 기초 li_02 li_01 li_03 li_04 li_05 li_06 ---------------------------------------------------- - layout.css #header { width:100%; height:auto; background-color: #f06; } .logo { float:left; width:120px; height:100px; background-color: #ccc; } .logo > a { display:block; width:100%; height:100%; background-color: #add; } .navigation { float:right; width:400px; height:100px; background-.. 0513 / layout.html (float속성 & clear속성) DOCTYPE html> Document sect_01 sect_02 side_01 side_02 side_03 art_01 art_02 art_03 art_01 art_02 art_03 0512 / float.html (clearfix, clear:both 개념) DOCTYPE html> 웹 기초 웹기초 float코드 내부에 overflow 기법 내용요소를 삽입1 내용요소를 삽입2 내용요소를 삽입3 내용요소를 삽입4 내부에 다른 요소를 삽입 내부에 다른요소를 덧붙이기 01 내부에 다른요소를 덧붙이기 02 내부에 다른요소를 덧붙이기 03 내부에 다른요소를 덧붙이기 04 내부에 다른요소를 덧붙이기 04 내부에 다른요소를 덧붙이기 04 내부에 다른요소를 덧붙이기 04 내부에 다른요소를 덧붙이기 04 내부에 다른요소를 덧붙이기 04 높이값을 정해주는 것 내용 삽입 내용 삽입 내용 삽입 내용 삽입 내용 삽입 내용 삽입 내용 삽입 내용 삽입 가상요소를 사용 가상요소를 이용한 float 가상요소를 이용한 float 가상요소를 이용한 float 가상요소를 이용한 float 가상.. 0510 / layout.html 작성 DOCTYPE html> 웹 기초 - 레이아웃 연습_001 #header .sect_01 .sect_02 #footer --------------------------------------------------------------------------------------------------------------------------- (html 모드로 변경) #header sect_01 sect_02 #footer 0504 / basic_code_04_setting.html DOCTYPE html> (비표준브라우저) (익스플로러-마지막버전) (안드로이드 o, 아이폰 x) 반응형웹에 필수! (meta:웹 정보 정리) (검색에 관련된 색인) (누가 제작했는지, 어디서 제작했는지) (link:like style 추후 style -> link로) 웹 기초 /* css */ 현재사용하고 계신 브라우저는 js 기능이 올바르게 동작하지 않습니다. 최신브라우저 설치 후 사용 0503 / basic_code_03.html (table 구조와 그 예시) DOCTYPE html> 웹 기초 - 테이블 구조 /* css */ .table_module { width:700px; height:auto; margin:auto; margin-bottom:10px; padding:20px; background-color: #ddd; } table { width:100%; height:auto;} table > caption { width:100%; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#171717; } table, table tr, table td, table th { border-width:1px; border-style:solid; border-color:#03a; bor.. 0429 / basic_code_02.html DOCTYPE html> 웹기초 - 리스트 /* css */ /* border : 외곽선 */ h2 { border-width:2px; background-color: #ac8; } #listSet { border-color:#669; border-style:dotted; } #moreListSet { border-color:#eac; border-style:dashed; } div { background-color: #ffa; border-width:1px; border-style:solid; border-color:#777; } .list_box { background-color: #caf; border-width: 5px; border-color: #a7f; padding:30px; } .margi.. 이전 1 2 3 다음
