CSS의 개요 및 특징
HTML 속성의 디자인적 한계를 극복하기 위해 CSS가 개발됐다.
디자인의 시간이 줄어들고, 문서의 로딩속도가 빨라 진다.
스타일 : 문서의 글꼴, 크기, 간격등의 출력형태(레이아웃)에 영향을 미치는 요소
스타일시트 : 스타일의 내용만을 별로로 모아서 head태그 영역에 선언한 형태
CSS 적용방법
1. 인라인방식(style속성을 이용)
특정한 태그에만 스타일을 적용시키고 싶을 때 사용한다.
형식) style="속성명:값;속성명2:값2~"
ex) style="font-family:궁서체;background:yellow;color:red"
동일한 태그에 같은 스타일을 하나하나 적용하는건 좋은 방법이 아니다.
동일한 태그에 임베디드방법과 중복이 되는 경우 인라인 방법이 우선순위가 높다.
2. 임베디드방식(시타일시트)
웹문서에서 공통으로 적용하고 싶은 스타일을 head영역에 선언해서 사용한다.
형식) <style="text/css"> 스타일 적용시킬 태그(=선택자),,,{속성명:속성값;~~}</style>
ex) <head><style type="text/css">h3,h4 {font-family:돋움체;color:red;font-size:27pt}</style></head>
Cascading(연쇄반응) Style Sheet
동일한 태그를 중복해서 스타일 적용하면 맨 마지막 스타일이 적용된다.
3. CSS링크코드
형식) <link rel="stylesheet" href="ooo.css">
동일한 CSS코드를 한 파일에 만들고 관리한다.
사용하고 싶을 html파일에 스타일태그 대신 링크태그를 넣어준다.
CSS 선택자
1. 태그선택자
형식)태그명
2. class선택자(<태그명 class="클래스명">)
서로 같은 태그를 구분해서 스타일을 적용시키는 방법이다.
형식) 태그명.클래스명
태그명을 생략하고 .클래스명 이라고 쓰면 모든 태그에 적용한다.
동일한 태그를 중복해서 스타일 적용하면 맨 마지막 스타일이 적용된다.
3. id선택자(<태그명 id="아이디명">)
전체문서에서 유일한 값을 부여해서 스타일을 적용시키는 방법이다.
형식) 태그명#아이디명
태그명을 생략해도 여러 태그에 중복이 불가능 하기 때문에 적용된다.
선택자 밑에 자식태그를 사용하고 싶으면
형식) 선택자 > 자식태그
우선순위
태그선택자 < class선택자 < id선택자
동일선택자면 맨마지막 스타일이 적용된다.
디자인 용도 태그의 특징
1. div
줄바꿈이 일어나는 태그(block태그)
영역을 설정 할 때 주로 사용한다.(width, height 속성을 주로 사용한다.)
한라인을 최대로 확대해서 사용한다.(block태그 특성)
2. span
줄바꿈이 일어나지 않은 태그(inline태그)
유효성검사 할 때 에러메세지 출력 할 때 사용한다. (width, height 잘 사용하지 않는다.)
글자가 있는 부분까지만 최소한으로 축소해서 사용한다.(inline태그 특성)
CSS 속성들
CSS 속성명:속성값;
font-family:글씨체;
font-size:글씨크기;
font-style:글꼴모양(italic);
text-decoration:글꼴장식(underline, overline, line-through);
text-align:수평정렬(left, center, right);
text-indent:들여쓰기할크기;
vertical-align:수직정렬(top, middle, bottom);
background:배경색;
color:글씨색;
display:화면에보여주는방식(block, inline, inline-block);
margin:밖의 여백(top right bottom left);
padding:안쪽의 여백(수치가 동일하다면 한번만 사용);
상위속성-하위속성:값;
border-style:선의종류(solid, double, dotted);
border-width:테두리크기(medium);
border-color:테두리색깔;
list-style:none; 리스트 항목의 마커를 없애는 속성
background-url:이미지 경로;
background-repeat:출력할좌표(no repeat, repeat-x, repeat-y, fixed)
backgound-position:이미지위치(left, top, bottom, right);
position:영역(default, absolute,relative,fixed);
float:영역(left, right);
CSS3 추가 속성
border-radius:모서리둥근크기;숫자가 커질수록 둥근값도 커진다
box-shadow:오른쪽크기 아래쪽크기 흐림정도 그림자색상;
text-shadow:수평 수직 흐림정도 그림자색상;
-webkit-animation-duration:작동시간(초);
-webkit-animation-name:애니메이션이름;
@-webkit-keyframes 만들고자하는 애니매이션이름 {from{}to{}}
CSS에서 사용되는 단위
'font-size:23' 같이 단위설정 안하면 html5에서는 적용 안된다.
1.절대단위->cm,mm,pt
2.상대단위=>px(모니터상의 점의갯수),%(모니터,핸드폰의 넓이),em
3.기본단위=>px(글자를 기준)=>1em=100%=16px
CSS의 포지션
position:영역을 설정할때 사용하는 속성 => width,height(영역의 크기)
1.default->static =>순차적으로 작성한 순서대로 화면에 보이게 배치하는 영역설정화면
2.absolute=>기준점(브라우저의 좌측상단)=>left,top(위치),width,height(크기)를 이용
3.relative=>상대적인 좌표배치방법=>실행결과가 static와 비슷(left,top이 설정되지않은 경우)
인접한 영역을 기준으로 삼기때문에 left,top을 이용(이동)=>크기를 지정
left,top을 부여해서 위치가 변경된 상태에서 이동
4.fixed=>고정된 위치에서 움직이지 않는 속성,위,아래 스크롤해도 고정된 위치에 있는 경우
'프로그래밍언어 > CSS' 카테고리의 다른 글
| [CSS] CSS 색상 속성 (0) | 2022.03.10 |
|---|---|
| [CSS] CSS 개요 (0) | 2022.03.09 |
| [CSS] CSS코드 파일로 빼기 (0) | 2020.12.02 |
| [CSS] Media query(미디어 쿼리) (0) | 2020.12.02 |
| [CSS] Grid(그리드) (0) | 2020.12.01 |
