HTML로 웹페이지를 만들다 보면 반응형으로 웹을 만들어야 겠다는 생각을 하게 됩니다. 일반적으로 반응형 웹을 고려하고 만들지 않으면 제작한 디바이스가 아닌 다른 디바이스로 들어갔을때 UI 요소들이 이상한 곳에 가있거나 글씨가 깨지게 깨져 있기 때문입니다. *반응형 웹은 ? 디바이스의 창의 크기에 따라 알아서 요소들이 유기적으로 배치되는 사이트를 의미 이를 해결하기 위한 방법으로는 3단계로 1.html - 특정 meta 태그 삽입하기 2.폰트 사이즈 px 대신 em 이나 rem사용하기 3.css - 미디어 쿼리 사용하기 가 있습니다. 1.html - 특정 meta 태그 삽입하기 위와 같이 head 태그 안에 저 meta 태그를 삽입해주면 됩니다. 해당 내용을 자세히 설명해드리자면 viewport는 웹 페..

위 사진처럼 html과 css를 이용해 원을 만들고 글자,이미지를 원 위에 배치하고 싶으신가요..? 저도 처음 웹페이지를 제작 하며 자초지종 다 겪어가며 성공했는데요 ㅠㅠㅠ 정답이 아닐 수도 있습니다만 html과 css로 제가 완성시킨 방법을 알려드릴게요 1) 원 만들기 첫번째로 우리는 원을 만들어 줘야 합니다. HTML에서 태그를 만들어주세요 그 다음으로는 css에서 꾸며주면 돼요 이 때 중요한것은 position !! 꼭 relative 여야 해요 div{ background-color: antiquewhite; border-radius: 50%; width: 24%; padding-bottom: 24%; position: relative; } 자세히 설명 드리자면 해당 css에서 -윗 부분 코드는 ..

CSS를 쓰다보면 특정한 셀렉터를 쓰고 싶을때 어떻게 써야 할지 막힐 때가 있다. 이를 쉽고, 재밌게 배울 수가 있는 방법이 있는데 바로 css dinner 게임으로 익히는 것이다. 이는 깃허브에서 제공하는 무료프로그램으로 https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 위의 창을 누르면 해볼 수 있다. 게임을 하는 방법은 이렇게 가운데 문제가 뜨면 (ex plate를 골라라) 왼쪽 아래의 흰창 첫째줄에 정답인 셀렉터를 쓰고 엔터키를 누르면 된다. 바로 옆 검은 페이지에는 html 코드가 적혀 있으므로 이를 참고하면 되고 막힐때는 가장 오른쪽의 힌트와..