본문 바로가기

web

(71)
0517 / reset_and_common.css - reset_and_common.html DOCTYPE html> Document 웹기초 reset 세팅 html, body 에 들어가는 여백 초기화 div, 제목, 내용, 이미지, 리스트 여백, 선 초기화 list의 앞에 들어가는 list-style 제거 a요소의 글씨색, 밑줄 제거 ------------------------------------------------------------------------------- - reset.css @charset "UTF-8"; /* reset.css */ html, body { width:100%; height:100%; margin:0; padding:0; } h1, h2, h3, h4, h5, h6, p,pre,blockquote,address, ..
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-..
0515 / float & clear 속성 내용 정리 layout.css [ 선택자 내부의 끝에 이유불문 가상으로 태그 붙이기 ] 부모요소 높이값이 기본적인 수치(px, %)가 아닌 auto; 일 경우에, float을 감싸고 있는 자식요소의 높이값을 임의로 늘리면, 정해져있는 부모요소 높이값보다 커지게 되므로 자식요소 높이값이 커졌을때, 부모요소 높이값은 0이 된다. 하지만 부모요소 값이 0이 되면 밑에 있는 다른요소 값과 겹치게 되버린다. 이러한 현상을 막기 위해 이러한 float을 사용하는 요소들 중에 마지막 요소에는 float이 아닌 clear:both를 사용한다. clear:both 요소는 반드시 형태를 가지고 있어야 하며, 내용상 요소를 담을 수 없는 경우에는 가상의 요소로 처리한다. 이때 발생시키는 요소가 ::after 요소이다. ' ::afte..
0513 / layout.css (float속성 & clear속성) @charset "UTF-8"; /* layout_002.css */ /* reset.css */ * { margin:0; padding:0; border:0; outline:0; } /* common.css */ .clearfix:after, .clearfix::after { content:" "; display:block; width:100%; height:0; clear:both } /* ---------------------------------------------------- */ #wrap { width:600px; height:auto; margin:auto; background-color: transparent; } /* #header -----------------------------..
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.css (clearfix, clear:both 개념) @charset "UTF-8"; /* css/src/basic_code_06_float.css */ /* reset.css */ html,body,h1,h2,h3,h4,h5,h6,p,div,ul,li,dl,dt,dd { margin:0; padding:0; } ul,ol,li { list-style:none; } /* */ #wrap { width:800px; height:auto; min-height:900px; margin:auto; background-color: #dfdfdf; } .part { width:90%; height:auto; min-height:300px; margin:auto; margin-bottom:100px; background-color: #faa; } h3 { width:1..
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 가상..