안경잡이 구루루

CSS 를 HTML에 적용시키는 방법들 (Apply CSS to HTML) 본문

프론트 엔드 (front-end)/CSS

CSS 를 HTML에 적용시키는 방법들 (Apply CSS to HTML)

구루루(gururu) 2023. 8. 14. 01:34
반응형

 

CSS 를 HTML에 적용시키는 방법은 크게 3가지 경우가 있다.

 

인라인 스타일(inline style), 내부 스타일 시트(internal style sheet), 링킹 스타일 시트(linking style sheet)

 

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

:  HTML 태그마다 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다.

이 때문에 여러 태그들에 공통 속성을 재사용해서 부여할수 없고 한번 설정된 스타일을 변경하기 어렵다. 또한 HTML과 CSS를 같이 혼용해서 사용하기 때문에 가독성 또한 좋지 못하다. 그래서 특정 태그에만 적용시키는 특별한 경우를 제외하고는 사용되지 않는다.

ex_1

<body>	
    <p>
      <b style="color: red">오펜하이머</b>는 원자핵폭탄을 만드는 멘헤튼
      프로젝트의 리더였다.
    </p>
</body>

 

result_1

 

 

 

 

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

 

:  HTML 문서 내의 <head>태그에 <style>태그를 사용하여 CSS 스타일을 적용하는 방법이다.

HTML과 CSS의 전체 코드량이 많지 않고 CSS가 해당 HTML 문서에서만 적용될 경우 유용하게 사용이 가능하다.

그래서 코드가 많은경우 스크롤 해야하는 범위가 커지면서 결국엔 불편하게 이용하게 된다.

또한 해당 문서에서만 사용가능한 CSS 코드이기에 다른 HTML 문서에서 사용할 경우 재사용이 불가능해서 일일이 복붙을 해야하는 불편함이 존재.

 

ex_2

<head>
 <style>
      .internal {
        color: green;
      }
</head>

<body>
    <p>
      <b class="internal">오펜하이머</b>는 원자핵폭탄을 만드는 멘헤튼 프로젝트의
      리더였다2.
    </p>
  </body>

<body>의 <b>태그로 둘러쌓인 부분을 class로 만들었고

이 부분을 <head>의 <style>태그로 연결시켰다.

 

 

result_2

 

 

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

 

: 외부의 CSS 파일을 HTML 문서에 연결하는 방식이다.  실전에서 제일 많이 사용하는 방식이다.

 

이 방법을 적용하는 방법은 아래의 순서에 따라 이루어진다. 

㉮  .CSS 확장자 파일을 이용해서 CSS파일을 저장하고 

㉯ HTML의 <head> 속에 <link>를 이용해서 앞에서 만든 파일을 연결시켜준다. 

이때 href 속성값으로 파일을 경로를 지정해줘야 하는데 그 방법은 아래와 같다. 

경로는 css파일과 html 파일이  1) 같은 폴더에 있는 경우와   2) 다른폴더에 있는 경우   로 나뉜다.

 

1) 같은 폴더의 경우

그냥 href= '적용시킬파일명.css ' 를 이용하면 된다

2) 다른 폴더의 경우

(즁요) HTML 파일에서 CSS 파일로 가는 경로를 적야한다. 즉 현재위치의 기준은 HTML 파일의 위치이다.

예를 들어 

project --- index.html
            css ---------- style.css

위 처럼 .css 파일이 HTML 파일의 형제폴더에 있는 경우 HTML의 위치를 기준으로 작성해야 하기에

href = ' css/ style.css '  로 적어줘야 한다.

 

ex_3

html 파일 코드

<head>
	<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
	<p>
      <b class="linking">오펜하이머</b>는 원자핵폭탄을 만드는 멘헤튼 프로젝트의
      리더였다3.
    </p>
</body>

 

css 파일 코드

.linking{
  color: blue;
}

 

 

result_3

 

반응형
저작자표시

'프론트 엔드 (front-end) > CSS' 카테고리의 다른 글

CSS Diner 문제풀이 2 (#11~20) +미완  (0) 2023.08.19
CSS Diner 문제풀이 1 (#1~10) +미완  (0) 2023.08.19
CSS 선택자(Selector), 결합자(Conbinator) 사용방법 & 우선순위 정리 및 관련 사이트 모음 +미완  (0) 2023.08.15
css 정리 2(+미완)  (0) 2023.07.26
CSS 기본 배우기  (0) 2023.07.18
'프론트 엔드 (front-end)/CSS' Related Articles more