CSS

CSS 는 Cascading Style Sheets 의 약자로 웹페이지를 꾸미려고 작성하는 코드이다.
CSS 는 HTML 처럼 프로그래밍 언이도 아니고 마크업 언어도 아닌 Style sheet 언어이다.

CSS 구조

 body { 
        color: red;
        font-size: 30px;
      }

body : 셀렉터(Selector)
{ } : 선언블록 (Declaration block)
color: red; : 선언 (Declaration)
color : 속성명 (Property)
red : 속성값 (Property Value)

CSS → HTML 적용방법

HTML 에 CSS 를 적용시키는 방법은 3가지가 있다.

1. Inline Style Sheet

HTML 태그의 style 속성에 CSS 코드를 넣는 방법이다.

ex) <p style="color: blue">My New Car</p>

이 방법은 꾸미는데 한계가 있고 재사용이 불가능하다는 단점이 있다.

2. Internal Style Sheet

HTML 문서 안의 안에 CSS 코드를 넣는 방법이다.

<style>
 h1 {
   color: blue;
 }
</style>

이 방법은 HTML 문서 안의 여러 요소를 한번에 꾸밀 수 있다는 장점이 있으나
또 다른 HTML 문서에는 적용할 수 없다는 단점이 있다.

3. LInking Style Sheet

별도의 CSS 파일을 만들고 HTML 에 link 태그를 이용하여 CSS 파일을 불러오는 방법이다.

<link rel="stylesheet" href="index.css" />

h1 {
color: red;
}

분리를 통해 깔끔하게 유지보수를 쉽게 할 수 있다는 장점을 가지고 있다.

id 와 class 의 차이

id 와 class 셀렉터는 특정 요소를 대상으로 스타일을 적용하기 위함이다.

id

• ' # ' 으로 선택
• 한 문서에 단 하나의 요소에만 스타일 사용가능
• id 가 class 보다 우선순위가 높다

class

• ' . ' 으로 선택
• 한 문서에 여러번 사용가능

절대단위 & 상대단위

수치를 정하는 속성의 크기는 상대단위와 절대단위로 구분된다.

절대단위

규격이 정해져 있는 단위를 의미하며, 출력장치의 물리적 속성을 아는 경우 효율적이다.

• 절대단위에는 in, cm, mm, pt, pc 등등이 있다.
  • 1pc = 12pt
  • 1in = 2.54cm

상대단위

고정되지 않고 어떤 기준에 따라 유동적으로 바뀔 수 있는 단위를 의미하며
다양한 플랫폼이 등장한 지금 그 플랫폼 간의 호환성을 유지하는데 유리하다.

• em : 상위 요소 크기의 몇 배인지로 크기를 정한다.
• ex : 소문자 x 의 높이를 1로 한다.
• px : pixel 표시장치(모니터)에 다라서 상대적인 크기를 가짐.
• % : 기본글꼴의 크기에 대하여 상대적인 값을 가짐.

CSS 박스 모델

문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표한한다.

하나의 박스는 네 부븐(영역)으로 이루어져 있고 각 영역을 contents 영역, padding 영역, border 영역, margin 영역이라 부른다.

margin

네 방향 바깥 여백 영역을 설정한다.

• margin: 1em;
  한 개의 값은 모든 네 면의 여백을 설정
• margin: 5% auto;
  두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 좌우 여백을 설정한다.
• margin: 1em auto 2em;
  세 개의 값을 지정하면 천 번째는 위, 두 번째는 좌우, 세 번째는 아래 여백을 설정한다.
• margin: 2px 1em 0 auto;
  네 게의 값을 지정하면 각각 상우하좌 순서(시계방향)로 여백을 지정한다.

padding

네 방향 안쪽 여백 영역을 설정한다. (margin 과 값 설정 동일)

box-sizing

box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 지정한다.
CSS 박스 모델의 기본값에서 지정한 너비와 높이는 요소의 컨텐츠 박스 크기에만 적용된다.
요소에 border 이나 padding 값이 있으면 그 값이 너비와 높이에 더해저 화면에 나타난다.
따라서 크기를 설정할 때, 원하는 크기를 얻으려면 border, padding 값을 고려해야 한다.

box-sizimg 속성을 사용해 이 방식을 바꿀 수 있다.

content-box

• CSS 표준이 정의한 초기 기본값. width와 height 속성이 콘텐츠 영역만 포함하고 안팎 여백과 테두리는 포함하지 않는다.
  .box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비는 370px

border-box

• width 와 height 속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않는다.
  .box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비는 350px

CSS 자주 쓰는 속성

color

글자의 색상을 설정한다.

ex) color: red;       
    color: #555555;    
    color: #961f1f; 

font

글자의 폰트를 설정한다.

• font-weight : 텍스트 굵기를 설정한다.

ex) font-weight: bold;    // 굵게
    font-weight: normal;  // 일반 굵기
    font-weight: bolder;  // 가장 굵게

• font-style : 텍스트 기울임을 설정한다.

ex) font-style: italic;

• font-family : 글씨체를 설정한다.

ex) font-family: "Nanum Gothic";

border

텍스트 및 블록의 외부에 선을 그릴 때 사용한다.
구조 : border: font-width font-style font-color;

ex) border: 1px solid #ccc;
        // 굵기(1px) 선스타일(실선) 색상(#ccc)

• font-style 에 들어갈 수 있는 값
  • solid : 실선
  • dashed: 일반 점선
  • dotted: dashed 보다 좁은 점선
  • double: 두 줄로 구성된선 (3px 이상 굵기부터 표현됨)
  • groove: 그림자 적용된 선
  • inset: 그림자 적용된 선 (안쪽)
  • outset: 그림자 적용된 선 (바깥쪽)
  • ridge: 튀어나온 느낌의 선 (2px 이상 굵기부터 표현됨)

background

블록이나 텍스트의 배경을 지정할 때 사용한다.
다양한 속성을 한꺼번에 적용시킬 수 있다.
하지만 적용된 옵션의 가독성 향상을 위해 속성을 개별적으로 지정해 주는 것이 좋다.

// 01. 한번에 적용 //
.class {
  background: url(./image/sdfasdfasdf.jpg) no-repeat 50% 50%
  }
// 02. 개별적으로 적용 //
.class {
  background-image: url(./image/sdfasdfasdf.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  }

• background 내부 속성
  • background-color: 배경색 지정
  • background-image: 배경이미지 지정
  • background-position-x: 배경이미지의 가로 위치 지정
  • background-position-y: 배경이미지의 세로 위치 지정
  • background-repeat-x: 배경이미지의 가로 반복여부 지정
  • background-repeat-y: 배경이미지의 세로 반복여부 지정