웹솔루션개발 25년 노하우! 해피CGI의 모든것

CSS 입문자들에게 힘든 것중 하나인 가로 중앙, 세로 중앙 정렬을 손쉽게 소스까지 만들어주는 howtocenterincss콘텐츠 종류 , 너비, 높이, 정렬방식, 지원브라우저 등을 선택한 후 소스 코드 생성시 선택한 항목에 따라 소스 코드를 제공한다. 정렬에 어려움은 겪는 입문자에게 아주 유용한 사이트이다.

일전에 세로 가운데정렬에 대한 자료를 올렸지만 이번에는 display:flex를 이용한 세로 가운데 정렬을 할수 있는 방법입니다. display:flex 속성을 가진 영역 안의 컨텐츠의 정렬방법을 align-self: center; -webkit-align-self: center; 를 이용하면 가로크기에따라 세로 중앙에서부터 채워지는것을 확인할 수 있습니다. 줄이기전 줄인후 사용법은 아주 간단합니다. 텍스트가 늘어나도 가운데부터 정렬이되여 화면상에 보여줍니다. 텍스트가 늘어나도 가운데부터 정렬이되여 화면상에 보여줍니다. 하위버전의 브라우저에서는 지원이되지 않기때문에 사용상에 제약이 있지만 모바일이나 상위버전에만 작업을 할경우에는 유용합니다 ^^ 위속성이외에도 Flex를 이용한 다양한 레이아웃 및 속성들이..

수평적 중앙에 컨텐츠 배치는 margin:0 auto; 소스로 간단하게 배치가 가능하지만 수직적 중앙에 컨텐츠 배치는 잘 되지 않습니다. 자바스크립트 없이 아래 css 소스로 해결할 수 있는 방법 입니다. .container { width: display: table-cell; vertical-align: middle; } 예) 안녕하세요^^

빈영역에 div를 위치시킬때 컨텐츠를 세로 및 중앙 정렬을 할 수 있는 팁입니다. 영역내에 빈 div 공간을 위치 시킴으로써 출력하기 위한 블럭의 vertical-align:값 을 조정하여 컨텐츠 내용을 상하로 조절할 수 있습니다. 그리고 background영역의 text-align을 조정하여 좌우 정렬을 조정할 수 있습니다. HTML 내용 CSS .background{position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; text-align:center; } .background .inner_block{display:inline-block; *display:inline; *zoom:1; width:0; height:10..

웹페이지에 Tag Cloud 를 출력할수 있는 jquery 플러그인입니다. 첨부된 파일을 다운로드 받아서 압축을 해제하고 index.html, index2.html, index3.html 을 웹브라우져로 열어보시면 데모를 확인하는게 가능합니다. 기능은 각 태그들을 알파벳순으로 정렬하는 기능과, 위 이미지의 상단에 있는 모양 에서 하단의 모양으로 변경되는 기능 정도가 있습니다. 단어를 추가하는 것은 HTML태그에 li 태그를 추가하는 정도로 쉽게 가능하며, 자바스크립트는 화면에 보이는 tag의 모양을 변경하는 코드는 아래와 같고, 알파벳순으로 정렬하는 코드는 위 그림 처럼 홈페이지에서 제공도 해주지만, 첨부파일에 포함된 index3.html 의 소스코드내에도 있습니다. 출처는 http://cssglobe...