As I've always been

각각 다 지정해주는 방법 margin-top: 10px; margin-right: 20px; margin-bottom: 15px; margin-left: 5px; 아니면 margin: 10px 20px 15px 5px; 순서는 상우하좌 (top right bottom left) 입니다. 위에서부터 시계방향으로 돌아갑니다. 상하의 margin 이 같고, 좌우의 margin 이 같을 때 margin: 10px 5px; 좌우는 같은데, 상하가 다를 때 margin: 10px 5px 25px; 10px는 margin-top 의 값이고, 마지막에 나오는 25px는 margin-bottom이고 운데, 5px 가 좌우 margin 이다. 결론 정리하자면, margin/padding은 아래와 같은 순서로 사용할 수 있..

media쿼리를 이용하면 반응형 페이지를 만들수 있다. 반응형 페이지란 페이지 하나로 화면사이즈에 따라 다르게 보여주는 표현해주는 기술입니다. 사용자가 보기 편리하게 만드는 페이지입니다. 반응형 사이즈들 디바이스별 사이즈 해상도 320px 이상 또는 768px 미만 -> 스마트폰 해상도 768px 이상 또는 1024px 미만 -> 태블릿 해상도 1024px 초과 -> PC 사용법 HTML head 부분에 아래의 코드를 넣어줍니다. 아래의 코드는 meta태그로 뷰포트를 사용함으로 장치의 크기에 따라서 크기를 바꿔주겠다는 명령어입니다. meta태그가 선언되어야지 반응형으로 만들수 있습니다. 방법 1. 모바일에서 PC로 커진다. /* 모바일 -> PC / 점점 커진다.. */ @media screen and ..

:hover란 :hover는 html에서 요소에 마우스를 올렸을 때 반응하게 하는 css요소이다. javascript 혹은 jquery의 조건으로도 사용가능한 요소이다. 마우스로 반응 하기에 모바일이나 테블릿에서는 효과를 적용하기가 쉽지 않다. :hover 적용 방법 css파일에서 이벤트를 적용하고 싶은 위치에 :hover를 선언해주고 나머지 코드를 작성하면 된다. 코드 [css] /*초기화*/ *{margin: 0 auto; padding: 0;} /*기본셋팅*/ h1, p, button, div{ border : 1px solid black; width : 300px; height : 70px; text-align : center; line-height : 70px; font-size : 15px; ..