A sentimental robot

padding은 요소의 테두리 안과 content 사이의 간격이다. padding을 사용하여 스타일을 적용할 때 가장 유의해야할 점을 알아보자. width를 주의해라! div 태그의 width 값을 100px로 주고, padding 값을 10px로 주었다. 실제 width 값은 의도치 않게 120px이 되버린다. (padding-right, padding-left 값이 width값에 적용된다.) 이 때 padding값에 상관 없이 div 태그의 width를 100px로 주고 싶다면 box-sizing 속성을 이용하면 좋다. box-sizing : border-box 값을 주면 요소의 너비는 패딩 값에 영향을 받지 않는다. 여기서 참고로 알아두면 유용한 CSS box model Total element w..

css 를 적용할때 쉬워보이면서도 은근 헷갈이는 요놈! 마진! 패딩이랑 헷갈려~ 정확하게 짚고 넘어가자. margin은 요소를 둘러싸고 있는 공간이다! 패딩이랑 헷갈린다면, 마진을 border(요소의 테두리) 밖의 공간이라고 생각하면 좋다. 패딩은 테두리 안의 공간이다. margin-top, margin-right, margin-bottom, margin-left 를 값을 margin 속성으로 한 번에 줄 수 있는데 순서에 유의하자. margin 속성이 값을 4개를 가진다면? margin : 1px 2px 3px 4px (top / right / bottom / left 순) margin 속성이 값을 3개만 가진다면? margin : 1px 2px 3px (top / right and left / bot..

Html 요소의 배경을 이미지로 설정하고 싶다면 background-image속성을 사용한다. body{ background-image: url('zomebie.png') } 이렇게 속성을 준다면 zomebie.png란 이미지로 배경화면이 설정되는데 요소의 배경을 꽉 채우기 위해 이미지가 수평과 수직으로 반복되어 나타난다. background-repeat속성을 이용하면 수직이든 수평이든 원하는 방식으로 이미지가 반복된다. repeat-x : horizontally repeated repeat-y : vertically repeated no-repeat : once repeated 그 외에도 background-position, background-attachment 속성이 있다. 이렇게 많은 속성들을 하..

비디오 하나를 실행 시키려면 모든 브라우저가 지원하는 형식에 맞게 바꾸어야 했다. 하지만 유튜브 비디오는 그럴 필요가 없어서 용이하다. 유튜브에 원하는 비디오를 업로드한다. 비디오 아이디를 알아둔다. 내 웹 페이지에 태그를 선언한다. iframe 태그를 이용하는 것을 권장한다. src 속성 값을 내가 유튜브에 업로드한 비디오 주소값으로 한다. 너비와 높이를 설정한다. url 의 파라미터 값에 autoplay속성값이 1일 때 비디오가 로드 되었을 때 자동 재생한다. 기본 값은 0이다. loop =1 이면 비디오가 반복재생한다. 기본 값은 0이며 한번 재생한다. controls=0이면 비디오 설정이 나타나지 않는다. 기본 값은 1이다. *,태그도 유튜브 비디오를 담아둘 수 있었지만 이제 그렇게 쓰지 않는다...