[CSS] CSS 기초 문법 (import / link)
by mini_min[CSS]
CSS 기초 문법 (import / link)
✔️ CSS 란?
: 스타일은 HTML 문서 내에 서체의 종류, 크기, 색, 여백 등을 지정하여 사용자의 브라우저 환경에 상관없이 일정한 화면을 보여주는 기능이다.
✨ 장점
- 기능 확장성
- 양식의 모듈화
- 간편성
- 일관성 및 유지 보수의 편리성
✔️ CSS 형식
: 선택자와 선언으로 구성되며, 선언은 속성과 값으로 구성된다.
: 여러 속성을 사용하는 경우, 세미콜론으로 구분한다.
: 대소문자를 구별하지 않는다.
: style property , value, keyword 는 중괄호 속에 들어간다.
✔️ CSS 지정 방법
1) 인라인 스타일
: HTML tag 속에 style 속성을 사용하여 직접 지정한다.
2) 내부 스타일 시트 (embedded style sheet)
: 스타일 시트의 기본적인 사용 방법! <head> ~ </head> 사이에 삽입하여 아래와 같이 정의하여 적용
<style type="text/css">
</style>
3) 외부 스타일 시트 (linked style sheet)
: link element 사용하여 css file 을 연결시켜 사용하는 방식
<link rel="stylesheet" href="style.css" type="text/css"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
.box {
padding: 20px;
}
</style>
</head>
<body>
<h3> 외부 스타일 시트 포함 : link 태그 이용한 외부 css 파일 가져오기</h3>
<div class="box">
<a href="#">링크1</a> |
<a href="#">링크2</a> |
<a href="#">링크3</a>
</div>
</body>
</html>
4) imported style sheed
: 결과적으로 linked style sheet 와 같다.
@import url("파일명") 또는 @import "파일명";<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
@import url("style2.css");
h3 {color: blue;}
</style>
</head>
<body>
<h3> 외부 스타일 시트 포함 : @import를 이용한 외부 css 가져오기</h3>
<div class="box"> 자바 </div>
</body>
</html>
'HTML' 카테고리의 다른 글
| [CSS] 상속 (Inheritance) / 캐스캐이딩 (Cascading Order) (0) | 2022.09.13 |
|---|---|
| [CSS] CSS 프로퍼티 값 (단위) (0) | 2022.09.13 |
| [HTML] <img> 태그 / <audio> 태그 (0) | 2022.09.13 |
| [HTML] <label> 태그 / <fieldset> 태그 (0) | 2022.09.13 |
| [HTML] <button> 태그 type / value, readonly, disable, hidden, image (0) | 2022.09.13 |
블로그의 정보
개발자 미니민의 개발로그
mini_min