HTML/CSS/JAVASCRIPT 강의실

시삽: 레드플러스 님 
게시판 이동:
 제목 : 10일차 강의내용 - 스타일시트(CSS)
글번호: 21
작성자: 관리자
작성일: 2001/01/16 오전 1:05:00
조회수: 7528
CASCADING STYLE SHEET

학습내용 : 스타일시트(CSS : Cascading Style Sheet) (2001/01/15)

■ 스타일 시트란?

스타일 시트란 HTML문서의 표현에 적용하는 스타일을 사용자가 임의적으로 정의할 수 있도록 함으로써 보다 다양한 HTML 문서를 제작할 수 있도록 함.

 

■ 스타일 시트의 정의

 

 

간단한 CSS 사용예제

여기는 붉은색입니다.

이 문단은 왼쪽 여백이 30pt 이고, 문자크기는 15pt입니다.

 

■ 스타일 시트 상속 관계

 

 - HTML에서는 하나의 태그는 다른 태그를 포함한다.

 - 스타일시트의 상속 : 포함된 태그의 스타일은 포함하는 태그의 스타일을 이어받는다.

 - 두 태그의 스타일 중복시 포함된 태그의 스타일이 우선.

 

스타일 시트 상속 관계

스타일 시트 상속관계

이 문단의 문자색은 파란색 이고 문자 크기는 15pt입니다.

 

■ 스타일의 클래스 정의하기

 

 - myStyle 이라는 새로운 스타일의 클래스를 정의

...

 

스타일의 클래스 정의하기 예제

스타일의 클래스 정의하기

이 문단은 초록색입니다.

이문단은 파란색

이문단은 붉은색

 

■ 새로운 이름을 가진 스타일 정의하기

 

 - myStyle 이라는 새로운 스타일의 클래스를 정의

 - 스타일 클래스와 차이점은 . 대신 #

 - 실제 문서에서는 CLASS 대신 ID를 사용

CLASS < ID속성이 우선...

 

이름을 가진 스타일 정의

이름을 가진 스타일 정의하기

이 문단의 문자색은 초록색

이 문단은 파란색

이 문단은 붉은색

이 문단은 무슨색일까요?

그러면, 이문단은 무슨색일까요?

 

■ 태그내에 스타일 직접 정의하기

 

 

태그내에 스타일 직접 정의하기 예제

태그내에 스타일 직접 정의하기

 

■ 외부파일에 스타일 정의하기

   - 동일한 스타일을 모든 문서에 정의할  때.

 

 

※ 학습정리

 스타일시트는 깔끔한 문서를 만드는데 많이 사용되는 아주 유용한 기술입니다.일반적으로 자기만의 스타일시트를 만들어놔서 모든 문서에 적용시키면, 모든문서의 내용을 일일이 바꾸지 않고도 깔끔한 문서를 작성할 수 있는 이점이 생기게 되는것이죠...

※ 관련문제

 

※ 참고문헌

 

 

 
이전 글   다음 글 삭제 수정 답변 글쓰기 리스트

(댓글을 남기려면 로그인이 필요합니다.)

관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 11일차 강의내용 - 자바스크립트의 작성 - 관리자 2001-01-17 7343
현재글 10일차 강의내용 - 스타일시트(CSS) - 관리자 2001-01-16 7528
  스타일시트(CSS) 강의 파일 CSS.zip(8 KB) 관리자 2001-08-13 5842
  예제. 01.기본스타일1.htm HTML-0035.jpg(89 KB) 레드플러스 2003-05-16 5497
  예제. 02.기본스타일2.htm HTML-0036.jpg(77 KB) 레드플러스 2003-05-16 5382
  예제. 03.사용자정의.htm HTML-0037.jpg(96 KB) 레드플러스 2003-05-16 5334
  예제. 04.사용자정의(우선순위).htm HTML-0038.jpg(108 KB) 레드플러스 2003-05-16 5572
  예제. 05.태그직접정의.htm HTML-0039.jpg(88 KB) 레드플러스 2003-05-16 5422
  예제. 06.중첩.htm HTML-0040.jpg(84 KB) 레드플러스 2003-05-16 5253
  예제. 07.외부정의.htm HTML-0041.jpg(90 KB) 레드플러스 2003-05-16 5590
  위 예제 관련 소스 07.외부정의.zip(626 Byte(s)) 레드플러스 2003-05-16 5251
  예제. 08.링크.htm HTML-0042.jpg(89 KB) 레드플러스 2003-05-16 5236
  예제. 08.스타일시트적용5가지방법.htm HTML-0043.jpg(176 KB) 레드플러스 2003-05-16 5741
  예제. 09.테이블1.htm HTML-0044.jpg(85 KB) 레드플러스 2003-05-16 5751
  예제. 10.테이블2.htm HTML-0045.jpg(85 KB) 레드플러스 2003-05-16 5381
  예제. 11.테이블3.htm HTML-0046.jpg(126 KB) 레드플러스 2003-05-16 5561
  웹 브라우저에 꽉찬 테이블 만들기 - 레드플러스 2006-11-07 6194
  예제. 12.버튼.htm HTML-0047.jpg(100 KB) 레드플러스 2003-05-16 5514
  예제. 13.버튼2.htm HTML-0048.jpg(100 KB) 레드플러스 2003-05-16 5627
  예제. 14.커서.htm HTML-0049.jpg(119 KB) 레드플러스 2003-05-16 5600
  예제. 15.스타일시트종합.htm HTML-0050.jpg(84 KB) 레드플러스 2003-05-16 5746
  기타. 스크롤바 색상용 CSS 파일 만드는 파일.htm HTML-0051.jpg(296 KB) 레드플러스 2003-05-16 5426
  Re : 기타. 스크롤바 색상용 CSS 파일 만드는 파일.htm 기타. 스크롤바 색상용 CSS 파일 만드는 파일.htm(15 KB) 레드플러스 2003-05-16 5553
  기타. 스타일시트 주요 속성 리스트 - 레드플러스 2003-07-07 6920
  강의노트 : HTML문서에 스타일시트 적용하는 3가지 방법 - 레드플러스 2003-10-09 5368
  과제. 웹사이트 전체에 공통적으로 적용되는 스타일시트 작성하기 global.css(1 KB) 레드플러스 2003-10-16 5630
  웹 사이트의 높이를 100%로 설정하기 - 레드플러스 2007-02-19 5040
  웹브라우저에 항상 가운데(가로, 세로)오도록 레이아웃 설정 - 레드플러스 2009-07-15 5614
  활용예제 : 1픽셀짜리 깔끔한 테이블 만들기 BorderCollapse.png(3 KB) 레드플러스 2008-12-04 6870
  em단위 : 1em = 12pt, 2em = 24pt, 0.5em = 6pt - 레드플러스 2012-08-27 4601
  특정 블록(div)에서 자동 줄바꿈: word-wrap: break-word; - 레드플러스 2015-02-26 3346
  StickyFooter: 웹 브라우저 하단에 항상 고정되는 푸터 만들기 StickyFooter.png(131 KB) 레드플러스 2015-03-04 4558
  CSS3 - Transition: 마우스 오버시 서서히 색상 변경하는 기능 구현 Transition.png(80 KB) 레드플러스 2015-04-05 6604
  Transform - Rotate()로 텍스트 등의 요소를 기울이기 Transform_Rotate.png(137 KB) 레드플러스 2015-04-05 3253
  특정 div(레이어)를 HTML 문서 영역에 꽉 채워서 표현하고자할 때 사용하는 기법 CSS_Position_Absolute_Full.png(152 KB) 레드플러스 2015-04-14 3196
  특정 div(레이어)를 HTML 문서 영역의 정가운데(상하좌우 모두)에 위치하도록 설... CSS_Position_Absolute_Center.png(137 KB) 레드플러스 2015-04-14 3401
다음글 9일차 강의내용 - 프레임(FRAME) 및 IFrame, 기타 HTML - 관리자 2001-01-15 7773
 
손님 사용자 Anonymous (손님)
로그인 Home