20.12.28

• html을 보다 세련되게 표현
  1. 해당 태그에 직접 설정
  2. html문서내에 style태그로 따로 설정
  3. CSS파일을 외부에서 불러옴

• 특정한 요소를 가져오는 역할을 한다.

border
- border는 컨텐츠는 감싸는 라인(테투리)이다

- 보통은 one처럼 픽셀지정 , 실선지정 , 색지정을 한번에 한다
- border-width : 픽셀지정
- border-style : 스타일 지정
- solid : 실선
- dashed : 끊어지는 선
- double : 두줄
- dotted : 점선
- 상하좌우를 다 다르게 지정하고 싶을때 스타일을 쭉 써주면 12-3-6-9 순으로 지정 된다
- border-color : 색 지정
- http://html-color-codes.info
- 색 이름 사이트
- http://html-color-codes.info

- border-collapse
- collapse : 테이블의 테두리를 합친다
separate : 테이블의 테두리를 분리 시킨다
- padding : 테두리 안의 간격을 주고 싶을 때 사용한다
- margin : 테두리 밖의 간격을 주고 싶을 때 사용한다

background

- background-image : 배경에 넣을 이미지( url로 가져온다 )
- background-repeat : 반복해서 넣을 것인지 ( default : 반복 )
- background-position : 넣을 위치
- x와y좌표 %로도 가능
- 100% 100% : 맨 우측 맨 하단
- backgroud-size : px , %로 크기 지정 가능
- cover : 이미지가 잘리거나 변형되어도 화면을 채운다(default)
- contain : 비율에 벗어나지 않는 선에서 화면을 채운다

float

- float : 특정한 요소를 기준을 정해 세워 놓는 것을 의미한다.
- ul, div : 둘 다 block속성( 아래로 정렬 )
- float : left 옆으로 정렬

link

- a:link : 링크를 클릭하기 전 상태
- a:visited : 링크 페이지 방문 후
- a:hover : 링크에 마우스를 올렸을 때
- a:active : 링크를 눌렀을 때
- text-decoration : default값이 밑줄(underline)

width

- text-align : 텍스트를 가운데 정렬
- min-width : 화면 크기와 상관없이 최소 너비 지정
- max-width : 화면 크기와 상관없이 최대 너비 지정
- min,max를 ul에 적용하지않으면 창 크기에 따라 줄 바꿈이 되어 버린다.

display

- list-style-type : list는 기본적으로 텍스트 앞에 동그라미 아이콘이 생기는데 그걸 변경하거나 없앨 때 사용
- display
- block : 위에서 아래로 정렬
- inline : 좌에서 우로 정렬
- none : 해당 요소를 삭제한다. 브라우저에서는 처음부터 없었던 것으로 인식한다.
- visibility
- hidden : 있지만 보이지 않게 숨겨준다
- visible : 해당 요소를 보이게 한다 ( default )