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이다. *,태그도 유튜브 비디오를 담아둘 수 있었지만 이제 그렇게 쓰지 않는다...

플러그인은 브라우서의 확장성을 높인다. 그래서 Helper application이라고도 불린다. 플러그인은 지도를 보여준다거나 바이러스 검사, 은행 보안 시스템 등 다양한 곳에서 사용된다. .sfw 형식 뿐 아니라 .html, .jpeg 도 담을 수도 있다. 태그 태그와 같은 동작을 한다. 태그를 닫지 않는다.

HTML5 이전에 브라우저에서 비디오를 실행시키기 위해서는 flash같은 플러그인을 설치해야했다. HTML5에서는 비디오 태그로 웹 페이지안에서 비디오를 공식적으로 지원한다. 비디오 태그를 지원하는 브라우저로는 chrome 4.0 , explorer edge 9.0, firefox 3.5 , safari 4.0, opera 10.5가 있다. 태그 사용하기 Your browser does not support the video tag. Your browser does not support the audio element. 비디오/오디오 태그 안에 있는 controls 속성은 비디오 재생,중지,소리조절 같은 설정 기능을 조작할 수 있게 한다. 또한 비디오 태그에 너비와 높이를 설정해 두는 게 좋다. 너비와 ..

웹에서 사용되는 멀티미디어로는 소리, 음악, 영상, 애니메이션 등이 있다. 그럼 웹에서 멀티미디어를 어떻게 사용할 수 있는지 알아보도록 하자! 초기 웹 브라우저는 텍스트만 지원했지만, 요즘은 다양한 형태의 멀티 미디어를 지원한다. 하지만 어떤 미디어는 프로그램(plug-in)을 설치해야 사용자가 이용할 수 있기 때문에 유의해야한다. 멀티미디어 타입은 파일 확장자에 나타나 있다. 비디오 형식 MP4 (.mp4) : 인터넷 비디오의 새로운 형식이다. 유튜브에서 권장되며 Flash Players와 HTML5에서 지원한다. MPEG (.mpg) 모든 브라우저에서 지원하지만 HTML5에서는 지원하지 않는다. AVI (.avi) : 마이크로 소프트에서 개발, 비디오 카메라나 티비, 윈도우 컴퓨터에서는 작동하지만 웹..

HTML5에서 문자 인코딩 설정하기 HTML5에서 기본 문자 인코딩은 UTF-8이다. 문자 인코딩은 메타 데이터에서 정의할 수 있다. 스타일 시트에서 문자 인코딩을 정의할 때는 @charset "UTF-8"; URL 이란? URL(uniform resource locator)은 웹 주소이다. URL은 도메인이거나 ip주소이다. 브라우저는 url를 사용해 웹 서버에게 웹페이지를 요청한다. 웹 주소는 규칙을 따른다. scheme://prefix.domain:port/path/filename scheme - 인터넷 서비스의 타입을 정한다. 프로토콜;통신 규약 (http or https)을 뜻하며 HyperText Transfer Protocol , Secure HyperText Transfer Protocol..