웹 퍼블리싱_[토픽1] HTML/CSS 시작하기 _ 어떤 섹션 & 꿀팁

'클래스(class)'와 '아이디(id)' 정리

HTML 요소에게 '이름'을 주는 방법 두 가지:

1. 클래스(class)

2. 아이디(id)

클래스(class)

<p class="big-blue-text">First</p>
<p>Second</p>
<p class="big-blue-text">Third</p>

.big-blue-text {
  color: blue;
  font-size: 48px;
}

클래스 이름이라는 걸 나타내는 '.(마침표)'를 잊지 말자!

아이디(id)

<p id="favorite-text">First</p>
<p>Second</p>
<p>Third</p>

#favorite-text {
  color: blue;
  font-size: 48px;
}

아이디를 나타내기 위해서는'#(샾 표시)'를 써줘야 한다.

클래스 vs 아이디

클래스와 아이디는 얼핏 보기에는 똑같아 보이지만, 핵심적인 차이점이 몇 가지 있다:
1. 같은 클래스 이름을 여러 요소가 가질 수 있지만, 같은 아이디를 여러 요소가 공유할 수는 없다.

2. 한 요소가 여러 클래스를 가질 수 있지만, 한 요소는 하나의 아이디만 가질 수 있다. (단, 한 요소가 클래스도 여러 개 갖고 아이디도 하나 가질 수 있다!)

<div>태그

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My Favorite Movies</title>
		<style>
			h1 {
				text-align: center;
				margin-top: 75px;
				margin-bottom: 75px;
			}

			.movie {
				background-color: #eee;
				border-radius: 20px;
				margin-bottom: 50px;
				padding: 50px;
				width: 500px;
				margin-left: auto;
				margin-right: auto;
			}

			.movie .title {
				text-align: center;
			}

			.movie .poster {
				display: block;
				margin-left: auto;
				margin-right: auto;
			}
		</style>
	</head>

<body>
	<h1>My Favorite Movies</h1>

	<div class="movie">
		<h2 class="title">Eternal Sunshine of the Spotless Mind</h2>
		<img class="poster" src="https://w.namu.la/s/1e00d974b41d824496feae930299a75c51902df982113a829f09296ffca3db570501d117a1232c6a88400cee957778a83774af83d87a402659731f1aa0f252f8f5c784c5c89506b2c6ae15a6411ca10a3be9e4b64793b405a1fbfe133fc582ed" height="300">
		<p class="summary">After a painful ...</p>
	</div>

</body>
</html>

스타일을 적용하는 다양한 방법

HTML 코드에 스타일을 입히는 방법에는 세 가지가 있다.

1. <style>태그

<style>
  h1 {
    color: green;
    text-align: center;
  }

  p {
    font-size: 18px;
  }
</style>

<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet lorem sit amet nunc ornare convallis. Pellentesque ac posuere lectus. In eu ipsum et quam finibus fermentum vitae sit amet magna.</p>

2. style 속성

<h1 style="color: green; text-align: center;">Hello World!</h1>
<p style="font-size: 18px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet lorem sit amet nunc ornare convallis. Pellentesque ac posuere lectus. In eu ipsum et quam finibus fermentum vitae sit amet magna.</p>

3. 외부 CSS파일 + <link>태그

css / styles.css

h1 {
  color: green;
  text-align: center;
}

p {
  font-size: 18px;
}

index.html

<link href="css/styles.css" rel="stylesheet">

<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet lorem sit amet nunc ornare convallis. Pellentesque ac posuere lectus. In eu ipsum et quam finibus fermentum vitae sit amet magna.</p>

어떤 방법을 써야 할까?

일반적으로는 외부 CSS 파일에 스타일을 쓰고 HTML 코드에서 <link> 태그로 연결해주는 것이 가장 좋은 방식이다.

하지만 조금씩 새로운 스타일을 시도해볼 때에는 간편함을 위해서 <style>태그를 쓰는 방법 또는 style 속성에서 테스트를 하고, 나중에 외부 CSS 파일로 옮기는 방법도 있다.

'~2023.02 > 웹퍼블리싱' 카테고리의 다른 글

웹 퍼블리싱_[토픽1] HTML/CSS 시작하기_HTML/CSS 시작하기 (0)	2021.09.10