반응형

WEB·MOBILE- HTML/HTML&CSS 14

HTML5 video 태그를 활용 및 브라우저별 호환 정보

비디오 기본 태그 해당 브라우저에는 지원되지 않습니다. * video 내부에 넣은 문구는 영상이 뜨지 않을시 출력되기 때문에 위 태그와 같이 그대로 사용해도 무관하다. 또한 빨간표시된 부분은 본인 영상에 맞도록 수정하여 적용하자. Video 선택적 속성 Attribute Value Description autoplay autoplay 비디오가 준비되는 즉시 재생되도록 지정 controls controls 비디오 컨트롤을 표시하도록 지정한다(예: 재생/일시 중지 버튼 등) height pixels 비디오 플레이어의 높이 설정 loop loop 비디오가 완료될 때마다 다시 시작하도록 지정 muted muted 비디오의 오디오 출력을 음소거하도록 지정 poster URL 비디오를 다운로드하는 동안 또는 사용자..

HTML text 관련 css 스타일 (줄바꿈 및 글자 자르기, 점선 표시 등)

text 관련 css 스타일 (줄바꿈 및 글자 자르기, 점선표기 등) white-space:normal; normal이 기본값, 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다. 지정된 넓이의 끝에서 자동으로줄바꿈한다. - 코드에서의 원래 텍스트 여수 밤바다 이 조명에 담긴 아름다운 얘기가 있어 네게 들려주고파 white-space:pre; 띄어쓰기는 실제 입력한 칸 수대로, 줄바꿈도 엔터를 친 대로 나온다. 넘어가는 부분에서 강제 줄바꿈은 되지 않는다. white-space:nowrap; 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다. 넓이를 지정하였어도 자동으로 줄바꿈 되지 않게 강제로 개행을 막아준다. word-break 텍스트가 들어가는 블럭요소의 넓이에 맞춰 줄바꿈 하는 CSS (강제 줄바..

HTML 특수문자 메뉴보기

특수문자 잘못써서 깨지는 경우가 있으니 혹시 깨진다면 특수문자를 있는 그대로 입력해서 그럴지도 모릅니다. 출처: 네이버 웹표준스터디 카페 HTML / XHTML 상의 특수기호가 그대로 표시되도록 기술하거나 키보드로 직접 입력할 수 없는 문자를 기술하기 위한 방법을 문자 참조 (character referendes) 라고 합니다. 문자 참조에는 1)문자 실제 참조 (character entity references) 2) 수치 문자 참조 (numerical character references)의 두가지 방식이 있다. 예를들어 "

HTML 퍼블리싱 코딩할 시 편리하게 CSS 스타일, jQuery, javascript 정리하기

예전에 css스타일이나 html 코딩을 정리할 때 이용한 건 널리에서 제공하던 N-WAX를 이용했는데 어느 순간부터 서비스 지원이 원활치 안아서 정리하는 사이트를 찾던 중 발견한 사이트라고 할 수 있다. 해당 웹사이트는 Pretty Diff 라는 해외 사이트이다. 위에서 언급한 바와 같이 Pretty Diff는 css, html, jQuery, javascript 등 태그를 가져왔을 때 정리가 지저분하게 되어있는 것을 한순간에 정리해주는 사이트이다. 하단의 링크를 눌러 사이 에로 접속 ▼ Pretty Diff - The difference tool ↑ ↑ ↔ prettydiff.com 메인 페이지 접속하게 되면 좌우 에디터 편집창이 있으며, 하단에는 다양한 설정에 따른 체크박스가 있다. 크롬으로 자동번역..