CSS 란?

쵸리·2021년 7월 26일
CSS
0

CSS

목록 보기
1/11
post-thumbnail
post-custom-banner

CSS 란?

Cascading Style Sheets ( 캐스케이딩 스타일 시트 )

  • HTML, XHTML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어
  • HTML로 문서의 뼈대를 만들면 CSS는 이 문서를 꾸며 글꼴, 배경색, 위치 , 너비와 높이 등을 지정하거나 웹 브라우저, 스크린 크기, 장치에 따라서 화면을 다르게 표시될 수 있도록 지정하는 것
  • HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만 웹 페이지의 많은 글꼴 위치 크기 색상등의 style을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업시간도 단축된다.

캐스케이딩 ( Cascading ) 이란 ?

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

  • 중요도
    CSS가 어디에 선언 되었는지에 따라서 우선순위가 달라진다.
  • 명시도
    대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.
  • 선언순서
    선언된 순서에 따라 우선 순위가 적용된다. 즉, 나중에 선언된 스타일이 우선 적용된다.

스타일을 적용하는 방법

1. 인라인 스타일 ( inline style )

직접 HTML문서 내부에 삽입 하는 방식 보통 게시판이나 블로그에서 글을 쓸 때와 같이 페이지 내에 link나 style요소를 사용할 수 없을 때 사용하거나 스크립트를 통해 데이터 바인딩으로 요소를 제어할 때도 인라인 스타일을 사용한다.

<h1 style="color: red; font-size: 2em;">Hello World</h1>

2. 내부 스타일

HTML 문서와 CSS 문서를 분리하지 않고 넣는 방법이다. 간단한 스타일을 사용하거나 해당 스타일을 오로지 해당 페이지만 쓴다거나, 임시적으로 테스트를 위한 페이지를 만들 때 주로 사용한다.

<style>
    h1{
      color: red;
      font-size: 2em;
    }
</style>
<h1>Hello World</h1>

3. 외부 스타일

분리된 디자인 파일로 관리하며 홈페이지 스타일을 일관성 있게 유지/보수하며 효율성을 극대화 할 수 있다. HTML 문서의 head 요소 안에 link 요소를 통해서 css파일을 연결하는 방법. ( link 요소를 여러 개 넣음으로써, 여러 css파일을 연결 가능하다. )

<link rel="stylesheet" href="css/index.css">
<h1>Hello World</h1>
h1{
      color: red;
      font-size: 2em;
    }

CSS 적용 우선순위 ( 캐스케이딩 중요도 )

- HTML내에서의 선언위치, CSS에서 선택자를 어떻게 잡느냐 ( 명시도 ) 에 따라 우선순위가 있다.

1. head 요소 내의 style 요소
2. head 요소 내의 style 요소 내의 @import 문
3. ＜link＞로 연결된 CSS 파일
4. ＜link＞로 연결된 CSS 파일 내의 @import 문
5. 브라우저 디폴트 스타일시트

- 명시도에 따른 우선순위

1. 속성값 뒤에 !important; 를 붙인 속성 ( !important의 경우 종료마크인 ; ( 세미클론 ) 안쪽에 작성되어야 한다.)
2. 태그에 직접적으로 style 속성을 넣는 방식 ( 인라인스타일 방식 )
3. #id로 지정한 속성
4. 클래스, :추상클래스로 지정한 속성
5. 태그이름으로 지정한 속성 ( 태그 선택자 )
6. 전체 선택자
7. 상위 요소 (부모) 에 의해 상속된 속성

<!DOCTYPE html>
<html>
<head>
	<style>
		p        { color: red !important; }
    	#thing   { color: blue; }
      
    	div.food { color: chocolate; }
    	.food    { color: green; }
    	div      { color: orange; }
	</style>
</head>
<body>
  <p id="thing">Will be Red.</p>
  <div class="food">Will be Chocolate.</div>
</body>
</html>

결과

HTML내에서의 선언 위치가 똑같고 CSS 명시도가 같으면 나중에 선언된 스타일이 우선 적용된다.

<!DOCTYPE html>
<html>
<head>
  <style>
    p { color: blue; }
    p { color: red; }

    .red { color: red; }
    .blue { color: blue; }
  </style>
</head>
<body>
  <p>Will be RED.</p>
  <p class="blue red">Will be BLUE.</p>
</body>
</html>

CSS 구문

h1 { color: blue; font-size: 12px; }

h1은 Selector ( 선택자 ), color, font-size는 Property blue,12px는 value이다.

( 내부 스타일, 외부 스타일 방식 )

CSS 선택자의 종류

전체 선택자 *

  • 전체 선택자는 HTML에서 모든 엘리먼트에 같은 CSS속성을 적용한다. 보통 어떠한 값을 초기화 할 때 사용한다. 쓰기에는 간편하지만 모든 요소를 읽어내야 하기 때문에 로딩속도가 느려질 수 있다. 이를 방지하기 위해 초기화 CSS가 존재한다.
*{
  margin: 0;
  padding: 0;
  border : 0;
}

태그 선택자

  • 태그 선택자는 HTML요소를 직접적으로 기술하는 선택자다. 엘리먼트의 TAG를 직접 쓰는 방식으로 문서내의 모든 태그가 적용되는 위험성이 있으므로 조심해야한다.
div{
  margin: 0;
  padding: 0;
}

클래스 선택자

  • 클래스 선택자는 위와같이 엘리먼트의 class명을 가져다 스타일을 지정한다.
    .클래스명{} 이 기본 문법이다.
<div class="name"></div>
.name{
  margin: 0;
  padding: 0;
}

아이디 선택자

  • 아이디 선택자는 엘리먼트의 클래스명을아닌 아이디명을 가져다 스타일을 지정한다. 아이디 선택자를 사용할 때 주의할 점은 아이디명이 중복이 되서는 안된다. #아이디명이 기본 문법이다.
<div id="name"></div>
#name{
  margin: 0;
  padding: 0;
}

복합 선택자

  • 복합선택자는 엘리먼트가 2개이상으로 이루어져 있는 경우에 쓴다.
<h1>인접 / 관계 선택자 Study</h1>
  <ul class="temp_main">
    <li>인접 선택자1
      <ul class="temp_sub1">
        <li class="temp1">인접 선택자2</li>
        <li class="temp2">인접 선택자3</li>
        <li class="temp3">안접 선택자4</li>
      </ul>
    </li>
    <li>인접 선택자5
      <ul class="temp_sub2">
        <li class="temp4">인접 선택자6</li>
        <li class="temp5">인접 선택자7</li>
        <li class="temp6">인접 선택자8</li>
      </ul>
    </li>
  </ul>

이런 예시가 있을 때 만약 .temp_main li를 하면 하위 li들 ( 자식 자손 )이 전부 선택되고 .temp_main > li를 하면 직계자식인 인접선택자 1과 인접선택자 5만 선택된다. ( 상속되는 property들은 상속된다. )
'+' 형제들이 있을경우 앞에 선택자의 바로 뒤 형제를 선택한다.
.temp1+li 하면 .temp2가 선택된다.
'~' 형제들이 있을경우 앞에 선택자의 뒤의 형제들을 선택한다.
.temp1~li 하면 .temp2, .temp3이 선택된다.

속성 선택자

속성선택자는 태그 안의 속성에 따라 스타일을 지정하는 선택자 방식이다.
값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높다.
기본 문법 '엘리먼트명[속성명]'

패턴의미
E[attr]'attr' 속성이 포함된 요소 엘리먼트를 선택합니다.
E[attr="val"]'attr' 속성의 값이 정확하게 '속성값'과 일치하는 엘리먼트를 선택합니다.
E[attr~="val"]'attr' 속성의 값에 '속성값'이 포함되는 요소를 선택합니다.
( 공백으로 분리된 값이 일치해야 합니다. )
E[attr^="val"]'attr'속성의 값이 '속성값'으로 시작하는 요소를 선택합니다.
E[attr$="val"]'attr'속성의 값이 '속성값'으로 끝나는 요소를 선택합니다.
E[attr*="val"]'attr'속성의 값에 '속성값'이 포함되는 요소를 선택합니다.
E[attr│="val"]'attr'속성의 값이 정확하게 '속성값'이거나
'속성값-'으로 시작되는 엘리먼트를 선택합니다.

상속 ( Inheritance )

상속이란 상위( 부모,조상 ) 요소에 적용된 프로퍼티를 하위 ( 자식, 자손 ) 요소가 물려 받는 것을 의미한다. 상속 기능이 없다면 각 요소에 프로퍼티를 매번 각각 지정해야 한다. 하지만 모든 프로퍼티가 상속되는 것은 아니다. 프로퍼티 중에서는 상속이 되는 것과 되지 않는 것이 있다.

propertyInherit
width/heightno
marginno
paddingno
borderno
box-sizingno
displayno
visibilityyes
opacityyes
backgroundno
fontyes
coloryes
line-heightyes
text-alignyes
vertical-alignno
text-decorationno
white-spaceyes
positionno
top/right/bottom/leftno
z-indexno
overflowno
floatno
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .text-red {
      color: red;
      border: 1px solid #bcbcbc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="text-red">
    <h1>Heading</h1>
    <p>Paragraph<strong>strong</strong></p>
    <button>Button</button>
  </div>
</body>
</html>

color는 상속되는 프로퍼티로서 자식 요소는 물론 자손 요소까지 적용된다. 하지만 button처럼 요소에 따라 상속 받지 않는 경우도 존재한다. border, padding은 상속되지 않는 요소로 하위 요소에 적용되지 않는다. ( 상속받지 않는 요소 또는 상속되지 않는 프로퍼티는 상속시켜줄 프로퍼티 속성값에 inherit을 사용하면 명시적으로 상속받게 할 수 있다. )

주석 (comment)

주석은 브라우저에서 표시되지 않지만, 문서 정리에 도움을 준다.
CSS의 주석은 한 줄 주석 여러줄 주석 둘다 /* */로 감싸준다.
주석은 오류 검색을 위한 디버깅에 아주 좋다.

profile
쵸리
다음 포스트

CSS 단위와 색상

post-custom-banner

0개의 댓글