꾸밈을 담당하는 CSS의 문법과 연결 방법 3가지 – 웹 코딩 강좌

웹 디자이너를 위한 웹 코딩 강좌 다섯 번째 시간입니다.
오늘은 그중에 꾸밈을 담당하는 CSS를 배워볼 거예요. CSS의 문법은 어렵지 않습니다. 하지만, 꼭 알고 넘어가야 되는 부분은 HTML과 어떻게 연결하는 방법입니다. 3가지의 방법이 있는 데 그중에 어떤 것이 가장 좋은지에 대해 얘기를 해볼게요.
인라인 스타일 시트 : HTML 태그 내에 사용하는 방법
내부 스타일 시트 : Head 영역에 style 태그를 사용하는 방법
외부 스타일 시트 : Head 영역에 link를 사용해서 css 파일을 불러오는 방법

어떤 방법이 가장 효과적인지 영상을 통해서 확인이 가능합니다 : )
오늘도 한 가지 지식을 얻어 가는 재미로.. 파이팅입니다.

예제 파일 : https://drive.google.com/drive/folders/1NKqXL7AbWCQ3VxsjaIVF79QLiKToA99l?usp=sharing

*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.

핵심 요약

CSS에 대한 추가 학습이 필요하다면 아래 링크를 참고해 주세요. CSS에 대한 자세한 정보들이 있습니다. 당장 외우지 말고 필요할 때 그때그때 찾아보면 됩니다 : ) 일단은 북마크해두세요ㅎㅎ
https://www.w3schools.com/css/default.asp

HTML에 사용한 태그를 선택자에 넣고 스타일 속성과 값을 입력해 주면 스타일을 입힐 수 있습니다.
생각보다 아주 간단한 문법이에요.
이제 html과 어떻게 연결해서 사용하는 방법부터 알아야겠죠?
html과 css를 연결하는 방법은 3가지인데, 가장 쉬운 ‘인라인 스타일 시트’라는 방법부터 해봅시다.

인라인 스타일 시트

말 그대로 앞에서 배워봤던 html 태그에 style이라는 코드를 넣고 그 안에 스타일을 적용시켜주는 거예요. 한번 해봅시다.

<h1 style="color:red">Hello World</h1>
<h2>Hello world</h2>

스타일을 적고, 컬러는 빨강! 아주 직관적이죠?
인라인 스타일 시트는 아주 쉽지만, 잘 사용하지 않습니다.

코드가 몇 천 줄인데 매번 이렇게 입력하긴 귀찮겠죠?!
반복작업을 줄일수록 효율이 높아지잖아요. html과 css는 엄연히 역할이 다른 언어인데, 이를 혼합해서 사용하면 나중에 수정할 때 매우 곤란합니다. 나중에 배워볼 클래스와 아이디에 대한 부분을 배우면 이해가 가실 거예요.
개발에 핵심은 정확성, 효율성입니다. 효율을 가장 중요시합니다. 디자이너들이 스케치나 XD에 심벌을 등록해서 바꾸는 것과 css class를 등록해서 코드 한 줄로 다 바꾸는 것은 비슷한 개념이겠죠.

02. 내부 스타일 시트

이렇게 head 태그 안에 넣는 방식을 내부 스타일 시트라고 합니다.

<head>
  <style>
    h2{color:blue}
  </style>
</head>
<body>
  <h1 style="color:red">Hello World</h1>
  <h2>Hello world</h2>
</body>

이 방식이 효율적일까요?!
아닙니다.

상황을 가정해봅시다.
만약 10개의 페이지가 있는데 헤더 부분을 다 똑같은 스타일을 만들었다고 해봅시다.
근데 내비게이션 부분만 색을 바꿔야 된다면 어떻게 해야 될까요? 10개의 html 파일에 들어가서 해당 style 태그에서 css를 수정해야 되죠. 생각만 해도 벌써 피곤하죠.
해결 방법이 있습니다.
바로, Link 태그를 이용해서 연결하는 외부 스타일 시트 방식이 있습니다.

03. 외부 스타일 시트

style.css 파일을 하나 만들고, head 태그 내에 link 태그로 연결해 줍니다.

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>CSS - 수업소개</title>
      <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
      <a href="https://www.google.com" target="_blank">새창가기</a>
   </body>
</html>

같은 방법으로 여러 개의 페이지에 head 태그에 똑같이 외부 스타일 시트로 넣어줍니다. 그럼 여러 개의 html 페이지에는 하나의 css에 연결된 것입니다! 만약 수십 개의 페이지를 동시에 바꾸려면 하나의 css 파일만 수정하면 됩니다.
참 좋죠?!
HTML 수업에 알려드렸던 내용, 계속 복습하시는 거예요. 눈에 익을 때까지! 패턴이 보일 때까지! UI 디자인도 마찬가지입니다. 패턴! 핵심은 익숙해질 때까지 하는 거예요. 그렇죠?