개발자 미니민의 개발스터디

[CSS] CSS 기초 문법 (import / link)

by mini_min

HTML

[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>

 

 

 

 

 

블로그의 프로필 사진

블로그의 정보

개발자 미니민의 개발로그

mini_min

활동하기

티스토리툴바