스타일 형식

스타일시트는 HTML 웹 문서에서 사용하는 글꼴이나 색상,，텍스트, 이미지를 어떻게 배치할 것인지 규칙을 지정하는 것입니다. 그럼 CSS를 어떠한 문법 규칙으로 작성을 해야 하는지에 대해서 알아 봅니다.

CSS 표현

CSS 는 선택자와 속성 및 값으로 구성됩니다. 작성방법은 다음과 같습니다.


선택자 { 
    속성:값; 
}


선택자 뒤에는 속성과 값을 {와 }로 감싸서 표현을 합니다. 이를 CSS 블럭이라고 말합니다.

{}는 코드의 블럭을 표현하는 기호 입니다.

속성과 값을 구분할 때에는 사이에 콜론:을 삽입합니다. 또한, 마지막에는 세미콜론;이 위치합니다.

다음은 문단 <p>테그에 글자 속성을 부여하는 예제 입니다.

p {
    color:red;
}

선택자

CSS 표현에서 선택자는 html 요소를 가리킵니다. 요소의 선택은 테그명 또는 속성명등을 결합하여 선택이 가능합니다. 제일 많이 사용하는 속성명은 클래스 입니다.

  • 테그
  • . : 클래스 선택
  • # : id 선택

css는 지정한 선택자와 일치하는 모든 HTML 요소를 찾아 style 속성을 부여 합니다.

속성과 값

선택자 다음에는 대괄호가 있고，그 안에는 속성과속성 값이 옵니다. 하나의 속성은 하나의 값만을 가지게 됩니다. 만일 선택된 요소에 여러개의 속성을 부여하고자 할때에는 세미콜론 ;을 통하여 구분을 합니다.

h2 {
    font-size:20px; color:purple;
}

CSS는 공백을 무시합니다.

코드의 가독성을 위하여 한줄로 길게 쓰는 것보다는 다음줄에 걸쳐 보기 좋게 작성을 합니다.

h2 {
    font-size:20px; 
    color:purple;
}

CSS의 우선순위

CSS는 선택자가 있습니다.

선택자에 따라서 우선적으로 적용되는 점수가 있습니다.

0. 전체 선택자 *

전체 선택자는 모든 요소를 선택합니다.

* {
    color:red;
}

전체 선택자를 지정하여 스타일이 적용되면, 모든 요소들의 스타일이 변경을 하게 됩니다.

1. 타입 선택자

html의 테그 요소를 선택합니다.

div {
    color:red;
}

10. 클래스 선택자, praise 클래스 선택자

특정 요소에 이름을 부여합니다. 클래스를 통하여 부여한 이름을 통하여 선택자를 사용합니다.

.aa {
    color:blue;
}

<div class="aa">안녕하세요</div>

100. id 선택자

id를 통하여 부여된 이름을 선택자로 사용을 합니다. id로 부여된 이름은 #기호로 사용을 합니다.

.bb {
    color:orange;
}


위치 실습

정 가운데 박스 그리기

  • margin을 이용하여 위치 보정하기
margin: -px 0 0 -px;

margin 으로 박스 이동하기

margin은 바깥쪽 속성으로 값 지정시 요소의 위치를 이동하게 됩니다.

+값은 오른쪽으로 이동을 하며, -는 왼쪽으로 이동을 하게 됩니다.

만일, 요소가 다른 요소의 위치에 영향을 주는 경우에는. 마진 변경으로 같이 이동을 하게 됩니다.

relative 이동

maring은 다른 요소에 영향을 주면서 위치를 이동합니다. 반면에 relative 속성을 이용하여 이동을 하게 되면, 다른 요소에는 영향을 주기 안고 해당 요소만을 이동을 할 수 있습니다.

float

블럭의 속성을 가지는 요소들을 배치합니다. float은 요소를 정렬하기 위해서 사용을 합니다. float의 요소값은 다음과 같이 3가지가 있습니다.

  • left
  • right
  • none

예제코드 : float01.html

위의 예제코드와 같이 ul/li 요소는 한줄단위로 출력됩니다. li는 블럭 요소를 가지고 있기 대문 입니다.

left

float 속성을 이용하여 한줄로 표시를 합니다.

예제코드 : float02.html 요소들이 왼쪽을 기준으로 순차적으로 배치됩니다.

right는 오른쪽 부터 요소를 배치하게 됩니다. 첫번째 요소가 가장 오른쪽에 배치를 하기 때문에, 순서가 역순으로 배치되는 것을 확인 할 수 있습니다.

예제코드 : float03.html

보정하기 li의 요소는 순차적으로 배치를 하고, ul 요소를 float으로 하여 오른쪽으로 배치를 할 수 있습니다.

예제코드 : float04.html

폰트 스타일

font-family

서체를 의미 합니다.

만일 돋움 서체를 적용하고자 할때에는 다음과 같이 선언을 할 수 있습니다.

font-family: dotum;

많이 사용하는 폰트로는 돋움, 굴림, 나눔고딕을 많이 사용합니다.

하지만 나눔고딕의 경우 운영체제에서 기존 제공하는 폰트가 아니라서 외부 웹폰트를 통하여 적용하여야 합니다.

영문 폰트는 verdana, tahoma, arial, 등이 많이 사용이 됩니다.

font-size

글씨의 크기를 조정할 수 있습니다.

font-size:12px;

데스크탑용 웹사이트는 11px, 12px을 많이 사용을 하였으나, 모바일등 웹 점근성을 위해서 최근에는 14px을 많이 사용하는 추세 입니다.

  • em
  • pt
  • px
  • %

4가지의 단위를 많이 사용합니다.

font-weight

폰트의 굵기를 설정합니다.

font-weight: bold;
  • bold
  • normal

퐅트를 굵게 표시하는 요소들 th, strong, b, h1~h6 는 굵은 폰트로 처리를 합니다. <= 이러한 요소들을 강제로 weight를 변경할 수 있습니다.

text-align

텍스트 또는 inline 요소, inline-block 요소를 x축 기반으로 중앙 정렬을 할 수 있습니다.

블럭 요소는 가운데 정렬을 할 수 없습니다.

  • left
  • right
  • center
  • justify

vertial-align

인라인, 텍스트 세로 정렬이 가능합니다.

  • middle
  • top
  • bottom

테이블 적용

테이블 td에서 텍스트가 적용될때 vertial-align 을 적용할 수 있습니다. 테이블은 기본값은 middle 입니다.

color

색상을 변경합니다.

색상값

display 속성

요소가 보여지는 속성을 변경합니다.

  • block : 블럭요소로 변경합니다.
  • inline : inline 요소로 변경합니다.
  • inline-block : 블럭과 인라인을 모두 적용합니다. 한줄표시와 여백설정이 가능합니다.
  • none : 화면에서 표시를 제외합니다. 화면 낭독기에서 읽지 않습니다.

ex) span 테그는 인라인 속성을 가지고 있기 대문에, width와 height가 적용되지 않습니다.

예제코드 : display0.html

이를 변경하기 위해서는 display 속성을 block으로 변경해 주어야 합니다.

예제코드 : display1.html

inline 요소로 변경하기

div와 같이 블록 요소를 display:inline 으로 변경할 수 있습니다.

예제코드 : display2.html

inline-block

인라인 속성과 블럭 속성 두가지를 가지고 있습니다.

none

화면에서 제거를 합니다.

overflow

정해진 영역에 초과하는 데이터가 있을 경우 처리하는 방법입니다.

visible

기본값 입니다.

overflow:visible;

요소의 크기가 넘어가도 허용하여 출력합니다. 예제코드 : overflow0.html

hidden

넘아 가는 부분을 표시 하지 않습니다.

overflow:hidden;

예제코드 : overflow1.html

auto

초과되는 내용이 있을 경우 스크롤을 생성합니다.

overflow:auto;

예제코드 : overflow3.html

이전에는 overflow auto와 같은 결과물을 생성하기 위해서 iframe을 많이 사용을 하였습니다.

오버플로우 auto값을 적용하기 위해서는 width 또는 height 가 반드시 존재햐야 합니다.

오버플로우 스크롤은 기본적으로 키보드 컨트롤(page up/down)이 불가능합니다. 키보드 컨트롤을 가능하게 하기 위해서는 tabindex 속성을 이용하여 처리 합니다.

<div tabindex="0">
내용....
</div>

tabindex는 tab키 입력시 선택되는 순서 입니다. 탭 키를 입력하면 포커스가 이동하여 선택 진입이 되기 때문에 키보드 컨트롤이 가능하게 됩니다. 단, 크롬은 지원하지 않고 ie만 지원을 합니다.

CSS 선택자

요소를 선택하기 위한 선택자에 대해서 알아 봅니다.

자손 선택자

요소와 요소 사이를 스페이스 공백으로 구분하여 선택을 합니다.

요소1 요소2 {

}

자손은 모든 요소1에 속한 모든 요소2를 선택합니다.

자손선택 스패이스 공백

요소 클래스 {

}

요소 안에 있는 클래스 이름을 가지는 요소를 선택합니다.

요소와 클래스명이 두개가 일치하는 선택

요소.클래스 {

}

예)

<div class="aaa">

</div>

요소#아이디 {

}

쉼펴(,)

쉼표는 and 성격의 요소를 선택합니다. 두개 이상의 요소를 동시에 선택할 수 있습니다.

div, p {

}

div 와 p 요소를 모두 선택합니다.

선택응용1

요소1.클래스 요소2#아이디 {

}

<div class="div">
    <p id="name"></p>
</div>

형제 선택자

요소 + 요소

<style>
    div + div {
        color:red;
    }
</style>

<div>첫번째</div>
<div>두번째</div>

두번째 div 형태 요소만 선택이 됩니다.

자식

자식은 >로 표시를 합니다.

선택하자과 하는 첫번째 깊이의 요소만을 선택합니다.

<style>
div > span {
    color:red
}
</style>

속성 선택

특정 속성을 가지는 요소를 선택합니다.

input[type="text"] {
    border:1px solid red;
}

name 속성값이 있는 경우 선택

input[name] {

}

가상선택자

마우스의 움직임을 처리합니다.

  • :hover 요소 위에 마우스가 위치했을 때 반응동작을 지정합니다.
a:hover {

}
  • :active 요소를 마우스 클릭으로 누르고 있는 경우
a:active {

}
  • :focus 초점이 잡혀 있을 경우를 말합니다. 키보드의 텝키를 이용하여 포커스를 지정 또는 이동할 수 있습니다.
a:focus {

}

포커스는 마크업한 순서대로 이동을 하게 됩니다.

자식 선택자

첫번째 자식 요소만을 선택합니다.

요소1 요소2:fitst-child {

}

요소와 자식의 순서가 일치를 하여야 합니다. 만일 첫번째 자식이 선택한 요소2가 아닐 경우 선택되지 않습니다.

CSS 선언

CSS는 보통 HTML 문서의 head 영역에 선언을 합니다.

또한 css를 사용하기 위해서는 CSS 값을 style 테그로 감싸주시면 됩니다.

<head>
    <style>
        
    </style>
</head>

CSS의 구조

CSS는 다음과 같이 구조를 가지고 있습니다.

선택자 {
    속성명 : 속성값;
}

CSS 구조는 제일먼저 어떠한 선택자에게 CSS 속성을 부여할 것인지를 지정합니다. 그리고 설정된 속성값은 중괄호 {}를 통하여 다수의 속성값을 한번이 지정할 수 있습니다. 모든 속성값 설정의 마지막 줄은 세미콜론으로 마무리 합니다.