티스토리 뷰

Web/HTML & CSS

26강 : CSS 규칙

개발을해보자 2020. 3. 3. 00:58

26-1. CSS파일 분리

CSS를 HTML 문서에서 분리하여 별도로 관리할 수 있다.

 

<link rel="stylesheet" href="css 파일의 경로" />

 

 

 

 

26-2. @import 규칙

CSS에서 "@" 으로 시작하는 키워드들을 규칙이라고 한다. (전에 다루었던 @keyframes 도 이에 해당한다.)

 

1. 26-1에서 다룬 link 태그를 대신할 수 있다.

2. <style> 태그 내부에 위치해야 한다.

3. <style> 태그 상단에 위치해야 한다.

 

아래의 코드는 @import 규칙을 사용하였고 link 태그는 주석처리를 해주었다.

 

  • HTML 파일
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
    <link rel="stylesheet" href="ex1.css" />
-->
    <style>
      @import "ex1.css";
      #wrap { width: 1000px; margin: 0 auto; border: 1px solid #cccccc; }

    </style>
</head>
<body>
  <div id="wrap">
    <div id="header">
      <h1>HEADER</h1>
    </div>

    <div id="section">
      <h1>Section</h1>
      <p>content</p>
    </div>

    <div id="footer">
      <h3>FOOTER</h3>
    </div>
  </div>
</body>
</html>

 

  • ex1.css 파일
#wrap #header h1 {
  background-color: #ffff00;
  text-align: center;
  height: 200px;
}

#wrap #section {
  background-color: #084a2a;
  color:#ffffff;
  height: 300px;
}

#wrap #footer {
  background-color: #ffd800;
  height: 100px;
  text-align: center;
}

 

 

 

 

 

26-3. @media 규칙

link 태그에 media 속성을 이용하여 상황에 따른 CSS를 적용할 수 있다.

 

미디어의 종류는 다음과 같다.

  • all : 모든 미디어 타입
  • aural : 음성 합성 장치
  • braille : 점자 표시 장치
  • handheld : 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응하는 용도
  • print : 인쇄 용도
  • projection : 프로젝터 표현 용도
  • screen : 컴퓨터 스크린을 위한용도
  • tv : 음성과 영상이 동시 출력되는 TV와 같은 장치
  • embossed : 페이지에 인쇄된 점자 표지 장치

media 속성의 적용법은 마찬가지로 두 가지가 있다.

 

1. style 태그 내부, 상단에 다음과 같이 넣어준다.

@media screen {
    #wrap .content { background-color:#3d5208; color:white; padding:30px 10px; }
}

@media print {
    #wrap .content { color:#272727; padding:30px 10px; } 
}

2. link 태그를 사용하여 넣어준다. (CSS 속성은 .css 파일에 따로 저장해준다.)

<link rel="stylesheet" href="content_pc.css" media="screen" />
<link rel="stylesheet" href="content_print.css" media="print" />

 

 

 

 

 

 

 

 

출처

https://www.inflearn.com/course/html-css-%EA%B0%95%EC%A2%8C#

인프런 실전 HTML & CSS 강좌

'Web > HTML & CSS' 카테고리의 다른 글

27강 : 반응형 웹  (0) 2020.03.04
25강 : CSS 변환(transform)  (0) 2020.03.02
24강 : CSS 애니메이션  (0) 2020.03.02
23강 : CSS 변형  (0) 2020.03.01
13강 : CSS 속성4  (0) 2020.03.01
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함