본문 바로가기

보물창고/IT 정보

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
반응형