CSS란
cascading style sheets의 약자로 소스 구성이나 배치등을 보완하기 위해 개발된 독립적인 언어이다.
html을 바탕으로 사용할 수 잇으며 html이 만든 뼈대위 옷을 입히는 역할로 디자인 기능을 수행한다
문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다.
CSS는 서버가 아닌 웹 브라우저에서 해석되어 화면에 적용되기 때문에 웹 서버의 부담을 줄여주면서도 다양한 기능을 수행할 수 있다.
CSS2 => CSS3 로 넘어오면서 adobe flash 기능을 대체하게 되었으며 css의 기능은 더욱더 확대될 전망이다.
css 사용
css 를 사용함으로써 웹 문서의 편집을 자유롭게 할 수 있고, 통일감있는 웹페이지를 만들수 있다.
css 는html과 마찬가지로 소문자로 작성한다.
css 는 <style> 태그안에 작성한다.
css 는 html 태그에 직접 주는 인라인 스타일과 <head> 영역 안에 작성하는 임베디드 스타일, css파일을 만들어 링크로 연결하는 링크드 스타일로 사용한다.
css 적용 방법
1) 인라인 스타일,로컬 스타일
- HTML 태그에 직접 적용하는 방법이다.
- 가장 직관적인 방법으로 간단한 코딩외에는 거의 사용하지 않는다.
2) 임베디드 스타일,페이지 스타일
- <head> 태그안에 적용하는 방법이다.
- 한곳에 코드가 모여있어 작은 업무를 수행할때 쓰는 방식이다.
3) 링크드 스타일
- .css 파일을 만들어서 연결하는 것으로 가장 적합한 방법이다.
- 프로젝트 크기가 어떠하든 링크드 방식을 사용하는게 적절하다.
ex)<link rel="stylesheet" href="css/ex.css"> - 태그명(선택자){속성:값; 속성:값; 속성:값: ...}
* 한페이지에 css 적용방법을 한번에 모두 동일하게 줄 경우 우선순위는 "우선순위 인라인 스타일>임베디드 스타일>링크드 스타일" 이다
정리
* css 는 링크드 스타일을 권장한다.
* css 는 html이 그린 뼈대위에 옷을 입히는 역할로 디자인 기능을 수행하고 있다. 초기에는 단순했던 css가 디자인 적으로 할 수 있는 기능이 많아지고 있다. 때문에 css를 잘 다루려면 포토샵, 일러스트 지식이 있어야한다.
* 이제는 웹 디자이너로써 프로그래밍을 알아야 하며 프로그래머로서 디자인을 알아야한다.
'공부방 > Programming' 카테고리의 다른 글
| <HTML5> 8강 blockquote/q 태그, abbr/acronym 태그, del/ins 태그, sup/sub 태그, address태그 (0) | 2020.06.09 |
|---|---|
| <HTML5> 7강 img 태그 / <map> 태그 (0) | 2020.06.08 |
| <HTML5> 6강 dl, dt, dd 정의형 목록태그 (0) | 2020.06.05 |
| <HTML5> 5강 ul, ol, li 목록태그 (0) | 2020.06.02 |
| <HTML5> 4강 a 하이퍼링크 태그 (0) | 2020.06.01 |