[CSS] 3. CSS 기초 총정리

728x90

블로그에 웹 글을 업로드하지 않은지 어마무시한 시간이 지났지만(...) 천천히 다시 백업해보겠습니다. 다음은 CSS 기초입니다. 개인적으로는 이 기본 문법만 어느정도 알면 그 다음은 그리 어렵지 않은 것 같아요. 사실 CSS가 제 말을 잘 들어주는 편은 아니지만 아무튼 문법은 어렵지 않습니다 ^!^

1. CSS 기초 형식

Selector{
    property: value;
}

css는 기본적으로 위와 같은 형식을 따릅니다. Selector라고 쓴 식별자를 통해서 접근 및 적용을 가능케 합니다.

h2 { 
    color: red;
}
p {
    color: pink;
}

// html

<head>
    <title>CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">

head에 위와같이 작성하고 나면 h2태그의 컬러는 red로, p 태그의 컬러는 pink로 바뀝니다. 여기서 알 수 있듯이, head태그 아래에 link 태그를 이용해 stylesheet를 추가해주면 식별자를 통해서 html 태그에 스타일을 적용할 수 있습니다.

h2 { 
    color: red;
}
p {
    color: pink;
}
p { 
    color: green;
}

같은 식별자를 두 개 사용하면 나중에 선언된 것으로 적용됩니다. 이를 Cascading 이라고 합니다.

따로 css 파일을 생성하지 않고도 style을 적용할 수 있습니다. 이를 in-line style이라고 합니다.

<header style="background-color:green">
or
<header>
    <style>
        li{
            background-clolr: purple;
            color: white;
    </style>
</header>

보통은 css와 html 파일을 분리해서 작성합니다.

2. CSS properties

CSS tricks(https://css-tricks.com/)에서 css properties 종류들을 볼 수 있습니다. 굳이 다 외울 필요는 없고 많이 쓰는 것들만 알면 개발하면서 점점 익숙해지게 될 거예요 :D

아래는 간단히 작성해본 html 기본 태그를 이용한 style입니다. 간단하게 사용한 properties에 대해 해설을 달아둘게요.

background-000 → 배경
color → 색, 16진수, 색 이름, rgba 모두 가능
cursor → 가져다 댔을 때 커서 모양
border → 테두리
list-style → list style
display → 리스트 표현법

body {
    background-image: url(903637.jpg);
    background-size: cover;
    color: wheat;
}
h2 {
    color: #AA4139;
    text-align: center;
    border: 5px solid rgb(255, 100, 255, 0.3);
    cursor: pointer;
}
li {
    list-style: none;
    display: inline-block;
}

하지만 두 개, 세 개의 li 태그나 h2 태그가 있고, 각각 다른 스타일을 적용하고 싶다면 어떻게 해야할까요? 이어서 여러 개의 같은 태그에 대한 style을 사용하면 덮어써진다는 것을 위해 언급했었습니다. 이 문제를 해결하기 위해 Selector, 식별자가 등장합니다.

3. CSS selector

css는 여러가지 방식으로 selector를 설정할 수 있습니다.

header, p{
    color: red;
}

식별자 종류는 아래와 같습니다.

.class → class = "class_name"를 통해 접근합니다.

<p class="webtext"> lorem ipsum.</p> /* 두개 다 적용됨 */ 
<p class="webtext active"> lorem ipsum.</p>
.webtext {
    border : dashed 5px;
}
.active { 
    color : yellow; 
}

#ID → id = "selector_name"을 통해서 접근합니다.

#div1 { background : blue; } 
#div2 { background : green; }

element → element에 해당하는 태그 전체에 적용합니다.
- ```
h1 {
    color: red;
}
```
element, element → 두 개의 태그(element)에 스타일을 적용합니다.
- ```
h1, h2 {
    color: red;
}
```
element1 element2 → element1 안에 있는 element2에 스타일을 적용합니다.
- ```
h1 p {
    color: red;
}
```
element > element2 → element가 부모인 element2에만 스타일을 적용합니다.
- ```
h1 > p {
    color: red;
}
```
element1+ element2 → element1 바로 다음에 있는 element2에만 스타일을 적용합니다.
- ```
h1 + h2 {
    color: red;
}
```
: hover → hover을 이용하면 스타일이 커서를 가져다 댈 때만 스타일을 적용합니다.
- ```
button:hover {
    background-color : yellow;
}
```
last-child, first-child → 마지막, 첫번째 자식에게만 스타일을 적용합니다.
- ```
p:first-child {
	line-height: 3px;
}

li:last-child {
	text-align: right;
}
```
!important는 이 부분을 가장 위에 적용하겠다는 뜻입니다. css의 기본인 계단식구조를 무시하고 가장 최상위에 적용시킵니다. css 규칙을 무시하므로 추천하는 방식은 아닙니다.
- ```
p{ 
    color: pink !important; 
}
```

한가지 주의할 점은, css의 특성에 따라 같은 태그에 여러 스타일을 넣으면 마지막 것만 적용되는 것처럼 여러 개의 스타일시트를 부를 때 겹치는 것이 있으면 나중에 부른 스타일시트를 나중에 읽기 때문에 마지막 것만 적용된다는 점입니다. 다수의 css파일을 부르는 경우에는 유의하시면 좋겠습니다.

4. text and fonts

    text-transform: uppercase;
    text-decoration: underline;
    line-height: 20px;
    font-style: italic;
    font-weight: bold;
    font-size: 90%;
    font-family: 'Noto Serif', serif;
    ```

글꼴 적용시에는 로컬에 있는 글꼴만 볼 수 있습니다.(저는 처음에 이텔릭체가 적용되지 않았어요ㅎ..) ⇒ 모든 유저가 어떻게 같은 폰트를 볼 수 있게 할 수 있을까요? 커스텀 폰트를 쓰고 싶다면?

해결방법은 두 가지가 있습니다.

HTML에 링크로 포함하기
- 링크를 사용하면 웹사이트에서 읽어와서 포함시켜야하므로 로딩이 조금 느릴 수 있습니다. 아직 해결할 내용은 아니지만 그래도 생각은 해두는 게 좋습니다.
css 에 포함하기
- css에 로컬의 폰트를 font-family로 읽어와서 포함시킬 수 있습니다.
- ```
.example {
	font-family: 'Noto Serif', serif;
}
```

5. CSS image

다음은 image에 대한 설정입니다. 먼저 이미지를 넣었을 때, 이미지 옆에 text를 넣길 바란다면 float 사용하면 됩니다.

float: left; /\* using with image \*/

footer을 사용할 때 float에 영향을 받지 않도록 하고 싶다면 그 아래에 clear을 사용하면 됩니다.

p {  
float: left;  
}  
footer {  
clear: center;  
/\* clear: both; \*/  
}

6. box model

css로 간단한 박스를 하나 만들어봅니다. html의 div 에 class로 적용시켜주면 됩니다. 적용한 properties에 대해 간단히 해설하

.boxmodel{
	border: 5px solid red;
	display: inline-block;
	padding: 5px 20px 5px 20px; /*top right bottom left*/
	margin: 0px 20px;
	width: 20px;
	height: 20px;
}

적용한 properties에 대해 간단히 해설하자면, border은 테두리입니다. display는 위에 설명한 것과 같고, padding은 내부 내용과 테두리 사이의 여유공간입니다. margin은 반대로 외부 다른 element들과 이 box 사이의 여유공간입니다. width와 height는 이 box의 크기를 지정합니다.

7. px vs em vs rem vs %

위에서 보신 것과 같이 css에서는 크기 단위를 지정할 일이 아주 많습니다. 대표적인 단위 네 가지를 소개하려고 해요.

px는 pixel입니다. 모니터 해상도를 이루는 단위이기도 해요. 예를 들어 width를 1920px로 지정한 경우, 1920px로 크기가 고정되고 창을 줄이면 스크롤이 생성됩니다.

em은 현재 element에 적용된 폰트 크기를 기준으로 합니다. 예를 들어, 기준 폰트 크기를 p 태그에서 1em, 10px로 지정했다면 h1 태그에 2em을 적용하면 20px을 나타내게 되는 것입니다.

rem은 html 루트에서 설정한 크기를 기준으로 합니다. 설정하고 싶다면 :root { font-size: 10px } 과 같이 쓰고 이후에 3rem과 같이 크기 지정을 하면 30px로 표기됩니다.

여기까지 CSS 기초 지식에 대해서 다뤄봤습니다. 다음 포스팅에서 더 자세하고 다양한 내용을 다뤄보도록 하겠습니다. 그리드라거나 그리드라거나 그리드라거나... 레이아웃과 부트스트랩에 대해서도 얘기해볼게요. 그럼 다음 포스팅에서 뵙겠습니다!