CSS 시작하기 (사용 방법, 강좌)

css 사용에대한 설명입니다
자세한 내용은 기사 원문으로 가시면 모두 보실 수 있습니다

---

요약： CSS 2.1과 크로스 브라우저 CSS3를 비롯한 표준화된 CSS 스타일 기술을 알아봅니다. 특히, 효과적인 기술을 사용하여 검색 엔진 최적화 기능을 강화하는 방법을 배울 뿐만 아니라 인쇄, 모바일 및 웹 뷰에 적합한 다양한 CSS 스타일을 학습하고 강화된 접근성을 확인합니다.

CSS(Cascading Style Sheet)는 (X)HTML 웹 페이지 위에 매우 간단하게 계층적으로 적용할 수 있는 디자인 기술이다. 스타일 시트를 "계단식"화하면 스타일 시트를 전체 사이트에 적용할 수 있다. 다시 말해서 스타일을 해당 웹 사이트에 적용하면 스타일이 각 페이지의 각 요소 전체에 적용된다.

웹 사이트에서는 데이터를 디자인과 분리하는 개념이 중요하다. 데이터는 (X)HTML을 사용하여 브라우저로 전송하며 디자인은 CSS를 사용하여 데이터에 적용한다. 이렇게 데이터를 디자인과 분리하면 특정한 접근성이 필요한 경우에 직접 디자인하지 않아도 사용자가 웹 페이지를 렌더링할 수 있을 뿐만 아니라 "이러한 방식으로 된" 디자인이 없어도 검색 엔진과 같은 시스템에서 웹 사이트를 색인화할 수 있다.

이 기사에서는 웹 사이트의 모습을 개선할 수 있는 기존의 다양한 최신 CSS 기술을 자세하게 살펴본다. 이 기사에서는 (X)HTML에 대한 몇 가지 지식을 생각해보고 이 지식을 웹 사이트 디자인에 필요한 초기 플랫폼으로 역할을 할 수 있게 하고 작동개발에 필요한 기준점으로 삼는다.

---

내용 목차

CSS의 형식

기본 스타일

목록 1. body 태그용 CSS 기본 스타일

(X)HTML에 CSS 적용

빠르지만 지저분한 style 태그

빠르고 깔끔하며 드러나지 않는 CSS 링크

스타일 지정 지침

간단한 <div> 태그

CSS 2.1의 표준 <div> 효과

CSS3에서 강화된 <div> 효과

목록

링크

목록 2. CSS 링크 데코레이션 예제

목록 3. 일부 CSS3 특성을 사용하여 기능을 개선한 CSS 탐색 예제

테이블을 사용하지 않고 열 생성

목록 4. div를 사용하여 열을 생성하는 (X)HTML 예제

목록 5. div 열을 생성하는 CSS 예제

글꼴 타이포그래피

글꼴 다운로드

---

 
 결론

CSS2.1과 CSS3는 책에서 다룰만한 중요한 주제이다. 이 기사에서는 스타일시트를 제대로 작성하는 방법을 피상적으로 살펴보았으므로 독자가 웹에서 CSS 참고자료를 찾고 있는 경우에는 이 기사를 바탕으로 지식을 넓혀갈 수 있을 것이다.

(X)HTML과 CSS를 서로 독립적으로, 드러나지 않게 사용하여 표준 호환성, 접근성 및 검색 엔진 최적화 가능성을 극대화할 수 있다. CSS는 XHTML 및 HTML과 마찬가지로 우수한 기술이지만 반드시 표준화된 방식으로 사용해야 한다. 이러한 표준은 웹 디자인에 필요한 기본 요소가 될 수 있지만, 디자인 자체는 아니다. 우수한 디자인은 실용적이고 완벽해야 한다.

---

 기사 원문으로 가시면 에제 코드와 자세한 설명을 볼 수 있습니다

아이베엠 디벨로퍼 웍스 : http://www.ibm.com/developerworks/kr/

기사 원문 주소 : http://www.ibm.com/developerworks/kr/library/wa-getstartedcss/index.html