[CSS] 기본 개념과 사용법

Geehyun(장지현)·2024년 1월 1일
CSS천재교육 에듀테크 풀스택4기학습노트
0

HTML/CSS

목록 보기
4/12
post-thumbnail

CSS란?

CSS란 Cascading Style Sheet로 html로 뼈대를 잡아준 문서에, style을 입혀주는 역할을 합니다.

💡 Cascading 이란?
이름에 있는 Cascading 이란 의미는 폭포 처럼 쏟아지는 이란 뜻으로, 위에서 아래로 흐르는 폭포처럼 일정한 우선순위 규칙이 적용되는 스타일 시트로 해석할 수 있습니다.

CSS 사용 이유와 목적

  1. 웹문서와 스타일 시트를 따로 작성함으로써, 웹문서와 스타일시트를 각 각 따로 수정/관리가 가능하다.
  2. PC, 태블릿, 모바일 등 다양한 기기에 대해 웹문서를 한번만 작성 후 스타일 시트만 수정해주면 되므로, 반응형 웹사이트 제작에 용이하다.

CSS 기본 사용법

CSS 작성 방법

css는 선택자로 html 요소를 선택해와, {} 안에 속성과 값을 입력해주는 형식으로 작성할 수 있습니다. {}안에서 속성은 속성명 : 값;의 형태로 작성해주며 ;으로 구분해줍니다.

💡 CSS 문서 내 주석처리
CSS 문서내 주석처리는 /*주석으로 표시할 내용*/으로 표시합니다.
주석처리를 하게될 경우 해당 주석처리된 내용은 브라우저는 읽지 않게되며, 코드 상에서만 표시됩니다.
주석 처리를 통해 코드 중간 중간 메모나, 표시 등으로 활용할 수 있습니다.
주석의 경우 각 언어 마다 방식이 다르니, 사용하는 언어의 주석처리 방법을 찾아서 사용해봅시다!

➡️ 작성 예시

/*CSS*/
p {color: red;}
<!--html-->
<h1>CSS세상</h1>
<p>CSS 기본 사용방법 입니다.</p>

➡️ 화면표시
css 작성예시

💡CSS 작성방법
CSS를 작성할 때 한 줄로, 또는 여러줄로 표기된 모습을 볼 수 있습니다.
한 줄 표기 법

p {color: red;}

여러 줄 표기 법

p {
	color: red;
}

위 두 작성 법은 모두 같은 스타일을 나타냅니다.
어떤 방식으로 표현하든 괜찮으나, 여러 줄 표기 법의 경우 사람이 읽고 관리하는데 편하게 작성한 방식으로 실제 프로젝트 작용 시는 CSS 경량화를 통해 주석/공백 등의 쓸모없는 부분을 덜어내는 작업이 들어가기도 합니다.

CSS 기본 선택자

CSS에서는 스타일을 적용해줄 html 요소를 선택해서 스타일 속성과 값을 작성해주는 방식을 사용하고 있습니다.

이 때, html 요소를 선택하는 걸 선택자라고 하며 여러 형태의 선택자들이 있습니다.
이번 노트에서는 기본적으로 사용하는 선택자에 대해서만 알아보겠습니다.

  • 전체 선택자
  • 타입 선택자 (=태그 선택자)
  • 클래스 선택자
  • 아이디 선택자
  • 그룹 선택자

전체 선택자

해당 스타일 시트가 꾸며주는 웹 문서의 모든 요소를 선택하는 선택자 입니다.
대부분 브라우저 기본 스타일을 초기화해 줄 때 사용됩니다.

  • * {...} : *(별) 기호로 모든 요소를 선택해줍니다.

➡️ 작성 예시

* {
   padding: 0;
   margin: 0;
}

위 css는 전체선택자*로 웹 문서의 모든 요소를 선택 후 패딩(요소 내부 여백), 마진(요소 외부 여백)을 모두 0으로 초기화 해준 예시입니다.

💡 브라우저 기본 스타일이란?
HTML 문서만 작성 후 브라우저에서 볼 경우, 아무런 CSS를 적용시켜주지 않았는데도, 글자의 볼드 표시, 안쪽 들여쓰기 또는 글머리/번호 표기가 되는 경우를 보실 수 있을 것 입니다.

이러한 부분을 브라우저 내부 스타일이라 합니다. 이러한 브라우저 내부 스타일의 경우 실제 CSS를 작성할 때 초기화 해줘야 CSS를 적용함에 있어 원하는 디자인대로 작업하는데 용이합니다.

➡️ 작성 예시

<h1>h1 태그입니다.</h1>
<ul>
    <li>ul 태그 예시입니다.</li>
    <li>ul 태그 예시입니다.</li>
</ul>

 
➡️ 화면표시
브라우저 기본 스타일 예시

타입 선택자

태그 선택자라고도 하며, 말 그대로 html 문서 내 스타일을 적용하고자 하는 태그를 선택해오는 방식 입니다.

  • 태그명 {...} : 태그명 으로 웹 문서 내 해당 태그를 모두 선택해옵니다.

➡️ 작성 예시

p {color: red;}

위 예시는, 연결된 웹 문서 내 <p> 태그를 모두 선택한 예시입니다.
그렇다면 많은 <p> 태그 중에서도 일부만 스타일을 적용시키고 싶다면 어떻게 해야할까요?

클래스 선택자

HTML 문서를 작성할 때, 특정 요소만 스타일 적용을 시키기 위해(추후 JS에서도 해당 클래스 이용) 태그 내 class속성으로 클래스명을 지정해주고 해당 클래스명으로 스타일을 적용해주는 방식 입니다.

  • .클래스명 {...} : html문서 작성 시 작성한 클래스명을 .클래스명 으로 선택해옵니다.

➡️ 작성 예시

/*CSS*/
.target {color: red;}
<!--html-->
<h1>CSS세상</h1>
<p class="target">클래스 명을 'target'으로 지정한 태그 입니다.</p>

위 예시를 보면 HTML 문서 내 <p>태그 내에 class="target"으로 클래스 명을 설정 후, CSS파일 내에서 .target으로 해당 클래스명을 갖고있는 요소를 꾸며주는 방식으로 작성되었습니다.

  • HTML 문서 내에서 태그 내 class="클래스명"으로 클래스 명을 작성합니다.
  • CSS 문서 내에서 선택자를 .클래스명으로 선택 후 스타일을 적용해줍니다.

아이디 선택자

위 클래스 선택자와 마찬가지로 특정 요소만 스타일을 적용 시키기위해 HTML 문서 내 id속성으로 아이디명을 지정해주고 해당 아이디명으로 스타일을 적용해주는 방식 입니다.

  • #아이디명 {...} : html문서 작성 시 작성한 아이디명을 #아이디명 으로 선택해옵니다.

➡️ 작성 예시

/*CSS*/
#target {color: red;}
<!--html-->
<h1>CSS세상</h1>
<p id="target">아이디 명을 'target'으로 지정한 태그 입니다.</p>

아이디 선택자의 경우, 클래스 선택자와 사용법이 유사합니다.

  • HTML 문서 내에서 태그 내 id="아이디명"으로 아이디 명을 작성합니다.
  • CSS 문서 내에서 선택자를 #아이디명으로 선택 후 스타일을 적용해줍니다.

💡 클래스와 아이디?
사용법도 유사하고 특정 요소에 대해 스타일을 적용한다는 점에서 사용목적도 비슷해보이는 클래스와 아이디는, 적용하는 요소의 성격에 있어 차이점이 있습니다.

클래스 선택자의 경우 웹 문서 내 동일한 스타일을 적용해줄 때 같은 클래스명을 여러 요소에 작성해줌으로써 활용할 수 있습니다. 따라서 동일 웹 문서 내 여러 태그에 동일한 클래스 명을 적용할 수 있습니다.

➡️ 작성 예시

/*CSS*/
.btn1 {padding: 10px; text-align: center; background: skyblue; border-radius: 5px}
<!--html-->
<h1>CSS세상</h1>
<button class="btn1">버튼1</button>
<button>버튼2</button>
<button class="btn1">버튼3</button>

➡️ 화면 표시

아이디 선택자의 경우 중복되지 않는 고유 요소/영역에 대해 스타일을적용해줄 때 사용되고는 합니다. 아이디 선택자는 동일 웹 문서 내 한번만 적용 가능합니다. 예를들어 header라는 아이디 명을 해당 웹 문서에서 이미 사용했을 경우 header는 더이상 다른 요소에서 아이디 명으로 지정할 수 없습니다.

그룹 선택자

여러 선택자에 대해 같은 스타일을 적용해줄 때 사용됩니다. 쉼표,로 각 선택자 들을 구분하여 나열하는 방식으로 사용합니다.

  • 선택자, 선택자 {...} : 선택자와 선택자 사이에 ,(쉼표)로 구분해주는 형식으로 작성합니다.

➡️ 작성 예시

/*CSS*/
div, p, span {color: red;}

CSS를 웹 문서에 적용하는 방법

CSS를 작성하는 이유는 웹 문서에 스타일을 입히기 위해서 입니다. 그렇다면 웹문서에 스타일 시트를 적용하는 방법에는 어떤게 있을까요?

  • 인라인 스타일 작성법 : 간단한 스타일 적용 시 사용
  • 내부 스타일 시트 : 웹 문서 안에 스타일 시트 작성
  • 외부 스타일 시트 : 웹 문서와 별도로 .css파일을 작성하여 웹문서와 연결

1. 인라인 스타일 작성법

스타일 시트를 따로 작성하지 않고 간단한 스타일을 적용하고자 할 때 사용합니다.
적용하고자 하는 태그에 style속성으로 style = "속성명: 값;" 형식으로 작성해줍니다.

➡️ 작성 예시

<h1>CSS세상</h1>
<p style="color: red;">CSS 인라인 작성방법 입니다.</p>

위와 같이 스타일을 적용하고자 하는 html 태그 내 style속성으로 바로 적용이 가능하며,
간단히 바로 적용할 수 있다는 장점이 있지만, 해당 태그에만 스타일 적용이 되며, 추후 스타일 수정 시 웹 문서에서 해당 부분을 찾아서 따로 수정해야한다는 단점이 있습니다.

2. 내부 스타일 시트 작성법

웹 문서 내부 head태그 사이에 <style> 시트를 작성하는 방법 입니다.

➡️ 작성 예시

<head>
  <style>
    p {color: red;}
  </style>
</head>
<body>
  <h1>CSS세상</h1>
  <p>CSS 기본 사용방법 입니다.</p>
</body>

내부 스타일 시트의 작성 방법은 위 처럼 웹 문서 내부에 작성함으로써 해당 웹문서 전체에 대하여 스타일 시트를 적용시킬 수 있으며, 해당 웹 문서에 대한 스타일 변경이 필요 시 <style>시트 내 내용을 수정해주면 된다는 장점이 있습니다.

다만, 대부분의 웹 사이트는 하나의 웹 문서로 구성되지 않으며 많은 웹문서로 이루어져 있습니다. 이럴 경우 웹 사이트 일괄적으로 스타일 수정이 필요 시 웹 문서 하나하나 돌아다니며 스타일을 수정해주기는 어려운 일 입니다.

3. 외부 스타일 시트 작성법

웹 문서와 별도로 .css 확장자를 사용하는 스타일 시트 파일을 따로 작성하는 방식 입니다. 스타일 시트 파일을 따로 작성하여 웹 문서 <head> 내에 <link>태그로 웹 문서와 스타일 시트 파일을 연결 시켜줄 수 있습니다.

➡️ 작성 예시

<head>
  <link rel="stylesheet" href="css파일 경로">
</head>
<body>
  <h1>CSS세상</h1>
  <p>CSS 기본 사용방법 입니다.</p>
</body>

위 처럼 <link rel="stylesheet" href="css파일경로">로 웹 문서 내 CSS파일을 연결 시켜줄 수 있습니다.

CSS파일을 별도로 작성 후 해당 CSS를 적용시킬 웹 문서들에 연결 시켜주는 식으로 사용하며, 추후 스타일 수정 시 해당 CSS파일에서만 수정해주면 연결된 모든 웹 문서에 변경된 스타일이 바로 적용된다는 장점이 있어, 실제 웹사이트를 제작할 때 가장 일반적으로 사용하는 방법 입니다.


CSS 우선순위와 CSS 상속

동일한 요소에 여러 style이 적용되는 경우 CSS 우선순위와 CSS 상속을 통해 서로 충돌하지 않도록 방지해줍니다.

CSS 우선순위

CSS는 Cascading Style Sheet로 즉, 우선순위가 적용되는 스타일 시트입니다.
아래 3가지 기준을 통해 우선순위가 적용 됩니다.

1순위 - 중요도

스타일에는 아래 3가지 스타일이 적용됩니다.

  • 사용자 스타일 : 해당 웹 사이트를 열고 있는 사용자 스타일
  • 제작자 스타일 : 해당 웹 사이트를 제작한 제작자 스타일
  • 브라우저 스타일 : 해당 웹 브라우저의 기본 스타일

여기서 중요도는 사용자 스타일 > 제작자 스타일 > 브라우저 스타일 순으로 적용 됩니다.

2순위 - 적용범위

CSS를 작성할 때 적용범위가 좁을 수록 그 우선순위가 높아집니다.
예를들어 외부 스타일 시트로 <p>태그를 선택하여 작성한 스타일 보다 HTML 문서 내 직접 특정 <p> 태그 내 인라인 스타일로 적용한 스타일이 더 적용범위가 좁으며 우선순위가 높습니다.

다만, 스타일 속성 내부에 !important를 붙일 경우 해당 속성은 가장 우선순위가 높이 적용되도록 예외처리 됩니다.

적용범위 기준 우선순위는!important > 인라인 스타일 > 아이디 선택자 > 클래스 선택자 > 타입 선택자 순으로 적용됩니다.

3순위 - 적용순서

CSS를 적용하는 방식에는, 인라인 작성방법, 내부스타일 작성방법, 외부스타일 작성방법이 있는데, 이 중 가장 마지막에 적용되는 스타일이 가장 우선 적용됩니다.

html문서의 경우 위에서부터 읽어오기 때문에 웹 문서가 작성된 순서에 따라<head> 태그 내 작성된 내용을 먼저 읽어오고, <body> 태그 내 작성된 내용을 읽어오는 식으로 웹문서를 읽습니다.
이 때 이 순서에 따라 동일한 요소에 style이 여러군데에서 적용되었을 경우 가장 마지막에 읽힌 스타일 기준으로 스타일이 적용 됩니다.

➡️ 작성 예시

<!--html 문서-->
<head>
  <style>
    h1, p {color:blue;}
  </style>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <h1>CSS세상</h1>
  <p style="color:pink">p태그1</p>
  <p>p태그2</p>
  <p>p태그3</p>
  <p>p태그4</p>
</body>
/*css 스타일 시트*/
p {color: green;}

➡️ 화면 표시

위 화면표시 이미지를 보면, 적용순서에 따라 내부 스타일 시트가 가장 먼저 읽혀 h1태그가 파란글자로 적용된 것을 볼 수 있습니다. 하지만 p태그2,3,4번은 파란 색상이 아니라 그 다음 읽힌, 외부 스타일 시트에 따라 녹색으로 표시되고 있으며, 마지막으로 읽힌 인라인 태그에 따라 p태그1번은 핑크 색상으로 표시되고 있습니다.

이 처럼 결국 CSS는 다른 우선순위가 같다면 가장 마지막에 적용된 내용으로 덮어쓰여짐을 알 수 있습니다.

CSS 상속

HTML 문서에서 포함관계에 따라 부모요소, 자식요소로 구분할 수 있습니다.
<태그1> 안에 <태그2>가 속해 있는 경우
<태그1>은 <태그2>의 부모요소가 되며, <태그2>는 <태그1>의 자식요소가 됩니다.

  • 부모요소 : 본인의 바로 상위 태그
  • 자식요소 : 본인의 바로 하위 태그
<body>
  <div>
    <p>저는 p태그 입니다.</p>
  </div>
</body>

위 경우 <p>태그에게 <div>태그는 부모 요소이며 <body>태그 는 부모요소의 부모요소 이므로 조상 태그 입니다.

CSS에서는 부모요소에 스타일을 적용 후 자식요소에 따로 스타일을 적용하지 않을 경우 기본적으로 부모요소의 적용된 스타일을 자식요소가 상속 받게됩니다.
아래 이미지를 보면, <body>태그에만 스타일을 적용 시켜주었는데 따로 스타일을 적용하지 않은 하위요소들인 <p> 요소들에도 스타일이 적용된 것을 확인할 수 있습니다.

➡️ 작성 예시

<head>
  <style>
    body {color: blue;}
  </style>
</head>
<body>
  <div>
    <p>저는 p태그 입니다.</p>
  </div>
  <p>저는 div 밖에 있는 p태그 입니다.</p>
</body>

➡️ 화면 표시
부모 상속 예시

💡모든 스타일은 상속될까?
CSS를 적용할 때 부모요소에 적용된 스타일이 있으면 기본적으로 그 자식 요소들에게도 해당 스타일이 상속됩니다.
다만, background와 같은 배경 속성과 같이 상속되지 않는 속성도 있으니 이 점 참고하여 사용해야합니다.

참고

Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석 - 고경희
위 책을 공부하며 작성하고 있습니다!

profile
Geehyun(장지현)
개발자를 꿈꾸는 병아리 (블로그 이전 준비중 입니다.)
이전 포스트

[HTML] 다양한 태그(tag) - 사용자 입력 값을 받는 태그

다음 포스트

[CSS] Selector(선택자) 정리

0개의 댓글

관련 채용 정보