신기한 웹 세상

Category

HTML&CSS

HTML <strong> 과 <b> , <em>과 <i> 차이점

<strong>과 <b>를 사용할 때 웹에서 보여지는 것은 둘다 차이가 없다. 좀 더 깊게 들어갈 경우 웹표준 및 웹 접근성을 따지게 되면.. W3에서 <strong> 과 <em>에 대해서 설명하기를.. – 내용을 강조하기 위해서 <strong> 및 <em>을 사용한다. – 일반적으로 사용자에게 보여줄 때… Continue Reading →

css 말 줄임 적용하기

한줄 말줄임 { text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; } 여러줄 말줄임 { max-height:54px; display:block; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; }   p { white-space: nowrap; width: 100%; overflow: hidden; /* “overflow” value must be different from “visible” */ text-overflow: ellipsis; }  … Continue Reading →

CSS에 대해 잘 알려져있지 않은 12가지 사실

sitepoint.com에 올라온12 Little-Known CSS Facts라는 글을 간단히 요약한 내용입니다. 원본 글에 들어가면 적용된 화면을 실시간으로 볼 수도 있으므로 원본 글을 읽어볼 것을 추천합니다. 여기서는 간단하게 요약만 해보겠습니다. 1. color는 글자에만 적용되는 게 아니다. – 이미지가 없을 때의 대체 텍스트 색상… Continue Reading →

HTML Character Entity Code Reference Table

HTML Character Entity Code Reference Table 보기   HTML Character Entity Code Reference Table Character Entity Description Displayed Character Entity Code Name Character Entity Code Name Displayed Character Entity Code Number Character Entity Code Number quotation mark, APL quote “… Continue Reading →

Textarea with 100% 줬을때 영역 안 벗어나게 하기

고정값이 없을때 고정값을 넣을때.. textarea에 width:100%를 줬을때 영역 벗어날 경우를 볼수 있다. textarea의 width 값은 100% + padding + borders 일 것이다. 그래서 padding과 border값을 빼줘야 한다. class로 해서 주게되면 다음과 같다.. <!doctype html> <html lang=”en”> <head> <style> label {… Continue Reading →

모바일 뷰 도메인 설정하기

<script LANGUAGE=”JavaScript”> var UserAgent = navigator.userAgent; if (UserAgent.match(/iPhone|iPod|iPad|Android|Windows CE|BlackBerry|Symbian |Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia |SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null) location.href = “http://m.도메인 명”; </script> <head></head>안에 넣어주면된다.

스마트폰 해상도

디바이스 해상도 가로폭 명칭 480px 스마트폰 800px 태블릿 1024px 넷북 1600px 데스크톱 스마트폰 해상도 기종 해상도 웹 브라우저 해상도 아이폰4.4S 960 * 640 480 * 320 아어폰5 1136 * 640 568 * 320 갤럭시 S3 1280 * 720 640 *… Continue Reading →

아이폰 사파리 회전시 폰트사이즈 변경버그

아이폰 사파리에서 화면 회전시 폰트 사이즈 변경 되는 것이 있었다. 테스트 결과 <div>, <p>, <li>태그 등 다양하게 반응이 일어나는 것을 확인했다.사이즈 변경이 안되는 것도 있었다. 그래서 차이점이 뭘까 테스트 결과 높이값이 있는 곳에서는 사이즈 변경이 안되지만 높이값이 없는 곳에서는 사이즈… Continue Reading →

IE10 이상 input 텍스박스에 포커스시 X표시 삭제 하는 방법

input[type=text]::-ms-clear{display: none; } IE(익스플로러)10 이상 버전에서 인풋박스에 포커스하면 X표시가 나온다. 이걸 삭제 해주기 위해서는 위의 소스같이 하면 나오지 않는다. 더 자세한 내용은 http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx 에서 볼 수 있다.

CSS3 Gradient Border

CSS .gradient-top-to-bottom{ width: 300px; padding: 20px; border-top: 5px solid #000; border-bottom: 5px solid #ccc; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#ccc)); background-image: -webkit-linear-gradient(#000, #ccc); background-image: -moz-linear-gradient(#000, #ccc), -moz-linear-gradient(#000, #ccc); background-image: -o-linear-gradient(#000, #ccc), -o-linear-gradient(#000, #ccc); background-image: linear-gradient(#000, #ccc), linear-gradient(#000, #ccc);… Continue Reading →

CSS 스타일 초기화 해주는 CSS파일 – normalize.css

모든 웹 브라우저에 동일한 스타일을 적용시키려면 모든 CSS속성을 초기화를 시켜야한다. 총을 쏘기 위해서 0점 사격을 하듯이 말이다. normalize.css 공식사이트 reset.css 보통 넣기도 하고 basic.css로 넣기도 한다. normalize 3.0.0 normalize 4.0.0 3.0.0버전은 옛날버전이고, 4.0.0이 요즘 나온 버전이다. /*! normalize.css v4.0.0 |… Continue Reading →

웹 폰트 사용하기

@font-face { font-family: ‘MyWebFont’; src: url(‘webfont.eot’); /* IE9 Compat Modes */ src: url(‘webfont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */ url(‘webfont.woff’) format(‘woff’), /* Modern Browsers */ url(‘webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */ url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */ } … Fonts Formats… Continue Reading →

HTML5 내용의 종류

1. 콘텐츠 모델(Content Models) 기존 HTML 기반의 마크업에서는 일반적으로 인라인 요소(Inline Element)와 블록 요소(Block Level Element)로 구분하는 정도의 개념만 존재하였지만, HTML5에서는 좀 더 명확한 정보 구조 설계 및 구성을 위해 카테고리를 정의하여 각 요소별로 비슷한 성격을 가지고 있는 것 끼리… Continue Reading →

구글 웹폰트 api를 이용하여 나눔고딕적용하기

//Css에 Imort로 불러오기 @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); @import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css); @import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css); @import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css); @import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css); body {font-weight:normal; font-size:12px; font-family:Nanum Gothic’,’Nanum Brush Script’,’Nanum Gothic Coding’,’Nanum Myeongjo’,’Nanum Pen Script’;}   <head> <link rel=”stylesheet” href=”//fonts.googleapis.com/earlyaccess/nanumgothic.css” /> <link rel=”stylesheet” href=”//fonts.googleapis.com/earlyaccess/nanumbrushscript.css” /> <link rel=”stylesheet” href=”//fonts.googleapis.com/earlyaccess/nanumgothiccoding.css” /> <link… Continue Reading →

CSS Sprite(스프라이트) 기법이란?

CSS sprites는 페이지의 첫 로딩 속도를 줄여주는 여러 방법중, 서버로의 요청 횟수를 최소화 하는 것은 최적화요소 중에서도 중요하며, 실제 적용하기에도 아주 손쉬운 방법중에 하나이다. 아이콘, 버튼같은 자주 쓰는 이미지들을 쓸 때마다 여러 이미지들을 불러오는 것이 아니라, 한 이미지파일로 통합한 후… Continue Reading →

IE에서 호환성보기 모드 meta태그를 이용

X-UA-Compatible을 통해서 브라우저의 호환성 모드를 조정할 수 있습니다 IE=edge : 설치된 IE중 가장 최신 버전으로 렌더링에 사용 chrome=1 : 크롬이 설치되어있다면 IE에서도 크롬 렌더링을 사용. 그러나, chorme=1는 2014년 1월에 지원과 업데이트를 중단한다고 발표 했습니다. 참고 위키 문서 하지만, HTML5 DTD… Continue Reading →

IE에서 호환성보기 모드

X-UA-Compatible을 통해서 브라우저의 호환성 모드를 조정할 수 있습니다 IE=edge : 설치된 IE중 가장 최신 버전으로 렌더링에 사용 chrome=1 : 크롬이 설치되어있다면 IE에서도 크롬 렌더링을 사용. 그러나, chorme=1는 2014년 1월에 지원과 업데이트를 중단한다고 발표 했습니다. 참고 위키 문서 하지만, < !doctype... Continue Reading →

HTML 태그 약자 설명

HTML 태그 약자 설명 a href = Anchor(배에 달려있는 닻) Hypertext REFernce img = IMaGe(이미지) head = 머릿글 html = HyperText MarkupLanguage b = Bold(굵은글씨) i = Italic(이탤릭체.기울어진) u = Underline(밑줄) target = 표적 title = 표제 id = IDentification(신원확인)… Continue Reading →


© 2017 신기한 웹 세상

Up ↑