본문 바로가기
지속가능티끌/웹,워드프레스

CSS 파일 만들기.

by 리치굿맨 2014. 10. 29.

 

 

 

개요.

   
 

본 글에서 CSS 파일만들기 및 주석과 구문 작성 기본 사항 정리한다.

 

설명.

확장자 css 인 파일을 별도로 준비해두고, html 내 에서는 이 파일을 링크 걸어 사용하는 방식을 주로 이용한다. 별도로 만들어져 있는 css파일이름이 style.css라고 하자. html 의 <hrad> </head> 사이에 아래처럼 기록되면 된다. css 파일이 있는 곳은 웹서버와 동일서버/ 외부 서버 모두 가능하다.

<head>

<meta ...>

<title> </title>

<link rel="stylesheet" href=http://주소/style.css/ type="text/css">

</head>

 

아래 내용에서는 css 파일 만들기 관련으로 고려사항 설명한다.

 

 

 

 

 

 

 

1. CSS 파일 만들기 

   
 

CSS 파일 만들기.

 

1. 텍스트 편집가능한 프로그램으로 확장자를 css 로 해서 임의의 파일명으로 만든다.

 

2. 문서인코딩은 UTF-8 ( BOM 없는) 로 저장한다. 사용할만한 툴 : Notepad++.  설치 보기 -> http://igotit.tistory.com/139

메모장도 UTF-8 로 기록가능하나 BOM이 부착된 형식이다. 메모장에서 인코딩 지정 보기 -> http://igotit.tistory.com/84

메모장의 UTF-8 형식파일이 유닉스계열에서 문제 일으키는 상황이 있음 상세보기 -> http://igotit.tistory.com/140

 

CSS 파일 내용 편집시 알아야 할것.

CSS파일에 기록 가능한 것은 주석과 CSS구문 2종이다.  

 

주석표현 : /* 와 */의 사이에 기록된 것은 주석이다. 주석은 웹브라우저에서 css 실행시 아무런 작용이 없다. CSS에서 설정한 것 설명하는 용도 사용된다. 

CSS구문 표현 : css 구문은 Selector {property : value;} 형식으로 기록된다. 아래 별도 상세설명함.

CSS 파일내에 기록하는 CSS구문을 <style> </style> 로 감싸지 않는다. html 내에서 스타일시트 표현할때는 <style> </style> 속에 표현했었다.

 

아래 CSS파일의 작성 형식 예를 보인다. CSS 구문의 나열일뿐이다. 구문 간의 하이어러키 같은 것 없다. 다른 언어처럼 함수 속에서 함수호출한다든지 그런거 없다. 언어라고는 표현했지만 간단한 언어로 생각하면 된다. CSS 구문의 나열이 전부임. 구문의 형식도 항상 Selector {property : value;} 로 기록됨.  아래 예에서 P, #area_main 등이 selector 에 해당. 이들 selector는 html 내에 기록해둔 요소이름이며 해당 요소만 설정한다는 의미.

 

/*이건 style.css이다.*/ 

 

P

{

 color : blue;

 border : solid 1px red; 

}

/*웹페이지 레이아웃 설정부*/

 

#area_main

{

  width : 800px;

}

 

 

 

 

 

 

169.

태그

,

댓글0


.    
현물 |선물 인버스 |선물 USDT     현물 | 선물 USDT |봇제작툴/카피트레이딩     현물 |선물 인버스 |선물 USDT     .