CSS(Cascading Style Sheet)의 기본 사항과 Dreamweaver에서 CSS를 적용하여 웹 페이지에 스타일을 추가하는 데 사용할 수 있는 툴을 살펴봅니다.
what-is-css_1408x792

Dreamweaver는 웹 디자이너를 위해 CSS를 사용하는 방식이 간소화되어 있지만 Dreamweaver를 효과적으로 사용하려면 CSS에 대한 이해는 필수적입니다. 이 튜토리얼에서는 CSS의 기본 사항을 복습하고 Dreamweaver에서 CSS 디자이너 툴의 스타일 지정 기능을 사용하여 유효한 CSS를 생성하는 방법을 살펴봅니다.

샘플 프로젝트 시작하기

이 튜토리얼을 따라 하려면 Initializr에서 사전 설정된 페이지를 사용하십시오. Initializr는 콘텐츠, 스타일 지정 및 내비게이션 요소와 함께 스타터 HTML, CSS 및 JavaScript 파일이 포함된 초기 단계의 웹 디자인 프로젝트를 만들 수 있는 사이트입니다.

  1. 웹 브라우저에서 initializr.com으로 이동하여 HTML5 Initializr 프로젝트를 시작합니다.
  2. Responsive 버튼을 클릭하고 Mobile-first Responsive와 Modernizer를 선택하고 다른 옵션은 모두 선택 해제합니다(그림 1 참조).

참고: 반응형 프로젝트에는 CSS를 사용한 디자인 개념을 설명하는 기본 레이아웃, CSS 파일 및 기타 파일이 포함되어 있습니다.

그림 1. Initializr 프로젝트 만들기 옵션
그림 1. Initializr 프로젝트 만들기 옵션
  1. ZIP 파일을 다운로드하고 컴퓨터에 있는 폴더에 압축을 풉니다.
  2. Dreamweaver를 실행합니다.
  3. Dreamweaver에서 index.html을 엽니다.

참고: 최신 버전의 Dreamweaver가 설치되어 있어야 합니다. Creative Cloud 데스크탑 애플리케이션의 Apps 탭을 클릭하여 Dreamweaver의 최신 상태를 확인할 수 있습니다(그림 2 참조).

그림 2. Creative Cloud 데스크탑 앱의 최신 상태 표시
그림 2. Creative Cloud 데스크탑 앱의 최신 상태 표시
  1. 출력 미리 보기와 소스 코드를 동시에 볼 수 있도록 분할 뷰를 선택하고 라이브 뷰를 활성화합니다.
  2. 참고: 이 튜토리얼에서는 분할 뷰와 라이브 뷰를 동시에 선택한 상태에서 페이지를 열고 문서 툴바에서 main.css를 선택하여(그림 3 참조) CSS 디자이너의 설정이 코드 뷰에서 유효한 CSS로 직접 변환되는 것을 확인할 수 있습니다.

그림 3. 분할 뷰와 라이브 뷰를 동시에 선택한 상태에서 문서 툴바에서 main.css 파일 선택
그림 3. 분할 뷰와 라이브 뷰를 동시에 선택한 상태에서 문서 툴바에서 main.css 파일 선택

CSS의 기본 사항

웹 초창기 시절 HTML은 페이지 구조를 정의하였고 스타일은 HTML 태그의 속성을 통해 정의되었습니다. 당시 웹 디자이너는 모든 페이지에 적용할 스타일 규칙을 개별적으로 반복해서 적용해야 했기 때문에 사이트의 업데이트 및 유지 관리가 어려웠습니다.

이러한 문제를 해결하기 위해 HTML과 별도로 정의한 규칙에 따라 스타일 정보를 이동할 수 있는 CSS가 만들어졌습니다. 당시 디자이너와 개발자는 한 곳에서 스타일을 구성하고 업데이트하고 손쉽게 재사용할 수 있었습니다. 실제로 대부분의 경우 HTML을 사용하여 레이아웃이 만들어졌고 CSS는 크기, 색상 또는 기타 기본적인 시각 속성을 정의하는 데에만 사용했습니다.

하지만 오늘날 CSS는 항목의 모양부터 페이지의 배치, 심지어 기본적인 2D 및 3D 애니메이션에 이르기까지 모든 것을 제어합니다. 이제 HTML은 대부분 항목을 정의하기 위해 사용되고 있습니다(예: 단락, 머리글 또는 DIV라는 컨테이너). CSS만을 사용해도 요소가 HTML 마크업으로 표시되는 순서와 상관없이 페이지의 모양과 느낌을 재구성할 수 있습니다. 심지어 화면의 크기 또는 방향과 같은 요소를 기반으로 스타일 또는 모양을 조정할 수 있습니다.

Dreamweaver에서 CSS 디자이너 사용    

Dreamweaver의 CSS 디자이너에서는 페이지 또는 해당 페이지와 연결된 외부 CSS 파일에서 스타일을 추가, 변경 및 제거하는 시각적 인터페이스를 제공합니다. CSS 디자이너를 사용한 데모를 확인하려면 CSS를 사용하여 스타일 지정을 참조하십시오.

참고: 페이지에서 바로 머리글의 <style> 블록 안에 또는 인라인 스타일의 개별 태그에 내부 스타일 시트라는 스타일을 정의할 수 있습니다. 그러나 재사용의 이점을 얻기 위해 권장하는 접근 방식은 외부 스타일 시트와 연결하여 사용하는 것입니다.

이러한 단계를 따라 CSS 디자이너의 레이아웃 및 위치를 원하는 대로 변경하는 방법과 기본적인 기능을 살펴봅니다.

  1. 전체 CSS 디자이너 패널을 보려면 오른쪽 상단 모서리에 있는 드롭다운 메뉴를 클릭하고 압축에서 확장으로 보기를 변경합니다(그림 4 참조).
  2. 참고: CSS 디자이너를 사용하도록 공간을 확보하려면 파일 패널을 축소하거나 닫으십시오.

그림 4. 확장 보기의 CSS 디자이너
그림 4. 확장 보기의 CSS 디자이너
  1. CSS 디자이너를 사용하면 간편하게 새로운 CSS 파일을 만들거나 기존 파일을 연결할 수 있습니다. 소스 창에서 더하기(+) 심볼을 클릭하면 웹 페이지의 스타일 시트와 관련된 옵션이 표시됩니다. 그런 다음 Esc 버튼을 눌러 옵션을 숨깁니다.
  2. 샘플 문서에는 두 개의 외부 CSS 파일인 normalize.min.css와 main.css가 포함되어 있습니다(그림 5 참조).

그림 5. CSS 소스와 웹 페이지 연결 방법
그림 5. CSS 소스와 웹 페이지 연결 방법
  1. main.css를 클릭합니다. 선택기 창은 스타일 시트에서 정의된 선택기로 채워집니다.

CSS에서 캐스케이드    

CSS에서 캐스케이드란 CSS가 특정 요소를 여러 개의 속성으로 정의한 경우 또는 여러 위치에 배치되어 있는 동일한 요소에 스타일이 적용되어 있는 경우 웹 브라우저가 해당 요소에 적용되는 스타일을 선택하는 방식입니다. 캐스케이드의 의미란?에서 캐스케이드가 작동하는 방식을 간략하게 잘 설명하고 있습니다.

기본 글꼴 속성 지정

캐스케이드의 한 예로 전체 문서의 기본 글꼴, 글꼴 크기 및 글꼴 색상을 설정하는 것부터 살펴보겠습니다. 텍스트를 포함하는 각 HTML 요소에 적용할 규칙을 만들 수도 있지만 이러한 방식은 반복 작업으로 손이 많이 갈 뿐만 아니라 실수 발생 확률도 높습니다. CSS에서 캐스케이드를 사용하면 기본 텍스트 스타일을 전체 HTML 페이지 또는 본문에 적용할 수 있습니다. 이때 페이지 내의 모든 요소는 이 스타일을 덮어쓰지 않고 상속합니다.

  1. CSS 디자이너의 소스 창에서 main.css를 클릭합니다.

  2. 선택기 목록에서 html, button, input, select, textarea를 클릭합니다.

  3. 속성 창에서 텍스트 아이콘(T)을 클릭합니다. 이때 텍스트 색상은 #222 또는 검은색에 가까운 색상으로 설정합니다.
  4. color 속성은 상위 요소(이 경우 html)이므로 이 문서에 있는 대부분의 요소에 적용됩니다.

  5. 색상 피커를 클릭하고 새 색상을 선택하여 어떻게 적용되는지 확인합니다(그림 6 참조).
  6. 이때 단락 및 머리글 요소의 색상도 변경되는데 html 요소의 색상 속성이 이 html 요소 안에 포함하고 있는 요소에 영향을 주기 때문입니다. 또한 이때 머리글의 텍스트는 자체 텍스트 색상을 정의하고 HTML 태그에서 상속한 색상을 덮어쓰기 때문에 머리글의 흰색 텍스트는 변경되지 않습니다.

그림 6. html 요소 안에 포함되어 있는 요소까지 html 요소 색상 변경
그림 6. html 요소 안에 포함되어 있는 요소까지 html 요소 색상 변경
  1. 색상을 다시 #222로 설정합니다.

여러 위치의 CSS 속성 지정

여러 규칙이 CSS 파일 내에 또는 모든 CSS 파일에 있는 동일한 요소에 적용되는 경우에도 캐스케이드를 사용할 수 있습니다. 예를 들어 main.css에서 CSS 코드의 단락 요소를 파란색으로 설정하면 다음과 같이 정의할 수 있습니다.

p {color: blue;}

그런 다음 다음과 같이 normalize.min.css에서 단락의 글꼴 크기를 10픽셀로 설정할 수 있습니다.

p {font-size:10px;}

두 개의 규칙이 서로 다른 CSS 파일에서 별도로 정의되었지만 이 두 규칙이 적용되어 단락 텍스트의 색상과 크기가 각각 파란색과 10픽셀로 설정됩니다.

CSS 특이성: 알아두면 유용한 정보에서는 상충하는 CSS 규칙을 해결하는 방법을 비롯한 CSS의 캐스케이드 규칙에 대한 심층적인 정보를 제공합니다.

선택기 사용

이름을 통해 알 수 있듯이 CSS 선택기를 사용하면 CSS 규칙의 스타일이 적용되는 HTML 요소를 선택(또는 검색)할 수 있습니다. 대표적으로 자주 쓰이는 선택기 유형으로는 요소(또는 유형), 클래스 및 id가 있습니다.

요소(유형) 선택기

요소 선택기 또는 유형 선택기는 문서에서 지정된 유형의 모든 HTML 요소를 검색합니다. Dreamweaver를 사용하여 HTML5 태그에서 정의되는 것과 같이 가로 규칙 또는 주제별 나누기에 대한 기존 요소 선택기를 편집하여 이 선택기의 작동 방식을 확인할 수 있습니다.

  1. <hr> 태그를 index.html에 추가합니다. 분할 뷰를 선택하고 38번 줄의 머리글 블록 아래에 <hr>를 추가합니다. 기존 스타일 시트는 hr 요소를 1픽셀의 회색 줄로 설정하는 규칙을 가지고 있습니다.

  2. CSS 디자이너의 소스 창에서 main.css를 선택하고 선택기 중에서 hr를 검색합니다.(검색 필드를 사용하면 선택기 창에 표시되는 결과를 제한할 수 있습니다).

  3. hr 및 세트 표시 체크 상자를 클릭하여 세트에 적용되는 스타일 속성만 표시합니다.
    • height: 1px
    • display: block
    • margin: 1 em (top and bottom)
    • border-top: #ccc;
  1. 속성 창의 테두리 섹션으로 스크롤하고 색상 선택기를 클릭하여 위쪽 테두리를 편집합니다. 스포이드 툴을 사용하여 머리글에서 밝은 주황색 색상을 선택합니다(그림 7 참조).
그림 7. 위쪽 테두리의 색상 설정
그림 7. 위쪽 테두리의 색상 설정

문서 툴바에서 main.css를 선택하고 라이브 뷰와 분할 뷰를 동시에 선택한 상태에서 미리 보기를 통해 <hr> 요소가 주황색으로 설정되는 것을 확인합니다(그림 8 참조).

그림 8. 주황색 <hr> 요소로 업데이트된 페이지
그림 8. 주황색 <hr> 요소로 업데이트된 페이지

코드 뷰에서와 같이 CSS 코드는 CSS 디자이너에서 변경한 규칙이 적용됩니다.

hr { 	
   display: block; 	
   height: 1px; 	
   border-left: 0; 	
   border-right: 0; 	
   border-bottom: 0; 	
   border-top: 1px solid #EC6433; 	
   margin: 1em 0; 	
   padding: 0; 
}

클래스 선택기

클래스 선택기는 모든 HTML 요소에 적용할 수 있습니다. 선택기를 사용하려면 CSS 파일에서 클래스 이름 앞에 마침표를 붙여 클래스 선택기를 정의합니다. 그런 다음 마침표 없이 클래스 속성 및 CSS 클래스 이름을 사용하여 클래스를 HTML 요소로 할당합니다.

CSS 클래스

.intro {
   color: #ccc;
   font-size: 10px;
}

HTML 태그

<p class="intro">

다음 단계를 따라 샘플 프로젝트에서 클래스 선택기 중 하나를 살펴봅니다.

  1. CSS 디자이너의 선택기 창에서 .header-container 클래스를 클릭합니다.

  2. 세트 표시가 선택되어 있는지 확인하고 이 클래스로 정의된 세 개의 border-bottom 속성을 검토합니다.
    • width: 20px
    • style: solid
    • color: #e44d26
  1. nav 항목과 기술문서 머리글 사이의 막대에 적용된 변경 사항의 효과를 미리 보고 코드 뷰에서 해당 CSS를 검토합니다(그림 9 참조). 이러한 속성은 머리글 아래쪽에 있는 어두운 주황색 테두리에 적용됩니다.
.header-container {
    border-bottom: 20px solid #e44d26;
}
그림 9. CSS 디자이너로 스타일을 지정한 header-container의 CSS를 보여주는 코드 뷰
그림 9. CSS 디자이너로 스타일을 지정한 header-container의 CSS를 보여주는 코드 뷰
  1. header-container는 이전 CSS 클래스에서 설정되지 않은 밝은 주황색의 배경으로 되어 있습니다.

  2. 선택기 창에서 .header-container, .footer-container, .main aside를 검색합니다. 글자가 잘려 끝까지 보이지 않는 경우 목록 위에 마우스를 가져가면 툴팁이 표시되어 확인할 수 있습니다(그림 10 참조).
그림 10. 선택기 위에 마우스를 두는 경우
그림 10. 선택기 위에 마우스를 두는 경우

다음 CSS는 CSS 디자이너에서 만든 선택 영역을 반영한 것입니다.

.header-container,
.footer-container,
.main aside {
    background: #f16529;
}

이 예제에서 여러 개의 선택기는 공통의 속성을 공유하므로 통합되었습니다. header-container, footer-containeraside(하위 항목 선택기라고 하며, 이에 대한 자세한 내용은 나중에 살펴봅니다.) 선택기는 모두 배경이 밝은 주황색입니다. 일반적으로 여러 선택기에서 동일한 속성을 지닌 요소를 결합하면 CSS를 보다 효율적으로 관리할 수 있습니다.

ID 선택기

ID 선택기는 페이지에서 단일 HTML 요소를 찾으며, 고유한 것이어야 합니다. ID 선택기를 사용하려면 CSS 파일에서 선택기 이름 앞에 해시태그를 넣어 ID 선택기를 정의합니다. 그런 다음 ID 속성을 이용하여 선택기를 HTML 요소에 할당하고 다음과 같이 해시 태그를 사용하지 않고 CSS 이름을 참조합니다.

<div id="main"></div>

CSS에서 이 요소의 스타일을 지정하려면 다음과 같은 ID 선택기를 사용할 수 있습니다.

#main {
    background: #f16529;
}

참고: 샘플 프로젝트에는 ID 선택기가 포함되어 있지 않습니다.

일반적으로 페이지에 한 개의 요소에만 스타일을 지정해야 하는 경우 ID 선택기를 사용하지만 동일한 스타일을 여러 개의 요소에 적용하려는 경우에는 클래스 선택기를 사용합니다. ID와 클래스의 차이점을 통해 자세히 살펴볼 수 있습니다.

하위 항목 및 자식 선택기

하위 항목 선택기와 자식 선택기에는 유사한 점이 많지만 한 가지 중요한 차이점이 있습니다. 이 차이점을 이해하기 위해 먼저 예제 파일에 있는 하위 항목 선택기를 예로 들어 살펴보겠습니다.

  1. 선택기 창에서 nav a를 검색하고 세트 표시가 선택되어 있는지 확인합니다.

  2. CSS 디자이너의 속성 세트와 코드 뷰에서 정의된 CSS를 비교합니다(그림 11 참조).
그림 11. 내비게이션 요소의 CSS 속성 선택
그림 11. 내비게이션 요소의 CSS 속성 선택

코드 뷰는 해당 CSS를 다음과 같이 표시합니다.

nav a {
    display: block;
    margin-bottom: 10px;
    padding: 15px 0;

    text-align: center;
    text-decoration: none;
    font-weight: bold;

    color: white;
    background: #e44d26;
}

이 경우 <nav> 요소의 하위 항목인 모든 <a> 요소를 선택하고 있습니다. DOM(Document Object Model)은 HTML 페이지의 구조를 요소 트리로 정의합니다. 이 요소 트리에서 다른 HTML 요소 안에 포함된 모든 HTML 요소는 하위 항목으로 간주됩니다. 샘플 HTML의 20번부터 26번 줄을 살펴보십시오.

<nav>
    <ul>
        <li><a href="#">nav ul li a</a></li>
        <li><a href="#">nav ul li a</a></li>
        <li><a href="#">nav ul li a</a></li>
    </ul>
</nav>

위의 HTML에는 <nav> 요소의 하위 항목으로 세 개의 HTML 요소가 있습니다. <ul>, <li><a>가 바로 그것입니다.

위의 하위 항목 선택기는 아래에 얼마나 많은 레벨이 있는지 상관없이 <nav> 요소 아래에 있는 모든 <a> 요소에 스타일을 적용합니다.

이와 반대로 자식 선택기는 자식만을 선택하게 되는데, 이 경우 한 레벨 아래의 요소만이 해당됩니다. 이전 예제를 하위 항목 선택기가 아니라 자식 선택기로 작성하면 다음과 같이 표시됩니다.

nav > a {
    ...
}

위의 HTML의 경우 이 자식 선택기는 모든 요소에 적용되지 않습니다. <nav> 요소의 한 레벨 아래에 있는 <a> 요소가 없기 때문입니다. 그러나 다음과 같이 하면 모든 레벨에 스타일이 적용됩니다.

nav > ul {
    ...
}

<ul> 요소가 <nav> 요소 바로 아래에 있고 다른 태그 안에 포함되어 있지 않기 때문에 이 자식 선택기는 이 요소에 적용됩니다.

가능하면 하위 항목 선택기 또는 자식 선택기를 사용하지 않을 것을 권장하는데, 그 이유는 효율성도 가장 저조할 뿐만 아니라 속도도 느리기 때문입니다. 성능이 저조한 CSS를 과다하게 사용하면 브라우저의 페이지 렌더링 속도까지 저하될 수 있습니다. 이 주제에 대한 자세한 내용을 살펴보려면 Google의 모범 사례 가이드를 참조하십시오.

별표(*) 선택기

별표(*)는 공통 선택기이며 모든 요소에 동일하게 적용됩니다. 예를 들어 별표를 단독으로 사용하면 페이지의 모든 요소에 적용됩니다. 이 예제 페이지에는 미디어 쿼리를 사용한 인쇄 스타일 시트에 적용되는 공통 선택기의 한 인스턴스가 있습니다(그림 12 참조).

그림 12. 샘플 프로젝트의 공통 선택기
그림 12. 샘플 프로젝트의 공통 선택기

이 CSS 예제에서는 모든 요소의 배경색과 그림자를 제거하고 더 나은 인쇄 품질을 위해 해당 요소의 텍스트 색상을 검은색으로 변경했습니다.

* {
    background: transparent !important;
    color: #000 !important; /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
 }

참고: !important 선언은 CSS 규칙보다 우선되는 규칙을 제공합니다. 이 선언에 대한 자세한 내용은 !important 사용이 적합한 경우를 참조하십시오.

공통 선택기를 하위 항목 선택기로 결합할 수 있습니다. 예를 들어 CSS 클래스 "main"을 적용한 요소 안에 모든 요소를 선택할 수 있습니다.

.main * {
    ...
}

유사 클래스 및 유사 요소

유사 클래스는 선택기에 추가하여 요소 상태를 지정할 수 있는 특수 키워드입니다. 예를 들어 a:hover의 선택기의 스타일은 요소 선택기에서 정의하지만(<a> 태그) 마우스를 해당 요소 위에 가져올 때만 적용됩니다(이 경우 링크).

다음은 페이지에서 링크 스타일(<a> 태그)을 정의한 샘플 프로젝트의 한 예로, 가장 자주 사용하는 유사 클래스입니다(그림 13 참조).

그림 13. CSS 디자이너에서 유사 클래스 속성 설정
그림 13. CSS 디자이너에서 유사 클래스 속성 설정

해당 CSS에 대한 코드 뷰입니다.

nav a:hover,
nav a:visited {
    color: white;
}

nav a:hover {
    text-decoration: underline;
}

첫 번째 선택기는 <nav> 안의 <a> 태그를 찾아 hover 또는 visited 상태로 표시합니다.(visited는 사용자가 이미 클릭한 링크입니다.) 이 선택기는 텍스트 색상을 흰색으로 설정하여 존재하는 모든 기본 링크 스타일을 덮어씁니다. 두 번째 선택기는 <nav> 안의 <a> 태그를 찾아 모두 hover 상태로 표시하고 underlined로 설정합니다. 따라서 링크는 기본적으로 밑줄이 표시되지 않지만 마우스 포인터를 링크 위에 가져가면 밑줄이 표시됩니다.

:hover:visited 외에도 다양한 유사 클래스가 있습니다. MDN에서 전체 목록을 확인할 수 있습니다. 일부 유사 클래스를 사용하면 요소 그룹에서 특정 요소를 선택할 수 있습니다. 다음은 샘플 페이지의 예입니다.

nav li:first-child a {
    margin-left: 0;
}

nav li:last-child a {
    margin-right: 0;
}

이 경우 유사 클래스는 요소 목록에서 한 특정 요소를 지정하고 있습니다. 첫 번째 선택기는 <nav> 요소의 자식에 해당하는 첫 번째 <li> 요소를 찾아 이 요소에 왼쪽 여백을 적용합니다. 두 번째 선택기는 <nav>의 자식에 해당하는 마지막 <li> 요소에 오른쪽 여백을 적용합니다.

그 밖의 선택기

이 기술문서에서는 가장 흔히 사용되는 선택기를 다루었지만 이것이 전부는 아닙니다. 예를 들어 형제 선택기, 정규 표현식을 사용하는 복합 선택기 또는 not()을 사용하는 복합 선택기는 다루지 않았습니다. 사용 가능한 선택기를 더 많이 살펴보려면 알아두어야 할 30개의 CSS 선택기를 참조하십시오.

미디어 쿼리 소개

미디어 쿼리를 사용하면 모바일 디바이스, 태블릿 및 데스크탑 컴퓨터와 같은 다양한 출력 및 디바이스 유형을 위한 스타일을 정의할 수 있습니다. 이 섹션에서는 미디어 쿼리를 간략하게 소개합니다. 자세한 설명은 미디어 쿼리 소개를 참조하십시오.

미디어 쿼리는 항상 @media로 시작합니다. 그 뒤에는 미디어 유형과 미디어 기능에 해당하는 두 개의 부분이 미디어 쿼리에 추가됩니다. 그러나 실제로는 둘 중 하나만이 자주 사용됩니다.

첫 번째 부분은 미디어 유형입니다. 서로 다른 수많은 미디어 유형이 있지만 가장 많이 사용하는 두 개의 미디어 유형은 화면과 인쇄입니다. 화면 미디어 유형은 컴퓨터 화면을 대상으로 하고 인쇄 미디어 유형은 인쇄된 페이지를 대상으로 합니다.(즉, 사용자가 웹 페이지를 인쇄할 때 출력을 최적화합니다.)

참고: CSS 디자이너의 @미디어 창을 사용하여 미디어 쿼리 정보를 추가할 수 있습니다.

다음 단계를 따라 이 프로젝트에 포함된 인쇄 미디어 쿼리를 선택하고 CSS 디자이너와 코드 뷰에서 속성을 검토합니다.

  1. CSS 디자이너의 @미디어 창에서 print를 선택합니다.
  2. 공통 선택기(*)를 클릭하고 속성을 확인합니다(그림 14 참조).
그림 14. CSS 디자이너의 미디어 쿼리
그림 14. CSS 디자이너의 미디어 쿼리
  1. 인쇄 미디어 쿼리의 나머지 선택기를 클릭하여 속성을 확인합니다.

다음은 main.css 파일에서 미디어 유형만을 사용한 미디어 쿼리의 예입니다. 이 예는 인쇄 미디어 유형을 사용한 것입니다.

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }
}

추가 CSS 규칙은 미디어 쿼리에서 정의합니다. 이 경우의 규칙에는 배경색과 그림자를 요소에서 제거하여 인쇄 시 보다 선명하게 표시되도록 하는 공통 선택기가 포함되어 있습니다. 인쇄 스타일 시트에서 인쇄 미디어 쿼리 안의 예제 CSS 파일처럼 링크 URL과 같은 인쇄 페이지에 숨겨진 정보를 표시하기 위해 사용할 수 있는 몇 가지 기법이 있습니다.

a[href]:after {
    content: " (" attr(href) ")";
}

미디어 쿼리의 두 번째 부분에는 한 개 이상의 미디어 기능이 들어 있는 표현식이 포함됩니다. 표현식이 참(true)으로 평가되면 미디어 쿼리와 이 미디어 쿼리가 포함하는 CSS 규칙이 적용됩니다. 미디어 기능은 다양한 속성을 총망라하지만 실제로는 화면 크기를 기반으로 한 표현식이 가장 많이 사용됩니다. 실제로 이러한 유형의 미디어 쿼리는 데스크탑 컴퓨터, 태블릿 및 스마트폰 등 다양한 디바이스 화면 크기의 요구 사항을 충족하기 위해 CSS를 사용하여 페이지 레이아웃을 변경하는 접근 방식인 반응형 웹 디자인의 기초입니다.

다음은 main.css의 표현식입니다.

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */

    .wrapper {
        width: 1026px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }
}

이 미디어 쿼리에는 두 개의 부분 즉, 미디어 유형과 기능이 포함되어 있습니다. 일반 언어로 표현되어 있는 이 미디어 쿼리는 "폭이 1,140픽셀 이상인 화면에만" 적용됩니다. 다시 말해 이 미디어 쿼리 안에 중첩된 규칙은 인쇄 시 적용되지 않으며, 스마트폰 또는 태블릿과 같은 작은 화면에도 적용되지 않는다는 의미입니다. “only” 키워드는 미디어 기능이 포함된 미디어 쿼리를 지원하지 않는 이전 버전의 브라우저(예: 미디어 유형 화면 및 인쇄만 지원)가 미디어 쿼리에 중첩된 스타일을 적용하는 것을 방지합니다.

CSS를 사용하여 레이아웃 및 위치 지정  

이 섹션은 레이아웃 및 위치 지정에 대한 기본적인 이해를 제공합니다. CSS 레이아웃 살펴보기에서는 CSS에서 레이아웃 및 위치 지정 처리에 대한 기본 사항을 살펴봅니다.

CSS 디자이너는 CSS의 레이아웃 및 위치 지정의 측면을 정의하는 데 도움이 되는 시각적 인터페이스를 제공합니다. 예를 들어 main.css의 nav a 규칙은 여백 및 패딩 설정의 결과를 설명합니다(그림 15 참조).

그림 15. CSS 디자이너에서의 여백 및 패딩 설정
그림 15. CSS 디자이너에서의 여백 및 패딩 설정

레이아웃 및 위치 지정에 대한 자세한 내용은 상자 모델에 대한 이해를 참조하십시오.

다음 단계로

지금까지 CSS의 기본 사항을 복습하고 Dreamweaver에서 CSS를 식별 및 변경하는 방법을 살펴보았습니다. 이 개념을 자세히 살펴보려면 웹에서 제공되는 기타 리소스를 참조하십시오.

MDN(Mozilla Developer Network)은 전반적인 웹 개발에 대한 훌륭한 리소스로 CSS 배우기라는 포괄적인 섹션을 제공합니다. 다양한 브라우저에서 지원되는 선택기 유형을 살펴보려면 QuirksMode의 CSS 선택기를 참조하십시오. CSS 유사 클래스CSS의 :before 및 :after 유사 요소 사용 방법에서는 유사 클래스 사용 방법에 대한 자세한 내용을 살펴볼 수 있습니다.

07/06/2018
Brian Rinaldi
이 페이지가 도움이 되었습니까?