HTML CSS의 각 속성들과 활용법 및 웹 개발과 관련된 여러가지 것들
한개의 버튼(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…
오늘은 구글맵의 HTML 코드를 생성해주는 사이트를 소개해 드립니다. 정말 너무 간단해서 따로 설명할 필요가 없을 정도 입니다. 구글맵 html 코드 생성해주는 사이트 https://google-map-generator.com 위의 이미지와 같이 구글맵에서 조회할 위치를 주소형태로 적어 넣어도 되고 유명한 곳은 이름을 넣어도 된다. 이마트, 구청 이런 곳은 이름만으로도…