css는 html에서 어디에 위치합니까? css의 3개 위치

2219 단어 csswebdevbeginnersprogramming
기사는 원래 @bepractical에 게시되었습니다.

안녕하세요 개발자 여러분, 이 기사에서는 css가 html 파일 내 어디에 배치될 수 있는지 보여드리겠습니다.

그럼 시작하겠습니다 : )
HTML 파일에 CSS를 배치하는 방법
  • 외부 CSS
  • 내부 CSS
  • 인라인 CSS

    • 외부 CSS



    이 방법은 외부 파일에 css를 작성하고 그 css 파일을 html 파일에 링크해야 합니다.

    html 파일 디렉토리에 style.css 파일을 만들고 그 안에 CSS 코드를 작성했다고 가정해 보겠습니다. 그런 다음 html 파일에서 아래 예와 같이 css 파일을 연결할 수 있습니다.

    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>My Home Page</title>
</head>
<body>

<h1>Welcome to Homepage !</h1>
<p>Greetings :)</p>

</body>
</html>

    <link /> 태그는 html 파일에서 css 파일을 링크하는 데 사용됩니다. 속성 href는 css 파일의 위치를 ​​지정하는 데 사용됩니다.

    style.css에는 html 태그가 포함되어 있지 않으며 파일은 다음과 같이 표시됩니다.

    #banner{
  background-color: lightblue;
}

#banner p{
  color: navy;
  margin-left: 20px;
}


    두 번째 방법, 즉 Internal css로 이동해 보겠습니다.

    내부 CSS



    이것은 css를 html 파일에 배치하는 두 번째 방법입니다. 이 방법에서는 css용 외부 파일을 만들어 html 파일에 연결할 필요가 없습니다.

    이 방법에서 css는 아래 코드와 같이 <style> 태그의 <head> 태그 내부 html 파일 안에 배치됩니다.

    <!DOCTYPE html>
<html>
<head>
<style>
#banner{
  background-color: lightblue;
}

#banner p{
  color: navy;
  margin-left: 20px;
}
</style>
<title>My Home Page</title>
</head>
<body>

<h1>Welcome to Homepage !</h1>
<p>Greetings :)</p>

</body>
</html>


    인라인 CSS



    이 방법에서 모든 css는 아래 예제와 같이 해당 태그의 style 속성에 적용됩니다. 스타일 속성은 여러 css 속성을 포함할 수 있습니다.

    여기에서 전체 기사 읽기 👉 https://bepractical.tech/where-does-css-placed-in-html-3-places-for-css/
    pandas v1의 groupby에서 여러 통계를 얻고 싶다면
    디버깅 및 약속 연습

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage