CSS 적용 방법

드디어 CSS를 시작해 보았다

얼롱얼롱 끝내고 자바스크립트하고 리액트 하고,,

프로젝트하고,, 프론트엔드 끝내고

백엔드도 공부해볼테넫.......후

CSS를 공부하기 전 가장 먼저 알아야 할 것은 CSS display 속성이다.

앞선 포스팅에서 CSS의 display에 대해 배웠다면

CSS를 적용하는 3가지 방법에 대해 알아보겠다.

3가지 방법 다 적용되는 결과는 같지만

코드 길이, 편의성 등을 따져보았을 때 편한 방법을 쓰면 되기 때문에

3가지 방법을 다 알고 있는 것이 좋다.

1. 인라인 스타일(inline style)

: HTML 태그마다 style 속성으로 CSS 코드를 넣어주는 방식이다.

여러 요소들에 공통 속성을 재사용하여 부여할 수 없고 HTML 코드와 CSS 코드가 분리되지 않기 때문에

특별한 경우를 제외하고는 사용하지 않는다.

즉, 따로 CSS파일을 만들지 않고 태그에 그 CSS속성값을 적용하는 방식

인라인 스타일의 가장 큰 장점은 특정 요소에 스타일을 적용하는 데 우수한 편의성이다.

인라인 스타일은 요소 자체에 직접 스타일을 적용하므로 스타일을 즉시 적용하고 빠르고 시각적인 변경을 확인할 수 있다.

또한 요소마다 개별적으로 스타일을 조정할 수 있어 세밀한 제어가 가능하다.

하지만, 인라인 스타일은 유지보수에 대한 불편함을 초래할 수 있다.

스타일이 HTML 요소에 직접 포함되므로 스타일 변경이 필요한 경우 모든 해당 요소를 찾아 수정해야 하는 번거로움이 있다.

HTML 코드

 <p>
    <!-- 가장 비추되는 방식 -->
    <b style="color: tomato;">
      인라인 스타일(inline style)
    </b>
    방식은 HTML 태그마다 style 속성으로 CSS 코드를 넣어주는 방식입니다. <br> 여러 요소들에 공통 속성을 재사용하여 부여할 수 없고 HTML 코드와 CSS 코드가 분리되지 않기 때문에 <br>
    특별한 경우를 제외하고는 사용되지 않습니다.
  </p>

결과

2. 내부 스타일 시트(internal style sheet)

: head 태그 안에 style 태그를 써서 태그 안에 CSS 코드를 작성하는 방식이다.

HTML과 CSS의 전체 코드량이 많지 않고,

CSS가 해당 HTML 문서에서만 적용될 경우 사용된다.

내부 스타일 시트는 작은 프로젝트나 특정 페이지에만 스타일을 적요할 때 유용하다.

그러나 대규모 프로젝트의 경우 외부 스타일 시트를 사용하여 일관성을 유지하고 스타일을 중앙 집중식으로 관리하는 것이 더 효율적일 수 있다.

내부 스타일 시트의 주요 특징

한 문서만에 적용 : 내부 스타일 시트는 해당 HTML 문서에만 적용된다. 외부 스타일 시트와 달리 다른 HTML 문서에는 영향을 주지 않는다.
스타일의 재사용 : 내부 스타일 시트를 사용하면 한 페이지에서 재사용할 수 있는 스타일을 정의할 수 있다. 이는 인라인 스타일보다 유지 보수가 쉽고 외부 스타일 시트보다 문서에 더 밀접하게 관련된 스타일을 작성할 수 있다.

HTML 코드

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .style-1 {
      color: olivedrab;
    }
  </style>
</head>

<body>
	<p>
    <!-- 전체 코드가 많지 않을 때 사용 -->
    <b class="style-1">내부 스타일 시트(internal style sheet)</b> 방식은 head 태그 안에 style 태그를 두고 그 안에 CSS 코드를 작성하는 방식입니다. <br>
    HTML과 CSS의 전체 코드량이 많지 않고 CSS가 해당 HTML 문서에서만 적용될 경우 <br>
    유용하게 사용될 수 있습니다.
  </p>
</body>

결과

3. 링킹 스타일 시트(linking style sheet)

: 외부의 CSS파일을 HTML 문서에 연결하는 것이다.

HTML과 CSS의 코드가 분리되고 CSS 코드를 여러 HTML 파일에서 공통으로 사용할 수 있으므로

가장 널리 사용되는 방식이다.

링킹 스타일 시트는 대규모 웹 사이트 또는 웹 어플리케이션의 경우 가장 권장되는 스타일링 방식이다.

일관된 스타일을 유지하고 관리하기 쉽도록 하며, 스타일을 중앙 집중화하여 유지 보수를 간편하게 한다.

링킹 스타일 시트 특징

외부 파일로 저장 : HTML문서와 별도의 외부 CSS 파일로 저장된다. 이는 스타일을 여러 페이지에서 재사용할 수 있고, 스타일 시트 파일의 수정으로 모든 연결된 페이지의 스타일을 한 번에 업데이트할 수 있게 해준다.
스타일의 중앙 집중화 : 링킹 스타일 시트를 사용하면 스타일을 중앙 집중화하여 관리할 수 있다. 이를 통해 스타일을 일관되게 유지하고 스타일 시트 파일의 수정으로 모든 연결된 페이지의 스타일을 쉽게 업데이트 할 수 있는 장점이 있다.
브라우저 캐싱 : 링킹 스타일 시트는 브라우저에 캐시되므로 페이지 로드 시간을 최적화할 수 있다. 한 번 다운로드된 스타일 시트는 다른 페이지에서 재용되어 네트워크 요청을 줄일 수 있다.

HTML 코드

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<!-- 
    link css tab
    ./.css : 같은 폴더 내에 있는 css 파일
  -->
  <link rel="stylesheet" href="./style_lesson1.css">

</head>

<body>
  <p>
    <!-- CSS파일을 외부로 분리하는 방법 -->
    <b class="style-2">링킹 스타일 시트(linking style sheet)</b> 방식은 외부의 CSS 파일을 HTML 문서에 연결하는 것입니다. <br>
    HTML과 CSS의 코드가 분리되고 CSS 코드를 여러 HTML 파일에서 공통으로 사용할 수 있으므로 <br>
    가장 널리 사용되는 방식입니다.
  </p>

</body>

CSS 코드

.style-2 {
  color: slateblue;
}

결과

이번 포스팅에서 리뷰하려고 했는데그러려면 선택자가 무엇인지?

선택자는 어떻게 쓰는 것인지?... 등등...

너무 많아서 다음 포스팅에서 이어서 하도록 하겠다.

그전에 오늘 리뷰의 대부분이

얄코선생님의 강의 부분이라 출처를 남기고

각자 더 공부하고 싶은 부분에 대해 배워보도록 하자~~!

그럼 이만~~~빠이잉

'Study with Yedol > CSS' 카테고리의 다른 글

CSS 글자 스타일 적용 (0)	2023.12.26
CSS 색상 변경 방법 (0)	2023.12.23
CSS문법 Combinators(결합자, 선택자) (0)	2023.12.22
CSS 문법 선택자의 종류 (0)	2023.12.21
CSS의 display 속성값 (0)	2023.12.19

CSS 적용 방법

1. 인라인 스타일(inline style)

2. 내부 스타일 시트(internal style sheet)

내부 스타일 시트의 주요 특징

3. 링킹 스타일 시트(linking style sheet)

링킹 스타일 시트 특징

'Study with Yedol > CSS' 카테고리의 다른 글

관련글

티스토리툴바