CSS 기본 설정
CSS
- HTML5로 만든 틀을 꾸미는 것을 담당
- CSS로 HTML을 꾸밀 때 꾸밀 객체를 지정하기 위해 HTML 태그에 id 및 class를 달아놓아야 합니다.
ex) <body id="bodycss"></body>
- 기본적으로 <head> 태그 안에다가 <style></style> 태그를 만들어 그 안에 css 설정하는데, 작업이 긴경우
따로 css파일을 만들어서 사용할 수 있습니다.
<link rel="stylesheet" type="text/css" href="css 파일경로"/>
기본 설정들
* width : 영역의 가로값
* height : 영역의 높이값
* float : 정렬 (right, left)
* margin : 여백
ex) margin : 100px 50px 100px 50px (시계방향으로 맨왼쪽부터 위, 오른쪽, 아래, 왼쪽)
* font-size : 폰트 사이즈
* font-weight : 폰트 굵기
* line-height : 행 높이 간격 조정
* font-family : 폰트 종류 설정
* text-align : 글씨 좌우 정렬 (right,left,center)
* border-style:solid; (실선 테두리)
:dotted; (짧은 점선 테두리)
:dashed; (긴 점선 테두리)
:double; (이중 실선 테두리)
:groove; (움푹 들어간 테두리)
:ridge; (앞으로 넘어가는 테두리)
:inset; (박스 전체가 움푹 들어간 테두리)
:outset; (박스 전체가 튀어나온 것 같은 테두리)
* text-decoration:line-through; (중앙에 밑줄)
:overline; (위에 밑줄)
:underline; (아래 밑줄)
* border-width:0px 0px 0px 0px; (위, 오른쪽, 아래, 왼쪽 테두리 두께)
* border-color : 테두리 색깔 지정
* padding:0px 0px 0px 0px;
- 컨텐츠 영역에 내부 간격을 벌릴 때 사용
- 패딩을 주면 밀려난 만큼 컨텐츠 영역이 커짐
* postion:fixed;
- 다른 태그에 영향을 주지 않음
- 그자리에 고정시켜버림
- 스크롤 내려도 고정된 위치에 따라다님
- 컨텐츠가 인라인요소처럼 적용됨
- 기준점 : 최상단 좌측
* postion:static;
- 다른 태그에 영향을 줌
- 좌표가 움직이지 않음 (위치 이동시킬 수 없음)
* position:absolute;
- 다른 태그에 영향을 주지 않음
- 스크롤 돌려도 따라다니지 않음
- 기준점 : 최상단 좌측
* position:relative;
- 다른 태그에 영향을 줌
- 기준점 : 이전 태그 끝난 지점 좌측
* z-index : 컨텐츠 우선순위 결정, 숫자가 클수록 우선순위가 높음
* position 우선순위 : static < fixed < absolute < relative
'Programing > other language' 카테고리의 다른 글
| mysql 설치 및 인증방법 (0) | 2016.12.16 |
|---|---|
| javascript 함수 모음 (0) | 2016.12.15 |
| javascript 변수/연산자/함수/배열 (0) | 2016.12.15 |
| html <form>태그/<input>태그 (0) | 2016.12.13 |
| html 기본 구성 및 자주 사용하는 태그 (0) | 2016.12.12 |