'CSS' 태그의 글 목록 (3 Page)

CSS 외곽선속성(Outline Property)

CSS 속성중에 테두리를 결정하는 border 속성보다 더 외곽에 위치하고 있는 outline 속성에 대하여 알아봅니다. outline 축약 속성이며, 테두리와 유사하지만 공간을 차지하지 않으며, 사각형이 아닐 수도 있다. p {outline: #00FF00 dotted thick;} outline-color, outline-style, outline-width 순서로 속성값을 작성한다. 생략된 값이 있을 경우 기본값이 적용된다. 속성값 outline-color : outline의 색상을 지정한다. outline-style : outline의 스타일을 지정한다. outline-width : outline의 너비를 지정한다. inherit : 부모 요소로부터 값을 상속 받는다. 자바스크립트 문법 objec..

웹코딩/CSS 2015. 6. 2. 15:00

CSS 테두리속성(Border Property)

CSS 속성중 테두리를 둥글게 하거나 색상, 모양을 설정하는 border 속성에 대하여 알아봅니다. border 축약 속성으로, border-width, border-style, border-color 순서로 작성한다. 몇몇 값을 생략해도 상관없다. p {border: 5px solid red;} 속성값 border-width : border의 width 값을 지정 border-style : border의 style 값을 지정 border-color : border의 color 값을 지정 inherit : 부모 요소로부터 값을 상속 받는다. 자바스크립트 문법 object.style.border="3px solid blue" 지원 현황 인터넷익스플로우 파이어폭스 사파리 크롬 오페라 지원 지원 지원 지원 지..

웹코딩/CSS 2015. 6. 2. 12:00

CSS 배경속성(Background Property)

CSS의 배경 속성은 요소의 배경 효과를 정의하는데 사용됩니다. CSS3에서 추가된 내용은 구형 IE에서는 지원하지 않을 수 있음에 유념하세요. background 축약형 속성으로 background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-image 순서로 작성한다. 몇몇 값을 생략해도 문제없다. /* background-image background-position [/background-size] repeat-style attachement box background-color */ h1 {bac..

웹코딩/CSS 2015. 6. 1. 17:00

CSS 선택자(Selector) 및 지원 여부

CSS 선택자의 종류와 용도를 알아보고 IE 버전별로 지원 가능한지 알아봅니다. CSS 선택자 CSS에서 선택자(selector)는 스타일을 원하는 요소를 선택하는데 사용되는 패턴이다. 선택자 & 상속 전체(universal) 선택자 * 기호를 이용해서 문서의 모든 요소를 선택하게 된다. * { backgrond-color: green; } 리스트1 리스트2 리스트3 유형(type) 선택자 원하는 요소를 요소 이름으로 선택하게 된다. p { color: #ffffff; background-color: green; } ID 선택자 요소중에 해당 id 속성의 값으로 구성된 것을 선택하게 된다. #header { position: relative; } 클래스(clsass) 선택자 요소중에 해당 class 속성..

웹코딩/CSS 2015. 6. 1. 15:00

CSS 기초(정의, 링크, 문법, 우선순위)

CSS의 입문자들을 위해 유념해야 하는 부분들을 간단히 작성한 글입니다. CSS 정의 CSS는 Cascading Style Sheet의 약자이다. CSS는 문서의 콘텐츠와 레이아웃, 글꼴 및 시각적 요소들로 표현되는 문서의 외관(디자인)을 분리하기 위한 목적으로 만들어졌다. CSS 레벨 CSS 명세는 World Wide Web Consortium에서 관리한다. CSS는 세 개의 주 레벨이 정의되어 있고 이 레벨들은 버전이나 세대라고 볼 수 있으며, 현재 CSS1, CSS2 및 CSS3가 정의되어 있다. CSS 속성 여러 속성 값은 반드시 공백으로 구분되어야 한다. 축약 표현 속성은 여러 속성 값을 하나의 간소화된 선언으로 적용할 수 있다. 속성이 명시되지 않으면 해당 속성의 기본 값이 적용된다. CSS ..

웹코딩/CSS 2015. 6. 1. 12:00

Placeholder 포커스시 감추기

HTML5의 placeholder 속성은 input 요소와 textarea 요소에 알맞은 힌트를 제공하는 목적으로 사용됩니다. 다만, 브라우저별로 해당 요소에 포커스가 될때 작동하는 방식에서 차이점이 발생합니다. 이를 하나로 통일하는 방법에 대해서 설명합니다. IE처럼 포커스시 감추기 IE에서는 input 요소에 포커스를 받으면 placeholder 글자가 바로 사라지지만 다른 브라우저들은 포커스를 받고 글자를 실제로 입력해야 placeholder 글자가 사라진다. 이것을 IE와 같은 방식으로 통일되도록 구현해보자. 참고 : How do I auto-hide placeholder text upon focus using css or jquery? 위의 링크의 내용을 정리하면 아래와 같이 css를 삽입함으로..

웹코딩/CSS 2015. 5. 23. 12:00

CSS 가운데(중앙) 정렬

콘텐츠를 가운데 정렬하는 일은 굉장히 빈번한 일입니다. 부모 혹은 자식 요소에 따라 이를 구현하는 방법이 상이하니 염두해 둡시다. 기본적인 내용 정렬 가운데 정렬을 알아보기 앞서, 가장 간단한 정렬방법을 알아봅니다. 내용 가로 정렬 내용을 같은 종결 블록 요소의 왼쪽, 중앙, 오른쪽, 양쪽에 정렬한다. .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-justify { text-align: justify; } 내용이 든 종결 블록 요소에만 적용된다. 인라인 요소에 적용되지 않으며, 구조 블록 요소에는 제대로 적용되지 않는다. 구조 블록 요소에 text..

웹코딩/CSS 2015. 4. 15. 04:43

float 레이아웃 문제 해결

float를 이용한 레이아웃을 작성할때, 부모 요소가 자식 요소의 크기를 반영하지 못하는 문제가 생깁니다. float가 적용된 요소는 문서의 흐름에서 제외되어 둥둥 떠 다니는 레이어처럼 떠있게 되는데 float 되지 않은 다른 블럭 요소들이 다른 층에 떠 있게 되어서 자식의 높이가 부모에게 전달되지 못하게 되는 것입니다. FLOAT 레이아웃 일단 float 레이아웃의 기본적인 형태를 예로 들어 본다. header nav content 위에서 전체를 감싸는 컨테이너가 자식 요소들의 높이를 반영하지 못하고 자신의 높이만큼만 보여주고 있다. 아래가 원래 의도한 레이아웃으로 부모 컨테이너가 자식 요소들을 제대로 반영하고 있다. header nav content 기본 구조는 아래와 같다. header nav co..

웹코딩/CSS 2013. 12. 13. 19:43

Normalize.css - CSS 초기화

해당 글은 Normalize.css - CSS 초기화로 이동되어 새로 작성되었습니다. 이동 해주세요. 웹 브라우저의 기본 속성값들을 초기화 시키는 CSS 코드 모음중에 하나로 가장 유명한 노멀라이즈입니다. 버전에 따라 조금씩 상이하니 유념하세요. 홈페이지 : http://necolas.github.io/normalize.css/ /* ========================================================================== HTML5 display definitions ========================================================================== */ /** * HTML5에 새로 추가된 요소들을 블럭으로 지..

기존 작성물 2013. 12. 10. 19:21

전체화면 배경고정 - FullScreenBackground

전체 화면에 이미지나 배경을 고정시키는 일이 필요한 경우가 종종 있습니다. 관련하여 정보를 찾아 서술합니다. 목표 여백없이 화면에 꽉차게 배경에 이미지를 깔기 윈도우의 사이즈에 따라 이미지의 크기도 변경하기 이미지의 가로 세로 비율 유지 스크롤바 감추기 가능한한 크로스 브라우징 마치 플래시 효과처럼 데모 보기 CSS3를 사용한 손쉬운 방법 배경에 이미지를 고정시키는 가장 손쉬운 방법은 CSS3를 사용하는 것이다. 물론 이미 이미지를 화면에 고정시키는 방법은 많이들 알고 있겠지만 여기서 중요한 점은 바로 전체화면에 꽉차게 영화나 TV를 보듯이 스크롤바도 없게 한다는 것이 요점이다. IE Chrome Firefox Opera Safari background-size 9.0 부터 지원 지원 지원 지원 지원 어..

웹코딩/CSS 2013. 1. 2. 00:00

웹폰트(@font-face) 온라인 서비스

웹폰트를 온라인으로 서비스 해주는 곳들은 알아서! 크로스브라우징을 해주기 때문에 복잡한 CSS의 @font-face 구문을 몰라도 됩니다.가볍게 사용하기엔 안성맞춤 이지요. 각각의 온라인 서비스들은 사용법도 쉽게 설명되어 있으니 그곳을 참고 하도록 합시다. 모빌리스 웹폰트 서비스 국내에선 가장 많은 글꼴 서비스를 하고 있는 곳 같다. 다만 웹폰트의 글꼴 크기는 경우에 따라 5~6Mb에 달하는 것들도 있으니 유념해서 골라야 겠다. 모빌리스 웹폰트 링크 font-face 무료로 나눔고딕 / 나눔명조 / 나눔손글씨를 지원한다.Google WebFont Loader를 사용해 좀 더 옵션을 주무를수 있다. font-face 링크 Google Web Fonts 엄청난 수의 무료 폰트를 제공하는 구글, 한국의 실정과..

웹코딩/CSS 2012. 12. 30. 04:13

웹폰트(@font-face) 적용법 #2 - Cufon 폰트

Cufon 폰트를 실제로 사용하려면 Generator를 거쳐 변환하는 과정을 거쳐야 하는데 번거롭거니와 한글폰트를 사용하는데에는 많은 애로사항이 꽃피웁니다. 첨부된 파일을 사용해서 적용해 봅시다. Cufon 폰트 cufon 폰트는 일반 웹폰트와 달리 캔버스를 이용해 그림을 그리듯 글꼴을 표현하는 방법이다. 우선 첨부된 파일을 다운 받자. 아래와 같은 글꼴이 첨가되어 있다. cufon-yui.js 파일과 사용할 폰트를 계정에 업로드한다. 사이에 아래 소스와 같이 붙여 넣는다. cufon-yui.js 파일은 반드시 포함해야 한다 원하는 폰트를 포함한다 Cufon.replace('아이디명, 클래스명, 태그명', 과 같이 폰트를 사용할 HTML요소를 정해준다 fontFamily : '폰트명'을 적어준다. 이 폰..

웹코딩/CSS 2012. 12. 30. 03:18

웹폰트(@font-face) 적용법

한글 폰트는 아쉽게도 글자 수가 많아 용량이 커지기 때문에 웹폰트 도입이 활발하진 않습니다만 외국에서는 Google Web Fonts 서비스와 Typekit, Cufon등 관련 서비스가 활성화 되어있습니다. 하지만 한글 가독성을 위해 이만한 것도 없으니 미래를 위해 사용법을 배워보도록 합시다. 웹폰트 호환성 @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의 경우..

웹코딩/CSS 2012. 12. 29. 00:16

WEBDIR

CSS 검색 결과