CSS4 박스모델 div 의 position 특성 박스모델 position 특성 웹 페이지 작성할 때, table 로 구획정리하지않고 div 로 구현한 후, css를 이용해서 조정하는 방법을 사용한다.근데, 위치 조정할 때마다 헷갈리고 그러네..ㅡ.ㅡ 요점만 간략히 정리해보면서 머리에 쏙 집어넣어야겠다. 소스작성은 대개... html 에서는 아래처럼 작성하고, hello css 에서 아래처럼 작성한다. .box1 { width: 100px; height: 200px; position: fixed; top: 10px; left: 10px;} 위 예에서 box1 에 position 속성으로 fixed 라는 것을 사용하고 위치를 top 10px, left 10px 라고 적었다.의미는??위치 정렬 기준이 fixed이고, 그걸 기준으로 할때 위에서, 왼쪽에서 각.. 2015. 7. 2. CSS margin, padding 한줄에 적을 때 순서 CSS margin과 padding 한줄에 적을 때 순서 css 에서 박스모델의 margin과 padding을 설정해줄때, 몇가지 방법이 있습니다. 첫째. 각각 다 지정해주는 방법 margin-top: 10px; margin-right: 20px; margin-bottom: 15px; margin-left: 5px; 혹은 margin: 10px 20px 15px 5px; 이때, 순서는 상우하좌 입니다. 시계방향으로 돌아가네요. 둘째. 상하의 margin 이 같고, 좌우의 margin 이 같을 때 margin: 10px 5px; 셋째. 좌우는 같은데, 상하가 다를 때 margin: 10px 5px 25px; 이때, 처음나오는 10px는 margin-top 의 값이고, 마지막에 나오는 25px는 margin.. 2013. 1. 9. 11. 트위터 부트스트랩 이용해서 레이아웃 만들기 Chap 11. 진행하는 동안 보이는 페이지의 모습이 바뀔 순간이 왔습니다. 사이트 전체에 적용될 CSS 파일을 작성해서 적용을 할 수도 있겠습니다만, 많은 시간과 노력이 필요합니다. 그래서!! 잘 만들어져있는 CSS 파일을 이용하도록 하겠습니다. 트위터 개발자들이 만들어서 배포하고 있는 부트스트랩 이라는 CSS 프레임워크가 있습니다.아래 사이트에서 다운받을 수 있습니다. 오늘 현재 버전 2.2.2 가 나왔네요. http://twitter.github.com/bootstrap 악! 주소가 바뀌었는데, 수정을 못 하고 있었네요..부트스트랩 주소입니다. http://getbootstrap.com 다운받아서 압축을 해제하면 bootstrap 디렉토리아래에 css 디렉토리, img 디렉토리, js 디렉토리가 있.. 2012. 12. 14. 다음 지도 API v3 와 트위터 부트스트랩(Twitter Bootstrap) CSS 다음 지도 API v3를 이용해서 간단한 기능의 웹 페이지를 작성하던 중에 발견한 내용을 정리합니다. 다음 지도 API v3 를 이용해보려고, 우선 다음에서 제공하는 매뉴얼대로 테스트 페이지를 작성해서 실행해 보았습니다. 시키는대로 하면 아래와 같이 이쁘게 지도가 표시가 됩니다. 다음 지도 API v3 홈페이지 : http://dna.daum.net/apis/maps/v3 간단하게 API 사용법을 살펴본 후에, 제가 만들어보려던 웹 페이지를 만들면서 트위터의 부트스트랩 CSS 파일을 불러오도록 소스를 작성하였습니다. 트위터 부트스트랩 홈페이지 : http://twitter.github.com/bootstrap/ 그렇게 트위터의 부트스트랩 CSS를 적용시키니까, 아래와 같이 지도가 제대로 표시가 되지 않더.. 2012. 3. 25. 이전 1 다음
