블록태그와 인라인태그

애플코딩에서 받은 과제를 하던중 하단의 이미지가
텍스트 옆쪽에 붙어야하는데 CSS를 아무리 바꿔봐도 적용이 되지않았다.

한참 생각을 하다보니 div태그는 block요소라는 것이 생각났다.
이미지를 감싸고있던 div태그와
텍스트를 감싸고있던 div태그에 dlsplay:inline-block 속성을 주었더니
이미지가 원하는곳으로 위치했다!

    .section {
    width: 70px;
    heigth: 250px;
    display: inline-block;
    }
    .aside {
    width: 70px;
    height:250px;
    display:inline-block;
    }

+추가

dlsplay:flex를 이용하여 쉽고 깔끔하게 가로정렬 할 수 있다는 것을 알았다.

	.section {
    width: 70px;
    heigth: 250px;
    display:flex;
    }
    .aside {
    width: 70px;
    height:250px;
    }

실제로 적용해보니 이미지 위치가 맘에들지 않았다.

간단하게 align-tems:center; 속성을 추가하여 해결했는데
align-items:center는 flex가 적용된 item들을 가운데 정렬 시킬수있는 속성이다.

	.section {
    width: 70px;
    heigth: 250px;
    display:flex;
    align-tems:center;
    }
    .aside {
    width: 70px;
    height:250px;
    }