CSS (Cascading Style Sheets)
HTML(마크업언어)을 꾸며주는 표현용 언어. 스타일을 규정하여 html을 보기 좋게 디자인하는 역할.
CSS Zen Garden: The Beauty of CSS Design
So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into thi
www.csszengarden.com
CSS의 중요성을 확인해볼 수 있는 사이트입니다.
동일한 HTML문서에 CSS만 다르게 적용하였을때 어떻게 달라지는지 차이를 볼 수 있습니다.
CSS 문법
어느 요소를 꾸밀건지 선택하고 그 요소를 어떻게 꾸밀건지 스타일을 지정해야합니다.
EX:) h1 { color: yellow; font-size:2em;}
선택자(Selector) : 어떤 요소를 꾸밀건지 지정합니다.
ex:) 예시문의 'h1'을 의미합니다.
속성(property) : HTML 속성(attribute)과는 다릅니다.
ex:) color, font-size를 의미합니다.
값(value) : 속성에 지정되어있는 값을 의미합니다.
ex:) yellow;, 2em;. 속성 값 뒤에는 ;을 붙여 구분하며 맨 마지막 속성값 뒤의 ;은 생략해도됩니다.
선언(declaration) : 속성과 속성 값을 의미합니다.
ex:) color: yellow, font-size: 2em;
선언부(declaration block) : { } 안에 선언된 모든 속성과 값을 의미합니다.
ex:) { color: yellow; font-size: 2em; }
규칙(rule set) : 전체 내용을 의미합니다.
ex:) h1 { color: yellow; font-size: 2em; }
선택자와 선언부 사이, 선언과 선언 사이는 앞뒤로 개행을 해도 상관 없지만
속성이름과 속성 값 사이는 개행해서는 안됩니다.
주석 (Comment tags)
CSS에 대한 설명글을 쓸 때 주로 이용합니다.
/* 주석 내용 */ 형식으로 표현합니다.
CSS 적용 방식
1. Inline style (인라인 스타일 방식)
Inline은 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법입니다.
해당 태그 안에 직접 입력하기 때문에 선택자(selector)는 필요하지 않고,
선언부에 내용만 스타일 속성의 값으로 넣어주면 됩니다.
Inline 스타일 방식은 코드의 재활용이 되지 않기 때문에 자주 사용하지 않습니다.
ex:) <태그이름 style=" ;"> 내용 </태그이름>
2. Internal style (인터널 스타일 방식)
Internal은 <style>태그를 활용한 방법입니다.
<style>은 <head> 내부에 들어가며 <style> 안에 스타일 규칙이 들어갑니다.
위의 코드로 모든 <h1>에 같은 스타일을 줄 수 있습니다.
하지만 많은 페이지가 있는 경우 모든 페이지에 저마다의 규칙을 선언해주어야합니다.
페이지가 많고 스타일 규칙 내용이 많아지면 복잡해질 수 있습니다.
3. External Style (익스터널 스타일 방식)
External은 외부 스타일 시트 파일을 이용하는 방법입니다.
외부 스타일 시트는 스타일 규칙들을 별도의 외부파일에 만들어 넣는 방식입니다.
외부파일은 확장자가 ' .css ' 가되며 css파일이라고 부릅니다.
우선 css파일을 하나 만들어서 스타일 규칙을 선언합니다.
그 다음 <link>태그를 이용해서 CSS파일을 연결해줍니다.
ex:) <link rel="stylesheet" href="생성한 css파일이름.css">
<head> 내부에 <link>를 선언한 후 href 속성을 이용해 CSS파일의 경로를 적습니다.
rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, CSS 파일은 'stylesheet' 라고 적어야 합니다.
외부 스타일 시트 방식으로 스타일을 선언하면 많은 페이지가 있더라도 이 한 줄로 모든 페이지에 같은 스타일을 적용할 수 있습니다.
또한, 수정이 필요할 때도 CSS 파일을 수정하면 연결된 모든 페이지에 반영할 수 있습니다.
외부 스타일 시트 방식은 파일 관리가 편하면서도 용량이 작기 때문에 주로 사용되는 방법입니다.
4.Import Style (임포트 스타일 방식)
Import는 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식입니다.
<style> 내부 상단이나 외부 스타일 시트 파일 상단에 선언하는데 성능상 좋지않아서 거의 쓰이지 않습니다.
Ex:) @import url("css/stle.css");
'Spec UP - Frontend > 부스트코스_UI 개발' 카테고리의 다른 글
| CSS_문서 구조 관련 선택자 (0) | 2020.03.23 |
|---|---|
| CSS_ 선택자(selector) (0) | 2020.03.21 |
| HTML_블록&인라인(Block level/Inline level) (0) | 2020.03.20 |
| HTML_시멘틱마크업:Semantic (0) | 2020.03.19 |
| HTML_콘텐츠모델 (0) | 2020.03.19 |
댓글