학습자료
ofcourse css 학습자료
CSS 란 ?
어떤 style로 요소(엘리먼트)가 표시되는지를 정하는 것이다.
공통되는 디자인을 갖는 문서가 여러개 존재할 경우 하나의 디자인이 변경되면 모든 파일을 수정해야 하는데, CSS는 이런 문제를 해결해준다. 웹페이지의 내용과 style을 분리해준다.
CSS 적용법
- HTML 태그에 style 속성을 주어 사용 (inline 방식)
* ex ) <h1 style="color:red">빨간색글자</h1> <head>태그 내부에<style>태그를 통해 기술 (embedded 방식)
* ex )
<head>
<style>
h1{color:red}
</style>
</head>- .css 파일로 분리하여 HTML 문서에 연결 (import/linked/external방식)
* ex )
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>- Import/Linked/External 방식으로 따로 CSS 파일을 만들때는 반드시 확장자가 .css 이어야 하고, CSS 파일 최상단에
@charset "UTF-8";을 기술하여 한글로 인코딩 시켜줘야 한다.
선택자
어떤 태그(요소)에 CSS를 적용할건지 정의할때의 문법을 선택자라고 한다.
css속성을 여러개 줄때는 세미콜론(;)으로 구분한다.
External 방식으로 css 파일을 따로 만들거나 , Embedded 방식으로 <style>내부에 기술할때 사용한다.
- ex ) 선택자 {속성1:값1;속성2:값2;...}
태그선택자
해당되는 태그 전부에 스타일을 적용시킨다.
- ex ) h1 {속성1:값1;속성2:값2;}
id, class 선택자
태그에서 설정한 id 나 class 속성에 따라 스타일을 적용한다.
id에 적용할 때는 #, class에 적용할때는 . 을 선택자맨앞에 붙혀준다.
선택한 id 나 class 에 기술한 css가 적용된다.
- ex ) #h1id{속성:값;}
- ex ) .h1class{속성:값;}
id ? class ?
HTML 태그에는 id 와 class 속성을 줄 수가 있는데,
id는 그 문서에 고유한 것(하나밖에 못씀)이고, class는 같은 명의 class를 여러개 줄 수 있다.
* ex) <h1 class="h1class">이것은 h1 클래스 이다..</h1>
* ex ) <h1 id="h1id">이것은 h1 아이디 이다..</h1>
부모, 자식 선택자
- ex ) 선택자1 선택자2 {속성:값;}
위와 같이 선택자 사이에 공백을 넣은 것은 선택자1(부모)의 하위에 있는 선택자2(자식)요소에 스타일을 적용시킨다. id 선택자와 class 선택자 사용도 가능하다.
- ex ) .divclass #h1id {color:red;}
다중 조건 선택자
CSS 에서도 AND 나 OR 같은 선택자를 사용할 수 있다.
- ex ) h1#h1id{color:red}
- ex ) h1.h1class{color:red}
선택자 사이에 공백이 없는 경우 여러 선택자를 동시에 만족하는 태그에 스타일을 적용함. (AND 연산)
- ex ) h1, #h1id{color:red}
- ex ) h1, .h1class{color:red}
선택자 사이에 쉼표로 구분되는 경우, 두 선택자 중 하나라도 만족시 적용됨. (OR 연산)
가상 클래스 선택자
선택자 뒤에 가상이벤트를 붙히면 특정 이벤트 마다 css를 적용한다.
- 대표적인 가상 클래스 목록
:link -> 방문한 적이 없는 링크
:visited -> 방문한 적이 있는 링크
:hover -> 마우스를 롤오버 했을 때
:active -> 마우스를 클릭 했을 때
:focus -> 포커스 되었을 때 (input태그 등..)
:first -> 첫번째 요소
:last -> 마지막 요소
:first-child -> 첫번째 자식 요소
:last-child -> 마지막 자식 요소
:nth-child(n) 또는 nth-child(2n+1) - n번째 자식 요소 또는 홀수번째 자식 요소
