리액트 퍼블리셔 가이드 3-1편

들어가는글

안녕하세요. 이 글은 퍼블리셔 초심자 분들을 위한 가이드입니다.
해당 글이 도움이 되길 바랍니다.
이번 글은 CSS를 주제로 CSS에 대한 내용만 집중적으로 이야기하려고 합니다.
더불어 이전 내용을 읽어보지 않은 초심자라면
리액트 퍼블리셔 가이드 이전 편을 먼저 읽어보시고 오길 권장드립니다.

목차는 이렇습니다.
CSS는 3개의 글로 나뉘어 포스팅 됩니다.
1번째 글은 CSS에 대해 소개
2번째 글은 CSS를 공부하기 위한 기본지식
3번째 글은 실무를 위한 자주쓰는 스타일
3가지 내용으로 나누어 설명하겠습니다.
이번 글은 1번째 CSS 소개에 관련된 글입니다.

1.CSS소개

1-1 CSS란?

CSS는 웹페이지를 꾸미려고 작성하는 코드입니다.
사람에 비유하면 옷을 입히고 꾸미는 과정이라고 볼 수 있습니다.
웹사이트에선 글자 색을 바꾸거나 배경색을 바꾸거나
문단의 배치를 바꾸거나 등
웹사이트를 꾸밀 때 작성하는 코드가 바로 CSS입니다.

참고 - https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics

CSS 단어 뜻

CSS는 Cascading Style Sheets의 약자입니다.
Casading이란 위에서 아래로 흐르는 혹은 폭포란 뜻입니다.
Style Sheets 는 말그대로 스타일을 담당하는 시트, 스타일 코드 페이지 정도로 해석할 수 있습니다.

여기서 Cascading이 의아할텐데요
Style Sheet는 그냥 스타일을 담당하는 거구나 이해가 되지만
Cascading은 폭포? 란 말만 듣고 무슨 뜻인지 잘 이해가 안갈 수 있습니다.

Cascading은 위에서 아래로 흐른다는 방향성을 의미합니다.
조금 더 쉽게 표현하면 우선순위가 정해져있음을 의미합니다.

예를 들어
하나의 대상에 빨간색, 파란색 동시에 배경색을 지정했다고 가정해봅시다.
그럼 그 대상은 빨간색이 될까요? 파란색이 될까요?

이는 우선순위에 의해서 결정됩니다.

빨간색으로 선정한 선택자가 우선순위가 더 높다면, 빨간색이 되는 것이고요
그 반대라면 파란색이 되는 것이죠.

즉 스타일이 적용되는 기준이
우선순위가 높은 순이라는 것이죠.

정리해보면
CSS는 우선순위에 따라 스타일을 적용하는 시트입니다.

참조 - https://opentutorials.org/course/2418/13409

1-2. CSS 공부방식

기초 지식 공부 후 스타일 한번씩 타이핑

CSS는 마냥 타이핑만 해서는 안되고
어느정도 기초 지식을 갖고 있어야됩니다.

CSS 기초 지식으로는
기본 구조 / 선택자 / 캐스캐이딩
이 있습니다.

위의 세가지를 인지한 상태에서
자주 쓰는 스타일의 종류는 어떤 것들이 있는지
한번씩 타이핑하고, 적용된 화면을 확인하는 식으로
공부하시면 됩니다.

1-3. CSS 작성방식 종류

작성방식 3가지

CSS를 시작하기 전에 의문이 드는 것이 있을것입니다.
“어디에 작성하나요?”
작성을 하려면 어디에 작성하는지 알아야죠!

CSS는 작성하는 위치에 따라 3가지 방식이 있습니다.
인라인 스타일 / 내부 스타일시트 / 외부 스타일시트
3가지 방식이 있는데

그 중 흔하게 사용하는 방식은 외부 스타일시트입니다.
먼저 각 방식에 대해 알아봅시다.

인라인 스타일

먼저 인라인 스타일부터 알아보도록 하겠습니다.
인라인 스타일은 태그 안에 스타일 속성을 넣어서 스타일 작업하는 것을 의미합니다.

위 사진을 보시면 p태그 안에 스타일 속성이 들어있는 것을 보실 수 있습니다.
저 스타일이 바로 인라인 스타일입니다.
인라인 스타일이란 스타일 공간을 따로 만드는게 아닌, 태그마다 스타일 속성을 사용하는 것을 의미합니다.

인라인 스타일을 쓰면 당장은 편하지만 문제점이 있습니다.
위 사진을 보면 반복되는 스타일이 있을 때 반복작업을 해야됩니다.
같은 스타일이 1000개 있으면 1000번 써야되는 것이죠.

또한 인라인 스타일은 태그 사이에 들어가기 때문에
코드가 많을 경우 태그와 스타일이 구분되어 보이지 않습니다.
스타일시트라는 스타일만 모아놓은 페이지를 따로 만들어
스타일 작업을 하는 것이 더 간결하고 편할 것입니다.

만약 인라인 스타일을 사용한다면 짧고 간단한 스타일에 주로 사용합니다.

내부 스타일 시트

인라인 스타일의 단점은 반복에 취약하다는 점과
정리가 안되어 보인다는 점입니다.

그래서 사람들은 스타일만 모아놓은 공간을 만듭니다.
이것을 스타일시트라고 합니다.

스타일시트의 사용 방법은 간단합니다.
그냥 head 태그 안에 style태그를 넣고
style태그 안에 CSS를 작성하면 됩니다.

하지만 이 방식에도 문제가 있습니다.
HTML 페이지가 하나일 땐 괜찮은데,
우리가 사용하는 웹사이트는 페이지가 하나만 있지 않습니다.
A페이지에서 사용한 스타일시트를 B페이지에서도 사용하고 싶다면 어떻게 해야될까요?
그럴 땐 외부 스타일시트를 사용해야됩니다.

지금 사용한 방법은 HTML파일 안에 스타일시트를 작성한다고 하여서
내부 스타일시트라고 합니다.

외부 스타일 시트

외부 스타일 시트는 CSS파일을 아예 따로 만드는 것입니다.
HTML파일과 CSS 파일로 나누어 파일 자체를 분리시키는 것이죠.

위 사진이 HTML파일과 CSS파일을 분리시킨 모습입니다.
(practice.html과 practice.css 파일 2개입니다.)
link태그로 CSS파일을 연결하면
CSS파일의 스타일이 해당 HTML파일에 적용됩니다.

그래서 HTML파일이 여러 개일 때 (여러페이지)하나의 CSS파일만 만들어놓고, 각 HTML파일을 link태그로 연결시키는 것입니다.

정리

여기까지 CSS 작성방식에 대해서 알아보았는데 어떠신가요?
어떤 방식이 가장 편할 거 같은가요?
상황에 따라 편한 방식이 다 다를 수 있겠지만
일방적으로 가장 많이 쓰이는 방법은 외부 스타일시트입니다.

반복적인 스타일이 없다면 인라인 방식으로 써도 무방합니다.
하지만 CSS는 대부분 반복되는 스타일이 많습니다.

외부 스타일시트를 쓰면 좋은 장점은
반복 작업 최소화와 코드 정리에 있습니다.

각 방식을 한번씩 사용해보고, 왜 외부 스타일시트 방식을 많이 사용하는지
직접 경험해보면 좋을 것 같습니다.

끝

여기까지 CSS 소개를 마치겠습니다.
3-2편 CSS 기본지식에서 내용이 이어집니다.
긴글 읽어주셔서 감사합니다.

PAEDDI