반응형
스타일 적용 방법
- 인라인 스타일(Inline style)
- HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법
- 해당 요소에만 스타일 적용
- 내부 스타일 시트(Internal style sheet)
- HTML 문서 내의 <head> 태그에 <style> 태그를 사용하여 CSS 스타일을 적용하는 방법
- 해당 HTML 문서에만 스타일 적용
- 외부 스타일 시트(External style sheet)
- 외부에 작성된 스타일 시트 파일을 사용하여 CSS 스타일을 적용하는 방법
- 스타일을 적용할 웹 페이지의 <head> 태그에 <link> 태그를 사용하여 외부 스타일 시트를 포함
- 확장자는 '.css'를 사용하여 저장
스타일 적용 예시
인라인 스타일 적용
- HTML 요소 내부에 style 속성 사용
- 적용 예시) h2 요소에 빨간색 글씨 적용
<!-- css inline style test.html -->
<html>
<body>
<h2 style="color:red">
인라인 스타일 적용
</h2>
</body>
</html>
- 적용 화면
내부 스타일 시트 적용
- HTML 문서 내의 <head> 태그에 <style> 태그 사용
- 적용 예시) h2 요소에 빨간색 글씨 적용
<!-- css internal style sheet test.html -->
<html>
<head>
<style>
h2 {
color:red;
}
</style>
</head>
<body>
<h2>
내부 스타일 시트 적용
</h2>
</body>
</html>
- 적용 화면
외부 스타일 시트 적용
- 외부에 작성된 스타일 시트 파일을 사용, 확장자는 '.css'
외부 스타일 시트(external style sheet.css)
/* external style sheet.css */
h2 {
color:red;
}
HTML 문서(css external style sheet test.html)
<!-- css external style sheet test.html -->
<html>
<head>
<!-- href : 파일이 위치한 경로 입력 -->
<link rel="stylesheet" href="C:\Users\Eunbyeol\Desktop\external style sheet.css">
</head>
<body>
<h2>
외부 스타일 시트 적용
</h2>
</body>
</html>
- 적용 화면
스타일 적용 우선순위
- 인라인 스타일
- 내부 스타일 시트
- 외부 스타일 시트
- 웹 브라우저 기본 스타일
스타일 적용 우선순위 확인
- 위에서 설명하였으니 자세한 코드는 생략
- 인라인 스타일 : 빨간색
- 내부 스타일 시트 : 녹색
- 외부 스타일 시트 : 파란색
- 웹 브라우저 기본 스타일 : 검정색
모든 방식의 스타일 적용
- 인라인 스타일 적용 됨
내부/외부 스타일 적용, 인라인 스타일 제외
- 내부 스타일 시트 적용 됨
외부 스타일 적용, 인라인, 내부 스타일 제외
- 외부 스타일 시트 적용 됨
모든 방식의 스타일 제거
- 웹 브라우저 기본 스타일 적용 됨
참고
http://www.tcpschool.com/css/css_intro_apply
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
반응형