3. CSS - 입문

CSS 입문

참고 링크 :
1. 생활코딩 - https://opentutorials.org/course/3086/18318
2. CSS 개요- https://heropy.blog/2019/04/24/html-css-starter/
3. CSS 속성 - https://happy-noether-c87ffa.netlify.app/presentations/level1/css/properties/
3. w3schools - https://www.w3schools.com/css/default.asp

이전에 올린 HTML 입문 포스팅을 먼저 읽고 보는 것을 추천합니다.

https://bellmir.tistory.com/20

(2) HTML 입문

HTML 입문 참고 링크 : 1. 생활코딩 - https://opentutorials.org/course/3084 2. Heropy - https://heropy.blog/2019/04/24/html-css-starter/ 3. w3schools - https://www.w3schools.com/html/ 들어가기 전에 H..

bellmir.tistory.com

들어가기 전에

CSS란?

CSS(Cascading Style Sheet)는 웹의 디자인적 기능을 담당하는 언어입니다. HTML에 디자인을 적용할 때 사용합니다.

CSS 탄생 배경

HTML은 정보를 표현하기 위해 고안된 언어입니다. 그런데 웹이 점점 커질 수록 사람들은 좀 더 화려한 디자인을 원하기 시작했고, HTML에 디자인을 위한 코드를 점점 집어넣기 시작했죠.

문제는 스타일을 위한 코드가 너무 많아지자 정보를 표현하는 HTML의 본연의 목적에서 점점 멀어져 갔습니다. 그래서 사람들은 디자인적인 면을 담당하는 기능을 따로 떼어내기로 했고, 그렇게 만들어진 언어가 바로 CSS입니다.

CSS 기본 문법

기본 형태

CSS는 선택자(Selector)와 선언부(Declaration)로 나뉘며, 선언부는 속성(property)와 값(value)로 구성됩니다.

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

/* 실제 코드 예시 */
h1 {
  color: blue;
  font-size: 12px;
}

※ 위에서 볼 수 있듯이 CSS는 HTML과 다르게 세미콜론(;)으로 각 문장의 끝을 구분합니다. 빼먹으면 안 됩니다.

※ CSS에서 주석은 /*과 */ 사이에 작성하면 됩니다.

선택자(Selector)란?

선택자는 이름에서 알 수 있듯 HTML의 특정 요소를 선택합니다.

CSS에선 이 선택자를 이용하여 스타일을 적용할 요소를 선택하는데요. 선택자로는 다양한 종류가 있으며 밑에서 더 자세히 알아보도록 하겠습니다.

속성(Attribute)과 값(Value)

속성과 값은 콜론(:)을 이용하여 짝을 짓습니다. attribute : value

속성은 적용할 스타일의 속성을 뜻하고, 값은 그 속성을 얼마만큼(혹은 어떤 걸) 적용하는지를 뜻합니다.

ex)
font-size: 12px; /* '글자 크기' 속성을 '12px'만큼 적용한다는 뜻 */
color: blue; /* '글자색' 속성을 '파란색'으로 지정한다는 뜻 */

속성은 많이 알 수록 좋습니다. 많은 속성과 값을 아는 만큼 멋진 스타일을 만들어 낼 수 있기 때문이죠. css 속성도 밑에서 자세히 알아보도록 하겠습니다.

CSS 선언 방식

선택자와 속성을 알아보기 전에 마지막으로 CSS를 선언하는 방식에 대해 짚고 넘어가겠습니다.

웹 브라우저는 기본적으로 문서가 HTML이라고 해석을 합니다. (<!DOCTYPE html>을 떠올려보세요)

그런데 HTML과 CSS는 다른 언어죠. 때문에 우리는 어디서부터 어디까지가 CSS인지 브라우저가 알 수 있도록 표시(선언)해줘야 합니다. HTML 문서에 CSS를 포함시키는 방식을 배운다고 생각하면 됩니다.

CSS의 선언 방식에는 크게 3가지가 있습니다.

인라인 (In-line)
내장 (Internal)
외장 (External)

인라인 (In-line) : 태그에 직접 삽입하기

이 방법은 해당 HTML 태그에 직접 CSS를 삽입하는 방식이기 때문에 선택자가 필요하기 않습니다.

HTML의 style 속성을 이용하여 선언하며, style 속성 값으로 CSS의 속성과 CSS의 속성 값이 들어가는 형태입니다.

<p style="color: red">빨간글씨</p>

내장 (Internal) : HTML 내부에 포함시키기

이 방식은 HTML의 <head> 부분에 들어가는 <style></style>태그 사이에 CSS를 작성하는 방식입니다.

CSS만 따로 작성하기 때문에 스타일을 적용할 요소를 선택하는 선택자가 필요합니다.

<head>
  <title>문서타이틀</title>
  <style>
    p { color: red }
  </style>
</head>

외장 (External) : HTML 외부에서 불러오기

이 방식은 HTML과 CSS를 완전히 분리시켜 각각의 파일로 만들고, 분리된 CSS파일을 HTML 파일에서 불러와 사용하는 방식입니다. HTML에서 <link> 태그를 이용하여 CSS 파일을 연결시킵니다. 가장 많이 사용하는 방식입니다.

<!--html의 <link>태그를 이용해서 css파일 연결-->
<head>
  <link rel="stylesheet" href="./main.css">
</head>

/*css 파일*/
p {
  color: red;
  font-size: 20px;
}

CSS 선택자

선택자는 크게 4가지로 분류할 수 있습니다.

기본 선택자 (basic selector)
복합 선택자 (combinators)
가상 선택자 (pseudo)
속성 선택자 (attribute selector)

이번 CSS 입문 포스팅에서는 가장 기본적이고 많이 쓰이는 기본선택자와 복합선택자의 일부만 알아보도록 할게요.

1. 기본 선택자

태그 선택자 (Type selector)

태그 선택자는 태그의 종류를 이용하여 적용할 태그를 선택하는 방법입니다. 가장 기본적인 형태입니다.

h1{	/* h1 태그 선택 */
  color: red;
  font-size: 20px;
}

그런데 이런 태그 선택자는 문제점이 있는데, 바로 위에처럼 h1 태그에 스타일을 적용하면 HTML 문서 내의 다른 모든 h1 태그에도 동시에 스타일이 적용된다는 것입니다.

만약 하나의 태그에만 스타일을 적용하려 했을 경우에 이렇게 되면 난감하죠.

이럴 때 사용 가능한 방식이 두 가지가 있는데 바로 'class'와 'id'입니다. 각각의 차이점과 사용법을 알아봅시다.

클래스 선택자 (Class selector)

HTML 태그의 속성 중에 'class'라는 속성을 이용하는 방법입니다.

HTML에서 클래스 속성은 class="클래스이름" 형식으로 선언하면 되고, CSS에서 이를 선택할 때는 점(.)을 선택하려는 클래스 이름 앞에 붙여주면 됩니다.

<!--html 문서-->
<h1 class="red-text"> 제목1 </h1>

/* CSS 문서 */
.red-text{ color: red; }

아이디 선택자 (ID selector)

HTML 태그의 속성 중 'id' 속성을 이용하는 방법입니다.

HTML에서 아이디 속성은 id='아이디이름' 형식으로 선언하고, CSS에서 이를 선택할 때는 샾(#)을 선택하려는 아이디 이름 앞에 붙여주면 됩니다.

<!--html 문서-->
<h1 id="big"> 제목1 </h1>

/* CSS 문서 */
#big{ font-size: 25px; }

▶ ID vs Class 차이점

위에서 알아본 각각의 특성을 곰곰이 생각해보면 같은 역할을 하는 것 같은데 왜 굳이 두 가지 방식으로 나눠놨는지 의문이 들 수 있어요. 이 의문은 둘의 특징과 차이점을 알게 되면 해결됩니다.

결론부터 이야기하면, 클래스는 같은 이름으로 여러 개의 태그에 붙일 수 있지만(중복 가능), 아이디는 하나의 태그에만 붙일 수 있다는(중복 불가) 특징이 있습니다. 비유하자면 아이디는 주민등록번호이고, 클래스는 이름입니다. 이름은 동명이인이 있을 수 있지만 주민등록번호는 중복이 될 수 없죠.

따라서 여러 태그에 적용하고 싶은 스타일은 클래스로 지정하여 재사용하고, 단 하나의 태그에만 적용할 스타일은 아이디로 지정하여 적용하는 방식으로 사용하게 됩니다.

<!--html -->
<h1 id="title">아이디와 클래스</h1>
<p>
  오늘은 <span class="red">아이디</span>와 <span class="red">클래스</span>에 대해 알아보도록 하겠습니다...
</p>

/* CSS */
#title{
  color: blue;
  font-size: 20px;
}
.red{ color: red; }

자, 위에서 알아본 기본선택자는 하나의 조건에 해당되는 요소들을 선택할 때 사용하는 방법입니다.

비유하자면 태그 선택자는 학교에서 남/여로 혹은 나이로 선택하는 느낌이고, 클래스 선택자는 '철수'라는 이름을 가진 학생을 선택하는 느낌이라 할 수 있어요.

그런데 학교에 철수가 여러 명이라 '철수' 중 '1학년 2반'에 속한 철수를 선택할 땐 어떻게 해야 할까요?

해당되는 철수에게 또 다른 명칭을 부여해야 하는 것일까요?

아니요. 태그를 선택할 때 하나의 조건이 아닌 좀 더 구체적인 조건을 정할 수 있는 방법이 있습니다.

이번엔 이럴 때 사용하는 복합 선택자에 대해 알아보겠습니다.

2. 복합 선택자

복합 선택자는 여러 가지가 있지만 입문에서는 그중 '일치 선택자'와 '후손 선택자'만 살펴보도록 하겠습니다

일치 선택자 (Basic combinator)

일치 선택자는 여러 가지의 조건을 동시에 만족하는 요소를 선택합니다.

각 조건을 붙여서 씁니다. ex) A와 B를 동시에 만족하는 요소 : AB

/* span 태그면서 class가 orange인 요소 선택 */
span.orange{ color: orange }

<span class="orange">오렌지</span>	<!--선택됨-->
<p class="orange">오렌지?</p>		<!--선택안됨-->

후손(하위) 선택자 (Descendent Combinator)

후손 선택자는 앞의 조건(상위 요소)을 만족하면서 두 번째 조건(하위 요소)도 만족하는 요소를 선택할 때 쓰입니다.

각 조건을 띄어쓰기로 구분합니다. ex) A의 하위요소 B를 선택 : 'A B'

HTML 문서는 태그의 중첩으로 구조를 이룬다고 이전에 설명했었습니다.

이때 태그를 감싸는 태그를 '부모 요소', 감싸지는 태그를 '자식 요소'라고 한다는 것을 떠올려봅시다.

여기에 설명을 더하자면 태그가 여러 단계로 중첩되면, 부모 요소의 부모 요소들은 상위 요소라고. 자식 요소의 자식 요소들은 하위 요소라고 합니다.

HTML이 이렇게 중첩되는 구조를 가지고 있고, 특정한 요소의 하위요소 중 조건을 만족하는 요소를 선택할 때 이 후손 선택자를 사용합니다.

설명이 어렵지만 예시를 보면 쉬울 겁니다.

/* div의 후손이면서 class가 orange인 요소 선택 */
div .orange{ color: orange; }

<div>
  <p class="orange">오렌지<p>	<!--선택됨-->
  <p>사과<p>
</div>
<p>오렌지?</p>		<!--선택 안됨-->

※ 주의할 점

아래 같은 상황에 헷갈리는 경우가 많습니다.

div .red{ color: red }

<div class="red">	<!--적용안됨-->
  <p>사과</p>
  <p>딸기</p>
  <p>체리</p>
</div>

잘 보면 class="red"는 div의 후손 요소가 아니기 때문에 선택되지 않습니다. 이럴 경우 일치 선택자를 사용하면 됩니다.

겨우 띄어쓰기 하나 때문에 헤매는 경우가 많아 주의하라고 남깁니다.

div.red{ color: red }

속성

드디어 마지막 파트인 속성입니다. CSS에서 가장 기본적인 속성 몇 가지만 살펴봅시다.

색상 관련 속성

▶ color

: 글자 색상 속성(font-color 아님) 지정. 속성 값으로는 색이름(red, blue ...), Hex 코드(#e7e7e7 형식), rgb(rgb(0,255,0) 형식) 등이 들어갑니다.

div { color: red }

글자색 속성

▶ background-color

: 배경색을 지정한다. 속성 값으로 color 속성과 같은 값들이 들어갑니다.(색이름, hex, rgb 등)

div { background-color: #ffc594 }

배경색 속성

크기 관련 속성

▶ font-size

: 글씨 크기 지정

p { font-size: 18px }

글씨 크기 18px;

▶ width

: 가로나비 지정

div {
  background-color: orange;
  width: 150px;
}

너비 150px

▶ height

: 세로 높이 지정

div {
  background-color: yellow;
  width: 150px;
  height: 150px;
}

너비:150px;
높이:150px;

여백과 테두리 속성

모든 요소는 요소의 크기 말고도 내부 여백과 외부 여백, 그리고 테두리 속성을 가집니다.

예시를 통해 직접 보도록 하죠.

바깥 여백(margin)

↑테두리(border)
내부 여백(padding)

콘텐츠
(너비:300px, 높이:300px)

바깥 여백(margin)은 테두리의 바깥에 위치하여 요소의 바깥에 공간을 만듭니다. 따라서 요소와 요소의 사이를 띄우거나 레이아웃을 잡을 때 많이 사용합니다.
내부 여백(padding)은 테두리의 안에 위치하여 요소의 안에 공간을 만듭니다. 따라서 요소 내부의 레이아웃을 잡을 때 많이 사용합니다.
테두리(border)는 요소의 경계를 표시하며, 점선이나, 대시선, 두줄 등으로 모양을 바꿀 수도 있습니다. 색상 또한 지정 가능합니다.

각각의 속성은 위쪽, 오른쪽, 아래쪽, 왼쪽의 크기를 다르게 지정할 수 있습니다. 아래에서 각 속성에 대해 좀 더 자세히 알아도록 하죠.

▶ padding

: 요소의 내부 여백 지정.

선언 방식은 축약형과 각각 따로 선언하는 방법이 있습니다.

/* 각각 따로 지정 */
div {
  padding-top: 10px;		/* 위쪽 내부여백 20px */
  padding-right: 20px;		/* 오른쪽 */
  padding-bottom: 30px;		/* 아래쪽 */
  padding-left: 40px;		/* 왼쪽 */
}

/* 한번에 지정(축약형) */
div{
  padding: 10px;		/* 모든 방향의 내부여백 10px */
  padding: 10px 20px;		/* 위아래 10px, 왼오른쪽 20px */
  padding: 10px 20px 30px;	/* 위 10px, 왼오른쪽 20px, 아래쪽 30px */
  padding: 10px 20px 30px 40px;	/* 순서대로 위쪽10px, 오른쪽20px, 아래쪽30px 왼쪽 40px*/
}

축약형은 시계방향으로 선언한다고 기억하면 쉽게 기억할 수 있습니다.

자세히: https://developer.mozilla.org/ko/docs/Web/CSS/padding

▶ margin

: 요소의 바깥 여백 지정.

패딩과 비슷합니다.

/* 각각 따로 지정 */
div {
  margin-top: 10px;	/* 위쪽 외부여백 20px */
  margin-right: 20px;	/* 오른쪽 */
  margin-bottom: 30px;	/* 아래쪽 */
  margin-left: 40px;	/* 왼쪽 */
}

/* 한번에 지정(축약형) */
div{
  margin: 10px;			/* 모든 방향의 외부여백 10px */
  margin: 10px 20px;		/* 위아래 10px, 왼오른쪽 20px */
  margin: 10px 20px 30px;	/* 위 10px, 왼오른쪽 20px, 아래쪽 30px */
  margin: 10px 20px 30px 40px;	/* 순서대로 위쪽10px, 오른쪽20px, 아래쪽30px 왼쪽 40px*/
}

자세히: https://developer.mozilla.org/ko/docs/Web/CSS/margin

▶ border

: 요소의 테두리 지정.

테두리 속성의 종류로는 '굵기', '모양', '색'이 있고, 각각 따로 선언하거나 한 번에 선언 할 수 있습니다.

각 방향의 테두리 또한 따로 지정할 수도 있고, 한번에 지정할 수도 있습니다.

/* 테두리 속성 다 따로 지정 */
div{
  border-width: 1px;		/* 테두리 굵기 : 1px */
  border-style: solid;		/* 테두리 모양 : 실선 */
  border-color: red;		/* 테두리 색깔 : 빨강 */
}

/* 한번에 지정(축약) */
div{
  border: 1px solid black; 		/* 테두리 굵기:1px, 모양:실선, 색:검정 */
}

/* 각 방향 각각 따로 지정 */
div {
  border-top: 1px solid black;		/* 위쪽 테두리 굵기:1px, 모양:실선, 색:검정 */
  border-right: 2px dash black;		/* 오른쪽 테두리 굵기:2px, 모양:파선, 색:검정 */
  border-bottom: 3px dotted black;	/* 아래쪽 테두리 굵기:3px, 모양:점선, 색:검정 */
  border-left: 4px double black;	/* 왼쪽 테두리 굵기:4px, 모양:두줄, 색:검정 */
}

자세히: https://developer.mozilla.org/ko/docs/Web/CSS/border

마무리

이번 포스팅에서는 CSS가 무엇인지와 CSS 기본 문법부터 시작해서 기본적인 선택자와 속성들에 대해 알아보았습니다.

선택자와 속성은 많이 알수록 더 멋진 디자인이 가능합니다. 추후에 좀 더 다양한 CSS 선택자와 속성을 다루는 포스팅을 올려보도록 하겠습니다.

의문점?

그런데 혹시 위에서 CSS 속성을 다룰 때 이상한 점을 느끼지 않았나요?

잘 보면 우리는 크기 관련 속성을 알아볼 때, 블록(block) 요소들만 사용해서 예시를 들었습니다. 왜 <span>과 같은 인라인 요소는 쓰지 않은 것일까요?

인라인 요소에도 한번 width, height, padding, margin을 줘봅시다.

span {
  width: 200px;
  height: 200px;
  padding: 20px;
  margin: 20px;
}

인라인 요소(span)

어라? 패딩은 정상적으로 적용되는데, 마진은 양쪽으로만, 너비와 높이는 아예 적용이 되지 않습니다. 이유가 뭘까요?

이전 HTML 입문 포스팅에서 인라인과 블록 요소의 차이점을 설명했던 것을 기억해봅시다. 분명 인라인 요소는 자기 자신의 내용만큼의 크기만을 가진다고 설명했었죠.

바로 이 인라인 요소의 특성 때문에 CSS로 적용시킨 너비와 높이는 무시되고, 인라인요소 내의 콘텐츠만큼만 크기로 가지게 되는 것입니다.

사실 이러한 원리에 따르면 마진과 패딩은 양 옆으로만 적용이 되어야 하는데, 패딩은 예외적으로 위 아래도 적용이 됩니다.

인라인 요소와 블록 요소는 CSS에서 아주 중요한 개념입니다. 이 개념을 허술하게 알고 넘어간다면 이후에 생각대로 동작하지 않는 웹페이지에 골머리를 썩히게 됩니다.

이 개념은 여기서 다루기엔 양이 많으니, 다음 CSS 포스팅에서 이 인라인과 블록 요소를 집중적으로 다뤄보도록 하겠습니다.

https://bellmir.tistory.com/43?category=569543

4. CSS - 중급 (Inline vs Block)

Inline vs Block 요소 참고 링크 : 1. display 속성 - https://developer.mozilla.org/ko/docs/Web/CSS/display 2. inline 속성 - https://developer.mozilla.org/ko/docs/Web/HTML/Inline_elements 3. block 속성- https://developer.mozilla.org/ko/docs/Web/HT

bellmir.tistory.com

이해가 되지 않는 부분이 있다면 댓글 남겨주세요 :)

'웹 기본' 카테고리의 다른 글

5. HTML - 중급 (Semantic Tag) (0)	2022.07.17
4. CSS - 중급 (Inline vs Block) (0)	2022.07.17
2. HTML - 입문 (0)	2022.07.17
1. Web이란? (0)	2022.07.17
0. 웹 공부 로드맵 (0)	2021.11.24

개발자로 한걸음

3. CSS - 입문

CSS 입문

들어가기 전에

CSS란?

CSS 탄생 배경

CSS 기본 문법

기본 형태

선택자(Selector)란?

속성(Attribute)과 값(Value)

CSS 선언 방식

인라인 (In-line) : 태그에 직접 삽입하기

내장 (Internal) : HTML 내부에 포함시키기

외장 (External) : HTML 외부에서 불러오기

CSS 선택자

1. 기본 선택자

태그 선택자 (Type selector)

클래스 선택자 (Class selector)

아이디 선택자 (ID selector)

▶ ID vs Class 차이점

2. 복합 선택자

일치 선택자 (Basic combinator)

후손(하위) 선택자 (Descendent Combinator)

속성

색상 관련 속성

크기 관련 속성

여백과 테두리 속성

마무리

'웹 기본' 카테고리의 다른 글

댓글

티스토리툴바

3. CSS - 입문

CSS 입문

들어가기 전에

CSS란?

CSS 탄생 배경

CSS 기본 문법

기본 형태

선택자(Selector)란?

속성(Attribute)과 값(Value)

CSS 선언 방식

인라인 (In-line) : 태그에 직접 삽입하기

내장 (Internal) : HTML 내부에 포함시키기

외장 (External) : HTML 외부에서 불러오기

CSS 선택자

1. 기본 선택자

태그 선택자 (Type selector)

클래스 선택자 (Class selector)

아이디 선택자 (ID selector)

▶ ID vs Class 차이점

2. 복합 선택자

일치 선택자 (Basic combinator)

후손(하위) 선택자 (Descendent Combinator)

속성

색상 관련 속성

크기 관련 속성

여백과 테두리 속성

마무리

'웹 기본' 카테고리의 다른 글

관련글

댓글

티스토리툴바