css 속성

Font Tag

폰트는 브라우저 마다 다르기때문에 강제 해야 한다.

제목 : h1 ~ h6 숫자가 높을수록 글씨크기가 작아진다.

내용 : p 단락 br 개행 hr 수평줄

앵커 태그(a) : 웹표준에 따르면 href 값이 있어야 하기때문에 빈값은 # 로 채운다.

href 값에 특정 태그가 가지고 있는 id 값을 입력해주면 해당 태그로 이동하는 역할도 한다.

글자 형태 : b 굵은 i 기울어진 small 작은 sub 아래에붙는 sup ins 위에붙는 del 가운데줄

List Tag

기본목록 : ul 순서가 없는 ol 순서가 있는 li 목록 요소

정의목록 : dl 정의목록 dt 정의용어 dd 정의설명

Input Tag

<form action="" method="" enctype="">
    <input type="button" name="">
    <input type="checkbox" name="">
    <input type="file" name="">
    <input type="hidden" name="">
    <input type="image" name="">
    <input type="password" name="">
    <input type="radio" name="">
    <input type="reset" name="">
    <input type="submit" name="">
    <input type="text" name="">
    <!--html 5 태그-->
    <input type="color" name="">
    <input type="date" name="">
    <input type="datetime" name="">
    <input type="datetime-local" name="">
    <input type="email" name="">
    <input type="tel" name="">
    <input type="time" name="">
    <input type="url" name="">
    <input type="month" name="">
    <input type="number" name="">
    <input type="range" name="">
    <input type="search" name="">
    <input type="week" name="">
</form>

ETC Tag

table 태그 내부에 넣을수 있는 태그

caption 캡션 colgroup > col 열옵션 설정 thead, tbody, tfoot 3분할

img 태그

alt 이미지가 없을때 나오는 글자 지정

label 태그

input 태그를 설명하는데 사용한다. for 속성을 이용하고 id값을 이용해 접근한다.

textarea 태그

cols 태그의 너비 rows 태그의 높이

select 태그

select > option 단일 선택(기본)

select 에 multiple="multiple" 속성을 추가하면 다중선택

select > optgroup > option 옵션 그룹이 있는 선택

fieldset, legend 태그

form > fieldset > legend table 폼에 태두리가 생긴다.

Space Division Tag

div : block 형식으로 공간 분할

span : inline 형식으로 공간 분할

block 형식 : div, h1~h6, p, ul(li), table, form

inline 형식 : span, a, input, 글자형식

Semantic Tag

Structure : header, nav, aside, section, article, footer

CSS Selector

문자열 속성 선택자

• 선택자[속성~=값] : 특정 값을 단어로 포함하는 태그
• 선택자[속성|=값] : 특정 값을 단어로 포함하는 태그
• 선택자[속성^=값] : 특정 값으로 시작하는
• 선택자[속성$=값] : 특정 값으로 끝나는 태그
• 선택자[속성*=값] : 속성안에 값이 특정 값을 포함하는 태그

동위 선택자

동적 레이아웃 구성시 많이 사용됨

• 선택자A + 선택자B : 선택자A 바로 뒤에 위치하는 선택자B 를 선택한다. (단일)
• 선택자A ~ 선택자B : 선택자A 뒤에 위치하는 선택자B 를 선택한다. (다중)

반응과 상태 선택자

• :active
• :hover
• :checked
• :focus
• :enabled
• :disabled

구조 선택자

nth로 시작하는 태그는 인덱스가 시작하는 0 부터 계산해서 수식을 넣을수 있다.

예를들어 2n + 1 넣게 되면 1,3,5,7,9 번째 자식 요소를 선택한다.

일반 구조

• :first-child
• :last-child
• :nth-child(수열)
• :nth-last-child(수열)

형태 구조

• :first-of-type
• :last-of-type
• :nth-of-type(수열)
• :nth-last-of-type(수열)

문자 선택자

시작 문자

• ::first-letter
• ::first-line

전후 문자

• ::after
• ::before

반응문자

• ::selection 사용자가 드래그했을때

링크 선택자

• :link
• :visited

부정선택자

• :not

CSS3 Style Attribute Basic

크기

%와 em은 상대적인 크기를 지정하고 px 는 절대적인 크기를 지정한다.

• % : 기본값 100%
• em : 배수를 나타내는 단위 즉 1em = 100%
• px : 절대적으로 크기 지정

전체 폰트 크기에 절대값을 지정하고 각각의 태그에 상대 크기를

지정하는 방법은 많이 사용되는 태크닉 이다.

*  { font-size: 12px  }
h1 { font-size: 3.0em }
h2 { font-size: 1.5em }

크기 단위를 0 으로 입력하는 경우 단위를 입력하지 않아도 된다.

색상

• HEX코드 : #000000
• RGB : rgb(r,g,b)
• RGBA : rgba(r,g,b,a) a는 알파값으로 0.0~1.0 값을가짐 투명도 설정
• HSL : (hue,saturation,lightness) 두번째와 세번째 변수는 %를 이용해야함

파일용량을 미세하게 줄일수 있기때문에 HEX 코드를 많이 사용한다.

가시 속성

display, visibility, opacity

태그가 화면에 보이는 방식을 지정하는 속성이다.

display

모든속성을 브라우저가 전부 지원하진 않는다.

none, block, inline, inline-block을 사용할수 있다.

inline 블럭은 width, height 지정할수없고 margin 속성은 left 와 right만 지정

가능한 반면 inline-block 은 inline 에서 되지않는 모든것이 가능하다.

visibility

대상을 보이거나 보이지않게 한다.

hidden, visible, collapse(테이블 숨김)을 사용할수 있다.

display 는 태그가 화면에서 제거되지만 visibility 는 보이지만 않을뿐 영역이 그대로 살아있다.

opacity

0.0 ~ 1.0 사이에 값으로 태그의 투명도를 지정해준다.

박스 속성

border, margin, padding

box-sizing

content-box 와 border-box 를 값으로 지정할수 있는데 차이점이 매우 중요하다.

content-box : 지정한 폭과 너비에서 마진 패딩 보더값을 모두 더한값을 영역으로 한다.

100px x 100px div 태그일때 padding 10px margin 10px border 5px 일 경우 div 영역은 130px x 130px 최종영역은 150px x 150px 가 된다.

border-box : 지정한 폭과 너비에 패딩 보더값이 모두 포함되어 있다.

100px x 100px div 태그일때 padding 10px margin 10px border 5px 일 경우 div 영역은 100px x 100px 최종영역은 120px x 120px 가 된다.

border

border-width:thick;
border-style:dashed;
border-color:black;

한줄 입력 : border : 높이 스타일 컬러

border-left border-top 이런 방식으로 부분 스타일도 지정할수 있다.

border-radius

테두리를 둥글게 만든다.

border-radius: 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래

백그라운드 속성

background-size

contain 은 너비를 100% 한것과 같은 효과

cover 는 높이를 100% 으로 지정한 것과 같은 효과

background-repeat

이미지 반복 속성 으로 x 또는 y축으로 반복할지 지정 가능

기본값은 repeat 으로 반복을 원치않으면 no-repeat 지정 가능

background-attachment

배경이미지를 어떤방식으로 화면에 붙일 것인지 지정하는 속성 이다

scroll 이 기본 속성이고 스크롤이 내려가면 사라진다.

fixed 는 스크롤이 내려가도 이미지가 항상 고정되있다.

background-position

이미지의 위치를 지정할수 있다.

폰트 속성

font-family

사용자의 컴퓨터에 깔린 폰트를 사용한다.

폰트가 없을수도 있기때문에 ,로 구분해서 여러개를 지정한다.

보통 마지막에는 serif(명조체) 또는 sans-serif(고딕체) 를 지정한다.

line-height

글자의 높이를 지정한다.

글자를 수직 수평 정렬할때 사용한다.

text-align

텍스트를 정렬한다.

inline 속성은 너비가 없기때문에 정렬이 안된다.

 

태그는 정렬되지만 태그는 정렬이 안된다.

text-decoration

앵커태그의 및줄을 제거하는 역할을 한다.

위치 속성

절대좌표는 고정된 크기를 만들때 사용하고 상대좌표는 이와 반대 개념 이다.

position

• static : 태그가 위에서 아래로 순서대로 배치된다
• relative : 초기 위치 상태에서 상하좌우로 위치를 이동한다
• absolute : 절대적 위치 좌표 설정
• fixed : 화면을 기준으로 절대적 위치 좌표를 설정
• z-index : 앞에 올지 뒤에올지 우선순위 숫자가 클수록 앞에 위치한다.

position 속성을 absolute로 주면 부모 태그가 영역을 차지하지 않는다.

이러한 문제 때문에 사용해야 하는 공식이 있다.

자손의 포지션 속성을 absolute로 적용하면 부모의 포지션을 relative로 적용 해야한다.

position 과 함께 쓰이는 속성은 left, right, top, bottom 이 있다.

overflow

내부요소가 부모의 범위를 벗어날때 어떻게 처리할지 결정한다

• hidden : 영역을 숨긴다.
• scroll : 스크롤을 만든다 overflow-x or y 등으로 방향지정가능

float

left 와 right 속성이 있다.

부유하는 대상을 만들때 사용하는 스타일 속성이다.

자손에 float 적용하려면 overflow 속성을 hidden으로 적용한다.

이와 대체되는 방법으로 Footer 속성에 clear : both 를 사용하기도 한다

이방식을 one true layout 방식이라 한다

그림자 속성

• text-shadow : 오른쪽 아래 흐림도 색상
• box-shadow: 오른쪽 아래 흐림도 색상

그림자 속성은 , 구분해서 중첩 사용이 가능하다.

css3generator에서 만들어서 사용 하도록 한다.

filter 속성은 ie8 이하에서 그림자 만들수있게해주는 속성이다.

밴더 프리픽스

공급업체 접두사를 가르킨다.

마소, 모질라, 구글, 애플, 오페라에서 제공하는 실험적인 기능을

사용할때 사용한다.

prefix-free플러그인 을 사용 한다.

그레디언트

UCGG에서 만들어서 사용하자.