HTML CSS의 각 속성들과 활용법  및 웹 개발과 관련된 여러가지 것들

[03] flex-direction 가로 정렬, 세로 정렬

어떤 요소에 display: flex 를 적용하면 해당 요소는 flex container로 바뀌게 됩니다. 이렇게 되면 해당 요소의 자식 요소들을 가로나 세로로 정렬할 수 있게 됩니다. 즉 display:flex;를 선언한 부모 요소에 flex-direction 속성을 설정하게되면 가로나 세로로 정렬할 수 있습니다. flex-direction 속성 값들 flex-direction 디폴트 값은…

0 Comments

CSS 초승달 모양 만들기

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…

0 Comments

구글맵 간단히 불러오는 방법 초간단 생성!

오늘은 구글맵의 HTML 코드를 생성해주는 사이트를 소개해 드립니다. 정말 너무 간단해서 따로 설명할 필요가 없을 정도 입니다. 구글맵 html 코드 생성해주는 사이트 https://google-map-generator.com 위의 이미지와 같이 구글맵에서 조회할 위치를 주소형태로 적어 넣어도 되고 유명한 곳은 이름을 넣어도 된다. 이마트, 구청 이런 곳은 이름만으로도…

0 Comments

CSS 박스안에 이미지를 꼭 맞춰서 넣는 방법

CSS를 처음 배우게 되면 이미지를 내가 원하는대로 넣는 것이 쉽지 않다. 그중에서도 박스의 크기와 이미지의 크기가 서로 다른 경우에는 여기에 맞춰서 넣는 방법을 가장 많이 사용하는데 이것을 한번 배워보자 이 내용은 기초중에서도 왕기초이다. 일단 아래와 같은 HTML 코드가 있다고 가정하자. <div class="profile"> <img…

0 Comments