CSS

CSS

• CSS란 cascading style sheet의 약자이다.
• CSS는 HTML의 색, 크기, 정렬 등을 변경하여 꾸며주는 언어이다.

---

특성

• 특성에는 색, 크기, 정렬 등이 존재한다. 

div {
    color: red;
    color: rgb(255,0,0);      /* RGB */
    color: #FF0000;           /* HEX 값 */

    font-size: 20px;          /* 글자크기 */
    font-weight: 300;         /* 글자두께 */
    text-align: center;       /* 가운데 정렬 */
    font-family: arial;       /* 글꼴 */

    width: 300px;             /* 넓이 */
    height: 300px;            /* 높이 */
    background-color: red;    /* 배경색 */
    border: 1px solid black;  /* 테두리 */
    border-radius: 5px;       /* 테두리의 모서리 둥글게 */
}

---

CSS 기본문법

• 단일 속성 지정

selector(선택자) {
    property(속성) : value(값) ;
}

• 다중 속성 지정

selector(선택자) {
    property(속성) : value(값) ;
    property(속성) : value(값) ;
    property(속성) : value(값) ;
    property(속성) : value(값) ;
    property(속성) : value(값) ;
}

---

CSS 사용방법 3가지 

	html 태그 속성에 입력	style 태그에 입력	CSS파일 만들어 불러오기
장점	스타일 적용 태그 즉시 확인 가능	전체 코드 가독성 향상 유지보수 용이	전체 코드 가독성 향상 유지보수 용이 관심사 분리 O
단점	한번에 하나의 태그에만 적용 가능 전체 코드 가독성 나쁨 관심사 분리 X	태그와 CSS 연결 필요 관심사 분리X	태그와 CSS 연결 필요

HTML 에 직접 입력하기

1. 태그에 CSS 속성이 바로 기록되어 있어, 별다른 지정이나 연결이 필요하지 않음.
2. 가독성이 떨어지고 유지보수가 어려움. 

style 태그에 입력하기

1. 유지보수 측면에서는 유리 할 수 있지만 관심사 분리가 힘듬.

CSS 파일 분리

1. 실무에서 가장 많이 사용되며, 유지 보수에 유리함.
2. 파일을 불러올 때는 link 태그를 사용함.

---

CSS 선택자

• 선택자는 CSS에서 꾸밀 대상 즉, 속성을 줄 대상을 뜻한다. 
  1. * : 전체 선택자
  2. tag : 태그 선택자
  3. .class : 클래스 선택자
  4. #id : 아이디 선택자
  5. 선택자:가상상황 : 가상 선택

<!-- CSS 기본 선택자 -->
<style>
    * {
        color: red;
        }

    tag {
        color: red;
        }

    .class {
        color: red;
        }

    #id {
        color: red;
        }

    선택자:가상상황 {
        background-color: red;
        }
</style>

• 선택자에는 tak => class => id 순으로 우선순위가 생김.

---

박스모델

• HTML의 각각의 태그들은 모두 박스모델의 형태로 이루어져 있다. 
  1. margin : border를 기준으로 박스의 바깥 여백을 말함.
  2. border : 박스의 기준이 되는 바깥 테두리 선
  3. padding : 박스의 안쪽 여백.
  4. content : 박스의 실질적인 내용 부분.

---

박스모델 화면 표시 방법

• CSS 박스 모델에는 content-box, border-box가 있음.
• border-box : border가 고정되고 content 크기가 변함( 박스가 고정) 

• content-box : contents가 고정되고 border의 크기가 변함.(박스가 커짐)

---

정렬 

• CSS에서 가장 중요한 부분중의 하나가 정렬임. 
• 정렬의 방법으로 가장많이 사용되는 방법으로는 flex, position, grid 가 있음.

---

Flex

• 여러태그를 하나로 묶어 정렬함.
• 정렬시 기준과 방향이 필요함. flex는 기준을 부모박스로 두고 움직이게 됨.
• 수평정렬 필요시 row, 수직정렬 필요시 column을 입

---

• 정렬 속성에는 3가지 기준이 존재함.
  1. flex-direction : 컨텐츠 가로 또는 세로 정렬
  2. justify-content : x 축 방향 정렬 
  3. align-content : y 축 방향 정렬

---

• 컨텐츠 간의 사이 간격 정렬도 가능함.
  1. space-between : 아이템 사이에 균일 간격 정렬
  2. space-around : 아이템 둘레에 균일 간격 정렬
  3. space-evenly :  아이템 사이, 양 끝에 균일 간격 정렬

---

Position

• flex에 종속되지 않고, 박스를 개별적으로 위치시킬 수 있다.
  1. position : absolute
  2. position : relative
  3. position : fixed