CSS REFERENCE
CSS란?
- CSS(Cascading Style Sheets)는 HTML을 꾸며주는 스타일 시트입니다. 즉 웹 페이지를 꾸미고, 디자인 작업을 도와주는 언어입니다.
CSS 선택자(Selector)
- id 선택자 : 하나의 태그만 식별하기 위한 방법이며, "#"으로 표시합니다.
- class 선택자 : 여러개의 태그에 중복 사용이 가능하며, "."으로 표시합니다.
CSS 적용 방법
- 인라인 방식 : 태그 요소에 직접 사용하는 방법
- 스타일 태그 방식 : style태그를 지정하고 사용하는 방법
- 외부 파일 방식 : 경로를 설정하고 사용하는 방법
float:left로 인한 영역 깨짐 방지법
- 깨지는 영역에 똑같이 float:left를 사용합니다.
- 깨지는 영역에 똑같이 clear:both를 사용합니다.
- float:left를 사용한 상위 영역한테 overflow:hidden을 사용합니다.
- float:left를 사용한 상위 영역한테 clearfix를 사용합니다.
컨텐츠 요소를 보이지 않게 하는 방법
- display:none; ↔ display:block; 영역이 사라짐, 모션이 불가능함
- visibility:hidden; ↔ visibility:visible; 영역이 유지됨, 모션이 불가능함
- opacity:0; ↔ opacity:1; 영역이 유지됨, 모션이 가능함
- width:0; height:0;
CSS
width
- css 의 가로값을 뜻하고 가로값이 필요한 경우 입력합니다.
height
- css의 세로값을 뜻하고 세로값이 필요한 경우 입력합니다.
background-color
- background-color 속성은 백그라운 색을 설정합니다.
background
- background-attachment: 배경이미지 고정 여부를 설정
- background-attachment : scroll; (기본값)
- background-attachment : fixed;
- background-attachment : local;
- background-blend-mode*: 배경 이미지를 혼합 햇을 때의 상태를 설정
- background-clip*:백그라운드 색의 영역을 설정
- background-color:백그라운드 색을 설정
- background-color : 색상코드(헥사코드, rgb, rgba)
- background-color : transparent(기본값)
- background-image:백그라운드 이미지를 설정
- background-image : url()
- background-image : url(), url()........(css3)
- background-image : none(기본값)
- background-origin:*백그라운드 이미지 영역을 설정
- background-position:백그라운드 위치 설정
- background-position : left top;
- background-position : center center;
- background-position : right bottom;
- background-position : 10px 20px;
- background-repeat:백그라운드 이미지 반복 여부 설정
- background-repeat : repeat(기본값)
- background-repeat : repeat-x
- background-repeat : repeat-y
- background-repeat : no-repeat
- background-size*:백그라운드 이미지 사이즈 설정
- background-size : cover;
- background-size : contain;
- background-size : 10px 20px;
- background-size : auto(기본값)
- *표시는 css3에서 부터 나온 것
float
- float 속성은 블록요소의 정렬 상태를 설정합니다.
margin
- margin은 요소의 바깥쪽 여백을 설정합니다.
- margin-top:10px;
- margin-righth:11px;
- margin-left:12px;
- margin-right:13px;
- margin:10px 11px 12px 13px; (위/오른쪽/아래/왼쪽)
- margin:10px 11px 12px; (위:10px/오른쪽,왼쪽:11px;/아래:12px)
- margin:10px 11px; (위,아래:10px/오른쪽,왼쪽:11px)
- margin:10px; (위/오른쪽/아래/왼쪽:10px)
padding
- padding 요소의 안쪽 여백을 설정합니다.
- padding-top:10px;
- padding-righth:11px;
- padding-left:12px;
- padding-right:13px;
- padding:10px 11px 12px 13px; (위/오른쪽/아래/왼쪽)
- padding:10px 11px 12px; (위:10px/오른쪽,왼쪽:11px;/아래:12px)
- padding:10px 11px; (위,아래:10px/오른쪽,왼쪽:11px)
- padding:10px; (위/오른쪽/아래/왼쪽:10px)
text-overflow
- 박스 안에 내용이 넘칠 때 텍스트를 어떻게 처리할지 지정하는 속성. 다음 2가지를 모두 충족할 경우에만 적용됨.
- overflow 속성값이 hidden, scroll, auto일때(visible 제외)
- white-space:nowrap(텍스트 길어도 줄바꿈 되지 않음) 또는 텍스트가 다음 줄로 이동하지 않는 비슷한 경우
- text-overflow속성값
- clip 기본값.텍스트를 자름.
- ellipsis 잘린 텍스트를 생략 부호(...)로 표시함.
- string 잘린 텍스트를 지정한 문자열로 표시 예:div{text-overflow:"---";}
white-space
- 요소 안에 공백 처리를 어떻게 할지 지정하는 속성.
- white-space 속성값
- normal 기본값, 공백을 여러개 넣어도 공백 1개만 표시, 글이 길어지면 텍스트가 자동 줄바꿈 됨(wrap)
- nowrap 공백을 여러개 넣어도 1개만 표시, 텍스트가 길어도 줄바꿈 되지 않고 같은 줄에 계속 표시
- pre 공백을 코드에 있는 그대로 표시함. pre태그처럼 행동함. 코드에 줄바꿈이 없다면 줄바꿈이 되지 않음
- pre-wrap 공백을 코드에 있는 그대로 표시함. 코드에 줄바꿈이 없어도 자동 줄바꿈이 됨
- pre-line 공백을 여러개 넣어도 1개만 표시. 코드에 줄바꿈이 없어도 자동 줄바꿈이 되며, 코드에 줄바꿈이 있을 때도 그대로 표시
overflow
- 요소의 박스에 내용이 더 길 때 어떻게 보일지 선택하는 속성
- overflow 속성값
- visible 기본값으로 내용이 더 길어도 그대로 보임
- hidden 내용이 넘치면 자름. 자른 부분은 보이지 않음
- scroll 내용이 넘치지 않아도 항상 스크롤바가 보임
- auto 내용이 잘릴 때만 스크롤바가 보임
- overflow-x, overflow-y
- overflow-x 속성은 x축, 즉 왼쪽과 오른쪽의 내용이 넘칠때 어떻게 보여줄지 지정
- overflow-y 속성은 y축, 즉 위와 아래의 내용이 넘칠때 어떻게 보여줄지 지정
opacity
- 투명도를 지정하는 속성
- 1은 완전히 불투명이고, 0은 완전히 투명한 단계
- 기본값은 1(100% 불투명)
font-size
- 글꼴 크기를 지정할 때 사용하는 속성
- font-size 속성값
- pixel(px) 고정된 크기 단위.(주로 컴퓨터 화면에서 사용됨) 1px은 컴퓨터 화면에서 점 1개와 같음. 크기가 조정이 안됨
- point(pt) 고정된 크기 단위.(주로 인쇄매체에서 사용됨) 크기 조정이 안됨
- em 웹 문서에서 사용되는 단위로, 컴퓨터 외 모바일 등 다른 장치에서도 크기 조정이 가능함. 1em은 12pt, 16px 100%와 같음
- percent(%) em과 비슷하게 다른 장치에 상대적으로 크기 조절이 가능함
font-weight
- 글꼴의 굵기를 지정하는 속성
- font-weight 속성값
- normal 기본값
- bold 진하게 표시
- 100~900 숫자 별로 글꼴 굵기를 지정할 수 있음
- bolder 상위 요소에서 상속된 굵기보다 더 진하게
- lighter 상위 요소에서 상속된 굵기보다 더 흐리게
visibility
- 어떤 요소를 보이게 할지 숨길지를 결정함
- visibility 속성값
- visibility:visible; 기본값으로 요소가 그대로 보임
- visibility:hidden; 요소가 보이지 않지만, 여전히 그 공간을 차지하며 투명하게 남음
- visibility:collapse; table 태그에서만 사용할 수 있는 값으로, 선택 테이블의 행과 열을 숨김
cursor
- 마우스포인터가 요소 위에 있을 때 표시되는 마우스 커서 모양을 지정
- 속성값은 default, auto, crosshair, pointer, move, progress, help, text, url, wait, e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, w-resize, inherit, initial
display
- display와 visibility의 차이
- display 속성은 요소를 어떻게 표시할지를 선택
- visibility 속성은 요소를 보일지 말지 결정하는 속성
- display는 요소의 종류를 선택하는 속성이다
- display:inline; 기본값으로, 요소를 inline 요소처럼 표시함. 따라서 앞뒤로 줄바꿈 되지 않음
- display:block; 요소를 block 요소처럼 표시함. 따라서 요소 앞 뒤로 줄바꿈 됨
- display:none; 박스가 생성되지 않음. 따라서 공간을 차지하지도 않음
- display:inline-block 요소는 inline인데 내부는 block처럼 표시함. 즉, 박스 모양이 inline 처럼 옆으로 늘어섬
vertical-align
- 인라인 요소와 인라인 블록 요소를 수직 정렬할 때 사용
- vertical-align 속성은 다음과 같은 특징이 있음
- inline이나 inline-block 요소에만 적용됨. 따라서 block요소인 div는 이 속성을 썼을 때 작동되지 않음
- 요소 자체만을 정렬하고, 내용에는 영향을 미치지 않음
- table cell에 적용할 떄는 내용에 영향을 미침
- vertical-align은 정렬하려는 요소를 다른 인라인 요소에 상대적으로 정렬함. 그래서 같은 줄에서 인라인 요소의 크기에 따라 높낮이가 달라질 수 있고, 그 줄에 있는 line-height 설정에 따라서도 달라질 수 있음
- inline요소 속성값
- baseline 기본값으로 부모 요소의 기준선에 맞춤
- sub 부모의 아래첨자 기준선에 맞춤
- super 부모의 위첨자 기준선에 맞춤
- text-top 요소의 맨 위를 부모 font의 맨 위에 맞춤
- text-bottom 요소의 맨 아래를 부모 font의 맨 아래에 맞춤
- middle 부모 요소 중앙에 위치
- top 요소의 맨 위를 줄에서 가장 큰 요소의 맨 위에 맞춤
- bottom 요소의 맨 아래를 줄에서 가장 낮은 요소에 맞춤
- 길이값(px,cm등) 0px는 baseline과 같은 값
- %백분율 line-height의 백분율, 0%는 baseline과 같은 값
- table cell 속성값
- top 테이블 칸에서 상단 padding을 가로 줄의 맨 위에 맞춤
- middle 테이블 칸에서 padding box를 중앙에 위치
- bottom 테이블 칸에서 하단 padding 가로 줄에서 맨 아래에 맞춤
- *음수값 허용
text-transform
- text-transform속성은 문자를 대문자로 전환하는 속성이다
- text-transform속성값
- none 기본값으로 텍스트를 html코드에 있는 그대로 읽음
- capitalize 각 단어의 첫번째 문자를 대문자로 만듦
- uppercase 모든 문자를 대문자로 바꿈
- lowercase 모든 문자를 소문자로 바꿈
border-radius
box-shadow
transform