Study/web기술

CSS cheat sheet

한형주 2021. 5. 15. 23:11

CSS란?

웹 문서의 스타일을 변화시킬 수 있는 스타일 시트.

 

일관성있는 방식으로 문서의 스타일을 지정할 수 있게 합니다. CSS를 통해 깔끔하고 일관적인 방식으로 스타일을 지정할 수 있습니다.

 

1. Basic Structure

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        </style>
    </head>

    <body>

    </body>
</html>

 이전 html를 다룬 글에서 봤던 (https://webos-supporters.tistory.com/2) basic structure에서 <style>태그만 추가된 것을 확인할 수 있습니다.

 

 CSS는 HTML이라는 뼈대 안에서<style> 태그로서 스타일을 기술하는 언어를 일컫는 말입니다. HTML 파일 내부에서 직접 입력하는 방식과 달리, 별도로 .css 확장자 파일을 생성하여 html에 연결하는 방식도 있습니다.  

 

 실제로 어떤 식으로 사용되는지 살펴보겠습니다.

 

2. CSS 선택자란?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style></style>
    </head>

    <body>
        <h>안녕! 여기에는 스타일이 적용될 예정입니다.</h>
    </body>
</html>

CSS 적용 이전 출력

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            h{
                color: red;
            }
        </style>
       
    </head>

    <body>
        <h>안녕! 여기에는 스타일이 적용될 예정입니다.</h>
    </body>
</html>

CSS 적용(color) 이후 출력

<style>태그 안에 h{ }를 추가하고, h{ }안에 color: red; 라는 코드를 추가했더니 h 태그에 해당하는 내용의 색이 red로 변했습니다.

selector{property:value;}

 CSS의 기본 작성 방식입니다.

 

선택자란 원하는 태그를 선택하는 요소입니다.

위 예시에서는 h가 선택자가 된 것이죠. property(속성)은 color이고, value(값)은 red로 지정했습니다. 

 

우리가 <style>태그 안에 작성한 h{color : red;} 에서 red를 blue로 바꿔준다면 h 태그의 내용은 빨강이 아니라 파랑색이 됩니다. 이런 식으로 모든 스타일을 지정할 수 있습니다.

class와 id 선택자

1. class 선택자

다음과 같은 코드가 있습니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            li{
                color: red;
            }
        </style>
       
    </head>

    <body>
        <ol>
            <li>안녕! 여기에는 스타일이 적용될 예정입니다.</li>
            <li>안녕! 여기에도 스타일이 적용될 예정입니다.</li>
            <li>안녕! 여기에도 스타일이 적용될까요?</li>
        </ol>
    </body>
</html>

 li를 선택자로 채택하여 color를 red로 지정해줬기에 list 전체가 빨간색으로 출력되었습니다.

만약 여기서 1, 2만을 빨강색으로 바꾸고 싶을 때는 어떻게 해야할까요?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .color_change{
                color: red;
            }
        </style>
	</head> 
    <body> 
   		 <ol> 
   			 <li class="color_change">안녕! 여기에는 스타일이 적용될 예정입니다.</li> <li class="color_change">안녕! 여기에도 스타일이 적용될 예정입니다.</li> 
             <li>안녕! 여기에도 스타일이 적용될까요?</li> 
         </ol> 
    </body> 
</html>

 적용하고 싶은 li 에 class = "color_change"가 추가된 것이 보이시나요?

 우리는 "color_change"라는 class 값을 갖고있는 태그 두개를 만들었고, 우리가 하고싶은 것은 color_change라는 class 값을 갖고있는 모든 태그에 대해서 폰트 컬러를 빨강으로 지정하는 것입니다.

 

 이 class값이 color_change인 태그를 선택자로서 적용하려면,  . 을 붙이고 class 명을 적어줘야합니다. .color_change 처럼요. (이 class = ""는 CSS가 아니라 HTML입니다)

 

2. id 선택자

class는 중복 사용이 가능합니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .color_change{
                color: red;
            }
            .color_rechange{
                color: blue;
            }
        </style>
       
    </head>

    <body>
        <ol>
            <li class="color_change">안녕! 여기에는 스타일이 적용될 예정입니다.</li>
            <li class="color_change color_rechange">안녕! 여기에도 스타일이 적용될 예정입니다.</li>
            <li>안녕! 여기에도 스타일이 적용될까요?</li>
        </ol>
    </body>
</html>

위 코드를 보면, 두번째 list에 class가 두개 적용된 것을 확인할 수 있습니다. 띄어쓰기로 각 class를 구분합니다. 결과는?

 두번째 list에 대해 color_change와 color_rechange 두개의 class가 적용되었으나 결과는 color_rechange(파랑)만 적용되었습니다. 보다 나중에 작성된 명령이 더 큰 영향력을 갖기 때문입니다.

 

만약 style태그 안의 .color_change와 .color_rechange의 위치가 바뀐다면?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .color_rechange{
                color: blue;
            }
            .color_change{
                color: red;
            }
            
        </style>
       
    </head>

    <body>
        <ol>
            <li class="color_change">안녕! 여기에는 스타일이 적용될 예정입니다.</li>
            <li class="color_change color_rechange">안녕! 여기에도 스타일이 적용될 예정입니다.</li>
            <li>안녕! 여기에도 스타일이 적용될까요?</li>
        </ol>
    </body>
</html>

위와 같이 color_change(빨강)만 적용된 것을 알 수 있습니다. 

이런 상황을 피하기 위해, 우선적으로 grouping해주는 것을 id 선택자라고 합니다. 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #color_rechange{
                color: blue;
            }
            .color_change{
                color: red;
            }
            
        </style>
       
    </head>

    <body>
        <ol>
            <li class="color_change">안녕! 여기에는 스타일이 적용될 예정입니다.</li>
            <li class="color_change" id="color_rechange">안녕! 여기에도 스타일이 적용될 예정입니다.</li>
            <li>안녕! 여기에도 스타일이 적용될까요?</li>
        </ol>
    </body>
</html>

id 선택자는, class 선택자와 비슷하게 id= " " 로 작성해주며, class명 앞에 .을 붙였던 것처럼 id 태그앞에는 #을 붙여줍니다. 

color_change가 color_rechange보다 더 나중에 작성되어 영향력이 더 강해야하지만, id 선택자를 사용함으로써 color_rechange의 영향력이 더 강해진 것입니다.

 

class와 id가 붙으면 id가 이기는 것이죠.

CSS의 기초 선택자들

이제 CSS에 어떤 선택자들이 있는지 간단히 살펴보겠습니다.

 

1. *

* {
 margin: 0;
 padding: 0;
}

*은 페이지의 전체 요소를 한 번에 지정하는 선택자 입니다. margin과 padding을 한 번에 0으로 넣어주기 위해 많이 사용하는 선택자 입니다.

 

2. li, h, a

li{
 font-size: 20px;
}
h{
 font-weight: bolder;
}
a{
 text-align: center;
}

따로 class나 id를 지정해주지 않은 html 기본 태그의 경우 .혹은 #의 기호 없이 바로 태그명을 선택자로 하여 속성과 값을 지정해줄 수 있습니다.

 

class와 id, * 이외에도 많은 선택자들이 있습니다.

CSS의 기초 속성들

css에는 수많은 속성들이 있습니다. 스타일 속성이니 당연하겠죠? 수 많은 속성들 중 몇가지만 소개하고자 합니다. 이외의 속성들은 필요할 때 구글링 혹은 타 검색엔진을 통해 직접 찾고 사용해 보실 수 있습니다. (기본적인 구조는 다 같으니 찾기만 하면 쉽게 적용할 수 있겠죠?)

 

1. 길이 속성

 width : 가로길이, height : 세로길이 입니다. 값 뒤에는 px 또는 % 단위를 이용합니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .decoration{
                width : 50px; height : 100px;
            }
        </style>
       
    </head>

    <body>
        <ol>
            <li class="decoration">안녕! 가로 세로를 바꿔볼까?</li>
        </ol>
    </body>
</html>

텍스트의 가로 길이가 50px로 제한된 모습입니다.

 

2. color 속성

 color 속성은 위에서 다루었습니다. 사용가능한 value에 대해 더 자세히 알아보겠습니다.

  • red, purple 등 이미 정의된 색
  • #000, #FFFFFF 등의 16진수 색상 코드
  • rgb(255, 255, 255) 등의 rgb 색상 
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .color_purple{
                color : purple;
            }
            .color_16digit{
                color : #433B70;
            }
            .color_rgb{
                color : rgb(25, 125, 255);
            }
        </style>
       
    </head>

    <body>
        <ol>
            <li class="color_purple">안녕! 나는 보라</li>
            <li class="color_16digit">안녕! 나는 16진수 남색</li>
            <li class="color_rgb">안녕! 나는 rgb값 지정</li>
        </ol>
    </body>
</html>​

3. font 속성

  • font-weight : 글자 두께
  • font-size : 글자 크기
  • line-height : 줄 간격
  • font-family : 글꼴
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .size{
                font-size: 20px;
            }
            .weight{
            font-weight: bold;
            }
        </style>
       
    </head>

    <body>
        <ol>
            <li class="size">안녕! 나는 20px</li>
            <li class="weight">안녕! 나는 bold</li>
        </ol>
    </body>
</html>

4. background 속성

백그라운드는 배경이기 때문에 보통 body를 선택자로 지정해줍니다.

  • background-color : 배경 색
  • background-image : 배경 이미지
  • background-repead : 배경 이미지 반복 여부
  • background-position : 배경 이미지 위치 
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                background-color : yellowgreen;
            }
            
            .size{
                font-size: 20px;
            }
            .weight{
            font-weight: bold;
            }
        </style>
       
    </head>

    <body>
        <ol>
            <li class="size">안녕! 나는 20px</li>
            <li class="weight">안녕! 나는 bold</li>
        </ol>
    </body>
</html>​

 box model 속성

box model은 굉장히 유용하고 많이 사용되는 속성입니다. 태그 안의 내용을 묶어 다루기 용이하도록 박스모델로 묶을 수 있습니다. 

 

1. 기본 박스 모델

소스코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #box1
            {
                border-width:5px;
                border-style:solid;
                border-color:blue;
                padding:20px;
                margin:20px;
                display:block;
                width:100px;

            }
            
            #box2
            {
                border:5px solid blue;
                padding:20px;
                margin:20px;
                display:block;
                width:100px;
            }
        </style>
    </head>

    <body>
        <a id = "box1">box model1</a>
        <a id = "box2">box model2</a>
    </body>

</html>

 

안 쪽부터 순서대로 text, padding, border, margin

(그림 참조)

2. 박스모델 테두리의 이용

border-top: 5px solid blue; //위 테두리

border-bottom: 5px solid blue; //아래 테두리

border-right: 5px solid blue; // 오른쪽 테두리

border-left: 5px solid blue; //왼쪽 테두리

position 속성

position은 문서 상에 요소 배치하는 방법을 지정하는 속성입니다.

 

1. static

가장 기본값(default)이므로 생략, 생성한 요소가 순서대로 배치됩니다.

left, right, top, bottom과 같은 속성값 사용이 불가능합니다.

position: static;

2. relative

static 위치를 기준으로 상대적인 배치를 합니다.

position: relative;

 

설명으로는 절대 position 속성들을 한 번에 이해할 수 없습니다. relative속성이 없을 때와 있을 때 어떻게 달라지는지 직접 코드를 통해 확인합니다. 

 

↓예시코드

1) relative 속성이 없을 때 

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #static{
            background-color: palevioletred;
            width: 200px; height: 50px;
        }
        
        #relative{
            background-color: powderblue;
            width: 200px; height: 50px;
            left: 50px; top: 50px;
        }
    </style>
</head>
<body>
    <div id="static">I'm static</div>
    <div id="relative">I'm relative</div>
    
</body>
</html>

static으로 배치된 요소들

2) relative 속성이 있을 때

#relative{
            background-color: powderblue;
            width: 200px; height: 50px;
            left: 50px; top: 50px;
            position: relative;  <!-- position 속성 추가 -->
        }

relative속성이 없을 때의 파란박스의 위치(속성: static)을 기준으로 'I'm relative'가 가로, 세로 50px씩 이동한 것을 확인할 수 있습니다.

 

3. absolute

요소가 순서대로 배치되는 일반적인 문서 흐름에 상관없이 속성값(left, top 등)을 이용하여 요소를 위치시킵니다.
조상 요소가 존재하면 자기자신과 가장 가까운 조상 요소에 대해 상대적으로 작용합니다.

조상 요소란 자기 자신을 감싸고 있는 요소입니다.

position: absolute;

alsolute속성도 예시코드를 통해 확인해봅니다.

 

↓예시코드

1) 조상요소 없음

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #wrap {
            position: relative;
            width: 250px;
            height: 250px;
            border: 3px solid slateblue;
        }
       
        .box {
            position: absolute;
            width: 50px;
            height: 50px;
            background: palevioletred;
        }
        #abs1 {
            top:0; left:0;
        }
        #abs2 {
            top:0; right:0;
        }
        #abs3 {
            top: 100px; left: 100px;
        }
        #abs4 {
            bottom: 0; left: 0;
        }
        #abs5 {
            bottom:0; right:0;
        }
    </style>
</head>
<body>
    <div id="wrap"></div> <!-- id="wrap" 의 속성은 relative -->
        <div class="box" id="abs1"></div> <!-- class="box"의 속성은 absolute -->
        <div class="box" id="abs2"></div>
        <div class="box" id="abs3"></div>
        <div class="box" id="abs4"></div>
        <div class="box" id="abs5"></div>
    
</body>
</html>

조상요소가 없으므로 absolute속성의 분홍색 박스들은 body를 기준으로 상대적 위치 가집니다.

즉, 보라색 박스를 무시하고 화면에 대해 가장자리에 분포하게 됩니다.

이때 화면의 크기를 조정해도 분홍색 박스들은 가장자리에 분포하게 됩니다.

 

2) 조상요소 존재

<div id="wrap">
        <div class="box" id="abs1"></div>
        <div class="box" id="abs2"></div>
        <div class="box" id="abs3"></div>
        <div class="box" id="abs4"></div>
        <div class="box" id="abs5"></div>
    </div>

<!-- wrap 안에 box가 감싸져 있으므로 box의 조상요소는 wrap -->

보라색 테두리 안에 분홍색 박스들이 중앙과 가장자리에 분포하게 되었죠?

즉, 보라색 테두리로 구현된 조상요소에 대해 분홍색 박스들은 상대적인 위치 가집니다.

 

4. fixed

fixed 속성은 브라우저를 기준으로, 스크롤을 움직여도 위치가 고정됩니다.

position: fixed;

↓예시코드

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #fixed{
            background-color: palevioletred;
            width: 200px; height: 50px;
            right: 300px; top:200px;
            position: fixed;
        }
        
        p {
            width: 300px;
        }
    </style>
</head>
<body>
    <div id="fixed">I'm fixed icon</div>
        <p>웹(web) 로그(log)의 줄임말로, 1997년 미국에서 처음 등장하였다. 새로 올리는 글이 맨 위로 올라가는 일지(日誌) 형식으로 되어 있어 이런 이름이 붙었다. 일반인들이 자신의 관심사에 따라 일기·칼럼·기사 등을 자유롭게 올릴 수 있을 뿐 아니라, 개인출판·개인방송·커뮤니티까지 다양한 형태를 취하는 일종의 1인 미디어이다.

웹 게시판, 개인 홈페이지, 컴퓨터 기능이 혼합되어 있고, 소프트웨어를 무료 또는 싼 가격에 구입할 수 있으며, 인터넷 홈페이지 제작과 관련된 지식이 없어도 자신의 공간을 만들 수 있다는 장점이 있다. 즉 블로그 페이지만 있으면, 누구나 텍스트 또는 그래픽 방식을 이용해 자신의 의견이나 이야기를 올릴 수 있고, 디지털카메라를 이용해 사진 자료를 올릴 수 있는 새로운 개념의 미디어이다.

세부 기능은 ① 일기처럼 날짜별로 구성되어 있어 일상에서 일어나는 일들을 손쉽게 기록할 수 있다. ② 완벽한 자료 관리가 가능하다. ③ 독자적인 자료 보관이 가능하고, 저장된 파일을 이메일로 보낼 수 있다. ④ 일반 커뮤니티의 게시판과 달리 콘텐츠 중심으로 구성되어 있어 더 많은 커뮤니티 기능을 할 수 있다. ⑤ 자신이 작성한 콘텐츠를 중심으로 한 동조자가 생겨 광범위한 커뮤니티를 형성할 수 있고, 남이 만든 블로그에 가입할 수도 있다. ⑥ 채팅이 가능하며, 특히 채팅한 내용들이 날짜별로 블로그 페이지에 기록된다. ⑦ 웹 브라우저 상에서 실시간으로 콘텐츠의 내용을 볼 수 있다.

미국에서는 이미 일반화되어 있으며, 한국에서도 갈수록 사이트가 늘어나고 있는데, 기술적·상업적인 제약 없이 누구나 자신의 생각을 사이트에 올려 다른 사람들과 공유할 수 있는 특성 때문에 기존의 언론을 보완할 수 있는 대안언론으로서도 주목을 받고 있다. 
출처 : [네이버 지식백과] 블로그 [blog] (두산백과)</p>
    
</body>
</html>

스크롤 이동해도 icon의 위치가 설정값으로 고정되는 것이 바로 fixed속성입니다.

flex

flex는 비교적 최신의 배치 속성입니다.

조상요소 안에서 자식요소들이 설정된 속성으로 배치됩니다. 기본은 가로 방향으로 배치됩니다.

 

특별히 지정한 속성이 없다면,

자식요소 width는 자식요소들의 width 합이 조상요소를 넘지 않을 때, 자식요소가 가진 만큼 차지합니다. width합이 조상요소를 넘기면 더 이상 늘어나지 않고 조상요소의 width값으로 고정됩니다.

height는 조상요소의 height 크기를 따릅니다.

display: flex;

↓예시코드

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #container{
            display: flex;
            background-color: pink;
            width: 300px; height: 120px;
        }
        div{
            background-color: purple;
            width: 100px;
            font-size: 20px;
            margin: 10px;
        }
        
    </style>
</head>
<body>
    <div id="container">
        <div>No.1</div>
        <div>No.2</div>
        <div>No.3</div>
    </div>
    
</body>
</html>

grid layout 그리드 레이아웃

그리드를 이용하여 유동적인 레이아웃 표현이 가능해집니다.

 

그리드로 묶고 싶은 태그들을 묶은 태그의 css에 적용합니다.

더보기 
display:grid;

grid-template-columns: 150px 1fr 2fr;

// 열 넓이 표현:열의 절대적 크기표현은 px, 상대적 크기 비 표현은 fr

grid-template-rows: 150px 1fr 2fr;

// 행 넓이 표현:행의 절대적 크기표현은 px, 상대적 크기 비 표현은 fr

예시 코드입니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #grid{
                border:3px solid lightpink;
                display:grid;
                grid-template-columns: 150px 1fr 2fr;
             }
            div{
                border:3px solid lightskyblue;
            }
        </style>
    </head>

    <body>
        <div id = "grid">
            <div>grid1</div>
            <div>grid2</div>
            <div>grid3</div>
        </div>
    </body>

</html>

 

화면의 넓이를 줄였을 때
화면의 넓이를 넓혔을 때

responsive web 반응형 디자인

화면의 크기에 따라 반응하는 디자인을 말합니다.

 

미디어쿼리의 이용

@media로 감싼 태그의 반응형 디자인 제공

@media(){
div{
...}
}
@media(max-width:700px)

// 화면 최대 넓이가 700px 일 때(=화면이 700px보다 작을 때) 안의 태그들 반응

@media(min-width:700px)

// 화면 최소 넓이가 700px 일 때(=화면이 700px보다 클 때) 안의 태그들 반응

소스코드

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
            border: 5px solid skyblue;
            font-size: 50px;
            }

            @media(max-width:700px){
                #re2{
                display:none;
                }
            }
        </style>

    </head>

    <body>
        <div id = "re1">responsive web1</div>
        <div id = "re2">responsive web2</div>
    </body>

</html>

화면 > 700px

 

화면 < 700px



'Study > web기술' 카테고리의 다른 글

JavaScript cheat sheet  (0) 2021.05.13
html cheat sheet  (2) 2021.05.10

'Study/web기술'의 다른글

  • 현재글CSS cheat sheet

관련글

댓글

티스토리툴바