웹게임 만들기 전 준비 단계 (2)

김zunyange·2023년 1월 31일

1. CSS의 기능

1-1. HTML vs. HTML + CSS

웹 페이지의 목적
- HTML은 정보를 저장하고 전달하기 위해 만들어진 언어입니다. HTML을 활용하여 만들어진 오른쪽 웹페이지도 정보 전달의 역할은 충실히 수행하고 있습니다.
- 하지만 두 웹페이지 중 하나를 사용해야 한다면, 당연히 UI(User Interface)가 뛰어난 왼쪽 페이지를 더욱 선호할 것입니다. 보기 좋고 편리한 웹 페이지는 오랫동안 사람들에게 사랑받으며 사용됩니다.

1-2. CSS, 스타일을 위한 새로운 기술의 등장

HTML은 웹 페이지를 구성하는 요소를 설명하는 정보입니다. (ex. <a> → ‘이 요소는 링크입니다’)
웹 페이지의 정보를 전달하는 HTML 본연의 목적을 충실히 수행할 수 있도록, 디자인에 대한 기능을 분리한 것이 바로 CSS 입니다.
CSS를 활용하면 텍스트나 배경 화면의 크기, 색깔 또는 레이아웃 배치 등 웹 페이지의 스타일을 바꿀 수 있습니다.
CSS 덕분에 우리는 좀 더 사용하기 편리하며(UX) 동시에 보기에도 아름다운(UI) 화면을 만날 수 있게 됐습니다.

2. HTML에 CSS를 적용하는 방법

index.html에 있는 HTML 태그에 CSS를 어떻게 적용할 수 있을까요?
HTML의 제목(h1)에만 특정 디자인을 어떻게 적용할 수 있을까요?
HTML에 CSS를 적용하는 방법은 총 3가지가 있습니다.
유령게임에서는 1) Inline Style과 2) CSS파일을 분리해서 CSS를 적용합니다.

2-1. Inline Style

HTML 태그의 style 속성을 사용하여 같은 줄(inline)에 css를 작성하는 방법입니다.
링크(a태그)의 파란색을 빨간색으로 바꿔보겠습니다. → jsfiddle 에서 보고 직접 수정해보기!

    <ul>
    	<li><a href="index.html" style="color: red">Ghost Rain</a></li>
    	<li><a href="shooting.html" style="color: red">Shooting Game</a></li>
    </ul>

태그의 style 속성을 활용하여 원하는 CSS 스타일을 직접 작성할 수 있습니다.
style=”...” 은 HTML일까요? CSS일까요?
- HTML 속성입니다. style 이라는 속성은 값으로 반드시 CSS 효과가 들어온다고 약속돼 있습니다.
HTML 태그에 바로 스타일을 작성하기 때문에 스타일을 적용하는 가장 직관적인 방법입니다.

2-1-2. Inline Style 방식의 문제점

하나의 태그에 여러 스타일을 적용할 경우 코드가 길어져 가독성이 떨어집니다.

<!-- 스타일 관련 코드가 너무 길어져 가독성이 떨어지는 코드 -->
<h1 style="color: red; font-size: 30px; background-color: yellow; font-weight: bold;">제목입니다</h1>

웹 구성 요소를 설명하는 태그 정보와 스타일을 나타내는 정보가 함께 표현되어 구분하기 어렵습니다.
웹이 복잡해지고 코드가 많아질수록 요소의 스타일을 일일이 수정하는 것은 (거의) 불가능합니다.

2-2. CSS 파일 분리

CSS를 HTML 파일과 분리하여 .css 확장자의 파일에서 스타일 코드를 작성하는 방법입니다. → jsfiddle에서 보고 직접 수정해보기!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Udemy - Ghost Rain</title>
  </head>
  <body>
		<h1>Ghost Rain</h1>
    <div id="bg">
      <span id="hero"></span>
    </div>
  </body>
</html>

//CSS
h1 {
	color: red;
	background-color: yellow;
}

HTML과 CSS 코드는 각기 다른 파일에 작성되어 있습니다. 아직 두 파일은 아무 관계도 없습니다.
CSS를 적용하기 위해서는 서로 관계 없는 두 파일을 연결해야 합니다.
HTML 파일(.html)과 CSS 파일(.css)은 <link> 태그를 사용하여 연결할 수 있습니다.
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Udemy - Ghost Rain</title>
    **<link rel="stylesheet" href="style.css" />**
  </head>
  <body>
		<h1>Ghost Rain</h1>
    <div id="bg">
      <span id="hero"></span>
    </div>
  </body>
</html>
```
- <link> - 웹 페이지가 어떤 파일과 연결되어 있는지 웹 브라우저에게 알립니다.
- href - 연결하고자 하는 파일을 지정합니다.
- rel - 관계(relationship)를 뜻하며, 현재 문서와 연결한 아이템의 관계를 설명합니다.

2-2-1. 코드의 관리 (유지보수) & 가독성

CSS 관리의 발전: inline 스타일 → <style> 태그의 활용 → .css 파일 분리
.css 파일을 분리하는 것은 하나의 파일이 아닌, 서로 다른 파일에 HTML과 CSS를 완벽히 분리하여 코드의 유지보수를 효율적으로 개선하며 가독성 또한 높이는 효과적인 방법입니다.
- 웹 페이지 유지보수를 편리하게, 또한 가독성 높게 코드를 작성하는 것은 중요합니다.
- 웹 페이지가 복잡해지고 코드의 양이 많아질수록 더욱 중요합니다.

2-3. style tag

style 태그를 활용하여 CSS 코드를 따로 분리할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Udemy - Ghost Rain</title>

		<style>
			h1 {
				color: red;
				background-color: yellow;
			}

			a {
				color: red;
			}
		</style>
  </head>
  <body>
		<ul>
			<li><a href="index.html">Ghost Rain</a></li>
			<li><a href="shooting.html">Shooting Game</a></li>
		</ul>

		<h1>Ghost Rain</h1>
    <div id="bg">
      <span id="hero"></span>
    </div>
  </body>
</html>

style이라는 태그는 HTML의 문법이면서, 동시에 style 태그의 안쪽에 있는 내용은 CSS이므로 CSS 언어의 문법에 맞게 처리해야 한다는 의미를 지니고 있습니다.
Inline Style 방식과 비교했을 때,
- Inline Style - HTML 태그에 속성을 활용하여 HTML 문법에 맞게 그대로 스타일을 적용
- style - CSS 라는 새로운 언어의 문법에 맞게 스타일을 적용
장점 1) HTML과 CSS의 분리
- 디자인과 관련된 코드는 style 태그에 전부 포함시켜, 웹 페이지 정보를 전달하는 HTML과 스타일을 관리하는 CSS를 명확히 구분할 수 있습니다.
장점 2) 코드의 중복 제거
- 이전에는 링크 태그의 스타일을 수정하기 위해서 요소에 직접 일일이 코드를 수정해야 했습니다.
  - 하지만 style 태그를 활용하면 a 태그 전체에 동일한 CSS 효과를 적용하여 효율적으로 코드를 관리할 수 있습니다.
  - 즉, style 태그를 활용해 중복되는 코드를 단 하나의 코드로 만들어 ‘중복을 제거’ 할 수 있습니다.
- 웹 페이지가 커지고 복잡할수록, 코드의 중복을 제거하는 것은 더욱 중요합니다.
- 코드의 중복을 제거하는 것은 웹 페이지를 유지하고 보수하는, 즉 유지보수를 편리하게 할 수 있으며, 코드의 가독성 또한 높아집니다.

2-3-1. style 태그 방식의 문제점

style 태그를 활용하여 HTML과 CSS 코드를 명확히 분리하고, 코드의 중복을 효과적으로 제거할 수 있습니다.
- 하지만, 스타일을 정의하는 코드가 길어진다면 아무리 HTML 코드와 CSS 코드가 분리되어 있어도 한 눈에 파악하기 힘들어질 것입니다.
- 이는 코드의 유지보수를 힘들게 하며, 가독성을 떨어뜨릴 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Udemy - Ghost Rain</title>

		<style>
			h1 {
				color: red;
				background-color: yellow;
			}

			a {
				color: red;
			}

			#bg {
			  position: relative;
			
			  width: 800px;
			  height: 500px;
			
			  background: url("./images/bg.png") no-repeat;
			  background-size: cover;
			
			  margin: 0 auto;
			}
		</style>
  </head>
  <body>
		<ul>
			<li><a href="index.html">Ghost Rain</a></li>
			<li><a href="shooting.html">Shooting Game</a></li>
		</ul>

		<h1>Ghost Rain</h1>
    <div id="bg">
      <span id="hero"></span>
    </div>
	</body>
</html>