2021.11.16 Today I Learned

유니·2021년 11월 16일

CSS html

오늘부터 CSS의 기초를 다시 다잡을 예정입니다.

항상 따라만 하여 기초가 너무 부족한거같아 처음부터 다시 시작하려고합니다.

0부터 시작이 아닌 어려워하거나 잘 모르는 개념부터 차근차근 밟아나갈예정입니다.

1. 가중치

가중치는 CSS에서의 우선순위에 있어 가장 중요한 값으로 id, class와 같은 선택자에 의해 지정된다.

기본적으로 id > class > tag 순으로 지정되나 !important라는 예외도 존재한다.

!important는 가중치를 무시하고 가장 우선순위로 만들어 주는 선언이지만 자칫하면 기존의 가중치대로 쌓여진 코드를 다 무시함으로 망가트릴 수 있기 때문에 조심히 사용하고 되도록이면 사용하지 않아야한다.

id, class, tag와 같은 선택자들 외에 전역선택자( * )와 조합자(+, >, ~, ...)들은 명시도에 영향을 주지 않는다.

아래의 예시를 통해 더 자세히 알아보자.

Document

hello

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #one{
            color: red;
        }
        .two{
            color: blue;
        }
        h1{
            color: green;
        }
    </style>
</head>
<body>
    <h1>hello</h1>
    <h1 class="two">hello</h1>
    <h1 id="one" class="two">hello</h1>
</body>
</html>

코드를 보면 기본적으로 태그h1에 폰트색 grenn값을 줌으로써 h1태그는 green값인것을 알수 있다.
하지만 가중치에의해 클래스가 부여될 경우 클래스에 부여된 폰트값: blue 다라가는 모습을 볼수있다. 그 후 태그의 가중치를 잡아먹었던 클래스 역시 id에 의해 가중치가 잡아먹히고 id에 부여된 폰트색인 red로 바뀐걸 볼 수 있다.

더 자세히 다가가 보면 style에서 선언한 #one, .two, h1에 마우스를 올려보면

이런식으로 Selector Specificity에 각각의 가중치가 적혀있는것을 볼 수 있다.
id값의 경우 (1,0,0) 으로써 가장 높은 값을 보유하고있고
class는 (0,1,0), h1은 (0,0,1)로 각각 다른 가중치를 보여준다.

가중치에 따라 어떠한 결과물이 나올지 정해지기때문에 항상 CSS를 작성할때는 가중치를 염두해두고 작성해야한다.

2. Position

position은 HTML태그나 id, class 박스등의 위치를 지정해주는 속성이다.

static

모든 태그들은 기본적으로 static속성을 가지고 있다. static속성은 html내에서 작성한 태그 순으로 위치가 지정된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 50px;
            height: 50px;
        }
        .one{
            background-color: red;
        }
        .two{
            background-color: orange;
        }
        .three{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>
</html>

relative

relative는 단어의 뜻처럼 상대적인 속성을 가지고 있는데 원래 기존에 자신이 있어야할, static일때의 자리를 기준으로 상대적으로움직인다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 50px;
            height: 50px;
        }
        .one{
            background-color: red;
        }
        .two{
            position: relative;
            left: 40px;
            background-color: orange;
        }
        .three{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>
</html>

absolute

absolute는 단어의 뜻처럼 절대적인 위치를 갖는다. relative는 상대적으로 움직이기때문에 다른 포지션의 영역을 침범하지 않지만 absolute는 절대적인 위치로 움직이기 때문에 다른포지션의 영역에 침범하기도 한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 50px;
            height: 50px;
        }
        .one{
            background-color: red;
        }
        .two{
            position: relative;
            left: 40px;
            top: 40px;
            background-color: orange;
        }
        .three{
            position: absolute;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>
</html>

fixed

네이버의 상단 검색창 처럼 특정한 위치에서 고정되어 스크롤을 내려도 사라지지 않는다면 그것은 fixed를 사용한 것이다. fixed는 현재 사용자가 보고있는 뷰포트를 기준으로 화면에 붙어있는것처럼 움직인다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 50px;
            height: 50px;
        }
        .one{
            background-color: red;
        }
        .two{
            position: fixed;
            right: 40px;
            bottom: 40px;
            background-color: orange;
        }
        .three{
            position: absolute;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, vero dolores quidem consequuntur odit dignissimos maiores assumenda! Facilis vero tenetur officiis maiores. Rerum impedit exercitationem, illum nostrum sequi fugiat inventore quos deserunt. Aliquam enim ipsam impedit, molestias dolores consectetur itaque facilis architecto amet ex laudantium exercitationem excepturi quae aspernatur quod.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, vero dolores quidem consequuntur odit dignissimos maiores assumenda! Facilis vero tenetur officiis maiores. Rerum impedit exercitationem, illum nostrum sequi fugiat inventore quos deserunt. Aliquam enim ipsam impedit, molestias dolores consectetur itaque facilis architecto amet ex laudantium exercitationem excepturi quae aspernatur quod.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, vero dolores quidem consequuntur odit dignissimos maiores assumenda! Facilis vero tenetur officiis maiores. Rerum impedit exercitationem, illum nostrum sequi fugiat inventore quos deserunt. Aliquam enim ipsam impedit, molestias dolores consectetur itaque facilis architecto amet ex laudantium exercitationem excepturi quae aspernatur quod.</p>
</body>
</html>