본문 바로가기
☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 54_자식 요소의 순서를 지정하자

by 조반짝 2023. 6. 29.
728x90
반응형

01 자식 요소의 순서를 지정하자

 

html 마크업

css편집

●order: 나열되어있는 자식들에게 order로 순서값을 변경해 줄 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자식 요소의 순서를 지정하자</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        section{
            width: 100%;
            background-color: lightblue;
            /* 자식을 옆으로 나열해줌, 높이값이 살아있음 */
            display: flex;
        }
        section article{
            width: 100px;
            height: 100px;
            background-color: aqua;
            font-size: 50px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #000;
        }
        section article:nth-of-type(1){
            order: 2;
        }
        section article:nth-of-type(2){
            order: 3;
        }
        section article:nth-of-type(3){
            order: 1;
        }
        
    </style>
</head>
<body>
    <section>
        <article>1</article>
        <article>2</article>
        <article>3</article>
    </section>
</body>
</html>

 

02 요소의 안쪽 여백 확대하기

●flex-grow:1; 모든 article이 똑같은 사이즈로 넓이값이 지정됨

article 중 하나만 2를 넣었을 때 

●flex-grow:2; 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>요소의 안쪽 여백 확대하기</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        section{
            width: 100%;
            background-color: lightblue;
            /* article 옆으로 나열 */
            display: flex;
        }
        section article{
            background-color: aqua;
            border: 1px solid #000;
            font-size: 50px;
        }

        section article:nth-of-type(1){
            flex-grow: 1;
        }
        section article:nth-of-type(2){
            flex-grow: 2;
        }
        section article:nth-of-type(3){
            flex-grow: 1;
        }

    </style>
</head>
<body>
    <section>
        <article>FLEX GROW_1</article>
        <article>FLEX GROW_2</article>
        <article>FLEX GROW_3</article>
    </section>
</body>
</html>

03 요소의 안쪽 여백을 축소하기

●flex-shrink: 여백을 축소한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>요소의 안쪽 여백을 축소하기</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        section{
            width: 100%;
            background-color: lightblue;
            /* article 옆으로 나열 */
            display: flex;
        }
        section article{
            background-color: aqua;
            border: 1px solid #000;
            font-size: 40px;
            width: 400px;
            box-sizing: border-box;
            display: flex;
        }

        section article:nth-of-type(1){
            flex-shrink: 1;
        }
        section article:nth-of-type(2){
            flex-shrink: 2;
        }
        section article:nth-of-type(3){
            flex-shrink: 3;
        }
    </style>
</head>
<body>
    <section>
        <article>FLEX shrink</article>
        <article>FLEX shrink</article>
        <article>FLEX shrink</article>
    </section>
</body>
</html>
728x90
반응형
저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 55_ parallax04  (0) 2023.06.29
[JAVASCRIPT]5.클래스 제어하기  (0) 2023.06.29
비주얼 스튜디오 코드 53_parallax03  (2) 2023.06.28
비주얼 스튜디오 코드 52_웹 표준)갤러리 이미지 넣기  (0) 2023.06.28
비주얼 스튜디오 코드 51_ 햄버거 메뉴  (0) 2023.06.27

관련글

티스토리툴바