보호글

과제 1

Web/Study 2014.02.03 11:35

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력해주세요.

보호글

css 참고

Web/CSS 2014.01.22 18:03

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력해주세요.

Html5 Video Tag

Web/Web Browser 2014.01.16 10:22

Internet Explorer 9 상위 버전부터 지원하는 Html5는 플러그인 필요없이 Video를 재생할 수 있다.

기존엔 <object> Tag를 이용해서 비디오나 오디오 플래시를 보여줬지만.

 html5가 나오면서 video태그를 사용할 수 있게 됐는데.

브라우저별로 비디오포맷을 지원해주는게 다 다르다



MP4 = MPEG4 파일은 H264 비디오 코덱과 AAC 오디오 코덱

WebM = WebM 파일은 VP8 비디오 코덱 및 보비스 오디오 코덱

- Ogg = Ogg파일은  Theora를 비디오 코덱 및 보비스 오디오 코덱


* wmv 윈도우 미디어 비디오(Windows Media Video)는 말그대로 MS에서 만들어져 ie에서 뿐이 지원을 안합니다.

  또한 윈도우8에서의 ie11버전은 데스크탑에서 wmv가 지원되지만 metro ui에서는 지원을 안합니다. 

  데스크탑에서 앞으로 wmv를 지원안할수도 있다는 말이 들리니..ie만 생각하고 잡으시더라도 wmv만 믿고 

  작업하시기에는 다소 위험하지 않나 생각 됩니다.


프로젝트를 들어가면서 꼭 생각해야 할 부분은 이건 어디까지 지원할 것인지 입니다.

ie만 지원할껀지 ie만 지원하면 어느 버전부터 어느 버전까지 할것인지.

아니면 Cross Browser(웹호환성)을 위해서 ie와 크롬, 사파리, 파이어폭스.. 무슨 브라우저를 지원할 것인지를 

정해야 UI를 잡는데 중요한 기둥이 될꺼라고 생각됩니다.



# Html5 video tag 예제

< video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.(이 브라우저는 비디오태그를 지원하지 않습니다.)
< /video>

  

참고 : w3cschool

'Web > Web Browser' 카테고리의 다른 글

Html5 Video Tag  (0) 2014.01.16
웹표준 그리고 웹어플리케이션 개발 순서  (0) 2013.11.28

설정

트랙백

댓글

보호글

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력해주세요.

표준모드와 호환모드에 따른 엘리먼트 가로,세로 값

Web/CSS 2013.12.27 18:04

90일 컬리큘럼 수행중 다음 작업을 위해 잘 헤갈리는 것들 적어놓기~




브라우저가 렌더링 될때, 렌더링 모드에 따라

- 표준 모드 (standards) : W3C에서 정의한 웹표준 방식

- 호환 모드 (quirks) : 구브라우저를 위한 방식

이렇게 두가지로 렌더링 된다.


그런데 이 렌더링 모드에 따라 엘리먼트의 가로, 세로 사이즈를 지정할때 계산방식이 달라진다.

표준 모드 (standards)

: Box = Margin+Border+Padding+Width


호환 모드 (quirks)

: Box = Margin + Width(Border+Padding)


한마디로 Width 값을 계산할때 표준모드에서는 순수 컨텐츠 넓이 값(width/height에 padding, border 값을 포함하지 않는다)만 넣으면 되고

호환모드에서는 width 값을 줄때 보더와 패딩 값을 포함해서 줘야한다.


그럼??!! 

표준모드로 구현하는데 호환모드를 고려하고 싶을 땐?! 

Width 값에 좌우 padding값과 border값을 같이 선언하지 않고

Height 값 또한 상하 padding과 border값을 선언하지 않는 방식으로 구현하면 표준 모드와 동일한 레이아웃을 구현할수 있다.

라고 적혀있었다..


근데...이렇게 해주면 구현할때 제약이 많을 듯...

그냥 구브라우저를 포기하는게 여러모로 좋겠지만..


내 생각으로는..

box-sizing css 프로퍼티를 사용하면 

표준모드에서나 호환모드에서 동일하게 나오지 않을까 싶다..

(내 테스트 결과로는 그렇다;)

box-sizing은 ie8 이상부터만 사용할 수 있다는 점~

그러나 이 아이의 기능은 padding과 border 넓이를 줘도 지정한 넓이보다 늘어나지 않는다.

지정해준 width안에서 패딩과 보더값을 다 해결한다는 얘기~!


TEST

.text_box{		  
  width: 300px;
  margin: 10px;
  padding: 10px;
  border: 5px solid black;
}

<div class="text_box">         호환모드 or 표준모드 </div>

--결과--




box-sizing 주었을때


.box {width: 300px;margin: 10px;padding: 10px;
	border:5px solid #458B74;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
  }

<div class="box"> 호환모드 or 표준모드 </div>

--결과--






'Web > CSS' 카테고리의 다른 글

표준모드와 호환모드에 따른 엘리먼트 가로,세로 값  (0) 2013.12.27

설정

트랙백

댓글

html 구조화-1

Web/Web Standard 2013.12.16 17:50

90일 컬리큘럼 수행중 다음 작업을 위해 잘 헤갈리는 것들 적어놓기~



● 공통 UI는 id로, 레이아웃은 class로.

● html5 레이아웃 경우 container 부분에 태그<section>대신 <article>를 사용

   (컨텐츠용도에 따라 변경할 필요도 있음)

   - article : 완전한 개별적인 컨텐츠, 단독으로 분리되도 문제없음(article 안에 section를 가질 수 있음)

   - section : 말그대로 부분, 구역을 묶어줄때, 제목 태그를 지닌 영역

● h5, h6 해딩요소 지양하는게 좋음.


'Web > Web Standard' 카테고리의 다른 글

html 구조화-1  (0) 2013.12.16
웹사이트 문서 구조화. 마크업 (Markup)  (0) 2013.12.03

설정

트랙백

댓글

참고 문서

Web/Study 2013.12.11 13:39

W3C-HTML 4.01 규격 한글번역문

http://trio.co.kr/webrefer/html/cover.html


다룸 - 다음

http://ui.daum.net/


네이버 - 널리

http://html.nhncorp.com/


'Web > Study' 카테고리의 다른 글

참고 문서  (0) 2013.12.11

설정

트랙백

댓글

스크린 리더 음성 출력의 문제 해결- display,visibility,overflow

Web/Web Accessibility 2013.12.06 18:11

같은 회사 동료가 진행하고 있는 프로젝트을 옆에서 보다가 

갑자기 궁금해져서 알아봤다.

원래는 나도 테스트를 해봐야 겠지만..

바쁘다는 핑계로 이번엔 패스;;

심플하게 정리해놓은 글이 있어 퍼왔다. 굿~!




테스트버전 : 센스리더 PROFESSIONAL) V 3.0.7.0 /  Jaws : 14.0 / NVDA : 2012.3.1


1. display:none는 센스리더, Jaws, NVDA에서 모두 내용을 읽지 못함

2. visibility: hidden는 센스리더에서는 내용을 읽을 수 있었으나 Jaws, NVDA는 모두 내용을 읽지 못함

3. overflow:hidden의 경우 센스, Jaws, NVDA 모두 내용을 읽을 수 있음


발췌 : 네이버>널리 


{visibility:hidden; overflow:hidden; width:0;height:0;font-size:0;line-height:0}

설정

트랙백

댓글

웹사이트 문서 구조화. 마크업 (Markup)

Web/Web Standard 2013.12.03 09:11

몇년전인가...학원을 다닌 적이 있다.

그때 나름 유명함 쌤이라는 소문에 기대를 안고 수업에 들어갔다.

근데 한달동안 난 키보드 한번 만져보지 못하고 필기만했다.

그리고 매시간에는 쪽지시험을 봤다.

영어단어시험(??) 같은?

ㅎㅎㅎ

문제- <tr>의 뜻은? 

답- table row

요런 문제들

시간이 갈수록 (멘토의 열변 때문이 크지만..ㅋㅋ) 왜 이런 개념이 필요한지 절실히 느껴진다.

하지만 table의 tr과 td는 알고 싶지 않다.

난 왜이렇게 테이블이 싫지 :(


웹사이트를 하려면 먼저

문서의 구조화. 바로 마크업(Markup)부터 알아야한다.

(Markup 이란, 그 파일이 프린터로 출력되거나 화면에서 어떻게 보여야할 것인지를 나타내기 위해 또는 그 문서의 논리적인 구조를 묘사하기 위해서, 텍스트나 워드프로세싱 파일의 특정위치에 삽입되는 일련의 문자들이나 기호들을 말하며 마크업에 사용되는 표지를 흔히 ‘태그’라고 부릅니다.)

그럼 문서 제작에 필요한 태그(요소)를 알아야하는데.

작업을 하면서

태그가 약어라고 생각하고 원래의 뜻을 알면 마크업 할때 훨~~~씬 편해진다.

예를 들어 <div> 

뜻은 'division' 분할, 분배 뜻이다.

말 그대로 div는 문서(페이지)을 판넬에 붙이듯이 나눠서 구분해 줄때 사용하면 된다.

<p>- 'paragraph' 단락.

문서의 내용을 단락으로 구분지어줄때 <p>태그를 사용하면 된다.

누구나 쉽게 알수 있는 태그지만 시작할때부터 이렇게 접근하면 앞으로 마크업할 때 체계적으로 문서를 만들 수 있을 것이다.

<br>- 'line break

ㅋㅋㅋ약어 한번 참 잘지었네 :p

<em>- 'emphasize' 강조하다 말 그대로 문서 내용 강조 할때 사용~

참! 예전에 많이 사용하던 <b>,<i>태그는 문서 단락 내부에 작성되는 인라인 요소로 사용되지만, 

표현을 위한 스타일 태그로는 사용 권장하지 않는데요~

자주 사용하지 않지만

지금 하고 있는 작업 중 가끔 사용하게 되는 윗첨자<sup> 아래첨자<sub>

외우고 있지 않다가 사용할때마다 '서브서브??'이러면서 넣었는데 ㅋㅋ

<sup>- 'superscripted text'

<sub>- 'subscripted text'


<ul>- unordered list

<ol>- ordered list

작업하면서 영어단어 외운다 생각하고가끔씩 약어 찾아보는 재미도 쏠쏠~

근데 안나와있는게 많아서 아쉽 ;(

나머지도 적으려니 점점 귀찮아지네 ㅠ







'Web > Web Standard' 카테고리의 다른 글

html 구조화-1  (0) 2013.12.16
웹사이트 문서 구조화. 마크업 (Markup)  (0) 2013.12.03

설정

트랙백

댓글

웹표준 그리고 웹어플리케이션 개발 순서

Web/Web Browser 2013.11.28 11:53

누가 물어봤다

"웹표준이 뭔지 알아?"

"어머; 당연히 알지 -_-+"

잠시 후..

내 멘토가 

따로 물어봤다.

"웹표준이 뭔데?!"

"헐 당연히 아는걸 물어봐;; 그니까.."

책에서도 인터넷에서도 수없이 봤으면서

정확한 뜻!을 간과하고 있었다.

전에 멘토가 웹브라우저에 대해 설명하면서 

웹접근성, 웹표준, 크로스브라우징을 명확하게! 설명해줬었다. 

근데 난 기억이 안난다...:(

멘토에게 다시 공부 당하는??? 김에

웹어플리케이션 개발 순서도 다시 한번~!


웹표준

W3C에서 권고하는 표준안에 따라 목적과 방법에 맞게 웹에서 사용하는 기술을 의미한다.

(와우 심플~)

웹접근성

접근성이란 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있도록 만드는 것을 말한다.

(어느 블로그에선가 웹표준을 설명한다고 타이틀을 걸고 내용은 웹접근성의 내용이었다. 그건 틀렸다 본다. 웹표준과 웹접근성은 엄연히 다름을 인지해야 한다.)

크로스 브라우징 (Cross Browsing)

웹페이지의 상호 호환성 (Cross Browsing) 구축.

모든 웹브라우저에서 100% 똑같이 보이고 작동하도록 만드는 것.

(한국소프트웨어진흥원 공개SW지원센터에서 제공한 자료. 읽어보자...나도;;)

crossbrowsing.pdf


웹어플리케이션 개발 순서

운영정책에 따라 웹접근성을 지원할 것인지 결정 → 

웹표준을 준수하여 코드 작성 → 

크로스 브라우징 테스트 

브라우저별 특성이 지니고 있는 스크립트 및 스타일시트 속성을 작성 → 

안정적인 웹어플리케이션 개발 완성~!!


안다고 대충 넘어가지 말고 정확히 알기!!







'Web > Web Browser' 카테고리의 다른 글

Html5 Video Tag  (0) 2014.01.16
웹표준 그리고 웹어플리케이션 개발 순서  (0) 2013.11.28

설정

트랙백

댓글