[CSS] CSS에 대해 1

Gapus 2023. 1. 5. 14:52

CSS 란?

css는 Cascading Style Sheets로 HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다.
요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링 되어야 하는지 지정한다.

CSS 특성

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

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(선택자) {
    width: 300px; /* property(속성) : value(값) ; */
}

다중 속성 지정

selector(선택자) {
    width: 300px; /* property(속성) : value(값) ; */
    height: 300px; /* property(속성) : value(값) ; */
    border: 1px solid black; /* property(속성) : value(값) ; */
}

CSS 사용 방법 3가지

HTML 태그에 입력하기

<div style="margin-left: 20px;">this is block element</div>

// HTML 태그에 입력하면 유지 보수 측면에서 굉장히 비효율적

style 태그에 입력하기

<head>
    <style>
        div {
            width: 80px;
            height: 80px;
            border: 1px solid red;
            padding: 10px;
        }
    </style>
</head>

//유지보수 측면에서는 유리할 수 있지만 관심사 분리가 안됨

CSS 파일 분리 - 실무에서 주로 사용

<head>
    <link href="style.css" rel="stylesheet" />
</head>

//실무에서 가장 많이 사용되며, 유지 보수에 유리합니다.
//파일을 불러올때는 <link> 태그를 사용합니다.

CSS 선택자

속성을 줄 대상을 선택할 때 사용

<style>
    * { 전체 선택자
        color: red;
        }

    div { 태그 선택자
        color: red;
        }

    .class { 클래스 선택자
        color: red;
        }

    #id { 아이디 선택자
        color: red;
        }
</style>

선택자는 우선순위가 존재
1. 속성 값 뒤에 !important를 붙인 속성
2. HTML에서 style을 직접 지정한 속성(Inline)
3. #id로 지정한 속성
4. .클래스, :추상클래스로 지정한 속성
5. 태그이름으로 지정한 속성
6. 상위 객체에 의한 상속된 속성

박스 모델

HTML의 모든 태그들은 박스 모델 형태로 이뤄져 있다.

margin - border를 기준으로 박스의 바깥 여백
border - 박스의 기준이 되는 바깥 테두리 선
padding - 박스의 안쪽 여백
contents - 박스의 실질적인 내용 부분
박스 모델 화면 표시방법
- CSS 박스 모델에는 content-box, border-box가 있다.
- border-box - border가 고정되고 contents 크기가 변합니다. (박스가 고정)
- content-box - contents가 고정되고 border의 크기가 변합니다. (박스가 커짐)
- 실무에서는 박스 크기를 디자이너가 전달해준 화면과 일치시켜야 하기 때문에
  바깥테두리(박스전체)를 고정시키는 border-box 사용을 권장