프프프

HTML

10개 발견
  1. 2017.02.09 - 진징

    accordion
  2. 2016.12.08 - 진징

    [IE] position 초기화 해결법
  3. 2016.11.23 - 진징

    GitLab Pages Plane-HTML 생성
  4. 2016.11.03 - 진징

    테이블 scope 속성의 적용 범위
  5. 2016.10.31 - 진징

    반응형 박스
  6. 2016.10.26 - 진징

    [IE] table 요소에 position과 background 사용 주의
  7. 2016.09.22 - 진징

    백그라운드이미지 애니메이션
  8. 2016.05.03 - 진징

    <!doctype>
  9. 2016.04.26 - 진징

    가로세로 비율을 유지하는 반응형 박스
  10. 2016.04.07 - 진징

    media quary 속성

accordion

2017. 2. 9. 15:21 - 진징

See the Pen WRaGYY by parkjinhyung (@gutmate) on CodePen.


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

'Front > JavaScript' 카테고리의 다른 글

쿠키 만료 세팅  (0) 2017.02.15
지정한 문자 모두 치환하기 (replaceAll)  (0) 2017.02.15
count elements  (0) 2017.02.06
문자열 존재 확인  (0) 2016.12.12
최대값, 최소값 구하기 (arr sort)  (0) 2016.11.15
댓글 로드 중…

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

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

카테고리의 다른 글 목록

Front/JavaScript 카테고리의 다른 글을 둘러봅니다 프프프의 모든 글을 둘러봅니다

[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을 배껴둬서 트랙백을 보낼 수 있습니다

카테고리의 다른 글 목록

Front/HTML&CSS 카테고리의 다른 글을 둘러봅니다 프프프의 모든 글을 둘러봅니다

GitLab Pages Plane-HTML 생성

2016. 11. 23. 17:55 - 진징

1. gitlab.com 가입

2. userid.gitlab.io 프로젝트 생성

3. local저장소로 git clone

4. GitLab CI 설정

local에서 .gitlab-ci.yml 생성 후 내용 삽입 (https://gitlab.com/pages/plain-html)

host-from-root로 설정했다. 기본설정은 public폴더 안에 파일을 생성해야 하는 듯

5. html, css, js 등 작성한 파일등을 gitlab 저장소로 push

6. http://userid.gitlab.io 에서 확인


GitLab의 장점은 private저장소를 무한으로 사용 할 수 있다는 것이다.

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

'Tool > Git' 카테고리의 다른 글

자주사용하는 git 명령어  (0) 2016.11.16
git 명령어  (0) 2016.10.27
댓글 로드 중…

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

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

카테고리의 다른 글 목록

Tool/Git 카테고리의 다른 글을 둘러봅니다 프프프의 모든 글을 둘러봅니다

테이블 scope 속성의 적용 범위

2016. 11. 3. 16:37 - 진징

See the Pen XNrPOp by parkjinhyung (@gutmate) on CodePen.

출처: 웹접근성연구소

댓글 로드 중…

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

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

카테고리의 다른 글 목록

Front/웹접근성 카테고리의 다른 글을 둘러봅니다 프프프의 모든 글을 둘러봅니다

반응형 박스

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을 배껴둬서 트랙백을 보낼 수 있습니다

카테고리의 다른 글 목록

Front/HTML&CSS 카테고리의 다른 글을 둘러봅니다 프프프의 모든 글을 둘러봅니다

[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을 배껴둬서 트랙백을 보낼 수 있습니다

카테고리의 다른 글 목록

Front/HTML&CSS 카테고리의 다른 글을 둘러봅니다 프프프의 모든 글을 둘러봅니다

백그라운드이미지 애니메이션

2016. 9. 22. 11:55 - 진징

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(document).ready(function(){
    /**
     * 백그라운드 이미지의 애니메이션 화
     *
     *  - SECTION: 반복되는 이미지 구간 넓이
     *  - WIDTH: 이미지 전체 넓이
     *  - TIME: 애니메이션 속도
     *
     */
    
     // 생성
     $.fn.aniJin = function (SECTION, WIDTH, TIME){
         var $this = $(this); // 대상 설정
         if(!TIME) {TIME = 200;} // default 값 설정
 
         var repeat = setInterval(function(){
             var bpx = parseInt($this.css("backgroundPositionX")); // 백그라운드의 현재 위치값
             $this.css({
                 backgroundPositionX: "-=" + SECTION
             }); // 반복되는 구간 만큼 백그라운드 이동
             if (bpx <= -(WIDTH-SECTION*2)) {
                 clearInterval(repeat);
             } // 종료시점 설정
         }, TIME);
     };
    
     // EX
     $(".blossom2").aniJin(550, 8800, 200);
     $(".blossom3").aniJin(630, 13860, 180);
     $(".blossom4").aniJin(480, 8640, 200);
});
cs




'Front > JavaScript' 카테고리의 다른 글

스크롤 이동  (0) 2016.10.11
테이블 서머리, 캡션 삽입 스크립트  (0) 2016.09.22
메뉴 고정  (0) 2016.08.04
일정한 개수로 그룹화(묶기)  (0) 2016.08.02
테이블 헤드 고정  (0) 2016.07.28
댓글 로드 중…

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

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

카테고리의 다른 글 목록

Front/JavaScript 카테고리의 다른 글을 둘러봅니다 프프프의 모든 글을 둘러봅니다

<!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을 배껴둬서 트랙백을 보낼 수 있습니다

카테고리의 다른 글 목록

Front/HTML&CSS 카테고리의 다른 글을 둘러봅니다 프프프의 모든 글을 둘러봅니다

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

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을 배껴둬서 트랙백을 보낼 수 있습니다

카테고리의 다른 글 목록

Front/HTML&CSS 카테고리의 다른 글을 둘러봅니다 프프프의 모든 글을 둘러봅니다

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을 배껴둬서 트랙백을 보낼 수 있습니다

카테고리의 다른 글 목록

Front/HTML&CSS 카테고리의 다른 글을 둘러봅니다 프프프의 모든 글을 둘러봅니다

티스토리툴바