-
HTML CSS ( internal & external )web coding/HTML 2021. 3. 16. 12:00
웹페이지의 외적인 요소를 꾸며주는 방법은 3가지가 있다.
첫 번째, 가장 손쉬운 방법인 Inline.
꾸미고자 하는 해당 태그 안에 attribute style을 사용해 직접 스타일 값을 설정해주는 것.
예시 : <p style="color: tomato;">This is a tomato paragraph.</p>
나머지 두 가지 방법은
Inline처럼 html 페이지 자체에서 스타일 값을 입력하는 Internal과
CSS 파일 또는 링크를 html 페이지에 연결해 스타일 값을 잡아주는 External이 있다.
1. Internal
CSS-internal - HTML 페이지 내부에서 <head> 섹션에 <style> 태그를 추가한 후,
꾸미고자 하는 element 및 class, id에 대한 스타일 부가 정보를 입력하는 방식.
- 형태 : <style>
tag(tag) / id (#id name)/ class (.class name) { property : value ; } </style>
id와 class는 <style> 섹션에 입력할 때, ( ) 안에 들어간 기호와 함께 적어야 함
장점
- Inline 보다 더 넓은 요소에 스타일을 동시에 적용시킬 수 있음
- 특정 태그들만 잡아 부분으로도 스타일 적용 가능
단점
- 여러 페이지가 필요한 경우, 공통으로 들어가는 값이 있을 때 페이지마다 값을 설정해줘야 함
- 수정이 필요한 경우, 설정한 페이지마다 수정을 해줘야 하는 번거로움이 따름
2. External
CSS-external (css & html) - CSS 파일 형태의 stylesheet가 필요함
ㄴ꾸미고자 하는 element 및 class, id에 대한 스타일 부가 정보를 다른 페이지에 작성 후 사용
ㄴ stylesheet 작성 시 순서는 tag(tag) / id (#id name)/ class (.class name) { property : value ; }
- HTML 페이지 내부에서 <head> 섹션에 링크 연결
- 형태 : <head>
<link rel="stylesheet" href="....css (또는 링크)">
</head>
장점
- 한 번에 여러 페이지에 동일한 스타일 값을 적용시킬 수 있음
- 수정이 필요한 경우에도 한 번에 수정 가능함
단점
- 전체 페이지 또는 여러 페이지에서 스타일이 공통 값으로 적용되다 보니,
일부 값 수정을 원할 땐 Inline으로 해당 태그를 찾아 수정해줘야 함
3. Internal + External + Inline
- 3가지 스타일 적용 방법이 동시에 나오는 경우
Internal + External + Inline mystyle.css <!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: underline;
font-size: 100px;
}
h1.error {
font-size: 100px;
}
</style>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1 style="font-size: 5px;" class="error">Lorem, ipsum dolor.</h1>
</body>
</html>
.error {
background-color: red;
}
h1 {
font-size: 50px;
}
*우선순위 : inline > external > internal 순
- 위와 같이 스타일 설정이 중복될 경우, 우선순위에 따라 보이는 값이 달라짐
result image <style>
h1 { text-decoration: underline;
font-size: 100px;(inline 값으로 적용됨)}
h1.error {
font-size: 100px;(inline 값으로 적용됨)}
</style>
<link rel="stylesheet" href="mystyle.css">
.error {
background-color: red;
}
h1 {
font-size: 50px;(inline 값으로 적용됨)}
</head>
<body>
<h1 style="font-size: 5px;" class="error">Lorem, ipsum dolor.</h1>
</body>
</html>
* 최종적으로 적용된 스타일
text-decoration: underline;
background-color: red;
font-size: 5px;
+ (!부모 자식 형제 관계 정리 필수)
- (+ > , . : ) 특정 의미를 가지는 기호와 함께 기재할 경우, 적용되는 범위가 달라짐
h1 + p : 직전 형제가 h1인 경우, 그다음에 오는 p 요소에만 적용
#div2 > h1 : div2 아이디 다음에 오는 h1에만 적용 = div2 요소의 자식인 h1 에만 적용 (*모든 h1 적용 X)
h1, h2 : h1과 h2 요소에 모두 적용
p.note : p요소에 note 클래스를 가진 태그에만 적용
p.note.error : p요소에 note error란 클래스를 가진 태그에만 적용
a:link : pseudo class
'web coding > HTML' 카테고리의 다른 글
HTML Link (0) 2021.03.17 HTML attribute (style) (0) 2021.03.15 HTML attribute (basic) (0) 2021.03.13 HTML element (basic) (0) 2021.03.12 HTML (1) 2021.03.12