프론트 공부/html과 css

CSS 기초 문법

홍구리당당 2023. 10. 15. 20:00

(css를 배울 때 가장 신기했던건 class나 id 이름으로 하이픈을 넣을 수 있단 것이었다...)

0. css의 기본 개념.

html이 너무 길어지면 각 태그 하나하나에 style을 넣는 건 너무 번거로워진다. 때문에 각 태그들에게 어떤 style을 적용해줄지 규칙을 세워야 한다.

<!-- 이런 식으로 말이다. -->
<style>
    h1{ color: #ff33f3; }
</style>

바로 이렇게 h1에 대한 규칙을 세우듯 태그들의 규칙을 세워 style을 적용하는 게 좋다. 즉, css를 개발한다는 것은 css 규칙을 만든다는 것이다.

1. css 규칙

html 의 내용과 그에 대한 css를 분리하는 것을 관심사의 분리, seperation of concern 이라고 한다.

관심사 분리의 장점: 내용과 스타일을 고치기 편하다.

css 규칙은 선택자와 선언의 짝으로 이루어졌다.

선택자란 어떤 요소에 규칙을 적용할지 선택하는 것.
선언이란 어떤 스타일을 적용할지 선언하는 것이다. 선언에는 속성, 콜론, 속성값, 세미콜론으로 이루어졌다.

<style>
    h1 /* h1은 선택자!! */
    { 
        color: #ff33f3; /* 선언!! */
    }
</style>

2. 아이디

선택자에 쓸 수 있는 것에는 태그 말고도 아이디가 있다.

아이디는 하나의 태그에 고유하게 주어지는 이름으로, 여러 태그에 중복해서 할당할 수 없다. (중복해서 태그에 넣는다해도 error가 발생하진 않지만, 그래도 id는 하나의 태그에만 고유하게 주는 값이라는 규칙을 지키자!) 때문에 딱 하나의 태그에 스타일을 적용할 때 id 이름을 활용하자.

css 스타일에선 #아이디이름 으로 선택자를 지정한다.

<html>
    <head></head>
    <body>
        <div id = "mydiv"></div>
        <div></div>
    </body>
</html>
<style>
    #mydiv{color: #f5f5f5;}
    /* mydiv 아이디를 가진 영역에만 적용. */
</style>

3. 클래스

선택자에 쓸 수 있는 것에는 태그, 아이디 뿐만 아니라 클래스도 있다. 아이디는 딱 하나에만 적용하는 반면, 클래스는 여러 개에 적용할 수 있다. 따라서 여러 태그에 공통 스타일을 주고 싶다면 class를 활용하자.

css 스타일에선 .클래스이름 으로 선택자를 지정한다.

<html>
    <head></head>
    <body>
        <div class = "mydiv"></div>
        <div class = "mydiv"></div>
        <div></div>
    </body>
</html>
<style>
    .mydiv{color: #f5f5f5;}
    /* mydiv 클래스를 가진 영역에만 적용. */
</style>

4. css 파일

css파일은 보통 html과 분리해서 만든다.

하나의 폴더 안에 index.html과 style.css 파일이 있다고 한다면, html파일에서 아래와 같이 외부 css 파일을 불러오자.

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

5. 색상 단위

색상을 나타내는 방법에는 4가지가 있다.

red, blue, 등 색상에 붙은 고유 이름. 세세한 색을 나타내기 힘들어서 잘 쓰지 않는다.
색상코드. 16진법으로 색상을 나타냄.
RGB. 10진수로 빨, 초, 파 빛 세기를 0~255 사이 값으로 나타낸다. 예를 들어 rgb(255,255,255)는 하얀색.
RGBA. rgb에 불투명도 alpha를 추가. 여기서 alpha는 0~1 사이 실수이며, 예를 들어 rgba(255,0,0,1)은 완전불투명 빨간색, rgba(255,0,0,0)은 완전 투명이다.

6. 크기 단위

크기 단위에는 절대적인 단위와 상대적인 단위로 나뉜다. 절대 단위는 대표적으로 px, 상대 단위에는 퍼센트나 em, rem, vw 등이 있다.

px. 화면을 표시하는 기준이 되는 가장 작은 정사각형을 기준으로, 표시.
퍼센트: 부모태그에 대해 상대적인 크기로, 부모가 100px이면 자식이 50%일 때 50픽셀이 된다.
em: 부모 태그의 font-size를 1em으로 두는 것. 예를 들어 부모가 16px이라면 2em = 32px이다.
rem: 최상위 태그의 font-size를 1rem으로 두는 것.

텍스트 태그의 기초 속성

.div{
    color: #f2f2f2; 
    /* 글자색 바꾸는 속성 */
    font-size: # 32px; 
    /* 글자 크기 바꾸는 속성 */
    font-family: Poppins, 'Noto Sans KR'; 
    /* 글꼴 지정 속성 */
    font-weight: 700; 
    /* 글자 굵기 지정 */

    line-height: 1.5;
    /* 줄의 높이 조절. 1 = font-size이다. */

    text-decoration: none;
    text-decoration: underline;
    text-decoration: line-through;
    /* 밑줄 없음, 밑줄 있음, 취소선 */
}

배경 이미지의 기초 속성

div 영역의 배경을 단색이 아니라 이미지로 넣어보자.

.div{
    background-image: url('imges/img.png'); 
}

이렇게 기본적으로 사용하면 div가 이미지보다 더 클 경우, 이미지가 바둑판처럼 반복돼서 안 이쁘다. 다른 속성을 더 추가하자!!!

.div{
    background-image: url('imges/img.png'); 
    /* url('따옴표쓰고 url 주소') */
    background-repeat: no-repeat;
    /* 이미지 반복하지 말고 하나만. */
    background-position:center;
    /* 이미지 중앙 정렬 */
    background-size: cover;
    /* div 영역에 이미지가 꽉 차게. */
}

참고로 background-size: contain 은 div 영역에 이미지가 잘리지 않는 선에서 최대 크기로 늘려준다.

background-size: 100px 20px; 이렇게 길이 직접 지정도 가능하다.

배경에 그라데이션 주기 속성.

css 배경에 그라데이션 넣어보기. 그라데이션도 일종의 이미지라서 background-image 속성을 쓴다.

gradient generator이라고 구글에 쳐서 값 따오는 게 좋다.

.div{
    background-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0)); 
    /* 검은색에서 점점 투명하게, 위에서 아래로 */

    background-image: linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0)); 
    /* 90도 반시계방향 회전. 왼쪽 검은색, 오른쪽 투명. */

    background-image: linear-gradient(rgba(0,0,0,1) 40%, rgba(0,0,0,0)); 
    /* div의 40퍼가 검은색. */

    background-image: 
        linear-gradient( rgba(0,0,0,1), rgba(0,0,0,0)),
        url('imges/img.png')
    ; 
    /* 그림과 그라데이션 겹치기. 단, 그라데이션을 먼저 써라!! */
}

배경에 그림자 주기 속성

한 영역에 그림자를 넣으려면 box-shadow 속성을 쓰자.

마찬가지로 box-shadow generator을 구글에서 검색해서 따와도 좋다.

.div{
    box-shadow: 10px 15px gray;
    /* 회색의 그림자가 오른쪽으로 10px, 밑으로 15px 생김. */

    box-shadow: 10px 15px 20px gray;
    /* 20px의 흐림효과 추가. */

    box-shadow: 10px 15px 20px 5px gray;
    /* 5px의 퍼짐효과 추가. */
}

불투명도 조절하는 css

영역을 반투명하게 만들어보자.

background를 rgba로 설정하는 방법은 배경색만 반투명하게 한다.
opacity라는 속성은 배경색 뿐만 아니라 내부 요소 전체를 반투명하게 한다.
```
.div{
 opacity: 0.5
 /* 속성값은 0~1사이 값이다. */
}
```

저작자표시 비영리 동일조건

'프론트 공부 > html과 css' 카테고리의 다른 글

CSS의 포지션 속성 (0)	2023.10.16
CSS의 선택자와 캐스캐이드 (0)	2023.10.16
CSS의 박스 모델과 디스플레이 (1)	2023.10.15
HTML 기초 문법 (1)	2023.10.15

현재글CSS 기초 문법

홍장군의 기록

CSS 기초 문법

0. css의 기본 개념.

1. css 규칙

2. 아이디

3. 클래스

4. css 파일

5. 색상 단위

6. 크기 단위

텍스트 태그의 기초 속성

배경 이미지의 기초 속성

배경에 그라데이션 주기 속성.

배경에 그림자 주기 속성

불투명도 조절하는 css

'프론트 공부 > html과 css' 카테고리의 다른 글

'프론트 공부/html과 css'의 다른글

티스토리툴바

CSS 기초 문법

0. css의 기본 개념.

1. css 규칙

2. 아이디

3. 클래스

4. css 파일

5. 색상 단위

6. 크기 단위

텍스트 태그의 기초 속성

배경 이미지의 기초 속성

배경에 그라데이션 주기 속성.

배경에 그림자 주기 속성

불투명도 조절하는 css

'프론트 공부 > html과 css' 카테고리의 다른 글

'프론트 공부/html과 css'의 다른글

관련글

티스토리툴바