목록웹1.0 (24)
web sprit
나의 퍼블리셔 인생에서 HTML 문서의 Doctype 사용은XHTML 1.0 Transitional 과 html5 입니다. 기타 여러가지의 Doctype 버전을 알고 이해하려고 합니다. 평생 사용하지 않을 수 있지만 모르는것 보단 이해하고 사용하는 편이 좋겠죠~ ^&^ tip !!! 선언(DTD)은 대소 문자를 구분하지 않습니다. Doctype의 선언(DTD)은 아래와 같습니다.12345678910111213141516171819202122232425262728293031323334353637383940414243444546 cs
모바일 제작이나 반응형웹을 제작할때 부딪힐 수 있는 문제입니다.마크업을 작업하면 PC로 비교해보면서 작업을 하게 되는데요.쉽게 지나치고 모바일에서 확인했을때 전화번호로 되어진 부분예) 010-xxxx-xxxx 전화번호 부분을 IOS 모바일로 확인했을때 링크로 인식하여 내가 의도치 않은 색으로 지정되어 집니다.황당하죠....이 현상은 IOS는 전화번호 자동링크로 인식하여 화면의 UI 나 디자인에 영향을 미칩니다. 그럼 바로 해결 해야죠. 아래의 메타태그를 head 태그 안에 입력해 줍니다. 그럼 원래 지정했던 색이 적용되어 모바일에서 확인하실 수 있습니다.IOS 에서 자동 링크로 전화걸기를 연결하지말고 원래 디자인은 적용하면서 전화걸기 링크를 넣으려면 다음과 같은 방법을 사용하십시오.전화걸기그럼 모바일에서..
text 를 줄바꿈 한다거나 글자가 영역을 벗어나면 안보이게 또는 점처리 등...text 를 controll 할 수 있는 css 속성에 관하여 나열해 보겠습니다. 1. white-space (css1): text에 대한 공백을 어떻게 처리 할 것인가를 설정하는 속성.white-space:normal;기본값으로 연속의 공백이나 줄바꿈을 한칸으로 인정하여 표현. white-space:pre;편집툴에서 표현되는 그대로를 표현(tab 이나 띄어 쓰기가 들어간것을 그대로 표현합니다.) white-space:nowrap;감싸고 있는 부모의 크기가 정해져 있어도 줄바꿈이 되지 않고 한줄로 표현 됩니다. white-space:inherit;부모요소의 값을 상속 받습니다. 2. word-wrap (css3): 텍스트가 ..
개인적으로 잘 안 외워지는 css 속성중에서 visibility 속성에 대해 얘기 하려 합니다.visibility 속성은 display 속성과 비슷하다고 말할 수 있지만다른점은 display 의 none 속성값은 태그와 차지하고 있는 영역까지 숨겨 Layout 을 흐트릴 수 있지만visibility 의 hidden 속성은 태그를 숨기지만 차지하고 있는 영역은 그대로 유지해 줍니다. visibility 속성의 값은 다음과 같습니다. visible 기본 값. 태그의 요소를 보여줍니다. hidden 태그의 영역을 숨깁니다. (영역은 유지) collapse table 태그에만 적용되며, tr과 td태그를 안보이게 합니다.(영역은 유지) inherit 부모요소의 값을 상속 받습니다. 작성방법은 아래와 같습니다.1..
meta 태그를 이용하면 간단하게사용자의 ie의 최신 브라우저로 보게 만드는 것이 가능합니다. 123 Colored by Color Scriptercs 위의 content 값은 여러가지가 있습니다.IE=5 ~ IE=11 : IE 버전에 맞게 설정하면 그에 따른 버전으로 렌더링 하게 됩니다. (IE=6 제외)IE=edge : 최신모드로 지정된 DOCTYPE에 상관없이 IE8 이상 버전에서 항상 최신 표준모드로 렌더링 됩니다. 과거에는 content="IE=edge, chrome=1" 처럼 대체방법으로 크롬 프레임이라는 ActiveX를 설치하라는 것을 추천했는데 크롬 프레임의 개발 종류로 이제 더이상 추천하지 않습니다. X-UA-Compatible 속성 값은 IE 에서만 작동하는 비표준 속성이기 때문에 W3..
outline 속성은 일반적인 border 속성과 다르게 공간을 차지하지 않습니다. 그래서 두께를 아무리 크게 늘리더라도 전체적인 레이아웃에 영향을 주지 않습니다. 우리가 접근성을 위해 브라우저에서 Tab 키를 누르면 링크나 버튼영역에 생기는 띠나 도트라인도 다 브라우저에서 기본으로 제공되는 outline 속성입니다. 이는 기본적으로 브라우저 자체에서 제공되는 부분이므로 변경을 위해서는 outline 속성을 이용하여 변경해야 한다는 것을 알고 넘어 갔으면 합니다. ^^ 그럼 간단하지만 쉽게 지나칠 수 있는 outline 속성에 대한 부분을 설명 하겠습니다. 1. outline 속성 분류outline-style : dotted, dashed, solid, double, groove, ridge, inset..
css로 투명도를 설정하는 방법과 그 밖의 유용한 Tip 정보를 알려드리기 위해 늦은 시간을 활용하여 끄적여(?) 보겠습니다. 일반적으로 저는 모를 사항 이었습니다만... 우리가 투명도를 주기 위해서는 CSS의 opacity라는 속성을 사용합니다.접근성을 고려하여 아래와 같은 순으로 작성합니다. 1234567.box{ -ms-filter:alpha(opacity=0); /* IE8 */ filter:alpha(opacity=0); /* IE5 ~ 7 */ opacity:0; /* IE9+, chrome4.0+, firefox2.0+, safari3.1+, opera9.0+ */} Colored by Color Scriptercs 하지만 위와 같이 작성하여 내가 원하는 곳만 투명하게 작업하기 위해선 불만족..
HTML5 Input Types color date datetime datetime-local email month number range search tel time url week 1. Base (기본)1cs- 웹에서의 폼은 사용자 입력부분과 서버 전송 버튼으로 나눔- 사용자 입력 부분은 거의 태그를 이용해 처리 함- 태그의 type=""속성을 통해 입력하는 내용이 어떤 정보인지를 지정 함- type=""속성 값에 따라 사용할 수 있는 속성들도 다름 2. type2-1. hidden1cs- 숨겨진 입력필드를 정의 즉, 화면상에 폼에는 보이지 않지만, 폼을 서버로 전송할 때 함께 전송되는 요소- 예를 들어, 회원가입 폼에서 가입 경로, 날짜와 같이 굳이 사용자가 입력하지 않아도 알 수 있는 정보들을 서..
일반적으로 가운데 정렬은 width 값이 존재하고 margin값을 margin:0 auto;를 주어 정렬하곤 합니다.하지만 width 값이 가변적으로 변경될 수 있다면 어떻게 정렬해야 할까요? 방법은 있습니다!!! 크게 2가지 방법을 알려 드리겠습니다.1. display:table12345678 .center-box{display:table; margin:0 auto; padding:30px; background:red;} .center-box .item{background:yellow;} contentsColored by Color Scriptercsex) 화면 contents 2. display:inline-block12345678 .center-box2{text-align:center; backgr..
display 의 inline-block 속성을 사용할때 가끔 크로스브라우징에 문제가 발생하곤 합니다.지금부터 그런 문제들의 대한 해결방안을 설명해 드리겠습니다. IE6 ~ 7 문제익스플로서의 낮은 버전의 브라우저에서 생기는 문제로inline태그에 inline-block 속성을 사용 : 이상없음block태그에 inline-block 속성을 사용 : inline-block을 block 속성으로 인식하는 버그12/* 해결방법 */.className{*display:inline; *zoom:1;}cs FF2 문제display:-moz-inline-stack 을 사용하여 해결.(이것보다 더 의미에 맞는 속성은 display:-moz-inline-box 속성 이나 -moz-inline-box 속성을 사용할 경우 ..