|
개요. | ||
|
본 글에서 CSS 파일만들기 및 주석과 구문 작성 기본 사항 정리한다.
설명. 확장자 css 인 파일을 별도로 준비해두고, html 내 에서는 이 파일을 링크 걸어 사용하는 방식을 주로 이용한다. 별도로 만들어져 있는 css파일이름이 style.css라고 하자. html 의 <hrad> </head> 사이에 아래처럼 기록되면 된다. css 파일이 있는 곳은 웹서버와 동일서버/ 외부 서버 모두 가능하다.
아래 내용에서는 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 내에 기록해둔 요소이름이며 해당 요소만 설정한다는 의미.
| ||
169.
'지속가능티끌 > 웹,워드프레스' 카테고리의 다른 글
| 워드프레스 테마 만들기 9편. CSS 이용하여 레이아웃 만들기. (2) | 2014.10.30 |
|---|---|
| 워드프레스 테마 만들기 8편. 검색창 템플릿 searchform.php 추가하기. (0) | 2014.10.30 |
| CSS 선택자 활용정보 요약. (0) | 2014.10.29 |
| CSS Property(속성) 전체 리스트. (0) | 2014.10.29 |
| CSS Selector(선택자) 전체 리스트. (0) | 2014.10.29 |
댓글