잉?

CSS의 기초 본문

웹_WEB/CSS

CSS의 기초

Jye_647 2019. 12. 11. 01:42

[CSS의 기본 틀]

<style>
	a{  /*Selector_선택자*/
	   color:purple;  /* (앞:Property_속성 / 뒤:Value_속성값) = 내용_Declaration */
	}
</style>

 

Selector(선택자)는 웹페이지의 모든 a태그를 선택한다는 의미  → a{ }

Declaration(내용)은 선택자가 지정하는 태그들에 대해 어떤 효과를 줄 수 있는가를 담고 있는 내용을 의미 → a{ 내용 }

 

[CSS의 사용법]

CSS로 꾸미는 방법은 크게 3가지가 있다.

1.  <body>안에서 속성처럼 style 사용

2.  <head>에서 <style> 태그를 사용

3.  확장자를 .css로 사용

 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<a style="color:purple">소제목1</a>
	<a style="color:yellow">소제목2</a>
</body>
</html>

↑ 1번은 위의 코드블럭과 같이 HTML안에서 style을 속성처럼 사용한다.

 

<!DOCTYPE html>
<html>
<head>
 <style>
    	a{
           color:purple;
        }
 </style>
</head>
<body>
	<a>소제목1</a>
	<a>소제목2</a>
</body>
</html>

↑ 2번은 위의 코드블럭과 같이 <style> 태그를 사용하여 디자인한다. 

 

<!DOCTYPE html>
<html>
<head>
	<link rel=stylesheet href=style.css>
</head>
<body>
	<a>소제목1</a>
	<a>소제목2</a>
</body>
/* style.css */

a{
    color:purple;
}

↑ 3번은 확장자를 .css로 바꾼다.

 

3번을 사용하게 되면 HTML 문서에 있는 <style> 태그를 사용하지 않고. css 파일을 따로 만들어서 사용해야 한다. 

그다음 HTML문서에 <link> 태그를 추가하여. css파일과 연결해줘야 한다.

그럼 여기서 간단히 <link>태그가 무엇인지 간단히 알고 넘어가자.

 

▶ <link>태그 사용법

<link>태그는 <head> 태그 안에서 사용한다. 또한 닫는 <link> 태그는 없다.

<link  rel=속성값  href=연결할 주소>  →  예)<link  rel=stylesheet  href=style.css>

  • rel은 현재문서와 연결문서의 관계를 나타낸다. (stylesheet : 스타일시트로 연결할 때)
  • href는 연결할 곳의 주소를 나타내는데 이곳에 .css 파일 주소를 넣어주면 된다.

 

CSS 사용법 중 CSS 파일을 따로 만들어서 사용하는 것이 가장 효율적이다. 그 이유는 캐싱(Caching)이라는 것에 있다.

캐시(Cache) : 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다.

 

한 번 CSS 파일을 다운로드했다면 그 안의 내용이 바뀌기 전까지는 웹브라우저는 컴퓨터에 저장해 놨다가 CSS파일을 요청하면 저장된 결과를 가져옴으로써 훨씬 빠르게 웹페이지를 보여줄 수 있다.

→ 네트워크를 사용하지 않기 때문

 

또한 다른 HTML 문서에 똑같은 CSS가 사용된다면 중복제거에도 매우 효과적이다.

'웹_WEB > CSS' 카테고리의 다른 글

CSS란 무엇인가?  (0) 2019.12.05
'웹_WEB/CSS' Related Articles more
Comments