라떼는말이야

[CSS] Inline CSS, Internal CSS, External CSS 장단점 본문

공부

[CSS] Inline CSS, Internal CSS, External CSS 장단점

MangBaam 2021. 1. 23. 02:45
반응형

Inline CSS (인라인 CSS)

<!DOCTYPE html>
<html>
<body style="background-color:black;">

<h1 style="color:white;padding:30px;">Inline CSS</h1>
<p style="color:white;">HTML 안에서 직접 스타일 적용.</p>

</body>
</html>

Inline CSS 장점

  • HTML 페이지에 쉽고 빠르게 CSS 룰을 삽입할 수 있다. 이 방법은 여러분의 웹사이트를 테스팅 하거나 변경에 대한 미리보기, 그리고 빠르게 고칠 수 있는 성능에 유용하기 때문에 사용된다.
  • 별도의 문서로 외부 스타일을 만들거나 업로드 할 필요가 없다.

Inline CSS 단점

  • CSS룰을 모든 HTML 엘리먼트에 추가하는 것은 시간 낭비이고 여러분의 HTML 구조를 복잡하게 만든다.
  • 여러 엘리먼트에  스타일을 적용하는 것은 당신의 웹페이지 사이즈와 다운로드 시간에 영향을 줄 수 있다.

Internal CSS (내부 CSS)

<!-- head 태그에 다음의 코드를 삽입 -->
<style type="text/css">

  body {
      background-color: blue;
  }
  h1 {
      color: red;
      padding: 60px;
  }
  
 </style>

Internal CSS 장점

  • 스타일시트에 클래스와 ID 선택자를 사용할 수 있다.
.class {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}

#id {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}
  • 동일한 HTML 파일 내에서만 코드를 추가하므로 여러 파일을 업로드할 필요가 없다.

Internal CSS 단점

  • HTML 문서에 코드를 추가하는 것은 페이지의 사이즈와 로딩 시간을 증가시킬 수 있다.

External CSS (외부 CSS)

/* external.css */
.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}
<!-- HTML > head 태그에 다음의 코드를 삽입 -->
<link rel="stylesheet" type="text/css" href="external.css" />

External CSS 장점

  • CSS 코드가 별도의 문서로 있기 때문에 HTML 파일 구조가 깔끔해지고, 사이즈가 작아진다.
  • 여러 페이지들에 같은 .css 파일을 사용할 수 있다.

External CSS 단점

  • 외부 CSS 파일이 로드되기 전까지 페이지가 올바르게 표시되지 않는다.
  • 여러 CSS 파일을 업로드 하거나 연결하면 사이트 다운로드 시간이 증가할 수 있다.

 

참고 (www.hostinger.com/tutorials/difference-between-inline-external-and-internal-css)

반응형

'공부' 카테고리의 다른 글

[Python] 0.3 + 0.6은 0.9가 아니다?!  (2) 2021.08.22
[Kotlin] 코틀린 range로 리스트 초기화 하기  (0) 2021.07.28
[Kotlin] 코틀린의 collections-List, Set, Map (파이썬과 비교)  (0) 2021.07.24
IP 주소의 구성과 네트워크 부분, 호스트 부분  (0) 2021.06.02
21/3/23 공부 기록  (0) 2021.03.24
[CSS] 선택자 종류  (0) 2021.01.23
[머신러닝] 분류 모델 - 소프트맥스 (아이리스 품종 분류)  (0) 2021.01.08
[머신러닝] 활성화 함수(계단, 시그모이드, 쌍곡탄젠트, ReLU, 소프트맥스 함수) 파이썬 예제  (0) 2020.11.19
'공부' Related Articles more
Comments