Gapus Dev Blog

[CSS] CSS에 대해 1 본문

프론트엔드/HTML,CSS

[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 사용을 권장

'프론트엔드 > HTML,CSS' 카테고리의 다른 글

[CSS] CSS에 대해 2 - 정렬  (0) 2023.01.05
[HTML] 웹페이지의 HTML에 대해  (0) 2023.01.04
'프론트엔드/HTML,CSS' Related Articles more