프로그램/css
-
[css]css position을 이용하여 상단고정 시키기 <fixed>프로그램/css 2013. 11. 4. 14:06
position 을 이용하여 상단 엘리먼트 고정 시키기 위와 같이 상단 TOP 부분을 고정 시키고 스크롤을 내리면 CON 부분만 스크롤 잡히게 하는 방법 입니다. 뭐 css/position에 대해 잘 이해하고 계신다면, 금방 할 수 있는 방법이라 생각됩니다. 위 방법의 핵심은 fixed입니다. top/con 을 감싸고 있는 wrap이 있습니다. 이 wrap에다 postion:relative를 주고, 그 안에 top에 position:fixed를 줬습니다. fixed 옵션을 줬기 때문에 relative를 갖고 있는 영역을 기준으로 고정이 되는 것 입니다. con 부분은 top 영역과 겹쳐진 상황이라 padding-top을 주어 내용부분을 밑으로 내렸습니다. 이러한 방법을 잘 응용하면 될거 같구요. 뭐 다른..
-
[CSS]background-image 사용하기 /img태그와의 차이 <background-repeat>프로그램/css 2013. 11. 4. 13:51
background-image 사용 하는 방법과 img태그와의 차이 CSS의 background-image 사용 방법에 대해 포스팅 하겠습니다. 보통 태그로 하나의 엘리먼트를 이미지로 지정 하는 경우도 있지만 그 엘리먼트의 백그라운드를 이미지로 지정되게 하는 방법을 주로 사용한다. 이 둘의 쓰임세는 같습니다. 실제로 브라우저에서도 많은 차이가 나지 않는다고합니다. 대신 태그가 먹혀 있는 엘리먼트를 마우스로 지정 할 수 있지만, background-image 같은 경우는 선택되지 않는 점! 더 정확하게 이 둘의 차이점을 파해쳐 보자면.. 는 해당 페이지의 content에 해당되는 것 background-image는 presentation에 해당되는 것 이 둘을 정확하게 사용 할때는 이렇게 분류 하면 됩니다..
-
[CSS/HTML] CSS 속성 값 선언순서 <코딩순서 정리>프로그램/css 2013. 10. 14. 17:54
CSS 속성 값 선언 순서 정리 모질라 기준으로 정리 했습니다. CSS 여러 속성값 중 아래와 같이 순서를 정하여 하면 좀더 좋다고 합니다. 뭐 요즘 날로 날로 PC 사양이 발전하여 크게 상관은 없지만, 그래도 코딩을 함에 있어 아래와 같이 순서대로 하면 좋겠죠? 1. display 2. list-style 3. position 4. float 5. clear 6. width / height 7. padding / margin 8. boder / background 9. color / font 10. text-decoration 11. text-align / vertical-align 12. white-space 13. other text 14. content