Keep going

CSS의 기본 본문

Web Project/CSS

CSS의 기본

코딩천재홍 2021. 2. 19. 16:20

6-1 웹 문서에 디자인 입히기

웹 문서에서 스타일 이란 HTML 문서에서 자주 사용하는 글꼴이나 색상,정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정지는 것을 가리킨다.

 

웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.

HTML로는 웹 사이트의 내용을 나열하고

CSS 로는 웹 문서의 디자인을 구성한다는 아이디어가 웹 표준의 시작이다.

이렇게 내용과 디자인이 구분되어 있으면 사이트의 내용을 수정할 때에도 디자인에 전혀 영향을 미치지 않아 편리하다.

또한 내용은 건드리지 않은 상태에서 스타일 시트를 이용해 디자인만 바꿔서 완전히 다른 느낌이 나게 할 수 있다.

 

다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.

CSS를 이용하면 HTML 로 작성한 내용은 그대로 두고 대상 기기에 맞게 CSS 만 바꿔 주면 같은 내용을 여러 기기에서 볼 수 있다.

반응형 웹 디자인이란 사용자가 PC로 접속하든, 모바일로 접속하든 웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 바꿔주는 방법을 말한다.

 

6-2 스타일과 스타일 시트

스타일 형식 알아보기

CSS 소스에서 한 줄이 하나의 스타일에 해당하고, 조금 더 들여다보면 줄마다 형태가 비슷하다는 걸 알게 된다.

 

<기본형>

선택자 {속성1 : 속성값1; 속성2 : 속성값2 }

 

맨 앞의 선택자는 스타일을 어느 태그에 적용할 것인지 알려 주는 것이고, 중괄호 사이에 스타일 정보를 넣는다.

속성과 값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라고 하며, 세미콜론으로 구분해서 스타일 규칙을 여러개 지정할 수 있다.

 

스타일 시트 알아보기

웹 문서 안에서 스타일 규칙을 여러 개 사용한다.

이런 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한군데 묶어 놓은 것을 스타일 시트라고 한다.

스타일 시트는 크게 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과

사이트 제작자가 만드는 사용자 스타일로 나눌 수 있다.

사용자 스타일은 다시 인라인 스타일과 내부 스타일 시트, 외부 스타일 시트로 나뉜다.

 

 

◆ 브라우저 기본 스타일

CSS를 사용하지 않은 웹 문서라 하더라도 웹 브라우저에 표시할 때는 기본 스타일을 사용하는데, 이것을 브라우저 기본 스타일이라고 한다.

 

◆ 간단한 스타일 정보를 적용하는 인라인 스타일

간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시한다. 

이런 방법을 인라인 스타일이라고 한다.

스타일을 적용하고 싶은 부분이 있다면 해당 태그에 style 속성을 사용해 style="속성: 속성값;" 형태로 스타일을 바꿀 수 있다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
</head>
<body>
  <h1>레드향</h1>
  <p style="color:blue;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>
</html>
 cs

 

 

◆ 스타일을 여러 곳에 적용할 때 쓰는 내부 스타일 시트

웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일 시트라고 한다.

스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정해야 하므로 모든 스타일 정보는 <head> 태그 안에서 정의하고 <style>과 <style>태그 사이에 작성한다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    h1 {      
      padding:10px;
      background-color:#222;
      color:#fff;
    }
  </style>
</head>
<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>
</html>
 cs

 

◆ 스타일 정보를 따로 저장해 놓은 외부 스타일 시트

웹 사이트를 만들 때 하나의 웹 문서로 끝나는 경우는 거의 없다.

대부분 디자인에 일관성이 있도록 같은 스타일을 여러 웹 문서에 사용한다.

사이트를 제작할 때는 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 가져와서 사용하는 것이 일반적이다. 이렇게 따로 저장해 놓은 스타일 정보를 외부 스타일 시트라하고 .css 파일 확장자를 사용한다.

외부 스타일 시트 파일에 스타일을 작성할 때는 <style> 태그를 사용하지 않는다.

외부 스타일 시트는 웹 문서에 연결해야 스타일이 문서에 적용된다.

외부 스타일 시트를 연결할 때 사용하는 태그는 <link> 태그이다.

 

<기본형>

<link rel="stylesheet" href="외부 스타일 시트 파일 경로">

 

css\style.css
h1 {      
  padding:10px;
  background-color:#222;
  color:#fff;
}
 cs

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>
</html>
 cs

 

6-3 CSS 기본 선택자 알아보기

전체 요소에 스타일을 적용하는 전체 선택자

전체 선택자는 말 그대로 스타일을 문서의 모든 요소에 적용할 때 사용된다.

주로 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용한다.

 

<기본형>

*{ 속성: 값;}

 

또한 전체 선택자는 웹 브라우저의 기본 스타일을 초기화 할 때 자주 사용한다.

예를 들어 웹 문서 내용을 브라우저 창에 바짝 붙지 않도록 문서 내용과 브라우저 테두리 사이에 여백을 약간 두는데 이것을 마진과 패딩이라고 한다. 이런 여백 때문에 디자인이 깔끔하지 않을 경우 전체 선택자를 이용하여 웹 문서 전체에 마진과 패딩 여백을 0 으로 지정 할 수 있다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
  </style>
</head>
<body>
  <img src="images/cat.jpg">
</body>
</html>
 cs

 

태그와 요소는 어떻게 다른가

태그 - 태그는 말 그대로 태그 자체를 가리킴

요소 - 태그를 적용한 것을 가리킴

 

ex) <p>텍스트 단락 지정하기</p>

<p>와 </p> 태그는 태그 자체를 말하는 것

태그를 포함해 <p> 태그를 적용한 '텍스트 단락 지정하기' 부분을 p 요소라고 한다.

→ p요소에 적용하는 스타일로 표현하는 것이 맞다.

 

 

특정 요소에 스타일을 적용하는 타입 선택자

타입 선택자는 특정 태그를 사용한 모든 요소에 스타일을 적용한다.

타입 선택자를 사용해 스타일을 지정하면 해당 태그를 사용한 모든 요소에 적용된다.

 

<기본형>

태그명 {스타일 규칙}

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    p {
      font-style: italic;
    }
  </style>
</head>
<body>
  <div>
    <h1>레드향</h1>
    <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
    <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
  </div>
</body>
</html>
 cs

 

특정 부분에 스타일 적용하는 클래스 선택자

특정 부분만 선택해서 스타일을 적용하려면 클래스 선택자를 사용한다.

클래스 선택자는 클래스 이름을 사용해서 다른 선택자와 구별하는데, 이 때 클래스 이름 앞에 마침표(.)를 반드시 붙여야 한다.

 

<기본형>

.클래스명 {스타일 규칙}

 

클래스 선택자를 사용해 만든 스타일을 클래스 스타일이라고 하는데, 이미 만들어 둔 클래스 스타일을 적용할 때는 태그 안에 class="클래스명"처럼 class 속성을 사용해서 지정한다.

클래스 스타일은 여러 곳에 적용할 수 있다. 

또한 요소 하나에 클래스 스타일을 2개 이상 적용할 수도 있다. 클래스 스타일을 2개 이상 적용할 때는 공백으로 구분해서 스타일 이름을 적으면 된다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    p {
      font-style: italic;  /* 이탤릭체 */
    }
    .accent {
      border:1px solid #000;  /* 테두리 */
      padding:5px;  /* 테두리와 내용 사이의 여백 */
    }
    .bg {
      background-color:#ddd;    /* 배경색 */  
    }
  </style>
</head>
<body>
  <div>
    <h1 class="accent bg">레드향</h1>
    <p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
    <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
  </div>
</body>
</html>
 cs

 

 

특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택자

id 선택자도 클래스 선택자와 마찬가지로 웹 문서의 특정 부분을 선택해서 스타일을 지정할 때 사용한다.

마침표(.) 대신 #기호를 사용한다는 점만 제외하면 스타일을 정의하는 방법은 클래스 선택자와 같다.

 

<기본형>

#아이디명 {스타일 규칙}

 

클래스 선택자 vs id 선택자

클래스 선택자가 문서에서 여러 번 적용할 수 있는 반면, id 선택자는 문서에서 한 번만 적용할 수 있다.

id 선택자는 중복해서 적용할 수 없으므로 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용된다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    #container {
      width: 500px;  /* 너비 */
      margin: 10px auto;  /* 바깥 여백 */
      padding: 10px;  /* 테두리와 내용 사이 여백 */ 
      border: 1px solid #000;  /* 테두리 */
    }    
  </style>
</head>
<body>
  <div id="container">
    <h1>레드향</h1>
    <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
    <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
  </div>
</body>
</html> 
 cs

 

같은 스타일 규칙을 사용하면 요소들을 묶어주는 그룹 선택자

선택자를 이용해 스타일을 정의하다 보면 여러 선택자에게 같은 스타일 규칙을 사용하는 경우가 있다.

이럴 때는 쉼표(,)로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한 번만 정의하면 된다.

 

<기본형>

선택자1, 선택자2 {스타일 규칙}

 

h1, p {
    text-align: center;
}
 cs

 

6-4 캐스케이딩 스타일 시트 알아보기

스타일 시트는 사실 CSS라는 명칭으로 잘 알려져있다. 

CSS와 스타일 시트는 비슷해 보이지만 조금 차이가 있다.

쉽게 말해 '스타일 시트'라는 용어 앞에 '캐스케이딩'이라는 용어가 하나 더 붙은 것이 CSS 입니다.

 

캐스케이딩의 의미

CSS에서 'C'는 캐스케이딩의 줄임말이며 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미로 사용한다.

다시말해 CSS는 우선순위가 있는 스타일 시트 정도로 해석할 수 있다.

그래서 CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다.

캐스케이딩은 스타일끼리 충돌하지 않도록 막아 주는 중요한 개념이다.

 

  • 스타일 우선순위 : 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다.
  • 스타일 상속 : 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.

 

스타일 우선순위

우선순위는 3가지 개념에 따라 지정된다.

 

◆ 얼마나 중요한가?

웹 브라우저에 내용을 표시할 때에는 단순히 CSS 소스의 스타일만 적용되는 것이 아니다.

컴퓨터 사용자가 지정한 스타일과 웹 문서를 제작한 제작자의 스타일, 그리고 웹 브라우저가 기본으로 정해 놓은 스타일 이렇게 3가지 스타일을 함께 사용한다.

 

<우선순위>

  1. 사용자 스타일
  2. 제작자 스타일
  3. 브라우저 기본 스타일

ex) 어떤 웹 문서에서 배경을 회색으로 지정하는 스타일을 사용했다.

브라우저 기본 스타일에서 문서 배경은 흰색이다. 하지만 제작자 스타일이 브라우저 기본 스타일 보다 우선이므로 이 웹 문서는 브라우저에서 회색 배경으로 표시될 것이다. 그런데 저시력자 사용자가 윈도우의 고대비 모드를 설정해 배경을 검은색으로 지정했다면 사용자 스타일이 제작자 스타일보다 우선이므로 웹 문서는 검은색 배경으로 표시될 것이다.

 

 

◆ 적용 범위는 어디까지 인가?

중요도가 같은 스타일이라면 스타일 적용 범위에 따라 우선순위를 정할 수 있다.

스타일 적용 범위가 좁을수록, 즉 정확히 필요한 요소에만 적용할 스타일일수록 우선순위가 높아진다.

단, 여기에서 스타일 규칙에 !important를 붙이면 그 스타일은 다른 스타일보다 우선순위가 높아진다.

 

<우선순위>

  1. !important
  2. 인라인 스타일
  3. id 스타일
  4. 클래스 스타일
  5. 타입 스타일

 

◆ 소스 코드의 작성 순서는 어떠한가?

스타일 시트에서 중요도와 적용 범위가 같다면 그 다음은 스타일을 정의한 소스 순서로 우선순위가 정해진다.

소스에서 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    p {
      color:black; //2
    } 
    h1 {
      color: brown !important; //1
    } 
    p {
      color:blue; //2
    }
  </style>
</head>
<body>
  <h1 style="color:green">레드향</h1> //1
  <p style="color:red;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>//2
  <p>레드향은 한라봉과 귤을 교배한 것으로</p>
  <p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>    
</body>
</html> 
 cs

 

1. 첫번째 텍스트인 h1 요소에는 타입 스타일과 인라인 스타일을 모두 사용했다. 

타입 스타일보다 인라인 스타일이 우선순위가 높지만 타입 스타일을 정의할때 !important를 사용해 중요 스타일로 지정했기 때문에 여기에서는 타입 스타일(color:brown)의 우선순위가 높아서 제목은 갈색으로 표시된다.

2. 두번째 문단부터 마지막 문단까지 모두 p요소이다. 

스타일 시트 안에 p 타입 스타일 color:black과 color:blue가 선언되어 있다. 

두 스타일의 중요도와 적용 범위가 같아서 나중에 적은 스타일의 우선순위가 높다. 

그래서 스타일 시트에서 정의한 2개의 p타입 스타일 중에는 두 번째 선언한 스타일(color:blue)이 적용된다.

그런데 두번째 문단에서 <p> 태그에 인라인 스타일을 사용하고 있다.

인라인 스타일의 우선순위가 타입 스타일보다 높기 때문에 두 번째 문단은 빨간색으로 표시되고 세 번째와 네 번째 문단은 파란색으로 표시된다.

 

 

스타일 상속

웹 문서에서 사용하는 여러 태그는 서로 포함 관계가 있다.

이때 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 한다.

스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달되는데, 이것을 스타일 상속이라고 한다.

 

예를 들어 문서 구조에서 <body> 태그는 웹 문서에 사용한 모든 태그의 부모 요소이다. 그래서 <body> 태그 스타일에서 글자색이나 글꼴을 지정하면 그 스타일은 웹 문서 전체에 적용할 수 있다.

 

참고로 배경색과 배경 이미지는 스타일 상속이 되지 않는다.

또한 스타일 상속만으로 모든 스타일의 충돌을 해결할 수 있는 것은 아니다. 

만약 부모 요소로 부터 글꼴을 상속받은 자식 요소에서 다른 글꼴을 사용하려면, 우선순위에서 설명했던 '명시도'나 '소스 순서' 등에 따라 해결해야한다.

 

 

출처 : Do it! HTML+CSS+자바스크립트 웹 표준의 정석 [고경희 (이지퍼블리싱)]

 

저작자표시

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

트랜지션과 애니메이션  (0) 2021.03.03
CSS 고급 선택자  (0) 2021.03.01
이미지와 그러데이션 효과로 배경 꾸미기  (0) 2021.02.26
레이아웃을 구성하는 CSS 박스 모델  (0) 2021.02.24
텍스트를 표현하는 다양한 스타일  (0) 2021.02.20
'Web Project/CSS' Related Articles more
Comments