개인공간

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;}

모바일 웹 바탕화면 아이콘 추가 모바일 웹 Input type 속성 - 기본적인 모바일 키보드가 제공됩니다. - 기본적인 모바일 키보드가 제공됩니다. - 기본적인 모바일 키보드 + @ / . 제공됩니다. - 기본적인 숫자 모바일 키보드가 제공됩니다. - 기본적인 모바일 키보드 + / + . + .com 이 제공됩니다 . - 기본적인 숫자 모바일 키보드가 제공됩니다 go 부분이 Search로 변경됩니다 모바일 웹 href 태그 속성들 - 전화걸기 : 전화번호 - 문자보내기 : 문자보내기 - 문자보내기 실행 : 문자보내기 - 메일보내기 : 메일보내기 - 메일보내기 실행 : 메일보내기 - 내용 채워서 메일 보내기

정의목록() 올바르게 쓰고 계신가요?nate의 화면을 보다가 의문이 들었다. dl dt dd로만 쓸수 있는줄 알았는데~ 저렇게 바꿔 써도 되나? 왠지 될꺼 같기는한데 확실히 몰라서 찾아보았다.DTD 명세(http://www.w3.org/TR/1999/REC-html401-19991224/struct /lists.html#edef-DD) 에 따르면, DL(Definition lists)은 DT(definition term), DD(definition description)와 함께 쓰인다.DT, DD의 순서에 상관이 없다.DT에는 인라인요소만 갖을 수 있다,DD에는 블록요소와 인라인요소 모두 갖을 수 있다.DT와 DD중 하나만 있어도 된다.DT와 DD는 여는 태그는 필요하지만 닫는 태그는 생략해도 상관없다 ..

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

파이어폭스에서 반응형 웹디자인 보려면(부가기능설치후)도구 > web developer Extenslon >resize > view Responsive Layouts 크롬에서 반응형 웹디자인 보려면(부가기능 설치후) web developer > resize > view Responsive Layouts

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 변화의 중간 과정에서 움직임이 어떻게 계산되는지를 정합니다. 보통 ..

Responsive web design 현한가지 웹페이지로 여러 Device (모바일, 태블릿, 데스크탑 등..) 장치로 접근이 가능한 반응형 웹디자인 입니다. 화면 너비에 따라 유동적으로 변하는 유동형 레이아웃(fluid layout)과 유연한 이미지(flexible image), 그리고 미디어 쿼리(media queries)가 어우러져서 특정 환경에 '최적화'된 방법이 아니라 환경에 반응하여 스스로 적응하는 방법 미디어 쿼리는 css3 속성으로서 지원되는 브라우저는 IE9, 파이어폭스, 오페라, 사파리, 크롬플러스 에서 사용됩니다. IE8 이하 버전에서는 사용이 불가능 합니다. 미디어쿼리가 무엇이며 어떤 역할을 하는가 ? 미디어쿼리는 사용자의 환경을 감지할 수 있는 css 속성, CSS2 에서는 최초..

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%

세로정렬 세로정렬 세로정렬 CSS Code.warp_height{height:100px; border:2px solid #000; margin:20px;} /* 높이가 꼭 정해져야함 */ .temp_tag{display: inline-block; vertical-align: middle; width: 0; height: 100%; border:1px solid red;} .midde_tag{display:inline-block;vertical-align:middle;} HTML Code 세로정렬 세로정렬 세로정렬