[CSS]CSS 기본 정리 - 1

1. CSS란?

Cascading style sheet

계단식 스타일 시트
마크업 언어를 실제 표기되는 방법으로 기술한 스타일 언어

 

2. css에서 색깔을 표현하는 방법
- red, yellow, blue 같은 색상 이름
- RGB에 16진수를 사용한 헥스(HEX) 코드 
   ex) #ffffff
- RGB 색상코드

 

3. CSS 적용 방법

- 인라인 스타일
태그 안에 style 속성을 적용한다
ex) <div style="color : #ffffff;"></div>

- 내부 스타일
html 문서 안에
style 태그를 사용하여 그 안에 스타일 작성한다.

- 외부 스타일
외부 css 파일 작성하여
link 태그로 연결하여 사용

 

인라인 스타일과 내부 스타일은 중복되기 쉽고 코드가 복잡해져 유지보수가 어려울 수 있다.

실무에서는 외부 스타일을 사용한다.외부스타일은 로딩 속도가 살짝 느릴 수 있다는 단점이 있다.


4. 스타일 속성

background-color : 배경색
color : 글씨색
font-family : 글꼴 속성에 ,로 구분하여 해당 폰트를 사용할 수 없을 경우 다음 폰트를 적용한다.
font-family의 폰트명이 띄어쓰기가 포함되어있을 경우 '따옴표'로 감싸줘야한다.
영문과 한글을 동시에 지원하지 않는 폰트가 있으니 주의한다.
font-size : 글씨크기
font-weight : 글씨굵기
text-align : 글 정렬 left, right, center 사용 가능
width : 너비
height : 높이  너비와 높이에서 px 대신 %를 사용하여 퍼센트로 크기를 지정할 수 있다.
border : 컨텐츠의 외곽선
padding : border 기준으로 안쪽 여백
margin : border 기준으로 바깥쪽 여백

 

5. padding 과 margin 설정

padding : 20px 20px 20px 20px; 상우하좌
padding : 20px 20px 20px;  상 좌우 하
padding : 20px 20px;  상하 좌우
padding : 20px; 전체

margin : 0 auto ; 위아래 여백 0, 좌우 여백을 컨텐츠를 자동으로 창 가운데로 맞춰줌


6. 구글 폰트
https://fonts.google.com/ 를 이용해서 무료로 웹폰트를 사용할 수 있다.
원하는 폰트와 weight(굵기)를 선택, link태그를 head태그에 복사하여 사용할 수 있다.

 

7. 전체 스타일 리셋
기본적으로 적용되어 있는 속성을 사용자 임의로 설정하여 스타일을 편집하기 편하게 해줌
사용자가 필요한 설정을 해주면 된다.

 

ex) 아래 코드는 예시이다.
* {
  margin : 0;
  padding : 0;
  box-sizing : border-box;
}

ol, ul {
  list-style : none;
}

a {
  color : inherit;
}