반응형

HTML&CSS 11

[HTML/CSS] OS 상관없이 같은 모양 버튼 만들기

HTML에 버튼을 생성하면 OS 환경에 따라 다른 모양의 버튼이 만들어집니다. 왼쪽 버튼은 button 태그를 이용하였고, 오른쪽 버튼은 input 태그를 이용하여 만들었습니다. 같은 태그를 사용해서 만들었는데, 아래와 같이 OS에 따라 다른 것을 확인할 수 있습니다. MacOS Windows iOS Android 그럼 같은 모양으로 만들기 위해 CSS를 사용해보도록 하겠습니다. 먼저 같은 모양으로 만들기 위해 appearance: none CSS를 이용했습니다. Firefox와 Safari 그리고 Chrome에서도 동작하도록 했습니다. 아래와 같이요. -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ ..

HTML&CSS 2020.05.08

Input Type="number" 일 때, iOS에서 숫자 키보드 안뜨는 문제

숫자만 입력 받을 수 있는 Input 요소를 만들기 위해 input type="number"로 지정하여 사용합니다. 안드로이드의 경우, type만 "number"로 지정하면 숫자 키보드가 뜨는데, iOS는 일반 키보드가 뜨는 것을 확인 할 수 있습니다. iOS에서도 숫자 키패드만 뜨도록 하기 위해서는 아래와 같이 패턴을 넣어주면 iOS 숫자 키보드가 뜨는 것을 확인할 수 있습니다.

HTML&CSS 2020.02.25

최대 URL 길이에 대한 연구

Internet Explorer 11 주소 창에서 실행 2,047자 C# winForm 환경에서 WebBrowser Navigate 실행시 샘플 프로그램을 작성하여 테스트했습니다. 2,083자 FireFox >100 KB Opera >200 KB Chrome, Safari >100 KB 이러한 URL 길이에 대한 제한은 서버에도 영향을 끼치기 때문에 서버에 제한이 걸린 경우도 있습니다. Apache >128 KB 참고로, Tomcat으로 테스트해봤는데 위 사진과 같은 에러가 발생했습니다. "java.lang.IllegalArgumentException: 요청 헤더가 너무 큽니다." 이 에러가 발생하면 URL 길이가 너무 긴 것이 아닐지 확인해야합니다. IIS >16 KB Lotus Notes 4 KB 참..

HTML&CSS 2019.12.04

[HTML5] Audio

Audio 태그는 웹 페이지 내에서 오디오를 내장하기 위한 기본적인 방법입니다. 크롬도 지원하고 Internet Explorer도 9.0부터 지원합니다. 아주 휼륭하죠? 기본적인 사용법은 안에 태그를 넣으면 됩니다. 아래와 같이 테스트를 해볼 수 있습니다. 테스트를 해보니 Source의 순서도 의미가 있는 것을 확인했습니다. 위쪽 Source가 우선순위를 가지고 사용됩니다. 만약 지원하지 않는 포멧이라면, 다면 다음 소스를 사용합니다. 그렇다면 Audio에 Base64 문자열을 source로 쓸 수 있을까요? 한 번 테스트를 해보았습니다. 샘플은 아래와 같습니다. Source 태그를 반드시 사용해야하는 것은 아니기 때문에 생략했습니다. Base64 문자열로도 사용할 수 있음을 확인했습니다.

HTML&CSS 2018.08.13

[CSS] Clear Property

안녕하세요. Jay 입니다. 오늘 알아볼 속성은 clear 입니다. clear 속성은 float의 동작 방식을 제어하는데 사용됩니다. div가 float 속성을 가지고있어 section이 바로 옆에 그려진 것을 확인할 수 있습니다. 이럴 때, section을 아래에 그리고 싶다면, section에 clear 속성을 주면 됩니다. 그러면 아래와 같이 됩니다. float와 같은 방향으로 선언해야 겹처지지 않습니다. 참조: http://ko.learnlayout.com/clear.html

HTML&CSS 2018.06.15

[CSS] Float Property

안녕하세요. Jay입니다. 오늘은 Float에 대해서 알아보도록 하겠습니다. "CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다." 라고 정의되어 있습니다. 말이 좀 어렵죠? 실제로 어떻게 보이는지 확인해보도록 하겠습니다. 먼저 float를 사용하지 않은 이미지와 텍스트의 배치를 보겠습니다. 이미지의 하단 부분부터 텍스트가 시작되는 것을 볼 수 있습니다. 이미지 옆 부분에는 빈 공간도 보이네요. 그럼 float css를 사용해보겠습니다. float: right 로 지정했습니다. 어떤가요? 이미지가 오른쪽에 배치되고 텍스트들이..

HTML&CSS 2018.06.14

[CSS] Position Property

static 기본 값. 위치가 지정된 것이 아닌 상태. relative 별도의 프로퍼티를 지정하지 않은 이상 static과 동일하게 동작. 상대 위치가 지정된 엘리먼트에 top, right, bottom, left 등을 지정하면 기본 위치와 다르게 위치가 조정된다. 다른 콘텐츠는 해당 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않는다. fixed 뷰포트(viewport)에 상대적으로 위치가 지정된다. 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다. relative와 마찬가지로 top, right bottom, left 프로퍼티가 사용된다. 고정 엘리먼트는 평소대로라면 있었을 법한 공백을 페이지에 남기지 않는다. 모바일 브라우저의 경우, 고정 엘리먼트 지원이 굉장히 불안정하다. absolu..

HTML&CSS 2018.06.12

[CSS] Display Property

block 한 줄을 모두 차지하며 엘리먼트가 배치된다.ex) div, p, form, header, footer, section 등 inline 줄 바꿈 없이 다른 엘리먼트들과 같은 줄에 엘리먼트가 배치됨. 요소를 구성하는 태그에 할당된 공간만 차지한다. 예를들어 width, height 속성을 주더라도 무시되고 자식 엘리먼트들의 공간만 차지한다.ex) span, a 등.. none 엘리먼트를 실제로 삭제하고 재생성하지 않고도 엘리먼트를 보이고 감추는데 사용한다.참고) Visibility: hidden은 자리는 차지하되 모습만 감추는 것으로 display: none과는 다르다. 참조: http://ko.learnlayout.com

HTML&CSS 2018.06.11

[CSS] !important, IE placeholder 색상 적용되지 않는 문제.

!important는 css 적용 순서를 무시하고, !important를 선언한 속성을 가장 높은 우선순위를 부여합니다. placeholder 색상을 지정했는데, IE에서만 제대로 적용되지 않는 현상이 있었습니다. 아래와 같이 구현을 했는데, IE에서는 Input Dom에 적용한 color의 우선순위가 높아 해당 color의 색상이 적용되고 있었습니다. 이를 해결하기 위해 !important를 사용했습니다. 해당 css가 가장 우선순위가 높도록 수정했습니다. 이 방법을 사용하면 IE에서도 동일하게 placeholder의 색상을 표현할 수 있습니다.

HTML&CSS 2018.02.22
반응형