'Front/HTML&CSS' 카테고리의 글 목록

iOS10 viewport user-scalable 적용 불가 문제

2016. 12. 9. 10:02 - 진징

iOS10 viewport user-scalable 적용 불가 문제

애플은 iOS10의 사파리 브라우저에서 더이상 viewport user-scalable을 사용할 수 없도록 만들었다. 공식적으로 접근성을 위해서 적용시키지 않겠다고 발표했다.

To imporve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.
Safari의 웹 사이트에 대한 접근성을 높이기 위해 웹 사이트에서 뷰어에 사용자 확장 가능 = 아니오를 설정 한 경우에도 사용자가 손가락으로 확대 / 축소 할 수 있습니다.

그럼에도 확대를 막고 싶다면 아래의 스크립트를 적용해주면 된다.

저작자표시 비영리 변경금지

'Front > HTML&CSS' 카테고리의 다른 글

[IE] position 초기화 해결법 (1)	2016.12.08
[CSS] box-sizing:border-box issue (0)	2016.12.03
반응형 박스 (0)	2016.10.31
[IE] table 요소에 position과 background 사용 주의 (0)	2016.10.26
<iframe>으로 올린 유투브 동영상 z-index 문제 (0)	2016.10.19

댓글 로드 중…

트랙백을 확인할 수 있습니다

트랙백 URL URL을 배껴둬서 트랙백을 보낼 수 있습니다

[IE] position 초기화 해결법

2016. 12. 8. 19:02 - 진징

1
div {top:20px; right:40px}

위와 같이 좌표값을 지정한 상태에서

1
div{bottom:40px; left:20px}

이런 유형으로 고치려 하면 미리 지정해둔 좌표값을

1
div {top:initial; right:initial; bottom:40px; left:20px}

이렇게 초기화 시켜줘야 한다.

그러나 역시 IE에서 되지 않았다.

*IE를 위한 해결 방법

1
div {top:auto; right:auto; top:initial; right:initial; bottom:40px; left:20px}
cs

auto값을 추가적으로 주면 해결이 된다.

저작자표시 비영리 변경금지

'Front > HTML&CSS' 카테고리의 다른 글

iOS10 viewport user-scalable 적용 불가 문제 (0)	2016.12.09
[CSS] box-sizing:border-box issue (0)	2016.12.03
반응형 박스 (0)	2016.10.31
[IE] table 요소에 position과 background 사용 주의 (0)	2016.10.26
<iframe>으로 올린 유투브 동영상 z-index 문제 (0)	2016.10.19

댓글 로드 중…

트랙백을 확인할 수 있습니다

트랙백 URL URL을 배껴둬서 트랙백을 보낼 수 있습니다

[CSS] box-sizing:border-box issue

2016. 12. 3. 16:55 - 진징

Chrome 브라우저에서 box-sizing: border-box 를 사용했을 때 브라우저 줌 레벨이 100%보다 작다면, select 엘리먼트를 사용한 선택 옵션을 사용하는 데 문제가 발생한다.
IE 8은 min/max-width/height가 사용되었을 때 box-sizing : border-box 설정을 무시한다.
Safari 6.0.x에서는 display: table 로 설정된 요소에 box-sizing 속성이 적용되지 않는다.
IE 9는 해당 요소의 position : absolute | fixed일 때나, overflow: auto | overflow-y: scroll일 때, 스크롤바의 가로를 줄여버린다. (IE 9 will subtract the width of the scrollbar to the width of the element when set to position : abosolute/fixed, overflow: auto/ overflow-y: scroll)
Android 브라우저는 HTML select element의 가로, 세로 면적을 정확히 계산하지 못한다.
IE 8에서 min-width 속성은 해당 요소의 box-sizing 값이 border-box로 설정이 되어있어도, content-box에 적용이 된다.

출처: http://ccuram.tistory.com/27

저작자표시 비영리 변경금지

'Front > HTML&CSS' 카테고리의 다른 글

iOS10 viewport user-scalable 적용 불가 문제 (0)	2016.12.09
[IE] position 초기화 해결법 (1)	2016.12.08
반응형 박스 (0)	2016.10.31
[IE] table 요소에 position과 background 사용 주의 (0)	2016.10.26
<iframe>으로 올린 유투브 동영상 z-index 문제 (0)	2016.10.19

댓글 로드 중…

트랙백을 확인할 수 있습니다

트랙백 URL URL을 배껴둬서 트랙백을 보낼 수 있습니다

반응형 박스

2016. 10. 31. 17:29 - 진징

'Front > HTML&CSS' 카테고리의 다른 글

[IE] position 초기화 해결법 (1)	2016.12.08
[CSS] box-sizing:border-box issue (0)	2016.12.03
[IE] table 요소에 position과 background 사용 주의 (0)	2016.10.26
<iframe>으로 올린 유투브 동영상 z-index 문제 (0)	2016.10.19
<!doctype> (0)	2016.05.03

댓글 로드 중…

트랙백을 확인할 수 있습니다

트랙백 URL URL을 배껴둬서 트랙백을 보낼 수 있습니다

[IE] table 요소에 position과 background 사용 주의

2016. 10. 26. 23:22 - 진징

주의!!!

table 요소인 th, td에 position과 background속성을 같이 주게 되면 IE에서 border가 보이지 않게 된다.

'Front > HTML&CSS' 카테고리의 다른 글

[CSS] box-sizing:border-box issue (0)	2016.12.03
반응형 박스 (0)	2016.10.31
<iframe>으로 올린 유투브 동영상 z-index 문제 (0)	2016.10.19
<!doctype> (0)	2016.05.03
말 줄임 (0)	2016.05.02

댓글 로드 중…

트랙백을 확인할 수 있습니다

트랙백 URL URL을 배껴둬서 트랙백을 보낼 수 있습니다

<iframe>으로 올린 유투브 동영상 z-index 문제

2016. 10. 19. 16:36 - 진징

z-index로도 안먹히는 경우

&wmode=opaque"

속성이 지정되어 있는경우?대신 &를 넣어준다.

?wmode=opaque"

[출처] <iframe>으로 올린 유투브 동영상 z-index 문제|작성자 미투마켓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function iframeVideo() {
   $('iframe').each(function() {
      var url = $(this).attr("src");
 
      if ($(this).attr("src").indexOf("?") > 0) {
         $(this).attr({
            "src": url + "&wmode=transparent",
            "wmode": "Opaque"
         });
      } else {
         $(this).attr({
            "src": url + "?wmode=transparent",
            "wmode": "Opaque"
         });
      }
   });
}
Colored by Color Scripter
cs

'Front > HTML&CSS' 카테고리의 다른 글

반응형 박스 (0)	2016.10.31
[IE] table 요소에 position과 background 사용 주의 (0)	2016.10.26
<!doctype> (0)	2016.05.03
말 줄임 (0)	2016.05.02
가로세로 비율을 유지하는 반응형 박스 (0)	2016.04.26

댓글 로드 중…

트랙백을 확인할 수 있습니다

트랙백 URL URL을 배껴둬서 트랙백을 보낼 수 있습니다

<!doctype>

2016. 5. 3. 10:57 - 진징

The syntax in HTML 5 is:

<!doctype html>

The syntax in HTML 4.01 Transitional is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The syntax in XHTML 1.0 Transitional is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The syntax in XHTML 1.0 Strict is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The syntax in XHTML 1.1 is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

'Front > HTML&CSS' 카테고리의 다른 글

[IE] table 요소에 position과 background 사용 주의 (0)	2016.10.26
<iframe>으로 올린 유투브 동영상 z-index 문제 (0)	2016.10.19
말 줄임 (0)	2016.05.02
가로세로 비율을 유지하는 반응형 박스 (0)	2016.04.26
media quary 속성 (0)	2016.04.07

댓글 로드 중…

트랙백을 확인할 수 있습니다

트랙백 URL URL을 배껴둬서 트랙백을 보낼 수 있습니다

말 줄임

2016. 5. 2. 13:03 - 진징

특수문자 포함 강제 줄 바꿈

width:100px; height:auto; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word;

말 줄임 (한 줄)

width:100px; height:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;

말 줄임 (두 줄 이상)

- webkit엔진에서는 말 줄임 두 줄이상일 때 제대로 적용되지 않는다. 그렇기 때문에 webkit전용 css를 넣어주어야 한다

width:100px; height:auto; overflow:hidden; text-overflow:ellipsis;

-webkit-line-clamp:2; -webkit-box-orient:vertical; display:-webkit-box;

'Front > HTML&CSS' 카테고리의 다른 글

[IE] table 요소에 position과 background 사용 주의 (0)	2016.10.26
<iframe>으로 올린 유투브 동영상 z-index 문제 (0)	2016.10.19
<!doctype> (0)	2016.05.03
가로세로 비율을 유지하는 반응형 박스 (0)	2016.04.26
media quary 속성 (0)	2016.04.07

댓글 로드 중…

트랙백을 확인할 수 있습니다

트랙백 URL URL을 배껴둬서 트랙백을 보낼 수 있습니다

가로세로 비율을 유지하는 반응형 박스

2016. 4. 26. 15:20 - 진징

반응형 웹디자인에서는 max-width: 100%나 width: 100%를 활용하여 콘텐츠가 컨테이너의 너비에 맞게 유동적으로 변경되게 하는 기법이 많이 사용된다. 이 때 높이는 콘텐츠가 가지고 있는 높이를 따르게된다. 컨텐츠가 글자라면 높이가 유동적이어야 하지만 이미지나 비디오의 경우에는 좌우 폭에 따라 비율이 유지되어야 한다.

가로가 100%로 되어 있기 때문에 세로도 퍼센트 값을 지정하면 되겠지만 퍼센트 값은 상위 요소의 값에 상대적이기 때문에 상위 요소의 높이를 지정할 수 없는 경우라면 퍼센트로 높이를 지정할 수 없다. 이때 패딩이나 마진을 이용해서 퍼센트 값을 지정할 수 있다.

#movie-player-wrapper {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	padding-bottom: 56.26%;
}
#movie-player-wrapper .wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

높이를 0으로 지정하고 padding-top이나 padding-bottom을 퍼센트로 지정하면 너비에 따라 가로세로 비율이 유지되는 박스를 만들 수 있다. 안의 콘텐츠는 패딩에 밀려 박스 밖에 위치하기 때문에 절대 위치로 위치를 잡아주면 화면에 나오게 된다.

50px

100px

200px

가변 크기의 동영상 플레이어를 넣어야 하는 경우가 있었는데 요긴하게 사용했다.

출처 : https://hyeonseok.com/soojung/css/2012/08/22/712.html

'Front > HTML&CSS' 카테고리의 다른 글

[IE] table 요소에 position과 background 사용 주의 (0)	2016.10.26
<iframe>으로 올린 유투브 동영상 z-index 문제 (0)	2016.10.19
<!doctype> (0)	2016.05.03
말 줄임 (0)	2016.05.02
media quary 속성 (0)	2016.04.07

댓글 로드 중…

트랙백을 확인할 수 있습니다

트랙백 URL URL을 배껴둬서 트랙백을 보낼 수 있습니다

media quary 속성

2016. 4. 7. 09:49 - 진징

/* IPHONE 3 IMAGES

================================*/

@media all and (-webkit-min-device-pixel-ratio: 2){

/* my small background imgs here.... */

}

/* IPHONE 4 'retina' IMAGES

================================*/

@media all and (max-device-width: 480px){

/* my high-res background imgs here.... */

}

@media (max-width: 480px) {}

/*Tablet & Desktop Device*/

@media all and (min-width:768px) {

.

/*Tablet Device*/

@media all and (min-width:768px) and (max-width:1024px) {

/*Desktop Device*/

@media all and (min-width:1025px) {

@media all and (min-width:768px) and (max-width:1024px) { ... }

// 뷰포트 너비가 768px 이상 '그리고' 1024px 이하면 실행

@media all and (width:768px), (width:1024px) { ...}

// 뷰포트 너비가 768px 이거나 '또는' 1024px 이면 실행

@media not all and (min-width:768px) and (max-width:1024px) { ... }

// 뷰포트 너비가 768px 이상 '그리고' 1024px 이하가 '아니면' 실행

'Front > HTML&CSS' 카테고리의 다른 글

[IE] table 요소에 position과 background 사용 주의 (0)	2016.10.26
<iframe>으로 올린 유투브 동영상 z-index 문제 (0)	2016.10.19
<!doctype> (0)	2016.05.03
말 줄임 (0)	2016.05.02
가로세로 비율을 유지하는 반응형 박스 (0)	2016.04.26

댓글 로드 중…

트랙백을 확인할 수 있습니다

트랙백 URL URL을 배껴둬서 트랙백을 보낼 수 있습니다

iOS10 viewport user-scalable 적용 불가 문제

'Front > HTML&CSS' 카테고리의 다른 글

트랙백을 확인할 수 있습니다

공유하려면 대상을 선택하세요

소셜

메시지

기록

카테고리의 다른 글 목록

'Front > HTML&CSS' 카테고리의 다른 글

트랙백을 확인할 수 있습니다

공유하려면 대상을 선택하세요

소셜

메시지

기록

카테고리의 다른 글 목록

'Front > HTML&CSS' 카테고리의 다른 글

트랙백을 확인할 수 있습니다

공유하려면 대상을 선택하세요

소셜

메시지

기록

카테고리의 다른 글 목록

'Front > HTML&CSS' 카테고리의 다른 글

트랙백을 확인할 수 있습니다

공유하려면 대상을 선택하세요

소셜

메시지

기록

카테고리의 다른 글 목록

'Front > HTML&CSS' 카테고리의 다른 글

트랙백을 확인할 수 있습니다

공유하려면 대상을 선택하세요

소셜

메시지

기록

카테고리의 다른 글 목록

'Front > HTML&CSS' 카테고리의 다른 글

트랙백을 확인할 수 있습니다

공유하려면 대상을 선택하세요

소셜

메시지

기록

카테고리의 다른 글 목록

'Front > HTML&CSS' 카테고리의 다른 글

트랙백을 확인할 수 있습니다

공유하려면 대상을 선택하세요

소셜

메시지

기록

카테고리의 다른 글 목록

'Front > HTML&CSS' 카테고리의 다른 글

트랙백을 확인할 수 있습니다

공유하려면 대상을 선택하세요

소셜

메시지

기록

카테고리의 다른 글 목록

'Front > HTML&CSS' 카테고리의 다른 글

트랙백을 확인할 수 있습니다

공유하려면 대상을 선택하세요

소셜

메시지

기록

카테고리의 다른 글 목록

'Front > HTML&CSS' 카테고리의 다른 글

트랙백을 확인할 수 있습니다

공유하려면 대상을 선택하세요

소셜

메시지

기록

카테고리의 다른 글 목록

티스토리툴바