1.  flex-direction

🐰  flex-direction이 row인 경우 컨테이너의 자식 요소에 넓이를 지정하지 않으면 내부 컨텐츠에 따라 넓이가 정해짐
         ▶️  inline-block 속성과 유사      

🐰  flex-direction이 column인 경우 넓이를 지정하지 않으면 자동으로 넓이가 100%로 정해짐.
        ▶️  block 속성과 유사

    <style>
        #container {
            margin-top: 10px;
            border: 3px solid #af94de;
            display: flex;
            flex-direction: column | row;
        }

        .item {
            padding: 10px;
            margin: 10px;
            background: #fcfc9e;
            color: #525d73;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
    </div>
</body>

 

flex-direction: row

 

flex-direction:column

 

 

 

2. flex-wrap

🐰  flex-direction: column 일 때 속성 적용 안 됨

     /* 위 예제 스타일과 똑같이 적용하고 flex-wrap 속성만 추가 */
     #container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap | wrap-reverse;
        }

    </style>
</head>
<body>
    <div id="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
        <div class="item">Item 9</div>
        <div class="item">Item 10</div>
        <div class="item">Item 11</div>
        <div class="item">Item 12</div>
    </div>

</body>

 

주축이 row인 경우, flex-wrap 속성의 wrap과 wrap-reverse를 적용했을 때
주축이 column인 경우 적용 안됨

 

 

3.  justify-content

🐰  flex-direction: column 일 때 속성 적용 안 됨

flex-start : 줄의 시작 지점에 배치. 왼쪽 맞춤. 기본 값
flex-end : 줄의 끝 지점에 배치. 오른쪽 맞춤.
center : 가운데 맞춤
space-between : 왼쪽과 오른쪽 끝에 있는 요소를 끝에 붙이고, 남은 부분들은 균등한 공간을 형성한 상태로 배치.
space-around : 항목들 간에 동일한 간격
space-evenly : 왼쪽과 오른쪽 끝에 있는 공간도 포함해서 균등한 여백을 형성한 상태로 배치
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            margin-top: 10px;
            border: 3px solid #af94de;
            display: flex;
            justify-content: flex-start | flex-end | center |
                             spac-between | space-around | space-evenly;
        }

        .item {
            padding: 10px;
            background: #fcfc9e;
            color: #525d73;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
    </div>

</body>

 

flex-start
flex-end
center
space-between
space-around
space-evenly

 

 

4.  align-itmes

🐰  수직방향 맞춤. 부모 요소에 빈공간이 있으면 자식 요소에 수직 방향으로 어떻게 맞출지 지정

 

flex-start       - 부모 요소의 윗부분에 맞춰 배치
flex-end         - 부모 요소의 아랫부분에 맞춰 배치
center             - 중앙에 배치
stretch            - 부모 요소의 높이 또는 콘텐츠의 가장 높이가 높은 자식 요소에 맞춰 늘어남. 초기값
baseline          -  문자 기준선에 맞춰 배치

 

<head>
    <style>
        #container {
            margin-top: 10px;
            border: 3px solid #af94de;
            
            display: flex;
            align-items: flex-start | flex-end | center | stretch | baseline;
        }

        .item {
            padding: 10px;
            margin: 10px;
            background: #fcfc9e;
            color: #525d73;
        }
        
        .item:nth-child(2) { /* 두번째 박스만 지정 */
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>

flex-start
flex-end
center
stretch
baseline

 

 

5.  align-content

🐰  여러 줄이 될 때의 맞춤. 자식 요소가 여러 줄이 됐을 때의 수직 방향 맞춤을 지정
🐰  flex-wrap: nowrap 이 적용 되어 있다면 자식 요소가 한 줄이 되므로 align-content 속성 의미가 없음

 

flex-start : 부모 요소의 윗부분에 맞춰 배치
flex-end : 부모 요소의 아랫부분에 맞춰 배치
center : 중앙에 배치
space-between : 위아래 끝에 있는 요소를 끝에 붙이고, 남은 부분들은 균등한 공간을 형성한 상태로 배치
space-around : 위아래 끝에 있는 여백도 포함해서 균등한 공간을 형성한 상태로 배치
space-evenly : 항목들 간에 동일한 간격
stretch : 부모 요소의 높이에 맞게 자식 요소의 높이를 늘여서 배치

 

 
        #container {
            width: 400px;
            height: 300px;

            display: flex;
            flex-wrap: wrap;
            align-content: flex-start | flex-end | center | space-between
                           space-around | space-evenly | stretch ;
        }

    </style>
</head>
<body>
    <div id="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
        <div class="item">Item 9</div>
        <div class="item">Item 10</div>
        <div class="item">Item 11</div>
        <div class="item">Item 12</div>
    </div>

</body>

flex-start / flex-end
center / space-between
space-around / space-evenly

 

stretch

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

저작자표시 비영리 변경금지

'HTML&CSS > CSS' 카테고리의 다른 글

[CSS] 플렉스(flex) 박스 | flex-direction, flex-wrap, justify-content, align-content, align-items  (0) 2024.03.26
[CSS] position 속성, z-index  (1) 2024.03.25
[CSS] 목록 스타일, 표 스타일  (1) 2024.03.23
[CSS] 글꼴 및 텍스트 스타일 지정, 웹 폰트 사용  (0) 2024.03.23
[CSS] 배경 이미지 지정과 속성  (0) 2024.03.22

 

 

1.  플렉스 박스 레이아웃 flex box lay-out 에서 사용하는 용어

📌  플렉스 박스 레이아웃은 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치
📌  여유 공간이 생길 경우 너비나 높이를 적절하게 늘이거나 줄일 수 있다

 

 

출처:&nbsp;https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

 

 

① 플렉스 컨테이너 (부모 박스) : 플렉스 박스 레이아웃을 적용할 대상을 묶는 요소

② 플렉스 항목 (자식 박스) : 플렉스 박스 레이아웃을 적용할 대상으로 위 이미지의 'flex item' 모두 해당

③ 주축(main axis) : 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향 (왼쪽 ➡️ 오른쪽)

                                 플렉스 항목의 배치가 시작되는 위치를 '주축 시작점', 끝나는 위치를 '주축 끝점'

④ 교차축(cross axis) : 주축과 교차하는 방향 (위 ➡️ 아래)

                                      플렉스 항목의 배치가 시작되는 위치를 '교차축 시작점', 끝나는 위치를 '교차축 끝점'

 

 

2.  플렉스 박스 항목을 배치하는 속성

 

종류 설명
justify-content 주축 방향의 정렬 방법
align-self 교차축에 있는 개별 항목의 정렬 방법
align-content 교차축에서 여러 줄로 표시된 항목의 정렬 방법
align-items 자식 요소가 1개이거나 줄 바꿈이 필요없을 때

 

1) display 속성

 

flex : 부모요소는 블록 속성을 유지하면서 자식 요소에  flex 환경설정.
inline-flex : 부모요소는 인라인 속성으로 변경하면서 자식 요소에 flex 환경설정.
                          ▶️ 플렉스 박스를 인라인 레벨 요소로 정의.

💡 배치할 요소에 속성을 지정하는 것이 아닌 부모 요소에 속성을 지정
💡 inline 요소도 flex 적용 하면 너비와 높이를 가짐

 

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        main {
            width: 100%;
            height: 100vh; /* vh : Vertical Height. 화면 기준 높이 */
            background: #eaeaea;
        }

        section {
            border: 10px solid pink;
        }

        section article {
            width: 100px;
            height: 100px;
            background: #b6b2b2;
            border: 1px solid #b6b2b2;
        }

        section article {
            /* float: left; */
        }

        section article {
            /* display: inline-block */
        }
        section {
            /* display: flex; */
            display: inline-flex; /* 부모 요소인 section을 인라인 속성으로 바꾸기 */
        }

    </style>
</head>
<body>
    <main>
        <section>
            <article></article>
            <article></article>
            <article></article>
            <article></article>
            <article></article>
        </section>
    </main>
</body>

float: left 적용시

display: inline-block 적용 시 ( 글자 사이 간격 때문에 빈틈이 생김 )

display: flex 적용 시

display: inline-flex 적용 시

 

 

2) flex-direction 속성

 

🥑  플렉스 항목을 배치하는 주축과 방향을 지정하는 속성

 

 flex-direction : row - flex의 기본축을 가로로 지정
                                ▶️ 주축을 가로로, 교차축을 세로로 지정  <기본값> / 왼쪽에서 오른쪽
 flex-direction : column - flex의 기본축을 세로로 지정
                                ▶️ 주축을 세로로 교차축을 가로로 지정 / 위에서 아래로
 flex-direction : row-reverse - 주축을 가로로 지정하고 자식 요소 콘텐츠를 가로 역순으로 정렬. 
                              ▶️ 오른쪽에서 왼쪽으로 
 flex-direction : column-reverse - 주축을 세로로 지정하고 자식 요소 콘텐츠를 세로 역순으로 정렬.

                                  ▶️ 아래에서 위로

<head>
<!-- 위 코드와 스타일 똑같이 적용 후 지정 -->
    <style>
        section { /* flex-direction 적용 */
            display: flex;
            flex-direction: row | column | row-reverse | column-reverse;
        }
    </style>
</head>
<body>
    <main>
        <section>
            <article>1</article>
            <article>2</article>
            <article>3</article>
            <article>4</article>
            <article>5</article>
        </section>
    </main>
</body>

flex-direction: row 지정

flex-direction: row-reverse 지정

flex-direction: column 적용 시

flex-direction: column-reverse 적용 시

 

 

3) flex-wrap 속성

 

🥑  플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정

🥑  float 속성을 사용하여 레이아웃을 만들 때 모든 자식 요소의 총 너비 값이 부모 요소의 너비 값보다 크면 자동으로 줄 바꿈이 되지만
       flex 속성에서는 flex-wrap을 설정해야 줄 바꿈을 할 수 있음

🥑  속성 지정 후 웹 브라우저 화면의 너비를 늘리거나 줄여 보면 플렉스 컨테이너의 너비에 따라 여러줄로 표시

🥑  flex-direction: column 일 경우에는 적용이 안됨

 

flex-wrap: nowrap - <기본값>. 자식요소의 줄 바꿈을 하지 않음
flex-wrap: wrap - 자식요소의 줄바꿈 o 
flex-wrap: wrap-reverse - 자식요소 줄바꿈 o, 아래에서 위로 배치

 

    <style>
        section {
            display: flex;
            flex-wrap: nowrap | wrap | wrap-reverse;
        }
     
    </style>
</head>
<body>
<main>
    <section>
        <article>1</article>
        <article>2</article>
        <article>3</article>
        <article>4</article>
        <article>5</article>
        <article>6</article>
        <article>7</article>
    </section>
</main>

nowrap인 경우

wrap인 경우

wrap-reverse인 경우

 

4) flex-flow 속성

 

🥑  flex-direction  속성과 flex-wrap 속성을 한꺼번에 지정하여 플렉스 항목의 배치방향을 결정하거나 줄을 바꾼다

🥑  기본값은 flex-flow: row nowrap

 

 

5) justify-content 속성

 

🥑  주축에서 플렉스 항목 간의 정렬 방법을 지정

 

justify-content: flex-start              - 자식 요소를 시작쪽부터 정렬
justify-content: flex-end                - 자식 요소를 끝쪽부터 정렬
justify-content: center                    - 자식 요소를 가운데로 정렬
justify-content: space-between  - 자식 요소를 양끝부터 나눠서 정렬
justify-content: space-around     - 자식 요소의 여백을 균일하게 배분해서 정렬
justify-content: space-evenly      - 자식 요소의 여백을 양끝까지 균일하게 배분해서 정렬

 

<head>
    <style>
        section {
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-flow: row wrap; /* row 기준으로 적용 */

            justify-content: flex-start | flex-end | center | 
                             space-between | space-around | space-evenly;
        }

    </style>
</head>
<body>
<main>
    <section>
        <article>1</article>
        <article>2</article>
        <article>3</article>
        <article>4</article>
        <article>5</article>
    </section>
</main>
</body>

 

start와 end 적용 결과
center와 space-between 적용 결과
space-around와 space-evenly

 

 

 

6) align-content 

 

🥑  align-content, align-items : 반대 축 정렬

🥑  주축에서 줄 바꿈이 생겨 ( 브라우저 크기 줄이는 등 ) 자식 요소를 여러 줄로 표시할 때 사용

🥑  교차축 기준 플렉스 항목 간의 간격을 지정할 수 있다

 

align-content: flex-start                - 자식 요소를 시작 방향으로 정렬
align-content: flex-end                  - 자식 요소를 종료 방향으로 정렬
align-content: center                      - 자식 요소를 가운데로 정렬
align-content: space-between    -  첫 번째 항목과 끝 항목을 교차축의 시작점과 끝점에 맞추고
                                                                      나머지 항목은 그 사이에 같은 간격으로 배치 
align-content: space-around       - 자식 요소들의 여백을 균일하게 배분해서 정렬
align-content: space-evenly        - 자식 요소들의 여백을 양끝까지 균일하게 배분해서 정렬

 

    <style>  
        section {
            height: 100%;
            box-sizing: border-box;

            display: flex;
            flex-flow: row wrap;

            align-content: flex-start | flex-end | center | 
                           space-between | space-around | space-evenly;
        }
    </style>
</head>
<body>
<main>
    <section>
        <article>1</article>
        <article>2</article>
        <article>3</article>
        <article>4</article>
        <article>5</article>
        <article>1</article>
        <article>2</article>
        <article>3</article>
        <article>4</article>
        <article>5</article>
    </section>
</main>

</body>

flex-start와 flex-end

 

center 와 space-between

 

space-around와 space-evenly

 

 

7) align-items 속성

 

🥑  align-items : 자식 요소가 1개 이거나 줄 바꿈이 필요없을 때

 

align-items: flex-start     - 교차축 시작점에 맞춰 배치
align-items: flex-end       - 교차축 끝점에 맞춰 배치
align-items: center           -  교차축 중앙에 배치
align-items: stretch          -  <기본값> 플렉스 항목을 확장해 교차축을 꽉 채움
align-items: baseline        -  교차축의 문자 기준선에 맞춰 배치

💡 stretch와 baseline은 크기 지정을 하지 않았을 때 적용 됨!

 

<head>    
    <style>
        section {
            height: 100%;
            box-sizing: border-box;

            display: flex;
            flex-flow: row nowrap;

            align-items: stretch;
        }
    </style>
</head>
<body>
<main>
    <section>
        <article>1</article>
        <article>2</article>
        <article>3</article>
        <article>4</article>
        <article>5</article>
    </section>
</main>
</body>

 

flex-start와 flex-end
center

 

baseline과 stretch

 

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

저작자표시 비영리 변경금지

'HTML&CSS > CSS' 카테고리의 다른 글

[CSS] 플렉스 박스 | 크기를 지정하지 않은 경우 속성 적용 결과 ver  (0) 2024.03.26
[CSS] position 속성, z-index  (1) 2024.03.25
[CSS] 목록 스타일, 표 스타일  (1) 2024.03.23
[CSS] 글꼴 및 텍스트 스타일 지정, 웹 폰트 사용  (0) 2024.03.23
[CSS] 배경 이미지 지정과 속성  (0) 2024.03.22

1.  position 속성

 

🥑  배치 방법을 지정하는 속성
🥑  각 요소의 위치를 정하는 방법

상대 위치 좌표 : 태그 요소를 입력한 순서를 통해 상대적으로 위치를 지정
절대 위치 좌표 : 태그 요소로 만들어진 x좌표와 y좌표를 설정해 절대 위치를 지정

💡 함께 적용가능한 속성
     top - y축 상단기준
     bottom - y축 하단기준
     left - x축 좌측기준
     right - x축 우측기준
     z-index - 요소의 쌓임 순서를 정의. 값이 클 수록 앞쪽에 배치 된다.

 

종류 설명
static 문서의 흐름(위에서 아래로 순서대로 배치)에 맞춰 배치. 기본값.
relative 상대 좌표와 함께 위치를 지정 (상대위치 지정방식)
태그가 만들어진 순서대로 나열
absolute 절대 위치 좌표를 설정. 부모 박스 기준으로 좌표를 설정
단, 부모 요소가 static일 경우 부모 요소로 인식하지 않음
fixed 고정된 상태로 위치가 지정

 

 

 

static

위치지정불가 ) top, left, right, bottom의 영향을 받지 않음

 

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            border: 4px solid black;
            margin-left: 30px;
            font-size: 30px;
            line-height: 300px;
            text-align: center;
        }

    </style>
</head>
<body>
    <div>static-1</div>
    <div>static-2</div>
    <div>static-3</div>
</body>

 

 

 

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            border: 4px solid black;
            margin-left: 30px;
            font-size: 30px;
            line-height: 300px;
            text-align: center;

            /* position 속성을 지정하지 않은 상태 : static */
            left: 100px; /* 좌표 인식이 안됨 */
            top: 100px; /* 좌표 인식이 안됨 */
        }
    </style>
</head>
<body>
    <div>static-1</div>
    <div>static-2</div>
    <div>static-3</div>
</body>

 

relative
위치지정가능) 부모박스의 역할로 주로 사용 
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            border: 4px solid black;
            margin-left: 30px;
            font-size: 30px;
            line-height: 300px;
            text-align: center;

            position : relative; /* 상대좌표 */
            top : 100px;
            left : 100px;
        }

    </style>
</head>
<body>
    <div>relative-1</div>
    <div>relative-2</div>
    <div>relative-3</div>
</body>

 

absolute

html 화면(x, y)을 기준으로 위치가 지정.
만들어진 순서대로 위쪽에 배치 (위치지정 가능) top, left, right, bottom의 영향을 받음.
기준이 되는 위치는 가장 가까운 부모 요소나 조상 요소 중 position 속성이 relative인 요소
absolute를 사용하려면 그 요소를 감싸는 <div>를 만들고 position 속성을 relative로 지정해 놓고 사용해야 함

 

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .movie { /* 부모 요소 */
            width: 700px;
            height: 500px;
            border: 2px solid gray;
            background-color: darkslateblue;

            position: relative; /* 상대 좌표 */
        }

        /* 자식 요소 */
        /* 버튼 */
        .movie div {
            width: 120px;
            height: 120px;
            border: none;
            border-radius: 120px;
            background-color: antiquewhite;
            text-align: center;
            line-height: 120px;
            font-size: 30px;

            position: absolute;
        }

        .prev {
            top: 50%; /* top으로의 위치 */
            left: 10px; /* left로의 위치 */
            margin-top: -60px; /* 반지름 값만큼 빼줘야 중앙 정렬이 됨 */
        }

        .play {
            top: calc(50% - 60px);
            left: calc(50% - 60px);
        }

        .next {
            top: calc(50% - 60px);
            right: 10px;
        }

    </style>
</head>
<body>
    <!--부모 요소 relative -->
    <div class="movie">
        <!--자식 요소 absollute -->
        <div class="prev">PREV</div>
        <div class="play">▶</div>
        <div class="next">NEXT</div>
    </div>

</body>

 

fixed

스크롤과 상관없이 html화면기준 좌측상단을 기준으로 좌표고정
top,left, right, bottom의 영향을 받음

 

<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 3000px; /* 스크롤 바를 나타내기 위해 문서의 높이를 임의의 크기로 지정 */
        }

        div {
            width: 300px;
            height: 300px;
            border: 4px solid black;
            margin-left: 30px;
            font-size: 30px;
            line-height: 300px;
            text-align: center;
        }

        div:nth-of-type(1) { /* div 박스 중에서 첫 번째 박스 */
            background-color: red;
            left: 100px; /* 왼쪽 좌표 */
            top: 100px; /* 상단 좌표 */
            position: absolute;
        }

        div:nth-of-type(2) { /* div 박스 중에서 두 번째 박스 */
            background-color: orangered;
            right: 100px; /* 오른쪽 좌표 */
            bottom: 100px; /* 하단 좌표 */
            position: fixed;
        }

    </style>
</head>
<body>
    <div>absolute</div>
    <div>fixed</div>
</body>

 

스크롤 밑으로 내렸을 때

 

z-index

 

<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 300px;
            height: 300px;
            margin-left: 30px;
            font-size: 30px;
            line-height: 300px;
            text-align: center;

            position: absolute; /* 절대 좌표 */
        }

        div:nth-of-type(1) { /* div 박스 중에서 첫 번째 박스 */
            background-color: indianred;
            left: 100px; /* 왼쪽 좌표 */
            top: 100px; /* 상단 좌표 */
            z-index: 5;
        }

        div:nth-of-type(2) { /* div 박스 중에서 두 번째 박스 */
            background-color: lightgoldenrodyellow;
            left: 250px; /* 왼쪽 좌표 */
            top: 250px; /* 상단 좌표 */
            z-index: 3; /* 우선 순위 변경 */
        }

        div:nth-of-type(3) { /* div 박스 중에서 세 번째 박스 */
            background-color: teal;
            left: 400px; /* 왼쪽 좌표 */
            top: 400px; /* 상단 좌표 */
        }

    </style>
</head>
<body>
    <div>box-1</div>
    <div>box-2</div>
    <div>box-3</div>
</body>

 

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

저작자표시 비영리 변경금지

'HTML&CSS > CSS' 카테고리의 다른 글

[CSS] 플렉스 박스 | 크기를 지정하지 않은 경우 속성 적용 결과 ver  (0) 2024.03.26
[CSS] 플렉스(flex) 박스 | flex-direction, flex-wrap, justify-content, align-content, align-items  (0) 2024.03.26
[CSS] 목록 스타일, 표 스타일  (1) 2024.03.23
[CSS] 글꼴 및 텍스트 스타일 지정, 웹 폰트 사용  (0) 2024.03.23
[CSS] 배경 이미지 지정과 속성  (0) 2024.03.22

 

1.  표 만들기

🌻  표는 웹 페이지에서 자료를 정리할 때 자주 사용하는 요소

      실제는 게시판이나 회원 가입 페이지의 레이아웃을 만드는데 주로 사용

 

1) 표 구성요소 

 

🍯  표table는 행row과 열column 그리고 셀cell 로 이루어진다.

 

table 구조

   -  table > tr > td

 

 table 관련태그


   - table                       :  table 전체를 감싸는 태그

   - caption                  :  표에 제목을 붙일 때 <table> 태그 바로 다음에 사용. 표의 위쪽 중앙에 표시

   - tr("table row")   :  테이블의 행을 의미하는 태그. 자손으로 th나 td가 반드시 있어야 한다.
   - td("table data") :  테이블의 일반 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다.
                                           base style - 왼쪽정렬 (text-align:left)
   - th("table header") : 테이블의 제목 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다.
                                           base style - 중앙정렬(text-align:center), 두껍게(font-weight:bold)

    <style>
        table {
            border: 2px solid red;
        }
        td,th {
            border: 2px solid black;
            width: 200px;
        }
    </style>
</head>
<body>
    <caption>표의 제목1</caption>
    <table>
        <!-- 행의 시작 -->
        <tr>
            <!-- 열의 시작 -->
            <th>제목1</th>
            <th>제목2</th>
        </tr>
        <!-- 행의 시작 -->
        <tr>
            <!-- 열의 시작 -->
            <td>내용1</td>
            <td>내용2</td>
        </tr>
        <!-- 행의 시작 -->
        <tr>
            <!-- 열의 시작 -->
            <td>내용3</td>
            <td>내용4</td>
        </tr>

</table>

 

colspan, rowspan


   - 표를 만든 후 표의 행이나 열을 합치는 속성으로 셀을 만드는 <td>,<th> 태그에서 사용


       🥕 colspan="합쳐지는 열의 개수" : 가로의 병합
       🥕 rowspan="합쳐지는 행의 개수" : 세로의 병합

<head>
    <style>
        td, th {
            border: 2px solid black;
        }
    </style>
</head>
<body>
<!--colspan-->
<table>
    <caption>colspan</caption>
    <tr>
        <th colspan="2">코리아교육그룹</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

</body>

 

col, colgroup

 

   -  '특정 열'에 배경색을 넣거나 너비를 바꿀 때 사용. 반드시 <caption> 태그 다음에 써야 함

    -  <col> 태그는 열을 1개만 지정, <colgroup> 태그는 <col>태그를 2개 이상 묶어서 사용 

    -  <colgroup> 태그 안에 표 전체 열 개수 만큼 <col> 태그를 작성해야 함

 

<caption>선물용과 가정용 상품 구성</caption>
<colgroup>
  <col style="background-color:#eee;">
  <col>
  <col style="width:150px">
  <col style="width:150px">
</colgroup>

 

 

2) 표 구조

 

🍯  표의 구조는 head, body, foot 으로 구분

 thead : 표의 제목 부분
 tbody : 표의 본문 부분
 tfoot : 표의 요약 부분

 

<head>
    <style>
        td, th {
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <table>
        <caption>공지사항</caption>
        <!--표의 제목 부분-->
        <thead>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>날짜</th>
        </tr>
        </thead>

        <!--표의 본문 부분-->
        <tbody>
        <tr>
            <td>001</td>
            <td>코리아교육그룹 2020 대한민국 교육브랜드 대상</td>
            <td>2020-07-01</td>
        </tr>
        <tr>
            <td>002</td>
            <td>청년학당 WE-GO</td>
            <td>2020-06-29</td>
        </tr>
        </tbody>

        <!-- 표의 요약 부분 -->
        <tfoot>
        <tr>
            <td>250</td>
            <td>10개의 게시물</td>
            <td>2020-07</td>
        </tr>
        </tfoot>
    </table>
</body>

 

 

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

 

저작자표시 비영리 변경금지

'HTML&CSS > HTML' 카테고리의 다른 글

[HTML] input 태그 주요 속성, 폼에서 사용하는 여러가지 태그  (1) 2024.03.23
[HTML] 입력 양식 작성하기 | 폼form 삽입하기, input태그와 type 속성  (2) 2024.03.23
[HTML] 웹 문서 초기화 스타일, 시맨틱 코드  (0) 2024.03.22
[HTML] 이미지 태그, 하이퍼링크 삽입  (0) 2024.03.19
[HTML] 정의 및 기본구조, 텍스트 입력 태그, 순서 목록 태그  (2) 2024.03.18

 

1.  목록 스타일

🍋  목록 태그에 스타일을 지정하는 방법으로 순서가 없는 항목(ul), 순서가 있는 항목(ol) 태그에 적용

 

1)   list-style-type 속성

 

  🥑  순서가 없는 항목 태그와 순서가 있는 항목 태그 앞에 나오는 블릿과 번호 스타일을 변경 

종류 설명 예시
disc 채운 원 모양 ●
circle 빈 원 모양 ○
square 채운 사각형 모양 ■
decimal 1부터 시작하는 10진수 1, 2, 3...
decimal-leading-zero 앞에 0이 붙는 10진수 01, 02, 03...
lower-roman 로마 숫자 소문자 i, ii, iii ...
upper-roman 로마 숫자 대문자 I, II, III ...
lower-alpha 또는 lower-latin 알파벳 소문자 a, b, c...
upper-alpha 또는 upper-latin 알파벳 대문자 A, B, C...
none 불릿이나 숫자를 없앰  

 

순서 없는 태그 사용 예
<head>
    <style>
        .bullet_circle {
            list-style-type: circle; /* 빈 원으로 표시 */
        }
        .bullet_none {
            list-style-type: none; /* 블릿을 표시하지 않음 */
        }
    </style>
</head>
<body>
    <!--블릿 변경하기-->
    <ul class="bullet_circle">
        <li>회사소개</li>
        <li>생산설비</li>
        <li>제품소개</li>
        <li>온라인문의</li>
        <li>커뮤니티</li>
    </ul>
    <!--블릿 없애기-->
    <ul class="bullet_none">
        <li>회사소개</li>
        <li>생산설비</li>
        <li>제품소개</li>
        <li>온라인문의</li>
        <li>커뮤니티</li>
    </ul>
</body>

 

출력 결과

순서 있는 태그 사용 예
<head>
    <style>
        .style-num01 {
            list-style-type: lower-alpha; /* 알파벳 소문자 */
        }
        .style-num02 {
            list-style-type: upper-latin; /* 알파벳 대문자 */
        }
    </style>
</head>
<body>
    <!--블릿 변경하기-->
    <ol class="style-num01">
        <li>회사소개</li>
        <li>생산설비</li>
        <li>제품소개</li>
        <li>온라인문의</li>
        <li>커뮤니티</li>
    </ol>
    <!--블릿 없애기-->
    <ol class="style-num02">
        <li>회사소개</li>
        <li>생산설비</li>
        <li>제품소개</li>
        <li>온라인문의</li>
        <li>커뮤니티</li>
    </ol>
</body>

출력 결과

 

2) list-style-position 속성

 

list-style-position: inside | outside;

 

  🥑  전체 선택자(*)를 지정해서 마진과 패딩 값을 0으로 초기화하는 이유
         ▶️ 브라우저마다 기본 패딩값과 마진 값이 달라서 0으로 초기화 해서 사용

        ▶️ 이런 경우 블릿이나 번호타입을 지정해도 화면에 보이지 않음 

 

 🥑  list-style-position 속성 : 항목 번호가 보이지 않는 경우 들여쓰기 스타일 사용

  inside : 블릿이나 숫자를 안쪽으로 들여씀
  outside : 블릿이나 숫자를 밖으로 내어씀

 

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .style-num01 {
            list-style-type: lower-alpha;
            list-style-position: inside;
        }

    </style>
</head>
<body>
    <ol class="style-num01">
        <li>회사소개</li>
        <li>생산설비</li>
        <li>제품소개</li>
        <li>온라인문의</li>
        <li>커뮤니티</li>
    </ol>

</body>

출력 결과

 

2.  표 스타일

1)  제목 위치를 정해주는 caption-side 속성

caption-side: top | bottom

 

top  :  캡션을 표 윗부분에 표시. 기본값
bottom :  캡션을 표 아랫부분에 표시.

 

 

2) 표 테두리를 그려 주는 border 속성

 

<head>    
    <style>
          table {
             caption-side: bottom;  /* 표 캡션 위치 */
             border:1px solid black;  /* 표 테두리는 검은 색 실선으로 */
          }
          td, th {
             border:1px dotted black;  /* 셀 테두리는 검은 색 점선으로 */
             padding:10px;  /* 셀 테두리와 내용 사이의 여백 */
             text-align:center;  /* 셀 내용 가운데 정렬 */
          }
       </style>
    </head>
    <body>    
       <h2>상품 구성</h2>
       <table>
          <caption>선물용과 가정용 상품 구성</caption>
          <thead>
             <tr>
                <th>용도</th>
                <th>중량</th>
                <th>갯수</t>
                <th>가격</th>
             </tr>
          </thead>
          <tbody>
             <tr>
                <td rowspan="2">선물용</td>
                <td>3kg</td>
                <td>11~16과</td>
                <td>35,000원</td>
             </tr>
             <tr>
                <td>5kg</td>
                <td>18~26과</td>
                <td>52,000원</td>
             </tr>
             <tr>
                <td rowspan="2">가정용</td>
                <td>3kg</td>
                <td>11~16과</td>
                <td>30,000원</td>
             </tr>   
             <tr>
                <td>5kg</td>
                <td>18~26과</td>
                <td>47,000원</td>
             </tr>
          </tbody>        
       </table>
    </body>

 

 

3)  셀 사이 여백을 지정하는 border-spacing 속성

 

🍯  table 태그와 border 속성을 사용했을 때 테두리와 셀들의 간격을 지정

border-spacing: 수평거리 수직거리

 

<head>
    <style>
        table {
            border: 2px solid black;
            border-spacing: 20px 40px;
        }
        td {
            padding: 15px;
            border: 1px dotted black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <caption>표 스타일</caption>
        <tr>
            <td>시네마천국</td>
            <td>벤허</td>
        </tr>
        <tr>
            <td>11:00~14:30</td>
            <td>16:00~19:00</td>
        </tr>
    </table>
</body>

 

 

 

 

4)  표와 셀 테두리를 합쳐 주는 border-collapse 속성

 

🍯  표의 바깥 테두리와 셀의 각 테두리가 떨어져 있는 것을 합칠 것인지 그대로 둘 것인지 조정 가능
🍯  table과 td사이의 선값의 결합 유무를 결정하는 속성

collapse  :  표와 셀의 테두리를 합쳐 하나로 표시
separate  :  표와 셀 테두리를 따로 표시. 기본값 

 

<head>
    <style>
        table {
            border: 2px solid black;
            border-collapse: collapse;
        }
        td {
            padding: 15px;
            border: 1px dotted black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <caption>표 스타일</caption>
        <tr>
            <td>시네마천국</td>
            <td>벤허</td>
        </tr>
        <tr>
            <td>11:00~14:30</td>
            <td>16:00~19:00</td>
        </tr>
    </table>
</body>

separate 인 경우
collapse 인 경우

 

 

5) empty-cells 속성 

 

🍯  table 태그에서 내용이 없는 빈 셀들의 표시 여부를 지정

 show : 빈 셀의 주위에 테두리를 표시하여 빈 셀을 나타냄. 기본값.
 hide : 빈 셀에 테두리를 그리지 않고 비워 둠
<head>
    <style>
        table {
            border: 2px solid black;
            empty-cells: hide;
        }
        td {
            padding: 15px;
            border: 1px dotted black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <caption>표 스타일</caption>
        <tr>
            <td>시네마천국</td>
            <td>벤허</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>11:00~14:30</td>
            <td>16:00~19:00</td>
        </tr>
    </table>
</body>

 

hide로 지정한 경우

 

 

6)  width, height
        

🍯  표의 넓이와 높이를 지정. 
🍯  셀 / 전체 표의 넓이에 스타일 지정 가능 ▶️ 높이와 넓이를 지정하지 않으면 셀의 내용만큼 차지

 

 7)  table-layout 속성


🍯  콘텐츠에 맞게 셀 넓이를 지정
🍯  셀의 width 값을 지정하면 해당 크기에 맞게 화면에 맞춰 표시
       ➡️  영문을 띄어쓰기 없이 길게 입력을 하면 셀의 width 값은 무시되고, 내용이 한줄로 표시 됨

 

fixed : 셀 넓이를 고정하여 셀 내용에 따라 셀의 넓이가 달라지지 않음
auto : 기본값. 셀의 내용에 따라 넓이가 달라짐

 

<head>
    <style>
        table {
            border: 2px solid black;
            border-collapse: collapse;
            width: 400px;
            table-layout: fixed;
            word-break: break-all; /* 셀의 내용이 벗어나지 않도록 함 */
        }
        td {
            width: 200px;
            height: 40px;
            padding: 15px;
            border: 1px dotted black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <caption>표 스타일</caption>
        <tr>
            <td>cinemacinemacinemacinemacinemacinemacinema</td>
            <td>벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허</td>
        </tr>
        <tr>
            <td>11:00~14:30</td>
            <td>16:00~19:00</td>
        </tr>
    </table>

</body>

 

 

 

 

 

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

저작자표시 비영리 변경금지

'HTML&CSS > CSS' 카테고리의 다른 글

[CSS] 플렉스(flex) 박스 | flex-direction, flex-wrap, justify-content, align-content, align-items  (0) 2024.03.26
[CSS] position 속성, z-index  (1) 2024.03.25
[CSS] 글꼴 및 텍스트 스타일 지정, 웹 폰트 사용  (0) 2024.03.23
[CSS] 배경 이미지 지정과 속성  (0) 2024.03.22
[CSS] 고급 선택자 | 연결 선택자, 속성 선택자, 가상 클래스와 가상 요소  (0) 2024.03.21

 

1.  글꼴 관련 스타일

font-family: <글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]

 

🍒  font-family : 웹 문서에서 사용할 글꼴을 지정

        ➡️  2개 이상 지정할 때 이름 사이에 쉼표(,)를 넣어 구분

 

font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>

 

🍒  font-size : 글자 크기 지정. 단위는 px(픽셀) 이나 pt(포인트) 등으로 지정할 수 있고 백분율도 가능

 

키워드 사용하여 글자 크기 지정
xx-small < x-small < small < medium < large < x-large < xx-large

 

단위 사용하여 글자 크기 지정
1em = 16px, 12pt
em   : 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정
rem  :  문서 시작 부분에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정
ex     :  해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정
px     :  모니터의 1픽셀을 기준(1px)으로 한 후 비율값을 지정
pt      :  포인트라고 하며, 일반 문서에 많이 사용

 

font-style: normal | italic | oblique

 

🍒  font-style : 글자를 이탤릭체로 표시할 때 사용

 

font-weight: normal | bold | bolder | lighter | 100 | ... | 900

 

🍒  font-weight : 글자 굵기를 지정. 100~900사이에서 400은 normal, 700은 bold에 해당

 

 

2.  웹 폰트 사용

 

웹 폰트 업로드하고 사용하기

 

  🍒  컴퓨터에서 사용하는 글꼴은 트루타입(TrueType)이고 파일 확장자는 *.ttf

          ▶️  파일 크기가 커서 웹에서 사용하기엔 적절하지 x

  🍒  웹에 적합한 글꼴 : EOT embedded open type / WOFF web open font format 

  

@font-face {
    font-family: <글꼴 이름>; <!-- 글꼴 파일 이름과 같은 이름으로 사용 -->
    src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>, ....]; <!-- 글꼴 파일의 경로 -->
    }

 

    ⚡️  local()문을 사용해서 사용자 시스템에 해당 글꼴이 있는지 먼저 확인해야 한다.

 

@import 방식
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

        h1 {
                font-family: "Nanum Pen Script", cursive;
                font-weight: 400;
                font-style: normal;
            }

    </style>
</head>
<body>

<h1>안녕하세요~</h1>

</body>

 

link 방식

 

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
    <style>
        /* link 방식 적용. Nanum Brush Script 폰트 적용 */
        * {
            padding: 0;
            margin: 0;
        }

        p {
            margin: 40px;
        }

        .test {
            font-family: "Nanum Pen Script", cursive;
            font-weight: 400;
            font-style: normal;
        }

    </style>
</head>

 

 

3.  텍스트 관련 스타일

 

1) 글자색 지정하는 color 속성

 

color: <색상>

 

hsl과 hsla

   

    · hsl은 hue(색상), saturation(채도), lightness(명도)의 줄임말

    · hsla는 hsl에 alpha(불투명도)를 추가한 것을 의미

 

<style>
  h1 { 
    color:#0000ff;   /* 16진수 표기법 */
  } 
  p {
    color:green;  /* 색상 이름 */
  }
  .accent {
    color:hsl(0, 100%, 50%);  /* hsl 표기법 */
    font-weight:bold;
  }
</style>

 

 

rgb와 rgba로 표현하는 방법

 

     ·  rgb는 red, green, blue의 줄임말

     ·  하나도 섞이지 않았을 때는 0으로 표시, 가득 섞였을 때는 255로 표시

     ·  rgba에서 맨 끝의 a(alpha)는 불투명도 값을 나타내며 0~1의 값 중에서 사용할 수 있다.

<!--파란색 지정 -->
h1 { color: rgb(0, 0, 255); }

 

 

2) 텍스트 정렬하는 text-align 속성

 

text-align: start | end | left | right | center | justify | match-parent

 

종류 설명
start 현재 텍스트 줄의 시작 위치에 맞추어 문단 정렬
end 현재 텍스트 줄의 끝 위치에 맞추어 문단 정렬
left 왼쪽에 맞추어 문단 정렬
right 오른쪽에 맞추어 문단 정렬
center 가운데에 맞추어 문단 정렬
justify 양쪽에 맞추어 문단 정렬
match-parent 부모 요소를 따라 문단 정렬

🍒  왼쪽 정렬이 기본값. 양쪽 정렬과의 차이는 왼쪽 정렬에서는 오른쪽에 여백이 생기지만 양쪽 정렬에서는 여백이 없다.

 

 

4)  줄 간격을 조절하는 line-height 속성

 

🍒   line-height 속성을 이용하면 줄 간격을 원하는 만큼 조절할 수 있다.

🍒   텍스트를 세로 가운데 정렬할 때 height 값과 똑같이 추가하면 된다.

 

p { font-size: 12px; line-height: 24px; }
p { font-size: 12px; line-height: 2.0;; }
p { font-size: 12px; line-height: 200%; }

 

 

5) 텍스트의 줄을 표시하거나 없애 주는 text-decoration 속성

 

🍒  텍스트에 밑줄을 긋거나 취소선을 표시하는 속성

       ex. 하이퍼링크 적용하면 기본적으로 밑줄이 생김

<p style="text-decoration:none">none</p>
<p style="text-decoration:underline">underline</p>
<p style="text-decoration:overline">overline</p>

 

 

6) 텍스트에 그림자 효과를 추가하는 text-shadow 속성

text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>

 

<가로 거리>  :  텍스트로부터 그림자까지의 가로 거리로 필수 속성.
                           양수값은 오른쪽, 음수값은 왼쪽
<세로 거리>  :  텍스트로부터 그림자까지의 세로 거리로 필수 속성.
                           양수값은 아래쪽, 음수값은 위쪽
<번짐 정도>  :  그림자가 번지는 정도. 양수값은 모든 방향으로 퍼짐, 음수값은 모든 방향으로 축소
<색상>          :  그림자 색상을 지정

 

 

7) 텍스트의 대소 문자를 변환하는 text-transform 속성

 

👾  capitalize : 첫 번째 글자를 대문자로 변환
👾  uppercase : 모든 글자를 대문자로 변환
👾  lowercase  : 모든 글자를 소문자로 변환
👾  full-with     : 가능한 한 모든 문자를 전각 문자로 변환

 

 

8) 글자 간격을 조절하는 letter-spacing, word-spacing 속성

 

🍒  letter-spacing 속성은 글자와 글자 사이의 간격을 조절

🍒  word-spacing 속성은 단어와 단어 사이 간격을 조절

 

<head>
  <style>  
    p {
      font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      font-size:80px;
      text-shadow:3px 3px 1px #ccc;  /* 오른쪽 아래로 파란색 그림자 */
    }
    .spacing1 {
      letter-spacing:0.2em;  /* 글자 간격 0.2em */
    }
    .spacing2 {
      letter-spacing:0.5em;  /* 글자 간격 0.5em */
    }      
  </style>
</head>
<body>
  <p>CSS</p> 
  <p class="spacing1">CSS</p>
  <p class="spacing2">CSS</p>
</body>

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

 
저작자표시 비영리 변경금지

'HTML&CSS > CSS' 카테고리의 다른 글

[CSS] position 속성, z-index  (1) 2024.03.25
[CSS] 목록 스타일, 표 스타일  (1) 2024.03.23
[CSS] 배경 이미지 지정과 속성  (0) 2024.03.22
[CSS] 고급 선택자 | 연결 선택자, 속성 선택자, 가상 클래스와 가상 요소  (0) 2024.03.21
[CSS] 수직 중앙 정렬 방법, overflow와 scroll  (0) 2024.03.21

+ Recent posts

티스토리툴바