[CSS] layout 레이아웃 2 - display : inline-block

💾 Editor: VSCode

---

👉 display

• block: 한 행을 전부 차지
• inline-block: 내 크기만큼 차지 (어울림)

index.html

<div class="left-menu"></div><div class="right"></div>

• <div>와 <div> 사이에 공백이 있으면 안 됨... 
• <div>와 <div> 사이에 주석을 주는 것도 방법 중 하나임
• 부모 태그에 font-size: 0px; 주는 것도 또 다른 방법임 => 상속

 

style.css

.left-menu {
    width: 20%;
    height: 400px;
    background: cornflowerblue;
    /* float: left; 추가 */
    display: inline-block; /* 추가 */
}

.right {
    width: 80%;
    height: 400px;
    background: coral;
    /* float: left; 추가 */
    display: inline-block; /* 추가 */
}

 

 

👉 .right 안에 <p> 태그 추가 시

• 위치가 또 이상하게 바뀜
• 위치를 바로 잡기 위해서는 vertical-align 사용
  • vertical-align은 상하정렬

 

참고: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

 

index.html

        <!-- center 2 box -->
        <div class="left-menu"></div><!-- 
         --><div class="right">
            <p>안녕하세요</p>
         </div>

 

style.css

.left-menu {
    width: 20%;
    height: 400px;
    background: cornflowerblue;
    /* float: left; 추가 */
    display: inline-block;
    vertical-align: top;
}

까다로운 inline-block

공백도 사용 불가

p 태그 같이 한 행 차지하는 태그 사용 시에는 수정이 필요하다.

vertical-align 사용해서 수정해야 함.

 

 

---

👉 과제: 이미지와 같은 형태로 만들기

 

index.html

    <div class="container">
        <div class="left">
            <div class="content-1">
                <div class="profile-1">
                    <img src="main.jpg" class="profile-img">
                </div>
                <div class="profile-2">
                    <div class="name"><strong>devje</strong></div>
                    <div class="time">1시간 전</div>
                    <div></div>
                </div>
            </div>

            <div class="content-2">
                <h3>CSS</h3>
            </div>
            <div class="content-3">종속형 시트 또는 캐스케이딩 스타일 시트는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도
                사용할 수 있다. W3C의 표준이고, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 기본 파일명은 style.css이다.</div>
                <div class="content-4">
                    <img src="button.png" class="button">

                </div>
        </div>
        <div class="right">
            <img src="main.jpg" class="thumbnail">
            <div class="plus-button">+</div>
        </div>
    </div>

style.css

.container {
    width: 800px;
}

.left {
    width: 70%;
    height: 200px;
    /* background-color: beige; */
    float: left;
}

.right {
    width: 30%;
    height: 200px;
    /* background-color: aqua; */
    float: left;
    position: relative;
}

.content-1 {
    width: 100%;
    height: 30%;
}

.content-2 {
    width: 100%;
    height: 20%;
}

.content-3 {
    width: 100%;
    height: 30%;
    color: gray;
    font-size: 14px;
}

.content-4 {
    width: 100%;
    height: 10%;
}

.profile-1 {
    width: 10%;
    float: left; 
}

.profile-2 {
    width: 80%;
    float: left;
    padding-left: 30px;
    padding-top: 15px;
}

.profile-img {
    width: 100%;
    float: left;
    border-radius: 50px;
    padding: 10px;
}

.name {
    height: 50%;
    font-size: 16px;
}

.time {
    height: 50%;
    color: gray;
    font-size: 12px;
}

.thumbnail {
    height: 100%;
    padding-left: 30px;
    position: absolute;
}

.button {
    width: 20px;
    height: 100%;
    background-color: gray;
    border-radius: 50px;
    float: right;
}

.plus-button {
    width: 25px;
    height: 25px;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    position: absolute;
    right: 10px;
    bottom: 0px;
}

 

위 이미지 참고해서 최대한 비슷하게 만들었다.

위치 조정하는 게 만만하지가 않네.

 

class 네임 짓는 것도 꽤 어렵고, 버튼 같은 거 위치 잡는 것도 너무 어렵다.

구글링도 해보고, 직접 이것저것 넣어보면서 위치 같은 거 조정했다.

 

특히나 이미지 위에다가 +버튼 올려서, 위치 맞추는 게 가장 어려웠다.

부모태그에 postion: relative 주고, 자식태그에 postion: absolute를 줬다.

그리고 right과 bottom 이용해서 위치 조정을 했다.

다행히 이미지 위에 딱 맞게 배치가 됨.

 

 

---

👉 레이아웃 만들기 숙제 : Blog 글목록 만들기

layout1.html

    <div class="container">
        <div class="blog-content"> <!-- 왼쪽 -->
            <div> <!-- 프로필 사진, 이름 -->
                <img src="main.jpg" class="blog-profile">
                <div class="blog-name">
                    <h4 style="margin:5px">이름</h4>
                    <p style="margin:5px">날짜</p>
                </div>
            </div>
            <div style="clear:both"> <!-- 글제목, 내용 -->
                <h4>블로그 글</h4>
                <p>가성비 맛집 발견</p>
            </div>
        </div>
        <div class="blog-img"> <!-- 오른쪽 -->
            <img src="main.jpg" width="100%">
        </div>
    </div>

style.css

.blog-content {
    width: 80%;
    height: 200px;
    float: left;
}

.blog-img {
    width: 20%;
    height: 200px;
    float: left;
}

.blog-profile {
    width: 50px;
    float: left;
}

.blog-name {
    float: left;
}

내가 작성한 코드는 아주 노답이었다...

div 지옥이었다...

위에는 내가 만들었던 거고, 그다음 강의가 숙제로 내줬던 걸 같이 만들어 보는 거더라고?

div 지옥이라서, div 안에 div div div...

h4 태그나 p 태그를 활용할 수 있음에도 어이없게도 div를 너무 많이 사용했다...

 

---

👉 재실습

index.html

    <div class="container">
        <div class="blog-content"> <!-- left -->
            <div> <!-- profile-->
                <img src="dog.png" class="blog-profile-img">
                <div class="blog-name">
                    <h4>멍멍</h4>
                    <p>1시간 전</p>
                </div>
            </div>
            <div class="blog-description"> <!-- content -->
                <h4 style="margin: 5px;">강아지</h4>
                <p style="margin: 5px;">강아지는 귀엽다</p>
            </div>
            <div class="blog-send-button">↗</div>
        </div>
        <div class="blog-img"> <!-- right -->
            <img src="dog.png" class="blog-thumb">
            <div class="blog-img-button">+</div>
        </div>
    </div>

style.css

.container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.blog-content {
    width: 80%;
    height: 200px;
    float: left;
}

.blog-img {
    width: 20%;
    height: 200px;
    float: left;
    margin-top: 20px;
    position: relative;
}

.blog-profile-img {
    width: 100px;
    float: left;
    border-radius: 50px;
    padding-left: 5px;
}

.blog-name {
    padding-left: 10px;
    float: left;
}

.blog-description {
    padding: 5px;
    clear: both;
}

.blog-send-button {
    background-color: gray;
    color: white;
    width: 20px;
    text-align: center;
    float: right;
    margin: 3px;
}

.blog-thumb {
    width: 100%;
    position: absolute;
}

.blog-img-button {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    width: 20px;
    height: 25px;
    text-align: center;
    position: absolute;
    left: 140px;
    bottom: 40px;
    
}

html에서 <div> 태그 최소화하여 다시 만들었다.

css에서 강의에서 배운 거 활용 및 button 추가

그래도 css는 여전히 길지만...

다 필요한...

html style 속성은 최소화하였다.

다음 진도로..!

 

 

 

코딩애플 공부 기록