본문 바로가기

coding/css

 (17)
0531 / background & gradient background-attachment : fixed; 처리 시 -> background-position : 브라우저 기준으로 위치가 잡힘. background-color : hsla hue : 색상 0~360 saturation : 채도 0~100% light : 명도 0~100% alpha : 투명도 0~1 읽는 순서는 뒤에서부터 읽는 것이 쉽다.
0531 / transform (형태변형) - transform * 형태를 변형하게 하는 기능 (반드시 block 처리 해야된다!) * x, y, z 3개의 축을 사용 - scale (크기) - translate (이동) - skew (뒤틀기) - rotate (회전) -> rotate 는 기본 z축으로 회전 - perspective (원근법)
0527 / font 내용 정리 * font font-family : '사용할 서체명', '앞서체가 없다면 적용할 서체', '대체 서체', 최종 계통서체; font-style : normal; font-weight : 100 ~ 900; font-size line-height : 줄 사이의 간격 letter-spacing : 글자와 글자간 간격 word-spacing : 단어와 단어간 간격 text-transform : 글자 변화 주기 text-align : 텍스트 정렬 white-space : 의미없는 공백 text-overflow : 더보기 (...) overflow : 지정영역에서 넘치는 것 text-decoration : 글자 꾸며주기 text-decoration-color : 꾸며주는 색깔 text-decoration-styl..
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 -----------------------------..
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..
0511 / layout.css - float와 clear 속성값 @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 { /* overflow:auto; */ width:100%; height:auto; background-color: #fa0; } .sect_01 { float:left..
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..

티스토리툴바