H에 해당되는 글 16건

글

푸터 하단 고정 시키기

H/Html 2017. 10. 15. 19:33

html, body { height: 100%; } 

footer { positive: absolute; bottom: 0; }

footer감싸고 있는 wrapper { positive: relatvie; min-height: 100%; }


<body>

<div class="wrapper">

<div class="content">


</div>

<div class="footer">

Footer

</div>

</div>

</body>

기본적으로 이렇게하면 적용된다.

div 깊이가 있을 경우

<div class="depth-2-wrapper">

<div class="wrapper">

...

</div>

</div>

depth-2-wrapper height: 100% 로 유지시켜줘야한다.

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

'H > Html' 카테고리의 다른 글

IOS Safari minimal-ui 적용기  (0) 2017.10.15
CSS float 요소 중앙 정렬 시키기  (0) 2015.01.10
크기에 따른 가로 스크롤 div 생성  (0) 2015.01.09
HTML: How to make a submit button with text + image in it?  (0) 2014.06.23
parent.location 해당 a name 으로 이동  (0) 2014.03.19

설정

,

트랙백

댓글

글

IOS Safari minimal-ui 적용기

H/Html 2017. 10. 15. 18:48

IOS Safari 브라우져에서 제공하는 minimal-ui 기능 ( 툴바가 쪼그라드는 기능 or 툴바 사라짐 기능 )을 사용하기 위해 몇가지 수정사항이 존재하였다.

경험을 토대로 설명하고자 한다.

- <meta name="viewport" content="minimal-ui"> minimal-ui 추가한다. 

- body { height: 100%; overflow: auto 혹은 scroll; }을 명시하여 body에서 스크롤이 가능하면 끝.

이때 주의해야할 점은 하의 div들 중 { overflow: auto, scroll; } 이 가능하면 해당 엘리멘트가 스크롤 되기 때문에 위 minimal-ui 기능이 동작하지 않는다.

즉, window.addEventListener('scroll', this.onScroll); 추가 시 해당 스크롤이 동작하면 된다.

위 두가지 조건이 만족하면 safari에서 툴바가 쪼그라드는걸 볼 수 있다.


참고

https://stackoverflow.com/questions/18793072/impossible-to-hide-navigation-bars-in-safari-ios-7-for-iphone-ipod-touch

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

'H > Html' 카테고리의 다른 글

푸터 하단 고정 시키기  (0) 2017.10.15
CSS float 요소 중앙 정렬 시키기  (0) 2015.01.10
크기에 따른 가로 스크롤 div 생성  (0) 2015.01.09
HTML: How to make a submit button with text + image in it?  (0) 2014.06.23
parent.location 해당 a name 으로 이동  (0) 2014.03.19

설정

,

트랙백

댓글

글

CSS float 요소 중앙 정렬 시키기

H/Html 2015. 1. 10. 19:50

참조 : http://rootbox.co.kr/p/268


예) 

#test { 

    float: right; 

    position: relative; 

    left: -50%; 

} 


#test li { 

    float: left; 

    position: relative; 

    left: 50%; 

    

    border: 1px solid red; 

} 


<ul id="test"> 

    <li>아이유</li> 

    <li>효느님</li> 

    <li>수지</li> 

    <li>리지</li> 

    <li>돼지</li> 

</ul> 


구경하러가기: http://jsfiddle.net/E2aVK/ 

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

'H > Html' 카테고리의 다른 글

푸터 하단 고정 시키기  (0) 2017.10.15
IOS Safari minimal-ui 적용기  (0) 2017.10.15
크기에 따른 가로 스크롤 div 생성  (0) 2015.01.09
HTML: How to make a submit button with text + image in it?  (0) 2014.06.23
parent.location 해당 a name 으로 이동  (0) 2014.03.19

설정

,

트랙백

댓글

글

크기에 따른 가로 스크롤 div 생성

H/Html 2015. 1. 9. 22:31

horiz라는 스크롤이 생기게 될 div를 설정해주고.

table 태그를 이용해서 그 안에 box 설정 해주면 된다.


    Horizon Div
    




    

          

            
            

                
   .......


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

'H > Html' 카테고리의 다른 글

IOS Safari minimal-ui 적용기  (0) 2017.10.15
CSS float 요소 중앙 정렬 시키기  (0) 2015.01.10
HTML: How to make a submit button with text + image in it?  (0) 2014.06.23
parent.location 해당 a name 으로 이동  (0) 2014.03.19
meta 태그, base 태그, map 태그, fieldset 태그  (0) 2014.03.18

설정

,

트랙백

댓글

글

HTML: How to make a submit button with text + image in it?

H/Html 2014. 6. 23. 01:38

참조 : http://stackoverflow.com/questions/1621891/html-how-to-make-a-submit-button-with-text-image-in-it

 


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

'H > Html' 카테고리의 다른 글

CSS float 요소 중앙 정렬 시키기  (0) 2015.01.10
크기에 따른 가로 스크롤 div 생성  (0) 2015.01.09
parent.location 해당 a name 으로 이동  (0) 2014.03.19
meta 태그, base 태그, map 태그, fieldset 태그  (0) 2014.03.18
Html 이미지 없는 라운드 테이블 만들기  (0) 2014.03.18

설정

,

트랙백

댓글

글

parent.location 해당 a name 으로 이동

H/Html 2014. 3. 19. 16:46

1. <form> <input type='button' value='click To Go To the Bottom Of The Page' onclick="parent.location='#code'"></form>

<a name='code'> ??? </a>

 

2.

<a href='#code'> click To Go To the Bottom Of The Page </a>

<a name='code'> ??? </a>

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

'H > Html' 카테고리의 다른 글

크기에 따른 가로 스크롤 div 생성  (0) 2015.01.09
HTML: How to make a submit button with text + image in it?  (0) 2014.06.23
meta 태그, base 태그, map 태그, fieldset 태그  (0) 2014.03.18
Html 이미지 없는 라운드 테이블 만들기  (0) 2014.03.18
Tab키 이동순서 정하기  (0) 2014.03.18

설정

,

트랙백

댓글

글

meta 태그, base 태그, map 태그, fieldset 태그

H/Html 2014. 3. 18. 16:28

<meta http-equiv="Refresh" content="60"> - 60초 마다 새로고침

 

<meta http-equiv="Refresh" content="5; url=주소"> - 주소로 5초 후 이동

 

* http-equiv=name (대소문자 구별 X)

: 'name' 속성대신 사용하며, HTTP 서버들이 HTTP 반응 메세지 헤더의 정보를 수집하기 위하여 사용.

 

렌더링 엔진 지정

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

-> IE 브라우저에서는 무조건 최신 버젼으로 해석하라.

<meta http-equiv="X-UA-Compatible" content="IE7" />

-> 'IE7' 버젼으로 렌더링

 

-------------------------------------------------------------------------------------------

 

<base target='_blank'>

이렇게 페이지 윗 부분에 선언해 놓으면 이 base태그 다음에 나오는 링크들이 target 속성은 모드 _blank가 된다.

* 주로 base 태그는 프레임에서 많이 사용하기도 한다.

<base target='mainFrame'> 이런식으로 왼쪽 프레임에서 사용해주면 링크 클릭시 모든 타겟이 mainFrame로 가게 된다. ( mainFrame 은 아마 <frame> 태그 인듯 함. )

 

또 다른 하나의 기능 <base href='http://www.sdlfkn.com'> 이렇게 선언해주었을 경우

<img src='/img/test.gif'>의 주소는 <img src='http://www.sdlfkn.com/img/test.gif' />와 마찬가지로 인식하게 된다.

 

-------------------------------------------------------------------------------------------

 

map 사용

map 태그에 대한 정리

영역을 3가지 유형이다. shape=(rect, circle, poly)

<img src='이미지경로' usemap='#이름'>

<map name='이름'>

<area shape='rect' coords='x1, y1, x2, y2' href=링크주소 >

</map>

 

<area shape='circle' coords='(x1, y1, r)' href=링크주소 >

<area shape='poly' coords='x1, y1, x2, y2, x3, y3, x4, y4, x5, y5' href=링크주소>

 

 

-------------------------------------------------------------------------------------------

 

fieldset에 사용방법

(그룹박스)

 

<fieldset> <legend align='center'> 패널 </legend> 안녕하세요 <br/> <input type='button' value='확인' /> </fieldset>

 

* 참조

IE fieldset 태그에 배경색 깔끔 설정

fieldset {

background-color : #af0;

position : relative;

margin-top : .5em;

padding-top : .5em;

}

legend {

position : absolute;

top : -.7em;

left : .5em;

}

 

 

 

 

 

 

 

 

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

'H > Html' 카테고리의 다른 글

HTML: How to make a submit button with text + image in it?  (0) 2014.06.23
parent.location 해당 a name 으로 이동  (0) 2014.03.19
Html 이미지 없는 라운드 테이블 만들기  (0) 2014.03.18
Tab키 이동순서 정하기  (0) 2014.03.18
URL 최대길이  (0) 2012.03.22

설정

,

트랙백

댓글

글

Html 이미지 없는 라운드 테이블 만들기

H/Html 2014. 3. 18. 14:05

<html>
<head>
 <title>title</title>
</head>
<style type="text/css">
.rtop, .rbottom { display : block; }

.rtop *, .rbottom * {

display : block;

height : 1px;

overflow : hidden;

background : #ccc;

}

.r1{ margin : 0 5px; } .r3{ margin : 0 2px; }

.r2{ margin : 0 3px; } .r4{ margin : 0 1px; height : 2px; }

.box { background : #ccc; padding : 5px 10px; font-size : 12px; }

</style>
<body>
 <div id="container">

<b class="rtop">

<b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b>

</b>

<div class="box"> 이미지 X 라운딩 표현 </div>

<b class="rbottom">

<b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b>

</b>

</div>
</body>
</html>

 

// 라운드 테이블 선

 

.rtop, .rbottom{ display ; block; }

.rtop *, .rbottom * { display : block; height : 1px; overflow : hidden; }

.r1 { margin : 0 5px; background : #ccc; }

.r2 { margin : 0 3px; border-left : 2px solid #ccc; border-right : 2px solid #ccc; }

.r3 { margin : 0 2px; border-left : 1px solid #ccc; border-right : 1px solid #ccc; }

.r4 { margin : 0 1px; height : 2px; border-left : 1px solid #ccc; border-right : 1px solid #ccc; }

.box { margin : 0; padding : 5px 10px; border-left : #ccc solid 1px; border-right : #ccc solid 1px; font-size : 12px; }

 

 

 

 

 

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

'H > Html' 카테고리의 다른 글

parent.location 해당 a name 으로 이동  (0) 2014.03.19
meta 태그, base 태그, map 태그, fieldset 태그  (0) 2014.03.18
Tab키 이동순서 정하기  (0) 2014.03.18
URL 최대길이  (0) 2012.03.22
css로 수직 가운데정렬 4가지 방법  (0) 2012.03.11

설정

,

트랙백

댓글

글

Tab키 이동순서 정하기

H/Html 2014. 3. 18. 13:47

<input type=text tabindex=1 name=1>

<input type=text tabindex=4 name=1>

<input type=text tabindex=3 name=1>

<input type=text tabindex=2 name=1>

 

Tab key 실행시 name1 -> name4  -> name3 -> name2

 

 

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

'H > Html' 카테고리의 다른 글

meta 태그, base 태그, map 태그, fieldset 태그  (0) 2014.03.18
Html 이미지 없는 라운드 테이블 만들기  (0) 2014.03.18
URL 최대길이  (0) 2012.03.22
css로 수직 가운데정렬 4가지 방법  (0) 2012.03.11
스타일시트 영문 자동줄바꿈  (0) 2012.02.05

설정

,

트랙백

댓글

글

URL 최대길이

H/Html 2012. 3. 22. 11:02

이 글은 http://www.boutell.com/newfaq/misc/urllength.html 의 내용을 인용하여 서술한 것으로 2006년 이후로 바뀐 내용들이 반영되어있지 않은 것들이 많습니다. 덧붙일 의견이 있으시면 언제든 말씀해주시면 반영하겠습니다. :-)

http://www.w3.org/Protocols/rfc2616/rfc2616.html 에서 설명하는 사양에도 최대 URL 길이에 대한 내용은 언급이 되어있지 않습니다. 하지만 웹 개발을 하면서 누구나 한번즈음은 이런 부분에 대해서 고민을 하게 될 때가 있는데, 그러한 고민을 풀어줄만한 아티클이 있어 소개해 봅니다.

Browser Case No. 1: Microsoft Internet Explorer

http://support.microsoft.com/kb/q208427/ 에서 언급한 것 처럼 Microsoft Internet Explorer는 내부 WININET 헤더 파일 상의 정의를 충실히 따릅니다. URL이 가질 수 있는 최대 길이는 2083자이고, 이 중 프로토콜, 서버 이름 등을 제외한 순수 경로가 2048자까지 허용이 됩니다. 이 글을 작성했던 분의 테스트 결과에 따르면 URL 길이가 긴 경우 브라우저 차원에서 오류 페이지를 띄운다는 것으로 결과가 나왔다고 합니다.

Browser Case No. 2: Firefox

버전 1.5.x의 경우 시각적으로 주소 표시줄은 65536번째 글자 이후로는 주소를 더 표시하지 못한다고 합니다. 그러나 논리적으로 십만글자 이상의 URL도 정상적으로 처리하는 것으로 보이며, 현재 출시되는 Firefox의 경우 이러한 제약이 거의 없지 않겠는가 하는 예상을 해봅니다.

Browser Case No. 3: Safari

적어도 8만자까지는 잘 동작한다고 합니다. :-)

Browser Case No. 4: Opera

긴 URL에 관해서는 종결자라고 해도 틀림없겠네요. 무려 19만자까지, 그것도 인라인 편집이 아닌 여러 행 편집이 가능한 컨트롤로 확장까지 가능하다고 합니다. >_<

Web Server Case No. 1: Apache

기본적으로 약 4000자까지는 허용하지만 그 이후부터는 413 Entity too large 오류가 발생한다고 합니다. 그러나 근래 개발되는 RHEL 기반에서의 Apache는 문서 상으로 약 8000자 이상까지 지원한다고 합니다.

Web Server Case No. 2: Microsoft Internet Information Services (IIS)

기본적으로 16384자까지 지원하며 이는 Microsoft Internet Explorer의 경우와는 상반되는 동작입니다. 게다가 설정도 가능합니다. 특별한 제약은 없겠지만 너무 긴 URL을 받아들이는건 상식적이지 않겠지요.

Web Server Case No. 2-1: ASP.NET

웹 서버 이야기는 아닙니다만 IIS에서 독자적인 처리 규정을 가지고 있는 서버 기반 처리 엔진에 대한 이야기를 하나 하자면, ASP.NET의 이야기를 해야 할 것 같습니다. ASP.NET 3.5 SP1 (내부 ASP.NET 2.0) 까지는 Windows의 시스템 상수 _MAX_PATH가 정의하는 범위 만큼의 URL만을 IIS의 설정과는 관계없이 받아들일 수 있었지만 ASP.NET 4.0부터는 Web.config 파일의 httpRuntime 요소의 maxQueryStringLength 속성에 의하여 확장이 가능합니다.

Web Server Case No. 3: Perl의 HTTP::Daemon

기본적으로 8000자까지 지원합니다. POST 메서드로 수신하게 되는 데이터를 제외하고 순수 HTTP 헤더는 16384바이트까지 지원하며 이 중 헤더에 들어있을 URL에도 이러한 제약이 적용됩니다. 즉, 헤더에 전달되는 내용과의 상관관계도 감안해야하므로 헤더의 양이 많은 경우 8000자보다 안되게 지원이 될 수도 있습니다. 보통은 8000자 이상의 URL로 요청을 하는 경우 413 오류가 발생합니다. 이러한 제약을 넘기위해서 Daemon.pm 파일 내의 16x1024라는 모든 표현식을 더 큰 값으로 수정하면 됩니다. 물론, 이런 동작을 하는 경우 당연한 이야기이지만 Denial of Service (DoS) 공격에 취약해질 수 밖에 없겠지요.

결론

이 글에서는 단순히 fact에 대해서만 살펴보았습니다. 기본적으로 URL이 필요 이상으로 길다고 하는 것 (그 기준이 정확하지는 않지만 상식적인 범위를 벗어나는, 가령 100글자 이상)은 정상적인 상황이 아닐 것입니다. 이 정도로 긴 URL을 보내야 한다면, 대개는 Query String이 그 원인일 것이므로, GET 방식 대신 POST 방식의 전송을 고려해보실 수 있습니다. 하지만 긴 URL을 유지해야 할 필요가 있다면 제가 원본으로 참조한 글의 끝자락에 있는 "The Bookmark Problem" 섹션을 참고하시기 바랍니다.

'H > Html' 카테고리의 다른 글

Html 이미지 없는 라운드 테이블 만들기  (0) 2014.03.18
Tab키 이동순서 정하기  (0) 2014.03.18
css로 수직 가운데정렬 4가지 방법  (0) 2012.03.11
스타일시트 영문 자동줄바꿈  (0) 2012.02.05
div, section, article  (0) 2012.02.01

설정

,

트랙백

댓글

1 2
태그| 방명록| 관리자| 쓰기
안뇽헬로's Blog is powered by Daum Tistory

티스토리툴바