매일코딩/HTML&CSS312 11.웹페이지제작 - 완성 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816.. 2016. 11. 3. 10.웹페이지제작 - 컨텐츠 페이지 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 만나 공지 만나 공지사항 메인 회사 상품 자료 공지 문의 만나홈페이지가 새롭게 개설되었습니다. 한국 최초의 전도형 주문QT책자 만나홈페이지가 새롭게 탄생했습니다. 앞으로 주보시안,캘린더,소식지,QT책자 등 다양한 문서자료를 업로드할 예정입니다. 자주 방문하셔서 퀄리티 높은 자료들 .. 2016. 11. 2. 9.웹페이지제작 - 준비2 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172공지 .site h1 a{color:black; text-decoration:none}.site h1 {margin:0; font-size:30px}.site p {margin:0; font-size:12px}.menu ul{ list-style:none}.menu li a{color:black; font-size:14px; text-decoration:none; display:block; padding:5px}.menu li a:hover{ background-co.. 2016. 11. 2. 8.웹페이지제작 - 준비1 1234567891011121314151617 만나 공지 Colored by Color Scriptercs HTML 을 사용하겠다.선언 언어종류 화면출력 내용물 HTML파일 인코딩 스마트폰 및 테블릿PC에 맞게 출력 스타일시트 적용하기 2016. 11. 2. 7.레이아웃 - 박스 겹치기 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849샘플.boxA{boder:solid 8px green; background-color:gold; color:pink}.box1{ height: 200px; border:4px solid green; text-align: center; position:relative}.box2{ height: 100px; border:4px solid blue; position:absolute; top:150px;left:60px } BOX1 BOX2 Colored by Color Scriptercs - 박스 1과 2를 div태그로 감싸 그룹화 한다. 박스 A의 p.. 2016. 11. 2. 6.레이아웃 - 박스 정렬 순서 float 속성을 left 로하면 상자는 왼쪽에 right로 하면 오른쪽에 붙는다. 2016. 11. 2. 5.레이아웃 - 박스너비 고정하기 박스너비 고정하기 123456789.box2 {float: left; width: 300px ; height: 200px; border:4px dotted green; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; }Colored by Color Scriptercs 1. 박스2의 너비를 300px으로 준다. 1234567891011.box3 {float: none; width: auto; height: 200px; border:4px dotted blue; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; .. 2016. 11. 2. 4.레이아웃 - 칼럼 탈락 현상 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879샘플.boxA:after {content: ""; display: block; clear: both}.box1 { float:left; width: 50% ; height: 200px; border:4px dotted green; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; } .box2 {float:.. 2016. 11. 2. 3.레이아웃 - 박스너비 지정 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081샘플.boxA:after {content: ""; display: block; clear: both}.box1 { float: left; width: 33.3333% ; height: 200px; border:4px dotted green; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; } .bo.. 2016. 11. 2. 3.레이아웃 - 가로 정렬할 박스의 개수 변경 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253샘플.box1{border:4px solid green; line-height: 200px; float:left; width:32.5%}.box3{border:4px solid green; line-height: 200px;float:left; width:32.5%}.box2{border:4px solid green; line-height: 200px; float:left; width:32.5%}.box4{border:4px solid green; line-height: 200px;}.boxA:after{border:4px solid.. 2016. 11. 1. 2.레이아웃 - 박스가로정렬 1. 1. float를 left로 지정하면 박스는 자신이 가진 너비만큼 차지하며 순서대로 왼쪽에 붙어 위치를 잡는다. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849샘플.box1{border:4px solid green; line-height: 200px;}.box2{border:4px solid green; line-height: 200px; float:left}.box3{border:4px solid green; line-height: 200px; float:left}.box4{border:4px solid green; line-height: 200px;}.boxA{border:4px so.. 2016. 11. 1. 1.레이아웃 - 박스정렬 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849샘플.box1{border:4px solid green; line-height: 200px;}.box2{border:4px solid green; line-height: 200px;}.box3{border:4px solid green; line-height: 200px;}.box4{border:4px solid green; line-height: 200px;}.boxA{border:4px solid RED; line-height: 200px;} BOX1 BOX2 BOX3 BOX4 Colored by Color Scriptercs 두번째와 세번째 박.. 2016. 11. 1. 이전 1 다음
