시작하기

웹 표준을 준수한 사이트 만들기

CSS 사용방법

inline 방식

- 태그 요소에 직접 사용하는 방법
- CSS를 바로 적용하기가 편하지만, 소스가 많아지면 수정과 관리가 어렵다.(실무사용x) 


<p style="color:red"> 태그요소에 직접 사용하는 방법</p>

Style tag 방식

- head에 style을 지정하고 사용하는 방법
- CSS를 바로 적용하기가 편하지만, 소스가 많아지면 수정하기 어렵다.
- 로딩 속도가 제일 빠르다. 


<head> 
	<style type="text/css">
	p{color:red;}
	</style>
</head>

외부파일 방식

- head에 경로를 설정하고 사용하는 방법 


<link rel="stylesheet" type="text/css" href="경로"/>

CSS Color

CSS로 색상을 지정하는 방법은 16진수 코드, RGB, RGBA, HSL, HSLA, 색이름 표기법이 있습니다.

16진수 코드

- 웹 페이지에서 색상을 표현하는 가장 기본적인 방법으로 16진수로 표시합니다. #RRGGBB형식으로 RR은 빨간색, GG는 초록색, BB는 파란색의 양을 표시합니다.
- 각 색상마다 하나도 섞이지 않았음을 표시하는 00에서부터 해당 색이 섞였음을 표시하는 FF까지, 사용할 수 있으며 값은 #000000(검은색)에서부터 #FFFFFF(흰색)까지입니다.

RGB / RGBA

-RGB 방식은 Red, Green, Blue의 색의 양을 나타내는데, 16진수가 아닌 십진수로 표현합니다. 하나도 섞이지 않았을 때는 0으로 가득 섞였을 때는 255로 표시하며, 그 사이의 값으로 색상의 양을 조절합니다.
- RGB는 빛의 삼원색인 Red, Green, Blue의 값을 0과 255사이로 표현하였습니다.
- RGBA는 빛의 삼원색인 Red, Green, Blue, Alpha(투명도)를 조합한 색을 말합니다.

HSL / HSLA

- hsl은 hue(색상), saturation(채도), lightness(밝기)를 나타내며, 색상은 색의 3요소 중 하나로, 각도를 기준으로 색상을 둥글게 배치한 색상환으로 표시합니다. 0도와 360도에는 빨간색을, 120도에는 초록색을, 240도에는 파란색을 배치하고 그 사이사이에 나머지 색들이 배치됩니다. 채도 역시 색의 3요소 중 하나로 %로 표시하는데, 아무것도 않은 상태가 가장 채도가 높은 상태입니다. 채도가 0%이면 회색톤으로, 채도가 100%이면 순색으로 표시됩니다. 밝기 또한 %로 표시하는데, 0%가 가장 어둡고 100%가 가장 밝습니다
- hsl는 색상, 채도, 명도로 나타냅니다.
- hsla는 색상, 채도, 명도, 투명도로 나타냅니다.

색 이름 표기

- 가장 많이 쓰는 색상을 이름으로 표시할 수 있습니다.
- 17가지 기본 색상 : aqua, black, blue, fuchsia, gray, grey, green, lime, marron, navy, olibe, purple, red, silver, teal, white, yellow

CSS Selector

div {width:100px;}

  • div : 선택자
  • width : 속성
  • 100px : 속성값
  • {} : 중괄호
  • : 콜론 ; 세미콜론

id 선택자

  • 하나의 태그만 식별하기 위한 선택 방법입니다.
  • CSS에서는 "#"이라고 표시합니다.
  • 우선순위가 가장 높습니다.

class 선택자

  • 여러개의 태그에 중복 사용이 가능한 선택 방법입니다.
  • CSS에서는 "."이라고 표시합니다.
  • 한 가지 태그에 2개 이상 class

type 선택자

하위 선택자

전체 선택자

float

float으로 인한 영역 깨짐 방지법

  • 1. 깨지는 영역에 똑같이 float을 사용한다.
  • 2. float의 영향을 차단하는 clear:both; 를 사용한다.
  • 3. 상위박스 요소에게 overflow:hidden; 를 사용한다.

margin

요소와 요소의 간격(바깥쪽 여백)

Value

  • 길이 : 고정된 값을 지정
  • 백분율 : 퍼센트 지정 가능
  • auto : 기본값, 자동값
  • inherit : 상속값

표현방법

  • margin-top:10px;
  • marign-right:11px;
  • marign-bottom:12px;
  • marign-left:13px;
  • marign:10px 11px 12px 13px; (위, 오른쪽, 아래, 왼쪽)
  • margin:10px 11px 12px; ( 위10px / 오른쪽,왼쪽 11px / 아래12px)
  • margin:10px 11px; ( 위,아래10px / 오른쪽,왼쪽11px)
  • margin:10px; (위, 오른쪽, 아래, 왼쪽 : 10px)
  • margin:0 auto 0 auto; (위0, 오른쪽auto, 아래0, 왼쪽auto / 가운데 정렬:블록구조)

padding

박스 요소의 안쪽 여백

Value

  • 길이 : 고정된 값을 지정
  • 백분율 : 퍼센트 지정 가능
  • auto : 기본값, 자동값
  • inherit : 상속값

표현방법

  • padding-top:10px;
  • padding-right:11px;
  • padding-bottom:12px;
  • padding-left:11px;
  • padding:10px 11px 12px 13px;(위,오른쪽,아래,왼쪽)
  • padding:10px 11px 12px (위10px /오른쪽,왼쪽11px / 아래12px)
  • padding:10px 11px(위,아래:10px / 오른쪽,왼쪽:11px)
  • padding:10px ;(위,오른쪽,아래,왼쪽:10px)

border

박스 요소의 테두리

border-width

  • thin : 얇은 테두리
  • medium(default) : 중간테두리
  • thick : 두꺼운 테두리
  • 길이 : 테두리의 두께를 지정하는 값
  • inherit : 상속값

border-style

  • solid : 실선
  • dashed : 짧은 선들의 패턴
  • dotted : 점선
  • double : 두개의 선
  • groove : 안으로 조각되어진 것처럼 보임
  • ridge : 튀어 나와서 조각되어진 것처럼 보임
  • inset : 안으로 입체감을 느끼게 함
  • outset : 밖으로 입체감을 느끼게 함
  • none(default) : 테두리를 지정하지 않음
  • hidden : 숨김

border-color

  • 색상
  • transparent
  • border-top-color / border-right-color / border-left-color / border-bottom-color

속기형 작성

background

배경의 속성을 지정합니다.

background-color

  • 색상값:#fff, rgb, hsl, blue
  • transparent(default) : 투명도
  • inherit : 상속값

background-image

  • url : 배경 이미지 경로
  • none : 이미지를 사용하지 않을 때
  • inherit : 상속값

background-repeat

  • repeat(default) : 배경이미지가 수직과 수평으로 반복
  • repeat-x : 배경이미지가 수평으로만 반복
  • repeat-y : 배경이미지가 수직으로만 반복
  • no-repeat : 배경이미지가 반복없이 한번만 나타남
  • inherit : 상속값

background-attachment

  • scroll(default) : 배경이미지가 화면에 따라 스크롤
  • fixed : 배경이미지를 화면에 고정
  • inherit : 상속값

background-position

  • 위치 : left, right, top, bottom
  • inherit 안됨 : 상속값 안됨

position

배치 방법을 지정합니다.

static(default)

  • 일반적인 배치방법

relative

  • 상대적인 배치방법
  • top, left, bottom, right를 기준으로 배치
  • 요소 배치에 영항을 주지 않고 영역을 차지하지 않습니다.

absolute

  • 절대적인 배치방법
  • top, left, bottom, right를 기준으로 배치
  • 요소 배치에 영항을 주지 않고 영역을 차지하지 않습니다.

fixed

  • 고정적인 배치방법
  • top, left, bottom, right를 기준으로 배치
  • 요소 배치에 영항을 주지 않고 영역을 차지하지 않습니다.

font

폰트 속성을 지정합니다.

font-family

  • 글꼴 설정

font-style

  • 글꼴 스타일 설정
  • normal : 기본값
  • italic : 기울기
  • oblique : 기울기

font-variant

  • 글꼴 변형 지정
  • normal : 기본값
  • small-caps : 소문자 크기의 대문자를 말합니다.(한국어 설정 안됨)

font-weight

  • 글꼴의 굵기를 지정
  • normal : 기본, 글꼴 400과 같은 굵기
  • bold : 두껍게 지정, 글꼴 700과 같은 굵기
  • bolder : 더 두껍게 지정, 글꼴 900과 같은 굵기
  • lighter : 얇게 지정, 글꼴 100과 같은 굵기
  • 100~900 : 글꼴을 9단계의 굵기로 지정
  • inherit : 상속값

font-size

  • 폰트 사이즈 설정
  • 절대 크기 : xx-small, x-small, small, medium, large, x-large, xx-large
  • 상대크기 : larger, smaller
  • 길이 : em, px
  • 백분율 : %

text

텍스트 속성을 지정합니다.

text-align

  • 인라인 요소 수평 정렬을 지정합니다.
  • left : 왼쪽 정렬
  • right : 오른쪽 정렬
  • center : 가운데 정렬
  • justfy : 양쪽 정렬
  • inherit : 상속값

text-indent

  • 텍스트 요소 첫번째 줄 들여쓰기를 지정합니다.
  • 길이, 백분율
  • inherit : 상속값

text-decoration

  • 텍스트 요소의 밑줄, 윗줄, 가운데줄과 같은 장식적인 요소를 지정합니다.
  • none : 아무것도 지정하지 않은 기본 스타일
  • underline : 텍스트의 밑줄을 지정
  • overline : 텍스트의 윗줄을 지정
  • line-through : 텍스트의 가운데 줄 지정
  • blink : 텍스트를 깜빡거리게 지정
  • inherit : 상속값

text-shadow

  • 텍스트에 그림자 효과를 지정

text-transform

  • 텍스트의 대문자, 소문자를 지정합니다.
  • capitalize : 단어의 첫번째 글자를 대문자로 지정
  • uppercase : 모든 글자를 대문자로 지정
  • lowercase : 모든 글자를 소문자로 지정
  • none : 효과를 지정하지 않음
  • inherit : 상속값

text-spacing

  • 글자 사이의 간격을 지정합니다.

word-spacing

  • 단어 사이의 간격을 지정합니다.

white-space

  • 공백문자를 어떻게 다룰것인가를 정의합니다.
  • normal : 정상적으로 출력하도록 지정, 연속된 공백문자나 줄바꿈을 통합합니다.
  • pre : 연속된 공백 문자나 줄바꿈을 통합하지 않고, 원문 그대로 출력됩니다.
  • nowrap : 연속된 공백 문자는 통합하지만, 줄바꿈은 통합하지 않습니다.
  • inherit : 상속값

display

요소의 디스플레이 속성을 지정.

Value

  • block : 요소의 속성을 블럭으로 만듭니다.
  • inline : 요소의 속성을 인라인으로 만듭니다.
  • inline-block : 인라인 속성을 가지고 있으면서 블록 속성을 동시에 가집니다.
  • list-item : li가 갖는 기본 속성을 적용시킵니다.
  • none : 요소를 보이지 않게 해줍니다.(반대는block)
  • table : 요소의 속성을 테이블로 만듭니다.
  • inline-table : 요소의 속성을 inline-table로 만듭니다.
  • table-row-group : 요소의 속성을 table-row-group로 만듭니다.
  • table-colum : 요소의 속성을 table-colum로 만듭니다.
  • table-colum-group : 요소의 속성을 table-colum-group로 만듭니다.
  • table-header-group : 요소의 속성을 table-header-group로 만듭니다.
  • table-footer-group : 요소의 속성을 table-footer-group로 만듭니다.
  • table-row : 요소의 속성을 table-row로 만듭니다.
  • table-cell : 요소의 속성을 table-cell로 만듭니다.
  • table-caption : 요소의 속성을 table-caption로 만듭니다.

z-index

요소가 겹치는 순서를 지정합니다.

Value

  • 정수 값이 클수록 위에 표시됩니다.

list-style

목록 항목의 속성을 지정합니다.

list-style-type

  • disc : 속이 찬 원형 블릿
  • circle : 속이 빈 원형 블릿
  • square : 속이 찬 사각형 블릿
  • decimal : 1부터 시작하는 10진수
  • decimal-leading-zero : 01부터 시작하는 10진수
  • lower-roman : 로마 숫자의 소문자
  • upper-roman : 로마 숫자의 대문자
  • lower-greek : 고대 그리스 문자의 소문자
  • lower-alpha : 알파벳의 소문자
  • lower-latin : 라틴어의 소문자
  • upper-alpha : 알파벳의 대문자
  • hebrew : 헤브리이 숫자
  • katakana : 일본의 카타카나
  • none : 지정하지 않는다.

list-style-position

  • outside : 항목 표시자를 블럭 박스 밖에 위치시킵니다.
  • inside : 항목 표시자를 블럭 박스 안에 위치시킵니다.

list-style-image

  • url : 목록 항목 표시자로 사용될 이미지를 설정합니다.
  • none : 지정하지 않습니다.