한개의 버튼(button) 안에 이미지와 문자를 같이 넣고 싶다면 어떻게 할까요. 위의 그림과 같이 이미지와 텍스트가 같이 있는 HTML, CSS를 만들어 보자. <button> <div> <img src="https://picsum.photos/70/30"> <span> TEXT </span> </div> </button> div { display: flex; justify-content: space-around; align-items: center; } button { width :…
어떤 요소에 display: flex 를 적용하면 해당 요소는 flex container로 바뀌게 됩니다. 이렇게 되면 해당 요소의 자식 요소들을 가로나 세로로 정렬할 수 있게 됩니다. 즉 display:flex;를 선언한 부모 요소에 flex-direction 속성을 설정하게되면 가로나 세로로 정렬할 수 있습니다. flex-direction 속성 값들 flex-direction 디폴트 값은…
CSS 초승달 모양 만들기 를 통해서 background-color의 속성 transparent 이용 방법과 border-radius, box-shadow의 사용 방법을 알아보자. <style> .center { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; background-color: yellow; border-radius: 0px; box-shadow: 25px 10px 10px…
CSS를 처음 배우게 되면 이미지를 내가 원하는대로 넣는 것이 쉽지 않다. 그중에서도 박스의 크기와 이미지의 크기가 서로 다른 경우에는 여기에 맞춰서 넣는 방법을 가장 많이 사용하는데 이것을 한번 배워보자 이 내용은 기초중에서도 왕기초이다. 일단 아래와 같은 HTML 코드가 있다고 가정하자. <div class="profile"> <img…