본문 바로가기
Front/CSS

CSS - 정의, 선택자

by Hyeon_ 2021. 12. 5.

CSS (스타일 시트)

  • Cascading Style Sheets: 계단형 스타일 시트
  • 단계적으로 스타일 적용
  • 여러 스타일이 겹치면 맨 마지막 스타일 적용
  • HTML의 레이아웃 배치 등의 한계를 보완하기 위해 개발된 독립 언어
  • 일정 기능들을 미리 지정하여 여러 부분에서 동일하게 적용

CSS에서 가능한 작업

  • HTML 문서 내의 글꼴, 크기, 색상, 배경, 테두리, 레이아웃 배치, 여백 등 지정
  • 정렬 방식, 그림자, 동적인 기능 등 다양한 효과

CSS의 장점

  • 자유롭게 웹 문서 편집 가능
    • 원하는 형태로 HTML 문서 내의 글꼴, 크기, 색상, 배경, 테두리, 레이아웃 배치, 여백 등 자유롭게 편집
  • 통일감 있는 문서 작성
    • 한 번만 정의하여 문서에 일관되게 적용 가능
  • 편리한 문서 관리
    • 외부 스타일 시트 파일을 사용해서
    • 여러 웹 문서에 동일한 스타일 시트 적용 가능
    • 한 번만 한 곳에서 수정하여 모든 웹 문서의 스타일을 동시에 변경 가능

스타일 시트 적용 방법

  • 문서 내부에 정의 (Embeded Style)
  • 외부 문서에서 연결 (Linked Style)
  • 태그에 직접 정의 (Inline Style)

1. 문서 내부에 정의 (Embeded Style)

  • <head> 태그에 삽입
  • 문서 전체에 특정 효과 주기 위해 사용
<head>
    <style type="text/css">
        태그명 {속성(property):값(value);}
    </style>
</head>
<head>
    <style type="text/css">
        body {font-size:10px;}
    </style>
</head>

2. 외부 문서에서 연결 (Linked Style)

  • 별도의 스타일 시트 문서(파일) 만들어 놓고 필요한 HTML 문서에 연결하여 사용
  • 웹 사이트의 모든 문서에 동일한 효과를 적용하여 웹 사이트에 통일감을 주고 편리하게 사용 가능
<head>
    <link rel="stylesheet" type="text/css" href="파일명">
</head>
<head>
    <link rel="stylesheet" type="text/css" href="myStyle.css">
</head>

3. 태그에 직접 정의 (Inline Style)

  • 특정 태그에만 스타일 시트를 적용할 때 사용
<태그명 style="속성(property):값(value);">
<body style="font-size:10px; color:blue;">
    <button onCkick="green()" style="width:120; height:30;">
        버튼
    </button>    
</body>

CSS의 기본 형식

  • 선택자(selector)
    • 스타일을 적용할 대상
    • HTML 문서의 태그, 아이디, 클래스, 속성
  • {속성명: 값;}
    • 변경하고자 하는 속성
    • 글꼴, 크기, 색상 등
  • 사용 예
    • 모든 <h1> 태그에 스타일 적용
    • h1 { color:red; }

선택자 유형

  • 태그 선택자
  • 아이디 선택자
  • 클래스 선택자
  • 속성 선택자
  • 상태 선택자

태그 선택자

  • 태그명 사용
  • 요소 (element) 선택자라고도 함
  • HTML 문서에 있는 모든 같은 태그에 동일하게 적용
  • 태그명 {속성명:값;}
h3 {
    background-color: #000;
    color: #fff;
    width:50%;
    margin-left:20px;
}
tagSelector.html
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>태그 선택자</title>    
        <style type="text/css">
            /* CSS 주석 */
            /* 태그 선택자 : <h3> 태그에 스타일 적용 */
            h3 {
                background-color: #000; 
                color: #fff; 
                width: 50%; /* 가로 길이 */
                margin-left: 20px; /* 왼쪽 여백 */
            } 
            li {
                color: green;
            }
        </style>    
    </head>

    <body>
        <h1>태그 선택자 사용하기</h1>
        <hr>
        <h2>두부감자조림</h2> 
        <h3>재료</h3>
        <ul>
            <li>감자 1개</li>
            <li>두부 1/2모</li>
            <li>꽈리고추 10개</li>
            <li>홍고추 1개</li>
        </ul>
        <h3>조리법</h3>
        <ol>
            <li>감자는 껍질을 벗기고 돌려가면서 어슷하게 썰어 찬물에 담가놓고 두부는 도톰하게 한입크기로 썰며 꽈리고추, 홍고추는 어슷썬다.</li>
            <li>첫번째 썰은 재료에 두부를 팬에 기름을 두르고 노릇노릇하게 앞뒤로 지져 기름은 뺀다.</li>
            <li>냄비에 감자와 홍고추를 담고 조림장을 반분량만 넣는다.</li>
            <li>3번째를 끓이다가 감자가 반정도 익으면, 두부와 남은 양념장을 넣는다.</li>
            <li>윤기나게 졸여지면 꽈리고추를 마지막에 넣어 다시한번 살짝 졸여 조린다.</li>
        </ol>
    </body>
</html>

아이디 선택자

  • # 사용
  • 문서에서 특정 부분에만 필요한 스타일 적용할 때 사용
  • 필요한 부분에 유일한 아이디를 지정하고 CSS 적용
  • 식별 선택자라고도 함
  • 사용법
    • #idName {속성명:값;}
    • 태그에 반드시 id로 지정 되어 있어야 함
      • <태그명 id="idName"> </태그명>
<style type="text/css">
    div {width:100px; height: 30px;}
    #box1 {background:yellow;}
    #box2 {background:blue;}
</style>

클래스 선택자

  • . 사용 (도트 선택자)
  • 문서에서 특정 그룹에 필요한 스타일 적용할 때 사용
  • .className {속성명:값;}
  • HTML 태그의 class 속성이 지정되어 있어야 함
  • <태그명 class="className"></태그명>
<style type="text/css">
            .cookTitle1 {
                background-color: #f03;
                color: #fff;
                padding: 5px;
                border: 1px solid #000;
                margin-left:20px;
            }
</style>
classSelector.html
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>클래스 선택자 사용하기</title>
        <style type="text/css">
            .cookTitle1 {
                background-color: #f03;
                color: #fff;
                padding: 5px;
                border: 1px solid #000;
                margin-left:20px;
            }
            .cookTitle2 {
                background-color:#ffcc33;
                padding: 5px;
                border: 1px solid #f00;
                margin-left:20px;
            }
            .redDotLine {
                color: #f00;
                font-weight:bold;
                border-bottom: 1px dashed #f00;
            }
        </style>
    </head>

    <body>
        <h1>클래스 선택자 사용하기</h1>
        <hr>
        <h2>닭칼국수</h2> 
        <h3 class="cookTitle1">재료-4인분 기준</h3>
        <ul>
            <li>밀가루 3컵</li>
            <li>닭 1/2마리 </li>
            <li>호박 1/2개 </li>
            <li>부추 50g</li>
            <li>생강,소금, 후추, 참기름</li>
        </ul>
        <h3 class="cookTitle2">조리법</h3>
        <ol>
            <li> <span class="redDotLine">밀가루</span>에 <span class="redDotLine">소금과 달걀</span>을 넣고 반죽하여 밀대로 밀어 0.5cm 두께로 썬다.쟁반에 펼쳐 굳지 않게 가제로 덮어놓는다 </li>
            <li>첫번째 썰은 재료에 두부를 팬에 기름을 두르고 노릇노릇하게 앞뒤로 지져 기름은 뺀다. </li>
            <li>닭은 내장과 필요없는 지방을 제거하고 깨끗이 씻는다.생강을 저며 넣고 찬물을 부어 푹 삶아 닭고기는 살을 곱게 찢어 소금, 후추, 참기름에 양념하여 무쳐 놓고 국물은 가제로 걸러 육수로 사용한다. </li>
            <li>호박은 채 썰고 부추도 다듬어 씻어 4cm 길이로 썰고, 홍고추, 파, 마늘은 곱게 다진다.간장, 깨소금, 참기름을 섞어 양념장을 만든다. </li>
            <li>닭국물이 끓으면 썰어 놓은 칼국수를 넣어 서로 붙지 않게 한소끔 끓인 다음 호박과 부추, <span class="redDotLine">양념한 닭고기</span>를 넣고 다시 한소끔 끓여서 양념장과 김치를 곁들여 먹는다.</li>
        </ol>
    </body>
</html>

속성 선택자

  • HTML 태그의 속성 값에 따라 선택자로 정의
  • <a title="산업기사">산업기사</a>
태그명[속성명="값"]
태그명[속성명^=”값”]
태그명[속성명$=”값”]
태그명[속성명*=”값”]
attrSelector.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>속성 선택자</title>
    <style type="text/css">
        /* 속성 선택자 : <a> 태그의 href 속성에 스타일 적용 */
        a[href="http://www.naver.com"] {
            color:green;
        }
        /* 속성 선택자: <a> 태그의 href 속성 값 중에서 '#'으로 시작하는 속성값에 스타일 적용 */
        a[href^="#"] {
            background-color:gold;
        }
    </style>
</head>
<body>
<h3>사이트로 이동</h3>
<a href="http://www.naver.com"> 네이버 사이트로 이동</a>
<hr>

<h3>다른 문서로 이동</h3>
<a href="HelloWorld.html">Hello 페이지로 이동</a>
<a href="join.html"> 회원 가입</a>
<hr>

<h3>문서 내 다른 영역으로 이동</h3>
<a href="#JavaScript">id가 JavaScript인 영역으로 이동</a><br>
<a href="#jQuery">id가 jQuery인 영역으로 이동</a><br>
<a href="#css">id가 css인 영역으로 이동</a><br>
<hr>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<h3 id="JavaScript">자바스크립트</h3>
<p>웹 페이지를 향상시키고 동적인 화면을 구현하기 위해 사용되는 스크립트 언어</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<h3 id="jQuery">jQuery</h3>
<p>자바스크립트 작업을 쉽고 빠르게 처리할 수 있도록 도와주는 자바스크립트 라이브러리</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<h3 id="css">css</h3>
<p>Cascading Style Sheet : 속성을 이용해 웹 디자인 요소를 제어하는 기능 제공</p>
</body>
</html>

상태 선택자

  • 태그의 상태로 선택해서 스타일 적용
  • 상태: 체크된 상태, 포커스 받은 상태, 사용 가능 또는 불가능한 상태
  • 선택자: checked - 체크된 input 태그 선택
  • 선택자: focus - 포커스를 받은 input 태그 선택
  • 선택자: enabled - 사용 가능한 input 태그 선택
  • 선택자: disabled - 사용 불가능한 input 태그 선택
stateSelector.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>상태 선택자</title>
    <style type="text/css">
        /* input 채그가 사용 가능한 경우에 입력란 색상 지정 */
        input:enabled {background-color:white;}

        /* input 채그가 사용 불가능한 경우에 입력란 색상 지정 */
        input:disabled {background-color:skyblue;}

        /* input 태그에 초점이 맞춰진 경우에 입력란 색상 지정 */
        input:focus {background-color: orange;}
    </style>
</head>
<body>
    <h2>사용 가능</h2>
    비밀번호: <input type="password" size="10">

    <h2>사용 불가능</h2>
    아이디: <input type="text" size="10" value="abcd" disabled>
</body>
</html>
저작자표시 비영리 동일조건 (새창열림)

'Front > CSS' 카테고리의 다른 글

Bootstrap - 주요 기능  (0) 2021.12.07
Bootstrap  (0) 2021.12.06
CSS - 반응형 웹  (0) 2021.12.06
CSS 연습문제  (0) 2021.12.06
CSS - 속성  (0) 2021.12.05

관련글

티스토리툴바