[HTML CSS 기초] CSS파일을 HTML파일에 적용하기

2023년 11월 12일

CSS 파일을 HTML 파일에 적용해보자

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

아래처럼 head태그 안에 넣으면 된다

style.css 는 css 파일 명이다

./은 파일 경로를 나타내며, 현재 나는 css 파일과 html파일을 동일한 폴더 안에 만들어서

동일한 폴더라는 의미로 ./라고 썼다

만약 동일한 폴더안에 있지 않으면 경로를 적어주면 된다

*예를 들어 html은 alpha폴더에 있고 css파일은 beta폴더의 test 폴더 안에 있다면

href="beta/test/style.css" 라고 작성한다

왜 body 태그 안에 넣으면 안 될까?

로딩 성능 및 렌더링 효율 때문이다.

브라우저는 HTML 문서의 <head> 부분을 먼저 처리하고 페이지의 레이아웃을 그리기 위해 스타일 정보를 기다린다.

<body> 안에서 스타일을 정의하면 브라우저는 스타일 정보를 만나기 전에 레이아웃을 그리기 시작할 수 있으며, 이로 인해 초기 로딩 시에 레이아웃이 깨지는 경우가 발생할 수 있다

[CSS] 표에서 짝수번째 홀수번째 행에만 배경색 넣기 nth-child(even), nth-child(odd) (0)	2024.11.05
[TailwindCSS] 자주 사용하는 css className 모음(계속 추가중) (3)	2024.05.29
[HTML] 자주 사용하는 태그 모음/헷갈리는 태그 모음 (2)	2024.02.11
[맥북] 맥북에 VScode로 HTML 실습환경 만들고 Chrome에서 열기(2024년.ver) (0)	2023.08.07
[프론트] HTML과 CSS 개념, 차이 (0)	2023.08.05

다음 글이 없습니다.

이전 글이 없습니다.