CSS 정리
CSS란?
Cascading Style Sheets
HTML 문서를 꾸밀때 사용하는 스타일 시트 언어
CSS 적용방법
- Linking Style Sheet ( 외부 스타일 시트 )
- 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법
- Internal Style Sheet ( 내부 스타일 시트 )
- HTML 문서 안의 style 태그 안에 CSS 코드를 넣는 방법
- Inline Style Sheet ( 인라인 스타일 시트 )
- HTML 태그의 style 속성에 CSS 코드를 넣는 방법
<!-- 1번 -->
<link rel="stylesheet" href="style.css">
<!-- 2번 -->
<style>
p { color: red }
</style>
<!-- 3번 -->
<p style="color: red">안녕하세요</p>일반적으로 1번 이외의 방법은 HTML문서 안에 스타일이 들어가 있는 형태인데,
이는 HTML과 CSS 파일의 분리가 되어있지 않으므로 권장하는 방법이 아님.
만약 1, 2, 3번을 동시에 사용 했다면 적용 우선순위가 높은 순서는 3번이 가장 우선이되고
1, 2번 중에서는 아래쪽에 작성된 것이 우선이 됨.
CSS 구문
h1 {
color: blue;
font-size: 10px;
}Selector/Property+Value=Declaration
CSS Selector
HTML Element의 name, id, class, attribute 등으로 찾을 수 있다.
- element
- element 이름 그대로 작성
<p>=>p { }
- id
- #idName 으로 작성
<p id="hi">=>#hi { }- 이때 id값은 고유한 값을 가지며 #다음에 숫자는 작성불가
- class
- .className 으로 작성
<p class="hi">=>.hi { }
- attribute
- 대괄호를 통해 attribute를 찾음
input[type="text"] { background-color: red }
특징
- grouping이 가능
- 여러개의 태그나, 클래스 등에 같은 속성을 줄때 콤마를 사용
h1, h2, p { }
- CSS 내에서 주석 작성은
/* 주석 */ - 속성값과 단위사이에 공백은 없어야 함
20px=> O /20 px=> X
CSS Property
Property 작성 순서는 퍼포먼스에 영향을 미치지 않지만, 규칙이 있어야 보기도 좋음.
CSS3 이전의 Property 작성 권장 순서는 다음과 같다.
가장 바깥쪽부터 안쪽으로 들어간다고 이해하면 자연스러움.
- display
- list-style
- position
- float
- clear
- width / height
- padding / margin
- border / background
- color / font
- text-decoration
- text-align / vertical-align
- white-space
- other text
- content
추가적으로 CSS3에서 overflow, z-index, line-height도 있는데
개인적인 습관은 1번 밑에 overflow, 5번 밑에 z-index, 6번 밑에 line-height를 씀.
사실 작성 순서는 혼자 작업할 땐 중요하지 않지만, 협업을 할 때 순서를 정해 놓아야 헷갈릴 일이 없음.
CSS의 배경(background)
배경색 - background-color:~
배경이미지 - background-image: url("~");
배경반복 - background-repeat: ~
repeat-x 가로반복
repeat-y 세로반복
no-repeat 반복x
배경배치 - background-position: right top 오른쪽위에 배치
고정 - background-attachment: fixed
약식 속성 background: 속성값/ 순서(color, image, repeat, attachment, position)
CSS 테두리(border)
테두리 스타일 - border-style:속성;
dotted,dashed 점선 테두리
solid 실선 테두리
double 이중 테두리
none 테두리 없음
hidden 숨겨진 테두리 정의
테두리 폭 - border-width:속성;
10px/medium/10px 10px 10px 10px(위 오른쪽 아래 왼쪽)
테두리 색상 - border-color:속성;
테두리 다르게 지정
border-style: 속성1 속성2 속성3 속성4
위1 오른쪽2 아래3 왼쪽4
border-style: 속성1 2 3
위3 좌우1 아래2
border-style: 속성1 2
위아래2 좌우1
약식 속성
border: width style(필수) color;
둥근 테두리 border-radius:10px;
CSS Outline
outline-stsyle:속성값 border와 동일
border와 outline의 차이
border는 옵션만큼 크기증가, outline은 테두리만 생기는 것 outline은 레이아웃에 영향x
CSS 여백(margin)
margin-top(bottom right lefrt): 속성(자동, 길이, %, 상속) 음수 사용 가능
약식 속성
margin:top속성 right속성 bottom속성 left속성
자동값 margin: auto; 중앙에배치됨
상속값 margin: inherit; 부모요소에서 상속
CSS 패딩(padding)
padding: 값
컨텐츠에 공간 생성
CSS 너비, 높이
width, height
최대너비 - max-width
최소너비 - min-width
CSS 박스모델
margin>border>padding>content
CSS 텍스트(text)
text-align 수평정렬 속성(center, left, right)
justify 속성 - 각 라인이 동일한 폭을 가짐
text-decoration:none 텍스트의 장식 제거 주로 하이퍼링크 밑줄제거로 사용
text-transform 대문자,소문자 지정 uppercase, lowercase, capitalize
text-indent: 10px 들여쓰기
letter-spacing:3px; 문자 사이의 간격 음수가능
word-spacing: 단어 사이의 간격
line-height: 줄 사이의 공간
direction: rtl; 텍스트 방향 변경
CSS 글꼴(font)
font-family: 글꼴 조합
font-style: normal일반, italic이탤릭체, oblique기울임
font-size 절대크기10px, 상대크기100% 1em=16px
font-weight: normal, lighter, bold, 900등으로 설정
font-variant: normal, small-caps(작은 대문자)
약식: font: style variant weight size/height family
CSS 링크(link)
색상 설정
a:link 방문하지않은 링크
a:visited 방문한 링크
a:hover 마우스오버
a:active 클릭
CSS 목록(list)
list-style-type: circle, square, upper-roman, lower-alpha
list-style-position: inside, outside 마커가 내부,외부에 표시
list-style-image: url('~~') 목록 마커 이미지
약식 list-style: type position image
CSS 테이블(table)
table을 border-collapse:collapse을 사용해 테두리를 한줄로 축소, seperate 분리
width height 특성으로 너비,높이 설정
text-align:left 수평정렬
vertical-align:bottom 수직정렬
caption-side:bottom 캡션을 테이블에 추가
empty-cells: hide 빈 캡션 숨기기
-webkit-filter: ~,filter: ~ 화상 조절
마무리
개인적으로 공부한 내용을 정리한 것이기 때문에 반말을 사용한 점 양해 부탁드립니다.
잘못된 부분이나 피드백이 있으시다면, 댓글에 남겨주시면 감사하겠습니다!