본문 바로가기

FrontEnd/CSS

01. CSS 기초

웹 표준의 기본은 HTML과 CSS.

HTML로 뼈대를 만들면 CSS로 살을 붙이는 것.


CSS? WHY?

1. 웹문서와 디자인의 분리.
 - 분리를 통해서 서로 영향을 주지 않고 내용 변경 가능.

2. 다양한 환경에 대응.

 - 기존의 웹은 틀이 정해져 있기 때문에 환경에 따라 다르게 제작해야 했지만

   분리를 하게 되면 환경에 맞춰 CSS만 변경해주면 된다.



p { color : blue; }

선택자 : 가장 앞에 나오는 부분이며, 선택자로 선택 된 영역은 전부 적용.


* CSS는 공백을 무시하기 때문에 가독성을 높이고자 여러 줄에 걸쳐 작성하는 경우가 많음.



주석

- /* */ 사용.



스타일 정보는?

스타일 정보는 문서가 표시 되기 전에 결정되어야 하기 때문에

모든 스타일 정보는 <head>와  </head> 사이에 장의.

웹 문서 안에 있는 내부 스타일시트라면 </head> 태그가 나타나기 전에 

<style> 태그와 </style> 사이에 기록.



외부스타일 시트?

문서 안에 있는 스타일 정보를 별도의 파일로 저장하는 것.

즉 내부 스타일 시트의 내용을 별도의 .css 파일로 분리 후 <link>태그로 연결하는 것.

<link href="외부 스타일 파일 경로" rel="stylesheet" type="text/css"> (기본형)


<link> 태그에서 스타일시트 파일을 연결한다고 정의 하기 때문에 

별도의 <style> 태그 없이 스타일만 작성.


*외부

ul{

color:blue;

list-style:squre;

}


* html문서

<head>

<meta chraset="utf-8">

<title>요안도라</title>

<link href="style.css" rel="stylesheet" type = "text/css"></link>

</head>


'FrontEnd > CSS' 카테고리의 다른 글

02. 스타일의 우선순위  (0) 2015.08.24