📌 CSS display와 justify-content 속성 완벽 정리! 🚀

안녕하세요! 😊 오늘은 CSS에서 중요한 display와 justify-content 속성에 대해 작성해봤습니다!

예제로 할때는 정말 쉽게 되는데 왜 막상 응용하여 만들려고하면 어려울까요...후...

이 두 속성을 잘 활용하면 레이아웃을 훨씬 깔끔하게 정리할 수 있다고 하네요!

이해하기 어려우신 분들도 같이 공부해요~

💡 display 속성이란?

display 속성은 HTML 요소가 웹페이지에서 어떻게 보일지 결정하는 속성이에요. 즉, 요소의 배치 방식을 지정하는 역할을 합니다.

📌 주요 display 속성 종류

속성 값	설명
block	한 줄 전체를 차지하는 블록 요소 (ex. <div>, <p>)
inline	컨텐츠 크기만큼 차지하는 인라인 요소 (ex. <span>, <a>)
inline-block	inline처럼 보이지만, 크기 조절 가능
flex	요소를 유연하게 정렬할 수 있도록 설정
grid	2차원 레이아웃을 구성할 때 사용
none	요소를 화면에서 숨김 (보이지 않음)

✅ display 속성 예제

.box {
    display: block; /* 요소를 블록처럼 표시 */
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

✅ display: block;을 사용하면 한 줄 전체를 차지해요!

💡 justify-content 속성이란?

justify-content 속성은 display: flex;가 적용된 부모 요소에서 자식 요소들을 가로 방향으로 정렬하는 속성!

즉, 가로 정렬을 어떻게 할지 정하는 역할을 해요!

속성 값	설명
flex-start	왼쪽 정렬 (기본값)
flex-end	오른쪽 정렬
center	가운데 정렬
space-between	첫 번째와 마지막 요소를 양 끝으로 배치, 나머지는 동일한 간격 배분
space-around	모든 요소 주위에 동일한 여백을 배분
space-evenly	요소 간 간격을 동일하게 배치

.container {
    display: flex;
    justify-content: center; /* 가운데 정렬 */
    background-color: lightgray;
    height: 100px;
}
.item {
    width: 50px;
    height: 50px;
    background-color: blue;
    margin: 5px;
}

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

✅ justify-content: center;를 사용하면 요소들이 가운데 정렬돼요!

 

🎯 display와 justify-content 함께 사용하기!

display: flex;와 justify-content를 함께 사용하면 더욱 강력한 정렬 기능을 활용할 수 있어요.

✅ 예제: 가로 정렬된 네비게이션 바 만들기

.nav {
    display: flex;
    justify-content: space-between;
    background-color: black;
    padding: 10px; }
.nav a {
    color: white;
    text-decoration: none;
    padding: 10px;
    }

<div class="nav">
    <a href="#">홈</a>
    <a href="#">서비스</a>
    <a href="#">연락처</a>
</div>

✅ justify-content: space-between;을 사용하면 각 링크가 균등하게 배치돼요!

 

🎯 정리!

✔️ display 속성은 요소의 배치 방식을 결정하는 속성

✔️ justify-content 속성은 display: flex;에서 요소들의 가로 정렬을 조정하는 속성

✔️ display: flex;와 justify-content를 함께 사용하면 강력한 레이아웃 구성 가능!

📢 이제 display와 justify-content를 활용해 멋진 레이아웃을 만들어보자구요! 🚀

추가로 알면 좋은 내용이 있다면 댓글로 알려주세요! 😊