감성 퍼블리셔 html,css

CSS display none과 block 속성 이해하기 css 속성중 많이쓰는 display none, display block 에 대해 알아보도록 하겠습니다. 이 css 속성은 javascript, jquery 로 toggle 형식을 만들때 많이 쓰고있을텐데요. display에는 4가지 속성이 존재합니다. 1. display - block 2. display - inline 3. display - none 4. display - inline-block 위 속성에 대한 기능에 대해서 알아볼까요? 1. block -적용된 태그는 블록요소를 가지며, 가로값이 100%로 줄바꿈이 일어납니다. span태그같이 inline태그에 사용해도 같은 기능을 가집니다. 2. inline -적용된 태그는 인라인요소를 가지..

footer가 항상 최하단에 붙어있기 (HTML/CSS) 출처 : http://blog.naver.com/parkgaya?Redirect=Log&logNo=130120356744 종종 어떤 홈페이지에 footer가 항상 촤하단에 붙어있는 경우를 보게 된다. (예 http://mail.naver.com, http://me.naver.com/index.nhn 등 로그인페이지) 창의 크기에 상관없이 그리고 창의 크기가 변화하여도 항상 최하단에 고정되어서 움직입니다. 콘텐츠 시작 여기까지 COPYRIGHT 원하는 기능은 메뉴/컨텐츠/푸터로 나누고 메뉴 / 푸터를 제외한 부분만큼 스크롤 없이 화면에 꽉 차있고 푸터는 늘 화면 하단에 위치 일단 스타일 시트부분을 기존에 만들어진 페이지들에 쓰이는 클래스 네임을 바꿔..

씨네큐브 반응형웹 사이트 보기 우연히 사이트 메인시안을 참조하기 위해 벤치마킹을 하는 도중에 들어오게 된 사이트입니다. 요즘은 웹사이트에 들어가면 습관처럼 브라우저창 가로를 줄여보네요, 아무래도 반응형웹이 그만큼 대중화가 되어 사용이 되고 있다는 뜻이지요. | 이것은 씨네큐브의 메인페이지 입니다. 기본적으로 GNB는 좌측에 위치하고 있으며 우측에는 관련 컨텐츠가 뿌려지는 형태입니다. 조금 브라우저 창을 축소해보았습니다. | 네, 보시는것처럼 GNB가 상단으로 올라갔네요. 메인 제이쿼리는 이와같이 비율유지하며 축소가 되고 하단부분에 좀더 큰 프레임으로 메인제이쿼리가 반복적으로 구현되는것을 확인하실 수 있습니다. | 이것은 대략 모바일 크기에 맞게 줄였을떄 구현되는 페이지 모습입니다. GNB부분을 전체보기를..

반응형 관련 홍익대학교 졸업전시회 사이트 | 브라우저 창크기와 관련하여 유연하게 변형이 되는 반응형 웹사이트에 대해서 적어보았다. |홍익대학교는 매년 이러한 졸작을 웹사이트를 구현하여 전시를 하는것 같다. 웹 카다로그 개념으로, 졸작에 작품과 관련 컨텐츠를 웹으로 구현하였다. 지난 2008년, 2011년, 그리고 내가 지금 포스팅을 하려는 2012년 일자이다. | 처음 메인페이지에 들어가면 일단 시각적인 효과가 눈앞에 펼쳐진다. 우측에 작은 썸네일들이 일정한 효과를 주며 구현이 된다. | 브라우저 창 크기를 가로폭을 좁히게 되면 우측 썸네일들이 비율이 일정하게 축소되며 밀리게 되는 현상을 볼 수 있다. 전체적으로 %를 활용하여 크기에 민감하게 반응하도록 한 것 같다. | 썸네일을 오버했을시 관련 컨텐츠가..

[CSS3] background-size 속성 사용법 background-size 속성은 CSS3에서 추가된 속성으로, CSS3 이전에는 처리할 수 없었던 배경 이미지 크기를 조정할 수 있다. 값은 px와 % 같은 단위로 쓸 수 있고, auto, cover, contain과 같은 키워드를 쓸 수도 있다. background-size : 가로크기 세로크기; 원본 크기 기본값은 auto이며, 요소 배경으로 이미지를 삽입하면 요소 크기와 상관 없이 이미지 원본 크기대로 처리한다. background-size:auto 400px; 가로 크기를 auto로 설정하고 세로 크기를 400px로 설정하면 이미지의 세로 크기가 400px로 바뀌고 가로크기는 세로크기 대비 원본 비율에 맞추어 바뀐다. background-s..

출처 : 하드코딩하는사람들 http://cafe.naver.com/hacosa/15708 HTML 문서를 보다 보면 문서 상단에 글들이 놓여 져 있다. 바로 DTD 라는 것인데 DTD란? Document Type Definition 는 브라우저 랜더링 모드를 지정해주고 유효성 검증기의 기준이 되므로 XHTML 문서의 상단에 반드시 선언해 주어야 한다. 만일 DTD 를 생략 하거나 형식이 잘못된 문서일 경우에는 웹 브라우저마다 코드의 해석방식이 다른 Quirks mode 로 렌더링이 되기 때문에 엉뚱한 결과물로 출력되는 문제에 직면하게 된다. DTD 기본형식. - Transitional : 단어의 뜻 그대로 과도기적으로 사용하기 위한 선언이다. 호환성을 위해서 strict보다 유연하다. 선언된 XHTML ..