coding (66) 썸네일형 리스트형 0510 / layout.css 작성 @charset "UTF-8"; /* css/src/layout_001.css */ /* reset.css */ html, body { margin:0; } /* layout_design.css */ #wrap { width:600px; height:auto; margin:auto; } /* #header ==================== */ #header { width:100%; height:100px; background-color: #f07; } /* #section ==================== */ #section { width:100%; height:auto; background-color: #fa0; } .sect_01 { float:left; width:40%; height:3.. 0510 / layout.html 작성 DOCTYPE html> 웹 기초 - 레이아웃 연습_001 #header .sect_01 .sect_02 #footer --------------------------------------------------------------------------------------------------------------------------- (html 모드로 변경) #header sect_01 sect_02 #footer 0506 / setting_test.css & basic_code_05_reset.css @charset "UTF-8"; /* setting_test.css */ html, body { width:100%; height:100%; background-color: #acf; } ----------------------------------------------------------------------------------------------------------------------------------- @charset "UTF-8"; /* basic_code_05_reset.css */ /* reset.css */ html, body { width:100%; height:100%; margin:0; } h1,h2,h3,h4,h5,h6 { margin:0; } /* test -------.. 0506 / basic_code_05_reset.css DOCTYPE html> 웹 기초 /* css */ 영역을 확인 list_001 list_002 list_003 list_004 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.. 0428 / basic_code_01.html 웹기초 - 제목 및 내용 /* css */ div {background-color:#b2 f58 b;}background-color:#b2f58b;} (공간을 분리하는 박스) title="목차로 돌아가기" 웹페이지 내에서 가장 중요한 제목 하나의 페이지에는 h1 한 번만 사용. (a요소는 링크를 위해 만든 것) 웹페이지 내에서 두번째로 중요한 제목 웹페이지 내에서 세번째로 중요한 제목 웹페이지 내에서 네번째로 중요한 제목 웹페이지 내에서 다섯번째로 중요한 제목 웹페이지 내에서 제목의 구분중 가장 낮은 제목 (화제가 전환되었을때 구분하기 위해서 쓰임, 칸막이) 문서내에서의 내용을 뜻하는 것으로, 연속 띄어쓰기 줄바꿈처리는 모두 한칸 띄어쓰기만 된다. 원하는 대로 띄어쓰기,줄바꿈 가능 (실무:코드의 삽입기능.. 이전 1 ··· 5 6 7 8 9 다음