CSS기초

<Do it! HTML5+CSS3>을 기본으로 배운 내용입니다.

1. 스타일과 스타일 시트

2. 주요 선택자

3. CSS 스타일 우선순위

<CSS기초>

CSS(Cascading Style Sheets)는 텍스트 색상이나 크기, 이미지 크기나 위치, 표 색상, 배치 방법 등 웹 문서의 디자인 요소를 담당한다.

1. 스타일과 스타일 시트

1) 스타일

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

- 형식

선택자 selector : 앞으로 만들 스타일 규칙을 어디에 적용할 것인지를 나타낸다.
스타일 속성과 속성 값 : 선택자 다음에 중괄호가 오고 그 사이에 {속성: 속성 값}을 작성해 속성을 적용할 수 있다.

2) 스타일 시트

스타일 시트란 여거 개의 스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한 군데에 묶어 놓은 것을 말한다.
스타일 시트는 문서 안에서 사용한 스타일 규칙들을 정의한 '내부 스타일 시트'와 별도의 스타일 파일을 만들어 연결해 사용하는 '외부 스타일 시트'로 나뉜다.

- 내부 스타일 시트

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

<head>
  </style>
    //내부 스타일 시트
    /*스타일 정보는 웹 문서를 화면에 표시하기 전에 결정되어야 하기 때문에 이 부분에 작성한다.*/
  </style>
</head>

- 외부 스타일 시트

사이트를 제작할 때, 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용하는 것이 일반적이다. 이렇게 따로 저장해 놓은 스타일 정보를 외부 스타일 시트(CSS파일)라 한다.
외부 스타일 시트를 연결할 때는 <style>태그 없이 <link>태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일을 연결한다.

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

- 인라인 스타일

간단한 스타일 정보는 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시한다.
스타일을 적용하고 싶은 태그에 style속성을 사용해 스타일을 바꿀 수 있다.

<p style="color:blue;">간단한 스타일</p>

2. 주요 선택자

1) 주요 선택자

선택자	설명
*	모든 요소에 스타일을 적용한다.
태그	특정 태그를 사용한 요소에 스타일을 적용한다.
.클래스명	- 특정 부분에 스타일을 적용한다. - 클래스 이름은 태그 이름과 겹치지 않는 쉬운 이름을 임시로 정하면 된다. - ex) 하늘색 글자로 지정하고 싶은 부분은 .blutext{ color:blue; }
#아이디명	특정 부분에 스타일을 적용한다.
태그1, 태그2, ...	둘 이상의 요소에 같은 스타일을 적용한다.

2) 클래스 선택자 - .클래스명

일부만 태그 선택자의 스타일이 아닌 다른 스타일로 적용하고 싶을 때 사용한다.

<head>
    <title>온라인 프로필</title>
    <meta charset="utf-8">
    <style>
      .bluetext {
        color:blue;
      }
      h2.accent {
        background-color:#222;
        color:#fff;
        padding:5px;
      }
      .browntext {
        color:brown;
      }
      .boldtext {
        font-weight: bold;
      }
    </style>
</head>
<body>
  <h2 class="accent">accent</h2>
  <p>일반 글씨<span class="browntext boldtext">browntext boldtext</span></p>
  <h2 class="bluetext">h2인데 bluetext</h2>
  <p>일반 글씨<span class="bluetext">특정 부분 : p인데 bluetext</span></p>
  <p class="bluetext">p인데 bluetext</p>
</body>

3. CSS 스타일 우선순위

1) 스타일 적용 우선순위 : 캐스캐이딩(Cascading)

요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다. 이때 충돌을 피하기 위해 CSS 적용 우선순위가 필요한데 이를 캐스캐이딩(Cascading Order)이라고 한다.

- 캐스캐이딩에는 다음과 같이 세가지 규칙이 있다.

규칙	설명	우선순위
중요도	CSS가 어디에 선언 되었는지에 따라서 우선순위가 달라진다.	1. head 요소 내의 style 요소 2. head 요소 내의 style 요소 내의 @import 문 3. <link> 로 연결된 CSS 파일 4. <link> 로 연결된 CSS 파일 내의 @import 문 5. 브라우저 디폴트 스타일시트
명시도	대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.	!important > 인라인 스타일 > 아이디 선택자 > 클래스/어트리뷰트/가상 선택자 > 태그 선택자 > 전체 선택자 > 상위 요소에 의해 상속된 속성
선언순서	선언된 순서에 따라 우선 순위가 적용된다. 즉, 나중에 선언된 스타일이 우선 적용된다.

- !important

우선순위를 무시하고, 꼭 적용 시키고 싶은 속성이 있다면, 속성 값 뒤에 !important 를 붙여서 적용시켜주면 된다.
!important 는 우선순위 뿐만 아니라 디자이너-개발자간 커뮤니케이션시 중요한 속성임을 알린다.

.compulsion{ color: black !important }

2) 스타일 상속

스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다. 다만, 부모 요소의 모든 스타일이 상속되는 것은 아니다.
상속되지 않는 경우, inherit 키워드를 사용하여 명시적으로 상속받게 할 수 있다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .text-red {
      color: red;
      border: 1px solid #bcbcbc;
      padding: 10px;
    }
    .text-red button {
      color: inherit;   //스타일 상속
    }
    .text-red p {
      border: inherit;   //스타일 상속
      padding: inherit;   //스타일 상속
    }
  </style>
</head>
<body>
  <div class="text-red">
    <h1>Heading</h1>
    <p>Paragraph<strong>strong</strong></p>
    <button>Button</button>
  </div>
</body>
</html>

저작자표시 비영리 변경금지

'💻WEB FrontEnd > CSS3' 카테고리의 다른 글

텍스트 관련 스타일- 목록 (0)	2020.07.09
텍스트 관련 스타일- 문단 (0)	2020.07.09
텍스트 관련 스타일- 텍스트 (0)	2020.07.09
텍스트 관련 스타일- 글꼴 (0)	2020.07.09
CSS3와 CSS모듈 (0)	2020.07.08

winnih_B

LINKS

CATEGORY

CSS기초

<CSS기초>

1. 스타일과 스타일 시트

2. 주요 선택자

3. CSS 스타일 우선순위

'💻WEB FrontEnd > CSS3' 카테고리의 다른 글

티스토리툴바

CSS기초

<CSS기초>

1. 스타일과 스타일 시트

2. 주요 선택자

3. CSS 스타일 우선순위

'💻WEB FrontEnd > CSS3' 카테고리의 다른 글

'💻WEB FrontEnd/CSS3' Related Articles

티스토리툴바