반응형 css7 Border-radius, CSS3로 하는 라운딩 처리 방법 Border-radius, CSS3로 하는 라운딩 처리 방법 2012/01/12 - Photo by arkonova - CSS3에서 border-radius를 이용하면,복잡한 코드나 이미지를 사용하지 않고도 쉽게 라운딩처리를 원하는 형태로 할 수 있습니다. border-radius 사용법은 아주 간단합니다. #example1 { border-radius: 15px; } 그런데 파이어폭스에서는 -moz- 속성을 추가해 주어야 화면에 제대로 보여지기 때문에 다음과 같이 속성값을 동시에 추가해 주는 것이 좋습니다. #example2 { -moz-border-radius: 15px; border-radius: 15px; } 어떻게 동작하는가? border-radius는 추가 속성을 지정해주어 각 모서리마다 독립.. 2012. 1. 12. DIV와 CSS 레이아웃, 웹표준에 대한 소개 DIV와 CSS 레이아웃, 웹표준에 대한 소개 2012/01/11 DIV태그에 관한 간단한 소개 DIV는 Division의 약자로 나누고 쪼갠다는 뜻입니다. 예를 들면, 우리가 흔히 이야기 하는 2단 레이아웃이니 3단 레이아웃이니 이야기할때 큰 틀을 하나 잡고 가로 혹은 세로방향으로 내부를 나누어갑니다. 바로 이런 역할을 하는 태그라는 뜻이죠. DIV와 CSS의 상관관계? DIV는 (X)Html의 요소이지만 CSS에서 매우 비중있게 다루어집니다. 왜냐하면 DIV의 역할이 CSS와 함께 (X)Html문서에서 레이아웃을 잡는데 핵심적인 개념으로 사용되기 때문인데요. 과거에는 레이아웃을 잡을때 table 태그를 많이 이용했는데, (X)Html, CSS, 자바스크립트를 W3C 표준 권고안이 정하는 문법체계에 맞.. 2012. 1. 11. 헤더 태그에 SEO를 고려하여 텍스트 대신 이미지 넣는 방법 헤더 태그에 SEO를 고려하여 텍스트 대신 이미지 넣기 2012/01/03 - Photo By muzzlehatch - 헤더 태그에 SEO를 고려하면서 텍스트 대신 이미지를 넣는 방법은 뭘까요? 아시다시피 검색엔진에서 웹페이지를 검색할때 해당 페이지의 텍스트를 위주로 아...이것은 무엇에 관한 글이다...하고 인식합니다. 그래서 전체적인 텍스트와 이미지의 구성비를 보았을때 이미지보다는 텍스트가 많아야 검색에 유리하지요. 그렇다고 텍스트로 도배된 글이 검색에 유리하다는 말은 아닙니다..;;; 과유불급이라 하면 이해가 되실런지...아무튼 텍스트 영역에서도 제목을 작성하는데 사용되는 헤더 태그, ~는 검색 최적화(SEO)에서 매우 중요한 위치를 차지합니다. 그래서 헤더를 작성할때 포토샵에서 멋지게 작성된 문자.. 2012. 1. 3. CSS ID 선택자 CSS ID 선택자 2012/01/02 - Photo by h3idi.harman - CSS에서 ID 선택자는 이전 시간에 이야기한 Class 선택자와 매우 유사합니다. 하지만 중요한 차이점이 있는데 그것은 ID 선택자는 Class 선택자와는 다르게 같은 (X)Html 파일에서 단 한 번만 사용할 수 있다는 것입니다. 지난 포스팅에서도 언급했듯이 Class 선택자는 무제한 반복 사용이 가능합니다. [CSS] - CSS 클래스(Class) ID 선택자는 #을 적고 임의의 ID명을 지정하여 사용합니다. 킥스의 고도를 기다리며 #container{ width: 300px; margin: auto; padding: 20px; border: 1px solid #666; background: #fcf8f8; } 고.. 2012. 1. 2. CSS 클래스(Class) CSS 클래스(Class) - Photo By quaelin - Class 선택자는 동일한 (X)Html 엘리먼트에 각기 다른 스타일을 적용할때 유용하게 사용됩니다. 동일하게 반복되는 패턴을 가지는 스타일을 주고자할때 Class를 활용하면 코드를 간결화하면서, 유지보수도 효율적으로 할 수 있습니다. 이 Class 선택자는 CSS에 정의해 놓고, HTML문서에서 반복적으로 호출하여 사용될 수 있습니다. Class 선택자의 사용Class 선택자는 점(.)을찍고 자신이 원하는 임의의 이름으로 Class명을 지정하고 스타일을 정의하면 됩니다. .blueboldtext{ font-size: 14pt; color: #403cf2; font-weight: bold; } 실제로 어떻게 사용되는지 예를 들어 보겠습니다... 2011. 12. 30. CSS 기초적인 구문 규칙 CSS 기초적인 구문 규칙 CSS(Cascading Style Sheet) 문법은 (X)Html 문법과는 다릅니다. 하지만 그다지 복잡하지는 않아요. HTML이 웹문서의 구조와 내용이라면, CSS는 그 구조와 내용들이 어떻게 웹페이지에서 표현되어야 하는지를 정의합니다. 흔히 사용하는 MS워드나 아래한글 같은 문서 편집기로 문서를 만든다고 생각해보세요. 텍스트로 주르륵 나열한 문서는 읽기도 싫어지고 보기에도 좋지 않습니다. 그래서 폰트크기를 조절하고 색상을 입히고 글배치를 보기 좋게 만들죠. 바로 이런 역할을 담당하는 것이 CSS입니다. 웹페이지는 html, 흔히들 이야기하는 태그만으로도 만들 수 있지만, 보다 화려하고, 멋지게 표현해내기 위해서 꼭 필요한 것이 바로 CSS입니다. CSS의 구조CSS는 기.. 2011. 12. 27. 이전 1 2 다음 반응형
