학습자료

ofcourse css 학습자료

CSS 란 ?

어떤 style로 요소(엘리먼트)가 표시되는지를 정하는 것이다.
공통되는 디자인을 갖는 문서가 여러개 존재할 경우 하나의 디자인이 변경되면 모든 파일을 수정해야 하는데, CSS는 이런 문제를 해결해준다. 웹페이지의 내용과 style을 분리해준다.

CSS 적용법

  1. HTML 태그에 style 속성을 주어 사용 (inline 방식)
    * ex ) <h1 style="color:red">빨간색글자</h1>
  2. <head>태그 내부에 <style>태그를 통해 기술 (embedded 방식)
* ex ) 
<head>
	<style>
    	h1{color:red}
    </style>
</head>
  1. .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번째 자식 요소 또는 홀수번째 자식 요소
profile
개발스터디

관심 있을 만한 포스트

0개의 댓글