개인공간

P태그를 사용할경우 : ul>li 구조와 동일하게 가되 p>span 구조로 변경한다..lst_sty>* 기본 "당구장표시" .lst_sty>* 테스트 기본 "빼기표시" .lst_sty.mus>* 테스트 리스트 형태는유지대되 도트나/블릿이 없는경우.lst_sty.no>* 테스트 기본 "네모 도트" .lst_dot>* 테스트 리스트 형태는유지대되 도트나/블릿이 없는경우.lst_dot.no>* 테스트 /*** lst_style BASE COMMON ***/ /* base */ .lst_sty, .lst_dot{overflow:hidden; color:#666; line-height:1.5em;} .lst_sty>*, .lst_dot>*{position:relative; padding-left:1.1em;} ...

1주 1개월 1주 1개월 1개월 1개월 .btn_mult{margin:1.38em 0; -webkit-box-align: center;} .btn_mult span{display:block; cursor:pointer; text-align:center; } .btn_set{display:block; padding:1.19em ;-webkit-box-flex: 1; color:#fff; text-align:center; font-size:0.89em; font-weight:bold;} .btn_set span{padding:0 0.8em;} .btn_set+.btn_set{margin-left:0.42em;} .btn_set:first-child{width:100%} .btn_set:not(:last-ch..

Introduction Our Story Our Brand Introduction Our Story Our Brand .tab{display: -webkit-box;} .tab {margin-bottom:1.71em; -webkit-box-align: center;} .tab > li {-webkit-box-flex: 1; font-size:0.92em; text-align:center; border:1px solid #ccc; border-right:none;} .tab > li:last-child {border-right:1px solid #ccc;} .tab > li.on {font-weight:bold; background:#8a7a6c; border:1px solid #8a7a6c; color:..

유동적인 step 디자인 STEP 1 STEP 2 STEP 3 STEP 4 STEP 5 STEP 1 STEP 2 STEP 3 STEP 1 STEP 2 STEP 3 .select_choice.inset{background-color:#ccc; box-shadow:inset 0 0.1em 0.3em rgba(0,0,0,0.3)} .step_bar{position:relative;} .step_bar ul{ display: -webkit-box; -webkit-box-align: center; -webkit-box-pack:justify;} .step_bar:before {width:100%; height:1px; position: absolute; top: 11px; display:block; content..

display:table, table-cell -webkit-box를 이용하여 구조 만들기 기본적으로 %별로 만들고 분할하여 사용하는 방식 기본 splitCell, splitBox를 이용해서 나누는경우(10등분기준) First Name* Middle Name First Name* Middle Name First Name* Middle Name txt 흰색배경에 텍스트가 들어갈경우 Privilege Card No. Privilege Points point Privilege Card No. Privilege Points point mix일경우(form + text가 들어갈경우) - 유동적임 HOUR : MINUTE ~ ~ 주소 검색하기 주소 검색하기 CSS 전체코드 /** FORMTYPE SPLIT **/ ..

1. 웹폰트 호환성 @font-face로 웹폰트를 쓸때 가장 유의해야 할 것이 브라우저간의 호환성이다. IE Chrome Firefox Opera safari WOFF 9.0부터 지원 6.0 3.5 11.10 5.1 EOT IE6~IE9 미지원 미지원 미지원 미지원 보는 바와 같이 modern-browser들은 woff 파일을 모두 지원하기 때문에 사용하는데 무리가 없다. 언제나 문제인 것이 구버전의 IE의 경우인데 IE8 이하의 브라우저들은 eot 파일을 사용해야 한다.고로, IE 구버전들을 위한 eot 파일과 woff 파일 두가지를 준비해야 한다. 사실 IE를 제외한 다른 브라우저들은 ttf 파일도 지원하지만 이는 압축되지 않은 타입으로 웹에서 사용하긴 무리이니 생략한다.웹폰트는 저작권 문제도 포함하..

resize:both - 수평, 수직 리사이징 resize:both를 사용한다..resize_both{resize:both; overflow:auto;} resize:horizontal - 수평 리사이징 resize:horizontal를 사용한다..resize_horizontal{resize:horizontal; overflow:auto;} resize:vertical - 수직 리사이징 resize:vertical를 사용한다..resize_vertical{resize:vertical; overflow:auto;} resize:none - 리사이징 안됨 resize:none를 사용한다..resize_none{resize:none; overflow:auto;}

반응형 웹디자인에서는 max-width: 100%나 width: 100%를 활용하여 콘텐츠가 컨테이너의 너비에 맞게 유동적으로 변경되게 하는 기법이 많이 사용된다. 이 때 높이는 콘텐츠가 가지고 있는 높이를 따르게된다. 컨텐츠가 글자라면 높이가 유동적이어야 하지만 이미지나 비디오의 경우에는 좌우 폭에 따라 비율이 유지되어야 한다. 가로가 100%로 되어 있기 때문에 세로도 퍼센트 값을 지정하면 되겠지만 퍼센트 값은 상위 요소의 값에 상대적이기 때문에 상위 요소의 높이를 지정할 수 없는 경우라면 퍼센트로 높이를 지정할 수 없다. 이때 패딩이나 마진을 이용해서 퍼센트 값을 지정할 수 있다. 50px 100px 200px CSS Code #movie-player-wrapper { position: relati..

transition-property 변화가 일어날 속성을 명시합니다. 쉽표(,)로 구분하여 여러개의 속성을 동시에 지정할 수 있습니다. transition-duration 변화가 일어나는 시간 간격을 명시합니다. 기본값은 0이기 때문에 이 값을 표시를 해줘야 부드러운 변화 모습을 볼 수 있습니다. 음수값을 지정하면 0으로 인식됩니다. div {opacity:0; transition-property: opacity; transition-duration: 1s;} webkit,moz,마우스올려보기 transition-property: opacity; transition-duration: 1s; transition-timing-function 변화의 중간 과정에서 움직임이 어떻게 계산되는지를 정합니다. 보통 ..

box 세로정렬 100% CSS Code.box_wrap{position:relative; height:100px; background:black;} .box_wrap .box {position:absolute; top:0; left:0; right:0; bottom:0; margin:10px; background:yellow} HTML Code box 세로정렬 100%