Notice
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

나만을 위한 블로그

[CSS] 공부한 CSS 속성 정리 - 1 - 본문

개인 공부/HTML, CSS, JavaScript

[CSS] 공부한 CSS 속성 정리 - 1 -

참깨빵위에참깨빵 2022. 4. 9. 22:53
728x90
반응형

안드로이드를 쓰다가 CSS를 연습해보니 헷갈려서 따로 정리해둔다.

 

list-style

 

이 속성은 ol, ul, li 태그에 적용할 수 있고 리스트로 표시되는 요소들의 모양, 위치, 이미지를 정의하는 속성이다. MDN에선 아래 예시들을 보여준다.

 

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: revert-layer;
list-style: unset;

 

이 list-style 속성은 다음 속성의 약어기도 하다.

 

  • list-style-type
  • list-style-position
  • list-style-image

 

type, position, image를 사용하지 않으면 list-style의 기본값이 적용된다.

각 키워드 별 list-style에서 사용할 수 있는 값은 아래와 같다.

 

 

font-weight

 

이 속성은 텍스트의 굵기 정도, 가중치를 정의하는 속성이다. MDN에서 아래 예시들을 보여주고 있다.

 

font-weight: normal;
font-weight: bold;

/* Relative to the parent */
font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: unset;

 

normal은 400, bold는 700과 같다.

 

display

 

이 속성은 요소가 어떻게 표시되는지를 결정한다. w3schools에서 아래의 사용예시를 보여준다.

 

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

 

none은 display 설정을 건너뛰겠다는 것 같고, 나머지 3개가 뭔지 모르겠다.

 

먼저 inline의 사전적 정의는 "(내연기관이) 직렬의, (부품 장치가) 일렬로 늘어선"이다. MDN에선 아래와 같이 설명하고 있다.

 

https://developer.mozilla.org/ko/docs/Web/CSS/display

 

display - CSS: Cascading Style Sheets | MDN

display CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다. display 속성은, 형식적으로는

developer.mozilla.org

앞이나 뒤에 줄바꿈을 만들지 않는 하나 이상의 인라인 요소 상자를 생성한다. 정상적인 흐름에서 공백이 있는 경우 다음 요소는 같은 줄에 있다

 

그리고 block은 아래와 같이 설명한다.

블록 요소 상자를 만들어서 일반 흐름에 있을 때 요소 앞뒤에 줄바꿈을 생성한다

 

inline-block의 설명은 레거시(display-legacy) 탭에 따로 빼져 있다.

단일 인라인 상자인 것처럼 주변 컨텐츠와 함께 흐르는 블록 요소 상자를 생성한다(대체된 요소와 매우 유사하게 작동함). inline flow-root와 동일하다

 

inline-block은 CSS3에서는 레거시인 듯 하니 불안하면 inline flow-root를 쓰면 될 듯하다.

그러나 위 설명들은 뭔 말인지 잘 와닿지 않으니 w3schools에서 제공하는 예제를 직접 타이핑해서 확인해보자.

 

<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
</style>
</head>
<body>
<h1>The display Property</h1>

<h2>display: none:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex1">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: inline:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex2">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex3">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: inline-block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex4">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

</body>
</html>

 

위 코드의 결과물은 아래와 같다.

 

 

inline-block을 보면 inline처럼 표시되지만 2번 줄에 마진 속성이 걸려있는 듯하다. 어떤 블로그에서 설명하는 inline-block 내용을 가져왔다.

 

https://www.daleseo.com/css-display-inline-block/

 

[CSS] display 속성: inline, block, inline-block

Engineering Blog by Dale Seo

www.daleseo.com

기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. 하지만 inline 엘리먼트엣어 불가능하던 width, height 속성 지정 및 margin, padding 속성의 상하 간격 지정이 가능해졌다. 대표적인 inline-block 엘리먼트로 button, input, select 태그 등을 들 수 있다

 

그런데 display의 값으로 flex를 주는 경우도 있다.

flex는 CSS3부터 추가된 방식으로 레이아웃 배치 기능에 중점을 두고 있다. flexible box, flexbox라고도 불린다. 뭔 소린지 코드로 확인해보자. 예제 코드는 아래 링크에서 가져왔다.

 

https://heinafantasy.com/78

 

flex 기초 - flex란 무엇인가?

웹페이지의 레이아웃을 잡을 때 보통 display, float, position과 같은 css 속성들을 이용한다. 그런데 이러한 속성들로 레이아웃을 구현하는 게 몹시 복잡하거나 어려울 때가 있다. 그 한계를 극복하기

heinafantasy.com

 

대충 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>
        .flex-container {
            border: 1px solid white;
        }

        .flex-item {
            margin: 5px;
            width: 50px;
            height: 50px;
            background-color: #F2C94C;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
    </div>
</body>
</html>

 

이렇게 만들고 난 다음 웹 페이지를 보면 이렇게 나온다.

 

 

div는 기본적으로 block 속성을 갖고 있어서 안드로이드의 리니어 레이아웃 쓴 것마냥 세로로 쌓인다.

여기서 flex-container에 display를 flex로 먹이면 어떻게 될까?

 

<!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>
        .flex-container {
            display: flex;
            border: 1px solid white;
        }

        .flex-item {
            margin: 5px;
            width: 50px;
            height: 50px;
            background-color: #F2C94C;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
    </div>
</body>
</html>

 

 

세로로 보이던 게 가로로 보인다. 세로로 쌓여있을 때보다 요소들 간의 간격이 좀 넓어진 것 같은데 다른 속성 먹여서 처리하면 될 것이다.

반응형

'개인 공부 > HTML, CSS, JavaScript' 카테고리의 다른 글

[HTML] button 태그에 type 속성을 쓰는 이유  (0) 2022.04.07
[JS] 자바스크립트란? 자바스크립트의 타입  (0) 2022.04.07
React.js란?  (0) 2021.08.29
'개인 공부/HTML, CSS, JavaScript' Related Articles more
Comments