TIL 03 | CSS Basics

meow·2020년 7월 13일
1

HTML/CSS

목록 보기
3/12

CSS 기본 문법

/* The General Rule */

selector {
    property: value;
    another property: value;
}

Css 에서의 주석처리는 아래와 같이 작성한다.

/* 이것은 주석입니다 */

HTML에 CSS파일 연결하기

헤더에 link로 css 파일을 연결한다.

<head>
    <title>About Me</title>
    <link rel="stylesheet" type="text/css" href="app.css">
</head>

색상값의 다양한 표현

1) Hexadecimal

# + String of 6 hexadecimal numbers(from 0-F)
ex) #ff0452

2) RGB

3 channels: Red, Green and Blue.
Each ranges from 0 - 255
rgb(0,0,0)

3) RGBA

alpha(투명도 transparency) channel. Ranges from 0.0 - 1.0
reba(11, 99, 150, .4);

CSS 기본 팁

h1 {
    color: #ff00ff;
    border-color: purple;
    border-width: 5px;
    border-style: solid;
}

border를 넣기 위해서는 color, width, style 세가지가 모두 작성되어야 하는데, 아래와 같이 간단하게 작성할 수 있다.

h1 {
    border: 5px solid purple;
}

화면의 배경에는 컬러값 대신에 사진을 넣을 수도 있다. 기본적으로 타일 형식으로 배경이 적용되는데, 아래와 같이 작성하면 화면에 딱 맞게 사진이 조정된다.

body {
    background: url(https://이미지주소.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

CSS Selector

Selector의 종류

  • Element
li { }
  • Class
.hello { }
  • ID
#name { }
  • All
* { }
  • Descentant Selector
li a { }
/* li 안의 Element a */
li .hello { }
/* li 안의 Class hello */
  • Adjacent Selector
h4 + ul { }
/* h4에 붙어있는 ul */
  • Attribute Selector
a[href="http://www.google.com"] { }
input[type="text"] { }
  • nth of type
ul:nth-of-type(3) { }

CSS selector 예시

<!-- html -->
<ul>
    <li class="highlight">
        <input type="checkbox" checked>
        Walk Tori
    </li>
    <li class="highlight">
        <input type="checkbox">
        Yoga
    </li>
    <li id="special">
        <input type="checkbox">
        Finish CSS videos
    </li>
</ul>
/* CSS */

li {
    border: 2px solid red;
}

#special {
    color: yellow;
    background-color: black;
}

.highlight {
    background: pink;
    text-decoration: line-through;
}

em과 rem 이란?

emrem 은 CSS에서 상대적인 크기를 정하는 단위이다. em 은 상위요소 크기의 몇 배인지 크기를 정한다. 예를 들어,

font-size: 3.5em;

위 코드는 폰트 사이즈를 상위 요소 크기의 3.5배로 하겠다는 것을 의미한다.

rem 은 문서의 최상위 요소인 html 요소의 몇 배 크기로 설정할지를 의미한다. 참고로 html 요소 크기의 기본값은 16px이다.

p.date {
    font-weight: 400;
    color: #3498db;
    text-transform: uppercase;
    letter-spacing: 0.5rem;
}

위코드는 자간을 html 요소의 0.5배로 설정한다는 것을 의미한다.

profile
🌙`、、`ヽ`ヽ`、、ヽヽ、`、ヽ`ヽ`ヽヽ` ヽ`、`ヽ`、ヽ``、ヽ`ヽ`、ヽヽ`ヽ、ヽ `ヽ、ヽヽ`ヽ`、``ヽ`ヽ、ヽ、ヽ`ヽ`ヽ 、ヽ`ヽ`ヽ、ヽ、ヽ`ヽ`ヽ 、ヽ、ヽ、ヽ``、ヽ`、ヽヽ 🚶‍♀ ヽ``ヽ``、ヽ`、

0개의 댓글