정구리의 우주정복

[HTML/CSS] display:flex 정복하기 (2) 본문

STUDY/K-DIGITAL

[HTML/CSS] display:flex 정복하기 (2)

Jungry_ 2022. 8. 27. 22:35
반응형

결과물

여기서 포인트는 

1) 가로정렬

2) 3개 사이의 간격의 일정함 

3) 카드 안에 요소들의 정렬 

이다 !

<body>

    <div class="card-items">
        <div class="card">
            <h3>Card #01</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, temporibus.</p>
            <img src="http://via.placeholder.com/300x150">
        </div>
        <div class="card">
            <h3>Card #02</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint perferendis maiores rem facilis quisquam, necessitatibus in aliquid non perspiciatis cupiditate.</p>
            <img src="http://via.placeholder.com/300x150">
        </div>
        <div class="card">
            <h3>Card #03</h3>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit expedita eaque quis harum sunt maiores, rerum sint, aut optio, nulla delectus. Maiores tempora dolorem exercitationem cum veniam officiis impedit itaque.</p>
            <img src="http://via.placeholder.com/300x150">
        </div>
    </div>
</body>

HTML 은 어렵지 않다 

card-items 로 다 묶어주고 안에 똑같이 생긴 card 들을 넣어준다 

card 안에 p 태그의 내용들은 길이가 다 다르가 lorem 10 , 20 , 30 이렇게 3 종류가 들어가게 된다 

 

body{
    margin:0;

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.card-items{
    width: 1000px;
    /* border: 1px solid #000; */

    display: flex;
    justify-content: space-between;
}

.card{
    border: 2px solid red;
    width: 300px;
    height: 400px;
    padding:20px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body 태그의 기본 margin 을 없애준다 

 

중앙정렬의 공식과 같은

display: flex;
justify-content: center;
align-items: center;
height: 100vh;

이걸 사용해서 card-items 를 중앙정렬을 해준다 

 

이후 .card-items 의 너비를 지정해주고 

display:flex 를 사용해서 안의 card 들을 가로정렬 해준다

justify-content: space-between;
 
를 사용해 card-items 안의 요소들의 사이 간격을 띄워준다 
 
 
.card 를 사용해 너비들을 지정해준다 
box-sizing : border-box 로 해줘야지 애들이 잘 떨어지게 된다 
 
display: flex;
flex-direction: column;
justify-content: space-between;
 

card 안에도 이걸 사용해줘서 column 으로 세로정렬 해주고 space-between 을 해서 사이의 간격을 일정하게 띄워준다 

반응형

'STUDY > K-DIGITAL' 카테고리의 다른 글

[HTML/CSS] float 정복하기  (0) 2022.08.28
[HTML/CSS] 로그인폼 만들기 , fontawesome 사용해보기  (0) 2022.08.27
[HTML/CSS] position 정복하기  (0) 2022.08.27
[HTML/CSS] display:flex 정복하기 , media query 사용해보기  (0) 2022.08.27
[HTML/CSS] float 정복하기  (0) 2022.08.23
'STUDY/K-DIGITAL' Related Articles more
Comments