CSS
- HTML문서에 디자인(스타일)을 입히는데 사용되는 언어
- 배경, 색상, 글꼴 등 스타일로 정의해서 문서 전체 또는 일부에 적용가능하다
- 애니메이션 효과도 가능하며 반응형 웹사이트 구현가능하다
CSS를 HTML에 적용하는 방법
1.외부문서(*.css)를 HTML문서에 포함시키는방법 -----가장 좋은방법
<head>
<link rel = “stylesheet” type = “text/css” href=“파일.css””>
</head>
2.HTML문서에 <style>태그안에 스타일을 정의
3.태그 안에 스타일을 정의
Style의 상속 - inherit & initial
-자손 태그는 조상 태그의 속성을 물려받는다. (inherit)
<div style="color:green; background: hotpink" >
<h1>Hello - 조상(div)태그의 속성을 물려받음 (color:green)</h1>
</div>
-속성 값을 initial로 지정하면 기본값이 적용된다. (initial)
<div style="color:green">
<h1 style="color:initial"> initial로 지정하면 조상태그의 속성을 물려받지않고 기본값으로.. </h1><br>
</div>
CSS의 단위
Em, ex, % - 가변길이 (반응형으로 가능하다)
Cm, rmm, in, px, pt - 고정길이
CSS Backgrounds
- background-color : 배경색
- background-image : 배경에 사용할 이미지
- background-repeat : 배경이미지 반복 형태 지정
- background-size : 배경이미지 크기
- background-attachment : 배경 이미지의 부착 형태 지정 - 스크롤하더라도 고정
- background-position : 배경 이미지의 위치 지정
Padding
-위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 경계에 개별적 적용가능
- { padding : 100px(top), 100px(right) ,100px(bottom) ,100px(leift) } 로 간략하게 표현가능
Borders
- 위, 아래, 왼쪽, 오른쪽 경계에 개별적 적용가능
- border-style : ; 경계선의 종류 (solid, dotted, double, groove ...)
- border-width : 경계선의 두께
- border-color : 경계선의 색깔
- border-radius : 경계선의 모서리 반경(둥군 모서리)
Margin
- 위, 아래, 왼족, 오른쪽 경계에 개별적 적용가능
- { margin : 100px(top), 100px(right) ,100px(bottom) ,100px(leift) } 로 간략하게 표현가능
- margin : auto 자동계산(좌우여백 같게)
Box-sizing 속성
1) content-box : padding, border이 포함되지 않은 크기 (계산이 어려움)
2) border-box : padding, border도 포함된 크기 (계산이 쉽다)
Text CSS - 텍스트 속성변경
- 텍스트의 형식을 다양하게 지정할 수 있는 속성을 제공
- text-align : 텍스트 위치지정 ( center, left, right...)
- text-decoration : 텍스트에 줄긋기 (text-decoration : none)
- line-heigth : 줄간격 (line-height: normal)
- text-overflow : 텍스트가 영역에서 넘칠때 처리할 방식을 정해줌 (clip, ellipsis)
- vertical-align : 수직정렬 ( top,bottom, middle)
-Font
- 글자체의 종류, 굵기, 크기, 스타일을 지정
- font-family : 폰트 종류
- font-weight : normal, bold
- font-style : normal, italic, ...
- font-size : 폰트 크기 지정, px(고정길이), em(가변길이)
Icons
- https://www.w3schools.com/icons/icons_reference.asp에서 필요한 것 찾아쓸 수 있다.
- Font Awesome Icons 검색해서 사용가능
- Bootstrap Icons 검색해서 사용가능
Links - 링크<a>에 스타일 적용하기(아래의 순서를 지켜야함)
1. a:link 아직방문하지 않은 링크
2. a:visited 방문한 적 있는 링크
3. a:hover 사용자가 마우스를 올려놓은 링크
4. a:active 클릭되었을 때의 링크
List - <ul> , <ol> 에 스타일 지정하기
- list-style-type : 불릿의 타입 정의가능, (세모,네모,동그라미..)
- list-style-image : 불릿으로 이미지 사용가능
- list-style-position : 들여쓰기, 내어쓰기
Layout - block요소, inline요소, inline-block요소
-block 요소 : 항상 새로운 라인에서 시작, 폭 전체를 차지 {display : block}
-inline 요소 : 새로운 라인 x, 필요한 만큼의 영역만 차지 {display : inline}
-inline-block 요소 : margin의 차이가있음. 균일한 폭과 높이로 맞출 수 있음
{display : inline-block}
*block*
*inline*
*inline-block
Layout - display & visibility
display:none - 차지하는 영역자체가 없어진다.
display:block
visibility : hidden - 차지하는 영역 유지하며 안보이게 한다
visibility : visible
Layout - position (상속되지않음)
-position의 속성은 4가지 값으로 지정할 수 있다.
1.static : default값
2.fixed : 고정위치. 브라우저의 크기변경이나 스크롤에도 같은 위치를 유지
3.relative : 상대위치
4.absolute : 조상으로부터 상대위치에 배치
--> 겉을 relative로, 안쪽을 absolute로 지정한다.
Layout - overflow
-요소의 영역을 벗어나는 컨텐츠를 어떻게 처리할 것인지를 지정
Visible : 넘친 부분을 잘르지 않고 요소 영역을 벗어나게함
Hidden : 넘친 부분을 잘름
Scroll : 넘친부분이 잘리지만 스크롤바가 생김
Auto : 넘친부분이 생기면 스크롤바 생김
--> x,y축의 overflow속성을 따로 지정가능하다.
Layout - float & clear -
- float 속성 : 요소를 서로 어울려서 쓰게할 수 있다.(어울림) (float:left,right)
--> 리스트 태그를 수평방향으로 변경할 때 자주 사용한다.
- clear 속성 : 어울린 요소를 다른 요소들이 감싸지 않도록 한다. (float의 반대)
'프로그래밍 > HTML.CSS' 카테고리의 다른 글
| CSS실습 - 예제페이지 만들어보기 (0) | 2018.06.28 |
|---|---|
| CSS 선택자 (0) | 2018.06.28 |
| HTML - 첫번째 수업 (0) | 2018.06.26 |
| 웹표준 - HTML (0) | 2018.06.26 |
