• 섹션 2 세부 강의 목차 💬

<aside> <img src="/icons/cursor-click_red.svg" alt="/icons/cursor-click_red.svg" width="40px" /> 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

</aside>

박스모델

정렬

싸이월드 만들기 1탄

🌿 CSS

CSS란?

QUIZ! css란 cascading style sheet의 약자입니다. cascading style sheet 란 무엇일까요?

CSS는 HTML의 색, 크기, 정렬 등을 변경하여 꾸며주는 언어입니다.

특성

특성(property)에는 색, 크기, 정렬 등이 존재합니다.

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 태그에 입력하기

html태그에 입력하면 유지 보수 측면에서 굉장히 비효율적 입니다.