flex6 μΉμ¬μ΄νΈ λ§λ€κΈ° : ν μ€νΈ μ ν λ μ΄μμ02 λ μ΄μμ : ν μ€νΈ μ ν02 λ€μκ³Ό κ°μ ν μ€νΈ μ νμ λ μ΄μμμ μμ ν΄ λ³΄λλ‘ νκ² μ΅λλ€. HTML μμ€ λ¨Όμ , 컨ν μ΄λ λ°μ€ μμ titleκ³Ό contents λ°μ€λ₯Ό λ§λ€μ΄μ€ λ€, section ν΄λμ€μ display: flex, space-between μμ±μ μΆκ°ν΄ λ μ΄μμμ λ°°μΉνμ΅λλ€. title μμλ sub title μμ, title, descλ₯Ό λ§λ€μ΄ μ£Όμμ΅λλ€. contentsλ topκ³Ό bottomμΌλ‘ λλμ΄, κ°κ° λ κ°μ cardκ° λ°°μΉλλλ‘ μμ ν΄ μ£Όμμ΅λλ€. TEXT TYPE02 κ·μ¬μ΄ λλ¬Όλ€ μ λ¬Έκ³Όμ μΈμμ κ·μ¬μ΄ λλμ΄... κ·μ¬μ΄ κ³ μμ΄... κ·μ¬μ΄ λ€λμ₯... κ·μ¬μ΄ κ³ λΌλ... κ·μ¬μ΄ μνμΉ΄... κ·μ¬μ΄ κ³ λ¦΄λΌ... μΈμμ κ·μ¬μ΄ λλμ΄ κ·, κ·, κ· μλ‘ λλλ λ§.. 2022. 8. 31. λ μ΄μμ(Layout) μ ν05 λ μ΄μμ05 μ΄λ² λ μ΄μμμ μ 체 μμμ΄ λ€μ΄κ° ꡬ쑰μ λλ€. μ€μ μ¬μ΄νΈμμ μ΄λ¬ν ꡬ쑰λ₯Ό λ§μ΄ μ¬μ©νλ©°, 컨ν μ΄λλ₯Ό λ§λ€μ΄μ κ°μ΄λ° μμμ μ€μ ν©λλ€. λ€μμ λ μ΄μμμ 3κ°μ§ λ°©λ²μΌλ‘ μμ ν΄ λ³΄λλ‘ νκ² μ΅λλ€. float μμ±μ μ΄μ©ν λ μ΄μμ 'float'λΌλ λ¨μ΄λ μ¬μ μ μΌλ‘λ'λ¨λ€'λΌλ μλ―Έλ₯Ό κ°μ§κ³ μμ΅λλ€. μΉνμ΄μ§μμ μ΄λ―Έμ§λ₯Ό μ΄λ»κ² λμμ ν μ€νΈμ ν¨κ» λ°°μΉν κ²μΈμ§μ λν μμ±μ λλ€. κ·Έλ¬λ, floatλ₯Ό μ¬μ©νλ©΄ μμμ΄ κΉ¨μ§λ λ²κ·Έκ° λ°μν μ μμ΅λλ€. μμ κΉ¨μ§μ λ°©μ§νλ 3κ°μ§ λ°©λ²μ λ€μκ³Ό κ°μ΅λλ€. 1. κΉ¨μ§λ μμμ clear:bothλ₯Ό μ€μ ν©λλ€. 2. λΆλͺ¨ λ°μ€ μμμ overflow:hiddenμ μ€μ ν©λλ€. 3. clearfixλ₯Ό μ€μ ν©λλ€. κ°μ₯ μμ μ μΈ λ°©λ²μ λλ€.. 2022. 7. 29. λ μ΄μμ(Layout) μ ν04 λ μ΄μμ04 μ΄λ² λ μ΄μμμ μ 체 μμμ΄ λ€μ΄κ° ꡬ쑰μ λλ€. μ€μ μ¬μ΄νΈμμ μ΄λ¬ν ꡬ쑰λ₯Ό λ§μ΄ μ¬μ©νλ©°, 컨ν μ΄λλ₯Ό λ§λ€μ΄μ κ°μ΄λ° μμμ μ€μ ν©λλ€. λ€μμ λ μ΄μμμ μμ ν΄ λ³΄λλ‘ νκ² μ΅λλ€. 컨ν μ΄λ(Container)λ₯Ό μ΄μ©ν λ μ΄μμ λ°°μΉν μμλ€μ κ°μΈλ λΆλͺ¨ μμλ₯Ό 컨ν μ΄λ(container)λΌκ³ ν©λλ€. 컨ν μ΄λλ₯Ό μ΄μ©ν΄ λ μ΄μμμ λ§λλ μμμ λλ€. inherit μμ±μ μ¬μ©νλ©΄ μμ μμμκ² μ€νμΌ μμ±μ μμν μ μμ΅λλ€. *{ margin: 0; padding: 0; } #header{ height: 100px; background-color: #E0F2F1; } #nav{ height: 300px; background: #80CBC4; } #section{ height: 580.. 2022. 7. 29. λ μ΄μμ(Layout) μ ν03 λ μ΄μμ03 λ μ΄μμ(layout)μ΄λ νΉμ 곡κ°μ μ¬λ¬ κ΅¬μ± μμλ₯Ό 보기 μ’κ² ν¨κ³Όμ μΌλ‘ λ°°μΉνλ μμ μ μλ―Έν©λλ€. μΉ νμ΄μ§μ λ μ΄μμμ μΉ μ¬μ΄νΈμ μΈκ΄μ κ²°μ μ§λ λ§€μ° μ€μν μμμ λλ€. CSSλ‘ λ μ΄μμ μμ μ νλ λ°©λ²μλ 3κ°μ§κ° μμ΅λλ€. λ€μμ λ μ΄μμμ 3κ°μ§ λ°©λ²μΌλ‘ μμ ν΄ λ³΄λλ‘ νκ² μ΅λλ€. float μμ±μ μ΄μ©ν λ μ΄μμ 'float'λΌλ λ¨μ΄λ μ¬μ μ μΌλ‘λ'λ¨λ€'λΌλ μλ―Έλ₯Ό κ°μ§κ³ μμ΅λλ€. μΉνμ΄μ§μμ μ΄λ―Έμ§λ₯Ό μ΄λ»κ² λμμ ν μ€νΈμ ν¨κ» λ°°μΉν κ²μΈμ§μ λν μμ±μ λλ€. κ·Έλ¬λ, floatλ₯Ό μ¬μ©νλ©΄ μμμ΄ κΉ¨μ§λ λ²κ·Έκ° λ°μν μ μμ΅λλ€. μμ κΉ¨μ§μ λ°©μ§νλ 3κ°μ§ λ°©λ²μ λ€μκ³Ό κ°μ΅λλ€. 1. κΉ¨μ§λ μμμ clear:bothλ₯Ό μ€μ ν©λλ€. 2. λΆλͺ¨ λ°μ€ μμμ .. 2022. 7. 29. λ μ΄μμ(Layout) μ ν02 λ μ΄μμ02 λ μ΄μμ(layout)μ΄λ νΉμ 곡κ°μ μ¬λ¬ κ΅¬μ± μμλ₯Ό 보기 μ’κ² ν¨κ³Όμ μΌλ‘ λ°°μΉνλ μμ μ μλ―Έν©λλ€. μΉ νμ΄μ§μ λ μ΄μμμ μΉ μ¬μ΄νΈμ μΈκ΄μ κ²°μ μ§λ λ§€μ° μ€μν μμμ λλ€. CSSλ‘ λ μ΄μμ μμ μ νλ λ°©λ²μλ 3κ°μ§κ° μμ΅λλ€. λ€μμ λ μ΄μμμ 3κ°μ§ λ°©λ²μΌλ‘ μμ ν΄ λ³΄λλ‘ νκ² μ΅λλ€. float μμ±μ μ΄μ©ν λ μ΄μμ 'float'λΌλ λ¨μ΄λ μ¬μ μ μΌλ‘λ'λ¨λ€'λΌλ μλ―Έλ₯Ό κ°μ§κ³ μμ΅λλ€. μΉνμ΄μ§μμ μ΄λ―Έμ§λ₯Ό μ΄λ»κ² λμμ ν μ€νΈμ ν¨κ» λ°°μΉν κ²μΈμ§μ λν μμ±μ λλ€. κ·Έλ¬λ, floatλ₯Ό μ¬μ©νλ©΄ μμμ΄ κΉ¨μ§λ λ²κ·Έκ° λ°μν μ μμ΅λλ€. μμ κΉ¨μ§μ λ°©μ§νλ 3κ°μ§ λ°©λ²μ λ€μκ³Ό κ°μ΅λλ€. 1. κΉ¨μ§λ μμμ clear:bothλ₯Ό μ€μ ν©λλ€. 2. λΆλͺ¨ λ°μ€ μμμ .. 2022. 7. 29. λ μ΄μμ(Layout) μ ν 01 λ μ΄μμ01 λ μ΄μμ(layout)μ΄λ νΉμ 곡κ°μ μ¬λ¬ κ΅¬μ± μμλ₯Ό 보기 μ’κ² ν¨κ³Όμ μΌλ‘ λ°°μΉνλ μμ μ μλ―Έν©λλ€. μΉ νμ΄μ§μ λ μ΄μμμ μΉ μ¬μ΄νΈμ μΈκ΄μ κ²°μ μ§λ λ§€μ° μ€μν μμμ λλ€. CSSλ‘ λ μ΄μμ μμ μ νλ λ°©λ²μλ 3κ°μ§κ° μμ΅λλ€. λ€μμ λ μ΄μμμ 3κ°μ§ λ°©λ²μΌλ‘ μμ ν΄ λ³΄λλ‘ νκ² μ΅λλ€. float μμ±μ μ΄μ©ν λ μ΄μμ 'float'λΌλ λ¨μ΄λ μ¬μ μ μΌλ‘λ'λ¨λ€'λΌλ μλ―Έλ₯Ό κ°μ§κ³ μμ΅λλ€. μΉνμ΄μ§μμ μ΄λ―Έμ§λ₯Ό μ΄λ»κ² λμμ ν μ€νΈμ ν¨κ» λ°°μΉν κ²μΈμ§μ λν μμ±μ λλ€. κ·Έλ¬λ, floatλ₯Ό μ¬μ©νλ©΄ μμμ΄ κΉ¨μ§λ λ²κ·Έκ° λ°μν μ μμ΅λλ€. μμ κΉ¨μ§μ λ°©μ§νλ 3κ°μ§ λ°©λ²μ λ€μκ³Ό κ°μ΅λλ€. 1. κΉ¨μ§λ μμμ clear:bothλ₯Ό μ€μ ν©λλ€. 2. λΆλͺ¨ λ°μ€ μμμ .. 2022. 7. 25. μ΄μ 1 λ€μ 728x90 λ°μν