CSS의 개념 및 기본

CSS

HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성한다는 아이디어가 웹 표준의 시작이다. HTML로 디자인을 구성하지않고 CSS로 디자인을 구성하는 이유로는
내용과 디자인이 구분되어 있으면 사이트의 내용을 수정할 때 디자인에 전혀 영향을 미치지 않는다.
그리고 디자인의 내용을 수정할 때 사이트의 내용에 전혀 영향을 미치지 않는다.
이러한 장점으로 HTML과 CSS를 구분한다.

casacading

CSS의 'C'는 cascading의 줄임말이며 스타일 시트에서는 우선순위가 위에서 아래, 계단식으로 적용된다는 의미로 사용된다. 그래서 CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다.

• 사용자 스타일 : 1순위 ( 사용자가 결정한 스타일 ex - 윈도우 고대비 모드 배경색 )
• 제작자 스타일 : 2순위 ( 웹 문서 제작자가 설정한 스타일 ex - background-color : gray; )
• 브라우저 기본 스타일 : 3순위 ( 기본 브라우저 스타일 ex - 배경색이 white )

아래와 같은 상황에서 위의 우선순위를 따라 처리된다.

브라우저 기본 스타일 : white색상이 배경색으로 들어가라.
제작자 스타일 : gray 색상이 배경색으로 들어가라.
사용자 스타일 : 윈도우 고대비 모드를 설정해 black 색상이 배경색으로 들어가라.
=> white색상이 적용되어 있지만, 제작자 스타일로 gray색으로 변경 => 사용자 스타일로 black색으로 변경

• 결국 black색상이 배경색이된다.

상속

스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달되는데 이것을 스타일 상속이라고 한다.
ex) body태그 는 웹 문서에 사용한 모든 태그의 부모 요소로서 body태그 에서 글자색이나 글꼴을 지정하면 그 스타일을 웹 문서 전체에 적용된다.

반응형 웹 디자인

사용자가 pc로 접속하든, 모바일로 접속하든 웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 바꿔주는 방법을 말한다. pc버전의 웹 문서와 모바일 버전의 웹 문서를 따로 만드는게 아닌
하나의 문서로 두가지 또는 그 이상의 문서들을 하나의 웹 문서에서 작동하도록 만드는 것 이다.

스타일 형식

선택자 { 속성1: 속성값1; 속성2: 속성값2; }

p {
	text-align : center;
    color : blue; /* 주석은 해당 방법을 사용하여 덧붙인다. */

CSS 기본 선택자

css의 기본 선택자로는 전체 선택자, 타입 선택자, 클래스 선택자, id 선택자로 나뉜다.

• 전체 선택자 : 스타일을 문서의 모든 요소에 적용할 때 사용한다.

* { 속성 : 값; }

• 타입 선택자 : 특정 태그를 사용한 모든 요소에 적용할 때 사용한다.

태그명(ex: p태그) { 속성 : 값; }

• 클래스 선택자 : 특정 부분만 선택해서 스타일을 적용할 때 사용한다.

.클래스명 { 속성 : 값; }

• id 선택자 : 클래스 선택자와 같이 웹 문서의 특정 부분을 선택해서 스타일을 적용하는것은 동일하다. 차이로는 클래스 선택자가 문서에서 여러 번 적용할 수 있는 반면, id선택자는 문서에서 한 번만 적용할 수 있다는 점이 있다.

#아이디명 { 속성 : 값; }