반응형
CSS
cascade style sheets, HTML의 프리젠테이션을 제어하는데 사용
- cascade : 작은 폭포
- 모든 스타일 시트를 하나로 모아 일치하는 모든 선언들을 정렬(저자, 독자, 브라우저 순/ id>클래스>태그를 가지고 있으면 높은 우선순위 )한 후
충돌하는 규칙들에 대해 가장 나중에 나타나는것일 수록 중요함 → cascade
- style sheet : 스타일 문서
문법
ex) div{
width : 150px;
}
선택자{
속성 : 값;
}
외부 스타일 시트와 연결 하기
<link type= "text/css" rel= "stylesheet" herf= "lounge.css" >
link : 외부의 정보와 링크로 연결하기위한 태그
type= "text/css" : 이 정보의 유형은 css 스타일 시트임을 나타냄
rel= "stylesheet" : HTML 파일과 연결하려고 하는 것 사이의 관계를 명시
herf= "lounge.css" : 스타일 시트의 위치
선택자
- tag명 선택자
p{ }
: p태그의 스타일을 정의
- 클래스를 위한 선택자 생성
p.greentea{ }
클래스명이 greentea인 p태그의 스타일을 정의(.greentea : 클래스명이 greentea인 태그의 스타일을 정의)
※ 엘리먼트들은 한 개 이상의 클래스를 가질 수 있음
- id가 있는 선택자 생성
p#footer{ }
id가 footer인 p태그의 스타일을 정의 (#footer : id가 footer인 태그의 스타일을 정의)
- 자손 선택
div h2{ }
div의 자손인 h2의 스타일정의
#elixirs h2{ }
elixirs라는 id를 가진 엘리먼트의 자손인 h2의 스타일정의
색 나타내기
body : rgb(100% 100% 100%);
% : 빨간색과 초록색, 파란색의 비율을 명시(흰색이 출력)
body : rgb(255 255 255);
숫자 : 색을 명시하기위한 측정단위(흰색이 출력)
body : #CC6600;(오랜지색 출력)
hex코드 : 2자리씩 끊어서 16진수를 10진수로 바꾸면 숫자로 명시된 측정단위가 생성
박스 모델(Box model : CSS가 엘리먼트를 보는 방법)
.png)
- border의 속성
border-color : #FFFFFF;
border-width : 0px;
border-style : solid;
border-top-color : white;
border-rigth-width : medium;
border-bottom-style : dashed;
...
- padding의 속성
padding-top : 10px;
padding-right : 20px;
padding-bottom : 30px;
padding-left : 40px;
padding : 10px 20px 30px 40px;
- margin의 속성
margin-top : 10px;
margin-right : 20px;
margin-bottom : 30px;
margin-left : 40px;
margin : 10px 20px 30px 40px;
span과 div
<span></span> : 인라인 콘텐츠를 논리적으로 분리하는 방법가
<div></div> : 블록 수준의 콘텐츠를 논리적으로 분리하는 방법
의사-클래스(a태그 링크, a태그 방문, a태그 마우스오버)
- 가짜 클래스(클래스인것 처럼 스타일 명시)
a:link{
}
방문하지 않았을때 링크
a:visited{
}
방문 했을때 링크
a:hover{
}
마우스를 링크에 올려뒀을때
유용한 속성
cursor : poniter; → 마우스 모양을 손가락 모양으로 변경
!important; → CSS 우선 적용
Tab효과
<div style= "margin-left:32px;">내용 </div>
<pre></pre> 태그(<br/>이 들어감)
엘리먼트의 전체 너비
콘텐츠 영역의 너비 + 패팅 + 테두리+ 마진의 너비
엘리먼트들의 흐름
- 블록 엘리먼트
· 각각의 엘리먼트 사이에 라인 브레이크를 가지고 위에서 아래로 흐름
· 두개의 블록 엘리먼트를 위/아래로 겹쳐 놓으면, 위의 margin-bottom과 아래 margin-top을 합치고 합쳐진 마진의 높이는 두개중 큰 마진의 높이가 됨.
- 인라인 엘리먼트 : 수평방향으로 왼쪽에서 오른쪽으로 위에서 아래로 흐름
레이아웃
float 속성(liquid 레이아웃)
- 일반적인 엘리먼트들의 흐름으로부터 float속성의 엘리먼트를 제거 시키고 뜨게 만듦.
- 엘리먼트들의 흐름에 영향을 받지 않기 때문에 겹치는 문제가 발생함
- float된 엘리먼트의 너비(width)만큼 일반적인 엘리먼트들에게 margin을 부여한다.
- float된 엘리먼트들과의 해상도변경시 겹치는 부분은 clear : right; 속성을 사용
- 사용법
margin : 0px 10px 10px 10px;
width : 280px;
float : right;
고정된 레이아웃(frozen 레이아웃)
- <body>의 바로 밑에 div를 생성한 후 width 속성을 부여
jello 레이아웃
- 고정된 레이아웃에 margin-left : auto;와 margin-right : auto;속성을 부여하면 콘텐츠가 중앙에 오게됨.
position속성(absolute, fixed, relative 포지셔닝)
- absolute 포지셔닝
· position : absolute;
· 일반적인 엘리먼트들의 흐름으로 부터 position속성의 엘리먼트를 제거 시킴.
· top과 right속성을 이용하여 페이지의 상단과 오른쪽으로 부터의 거리에 위치 시킨다.
· width속성을 이용하여 넓이를 지정한다.
· top, right, bottom 혹은 left 속성이 명시된 픽셀에 따라 엘리먼트가 위치함.
· 해상도변경시 엘리먼트들과의 겹치는 오류가 생김.
· 가장 가까운 조상 엘리먼트에 대해 상대적인 위치를 명시함.
- fixed 포지셔닝
· position : fixed;
· 페이지가 아닌 윈도우의 가장자리로 부터의 거리에 위치 시킴
- relative 포지셔닝
· position : relative;
· 흐름안에서 엘리먼트를 유지시킬수 있고, 그것만의 예약된 공간을 가짐
· 가장 가깝게 포함된 블록드로부터의 절대적 좌표가 아닌 엘리먼트의 실제 위치로 부터의 거리리에 위치시킴.
반응형
'개발의 흔적 > Front' 카테고리의 다른 글
| [jQuery] 여러 건의 ajax 통신 (2) | 2018.08.29 |
|---|---|
| 웹 접근성 점검 규칙(웹 접근성 오류 해결 방안) (1) | 2016.03.22 |
| HTML정리 (0) | 2016.02.22 |
| JQuery 선택자의 종류(HTML 태그명, ID명에 접근하는 방법) (0) | 2016.02.01 |
| input 박스 name과 id의 차이 (0) | 2016.02.01 |