Mint Flavor Chocolate DEV

CSS 기본정리 본문

HTML,CSS

CSS 기본정리

츠르e 2017. 8. 21. 17:26

Cascading Style Sheet (CSS: 스타일 시트)

  1. 스타일 시트란?
    -- 워드등의 스타일과 같은 기능
    -- html의 속성들(폰트 종류, 폰트 크기, 폰트 색상, 여백, 배경색, 정렬등)을 미리 지정
    -- 여러가지 스타일을 미리 정의해 놓은 후 원하는 곳에 스타일을 지정하여 사용
    -- 홈페이지의 일관성을 손쉽게 유지 가능 
    -- 변경시에도 편리하게 변경 가능

  2. 스타일 시트 정의 방식

    (2.1 : 익스플로러, 넷스케이프)

    <!-- MIME TYPE 지정 -->
<STYLE TYPE="text/css"> 

</STYLE>

    (2.2 : 넷스케이프)

    <STYLE TYPE="text/javascript">

</STYLE>

  3. CSS 적용 위치
    3.1 Embedded style sheet (internal) : 
    - 가장 많이 사용

    <head>
    <style>~</style>
</head> 태그 사이에 위치

    3.2 External style sheet :

    외부파일로 작성하여 해당 웹사이트의 모든 페이지에서 공유 재사용

    <head>
    <LINK type="text/css" REL="stylesheet" HREF="my.css">
</head>

    3.3 Inline style sheet :

    <body> 
    <P style="font-size:12pt; color:magenta"> 
</body>

    3.4 Imported style sheet : 
    - Embedded style sheet의 스타일 정의 부분에 외부파일을 importing - 주의사항: 태그에서 가장 먼저 정의되어야 함

    <head>
    <style type="text/css">
        <!--
        @import url("my.css");   /* 맨뒤에 세미콜론 반드시 입력해주어야함 */
        -->
    </style>
    h1 { color:blue; }
</head>

  4. CSS에서의 주석
    4.1. <!-- CSS를 지원하지 않는 브라우저, CSS에서 에러 발생시 CSS를 적용하지않음 -->
    4.2 /* CSS에서의 주석내용 */

  5. CSS의 기본 구성 :

    <HEAD> 
    <TITLE></TITLE>
    <STYLE></STYLE>
</HEAD>

<STYLE TYPE="text/css">
    P                               /* 선택자, 선언자 : HTML TAG명 */
    {                                           
        font-size: 9pt;             /* 선언문==> 속성명 : 값 ; */  
        font-style: italic;
        color : blue;
    }
</STYLE>

선택자 지정방법:

1) 태그명 {}       : 해당 모든 태그에 스타일 적용
2) 태그명.클래스명 {}  : 해당 태그의 클래스 설정한 태그에 적용
3) 태그명#아이디명 {} : 해당 태그의 아이디에 설정한 태그에 적용
4) .클래스명 {}  : 태그와 상관없이 해당 클래스에 적용
5) 상위선택자 선택자 {속성: 값;} : 하위(자손) 선택자
6) 상위선택자>선택자 {속성: 값;} : 자식 선택자
7) 선택자1,선택자2,선택자3 {속성: 값;} : 다중(그룹) 선택자
8) 상위선택자+선택자 {속성: 값;} : 인접 선택자
9) 속성선택자
10) 가상클래스 선택자
    a:link {color:#4285F4;}
    a:visited {color:#FBBC05;}
    a:hover {color:#34A853;}
    a:active {color:#EA4335;}


'HTML,CSS' 카테고리의 다른 글

HTML 기본2  (0) 2017.08.21
HTML 기본1 - Tomcat설정, 태그기본  (0) 2017.08.21
'HTML,CSS' Related Articles more