Multi Developer SuHo

HTML에 스타일을 적용하는 방법 인라인(In-line), 익스터널(External), 인터널(Internal) 본문

html5+CSS3

HTML에 스타일을 적용하는 방법 인라인(In-line), 익스터널(External), 인터널(Internal)

Dreaming Developer Student 2024. 2. 19. 18:56
SMALL

안녕하세요~ 요즘 활동이 빈번해서 죄송합니다 ㅠㅠ 개강하는 날이 다가오니 잠시 휴식과 함께 여행도 다녀왔습니다.  오늘 준비한 내용은 HTML에 스타일을  적용하는 방법에 대해 몇 가지 알아보고 가겠습니다. HTML에 스타일을 적용하는 방법 중 인라인(in-line), 익스터널(External), 인터널(Internal)  에 대해 설명해드리겠습니다.

글을 작성하기전 모든 내용은 다음과 같은 강의플랫폼을 활용하여 작성하였습니다.
https://www.inflearn.com/course/html-css-%EA%B8%B0%EC%B4%88-%EB%AC%B8%EB%B2%95-%EC%98%AC%EC%9D%B8%EC%9B%90

 

[지금 무료] HTML5 & CSS3 기초 문법 올인원 강의 - 인프런

도서 HTML5 독학백서 & CSS3 독학백서 저자 직강! 이론은 짧게 핵심만! 모던 HTML과 CSS에 입문하기 위해 꼭 알아야 하는 핵심 문법 엑기스만 정리했습니다., 핵심을 컴팩트하게! 빠르게 해치우는 HTML/

www.inflearn.com


인라인(in-line) 방식 -  HTML 요소에 직접 스타일을 적용하는 방식입니다. HTML 태그 내부에 'style' 속성을 추가하여 CSS 코드를 작성하며, 이 방식은 해당 태그에만 스타일이 적용됩니다. 이 방식은 특정 요소에만 스타일을 적용하고자 할 때 유용하지만, 재사용성이 낮고 코드가 복잡해질 수 있습니다.

인라인 방식을 사용한 소스코드 입니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style></style>
</head>
<body>
  <h1>안녕하세요!</h1>

  <p style="color: cadetblue;">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, excepturi? Non, itaque. Atque explicabo alias saepe dolores sint! Earum a odio dolores eveniet provident ut sequi, impedit sed perferendis repellendus.
    repellendus doloribus rem nostrum commodi aliquam sunt minus quia!
    Quidem numqumn incidunt soluta dolor autem, veritatis officiis 
    consequuntur enim illo magni inventore.
  </p>
</body>
</html>

 

이렇게  'style' 속성을 사용하여 색상을 지정할 수 있습니다.


 

다음은 인터널 방식입니다. 
인터널(Internal) 방식 -  HTML 파일 내부의 <style> 태그를 이용하여 스타일을 정의하는 방식입니다. 인라인 방식과 달리, 이 방식은 HTML 파일 전체에 스타일을 적용할 수 있습니다. 하지만, 스타일 코드가 HTML 파일 안에 포함되어 있어 익스터널 방식보다는 유지 관리가 어렵습니다. 

인터널(Internal) 방식을 활용한 소스코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h1 {
      color: rgb(236, 189, 22);
    }
    body{
      background-color: cornsilk;
    }
    p {
      color:deepskyblue;
    }
  </style>
</head>
<body>
  <h1>안녕하세요!</h1>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, excepturi? Non, itaque. Atque explicabo alias saepe dolores sint! Earum a odio dolores eveniet provident ut sequi, impedit sed perferendis repellendus.
    repellendus doloribus rem nostrum commodi aliquam sunt minus quia!
    Quidem numqumn incidunt soluta dolor autem, veritatis officiis 
    consequuntur enim illo magni inventore.
  </p>
</body>
</html>


다음 코드를 보면  <style> 태그 내부에 적용하고자 하는 부분을  스타일시트로 작성하여 적용한 것을 볼 수 있습니다.


마지막으로 익스터널 방식(External) 입니다. 
익스터널(External) 방식 -   별도의 CSS 파일을 만들어 스타일을 정의하고, HTML 파일에서 이를 링크하여 사용하는 방식입니다. 이 방식은 여러 HTML 파일에서 동일한 스타일을 적용할 수 있어 재사용성이 높고, 코드의 분리가 가능해 유지 관리가 용이합니다.

다음은 익스터널(External) 방식을 활용한 소스코드 입니다. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>안녕하세요!</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, excepturi? Non, itaque. Atque explicabo alias saepe dolores sint! Earum a odio dolores eveniet provident ut sequi, impedit sed perferendis repellendus.
    repellendus doloribus rem nostrum commodi aliquam sunt minus quia!
    Quidem numqumn incidunt soluta dolor autem, veritatis officiis 
    consequuntur enim illo magni inventore.
  </p>
</body>
</html>


CSS 파일을 만들고  <link> 태그를 활용하여 가져올 CSS 파일의 경로를 작성합니다.



css  소스코드 입니다

h1 {
    color:cornflowerblue;
    font-size: 30px;
}

p {
    color:darkorange;
    font-size: 50px;
}




이렇게 CSS 파일에서 입력한  스타일이  적용된 것을 볼 수 있습니다.
감사합니다.

LIST
저작자표시

'html5+CSS3' 카테고리의 다른 글

CSS 텍스트와 폰트 스타일  (0) 2024.02.23
CSS 선택자의 종류와 개념  (0) 2024.02.20
CSS3가 웹 사이트에 미치는 영향, 주요 기능과 사용하는 이유  (0) 2024.02.11
HTML 시맨틱 태그,(Semantic Tag), 의미론적 태그  (0) 2024.02.10
HTML 레이블 태그(<label>), 라디오 버튼(radio), 체크박스(checkbox) 활용  (0) 2024.02.09
'html5+CSS3' Related Articles more