Full width (100%) inputs & textareas with padding
input, textarea {
width: 100%;
padding: 0.5em;
box-sizing: border-box; /* Opera/IE 8+ */
-webkit-box-sizing: border-box; /* Safari, Chrome et al */
-moz-box-sizing: border-box; /* Firefox */
}
'분류 전체보기'에 해당되는 글 19건
- 2015.10.16 Full width (100%) inputs & textareas with padding
- 2014.02.27 <!--[if IE]><![endif]--> 사용.
- 2013.05.30 웹페이지 프린트시 background(color/image) 가 인쇄되지 않을때
- 2013.05.24 단계적 향상
- 2013.05.15 Javascript 코드를 왜 페이지 하단(아래)쪽에 놓을까?
- 2013.04.22 웹폰트
- 2013.04.17 텍스트 줄넘침 현상. 2
- 2013.04.02 GSAP JS – Professional-Grade JavaScript Animation
- 2013.03.14 float을 clear하는 4가지 방법
- 2013.02.05 CSS 선택자 1
2015. 10. 16. 19:24
2014. 2. 27. 22:16
<!--[if IE 9]>내용<![endif]-->
: IE9 버전만 표시
<!--[if gte IE 9]>내용<![endif]-->
: IE9 이상 버전에 표시
<!--[if gt IE 9]>내용<![endif]-->
: IE9 초과 버전에 표시
<!--[if lte IE 9]>내용<![endif]-->
: IE9 이하 버전에 표시
<!--[if lt IE 9]>내용<![endif]-->
: IE9 미만 버전에 표시
버전별로 javascript 또는 css 를 적용할 때 유용함.
'웹 표준 > HTML' 카테고리의 다른 글
| XHTML 요소 - 03 (폼, 인라인 프레임, 개체삽입, 스타일, 스크립트, 그룹화 요소) (2) | 2013.02.01 |
|---|---|
| XHTML 요소 - 02 (링크, 이미지, 목록, 텍스트, 테이블 관련 요소) (2) | 2013.02.01 |
| XHTML 요소 - 01 (문서정보, 제목, 문단 관련 요소) (2) | 2013.01.31 |
| 구조를 위한 XHTML (3) | 2013.01.29 |
2013. 5. 30. 16:55
웹페이지를 프린트 하려고 할때에
css의 background (color / image) 는 인쇄가 되지 않는다.
브라우저에서 설정하는 방법과 css 코드로 적용하는 방법이 있다.
브라우저에서 설정방법
IE
FF
Chrome
코드상에서 해결하겠다면 링크 참조. (이건 다음에 다시 봐야겠음)
http://naradesign.net/wp/2007/12/19/133/
검색하다보니
#id : before { content: url{"경로명/파일명"; }
과 같은 방법도 있긴하던데.. 파이어폭스와 크롬에서는 잘 되는듯 싶지만.. IE에서 제대로 안나오는듯.
2013. 5. 24. 15:01
단계적 향상이란
성능이 가장 떨어지는 브라우저를 기준으로 사이트를 설계하고
모든 브라우저에서 같은 모습으로 사이트가 보이게 하는 것이 아니라,
모든 사용자에게 반드시 제공해야 할 정보와 기능은 기본으로 모두 제공하고
좋은 성능을 가진 브라우저를 사용하는 사용자에게는 좀 더 멋진 화면의 추가적인 기능을 제공한다는 개념입니다.
단계적 향상을 적용하면 실제로 개발 생산성이 향상됩니다.
예를 들어, 테두리에 쉐도우 이펙트가 제대로 보이게 하고,
표준안을 따르지 않는 브라우저에서는 쉐도우 이펙트를 포기하는 것입니다. (box-shadow)
결과적으로 성능이 떨어지거나 오래된 버전의 브라우저 사용자는 어떤 기능이 생략되었는지조차 모를 것입니다.
단계적 향상의 가장 큰 걸림돌은
웹사이트가 모든 브라우저에서 똑같이 보여야 한다는 믿음을 가진 웹 개발자와 고객의 오래된 관념입니다.
개발자 입장에서는 오랜 관념을 버리고 단계적 향상을 채용함으로써 좀 더 쉽게 개발할 수 있고,
더 의미있는 과제에 소중한 시간을 사용할 수 있어 만족할 것입니다.
그러려면 여러분의 고객과 고객의 상사로 하여금 단계적 향상을 통해 개발 생산성을 높일 수 있고,
코드를 유지/관리하기 쉬우며,
결정적으로 일반 사용자는 대부분 브라우저를 하나만 사용하므로
그들이 보고 있는 웹사이트가 원래의 모습과 다르다는 것 자체를 모른다는 것을 알려야 합니다.
또한, 사용자가 브라우저를 업그레이드 하면
웹사이트에서 좀 더 풍부한 경험을 자동으로 제공할 수 있다는 장점도 있습니다.
출처 : http://cafe.naver.com/hacosa/71207
2013. 5. 15. 16:46
Javascript 를 요즘엔 <body> 태그가 닫히기 바로 전에 선언하는 것이 추세(?)임..
그간 나와있는 자바스크립트 책들을 보면 <head> 안에 선언하라고 나와있는데
왜 <body> 태그가 닫히기 바로 전. 페이지의 제일 하단에 선언하는게 추세가 되었나.
자바스크립트가 하는 일이 많아지면서 덩치가 좀 커지고 하다보니
<head> 에 선언해놓은 자바스크립트 때문에 페이지가 열리는 속도가 느려지는 현상이 생긴다.
성질 급한 사람들.. 하얀 화면으로 조금만 버벅대는 경향이 있어도 걍 떠나버리고..
일단 페이지라도 열려있으면 뭐 유입되기도 전에 떠나는 사람은 줄어들 것 아닌가.
자바스크립트를 하단으로 내리면 일단 페이지는 열린다. 그 후에 js 가 할 일들을 하게 되겠지..
이걸 뭐라고 검색해봐야 하나 싶었는데
javascript lazy loading 이라고 부르는듯..
평소 이런거 별 고민 할 필요도 없는 인터넷 환경이겠지만
인터넷이 겁나 느린 환경에선 이 차이점이 크게 느껴질 것이다.
자바스크립트들을 헤더에 넣어놓고 페이지가 열릴때까지 기다릴건가.
일단 페이지가 열릴때까지 기능들을 제한해두었다가 로드가 끝난 이후에 기능들이 동작하게 할건가.
onClick 이벤트를 태그에 넣어두거나 바로 클릭되는 놈들은 헤드에,
뭐 무겁거나 다 로드된 이후에 동작해도 되는건 아래에...
이렇게 하면 좀 적당하려나..
'JavaScript' 카테고리의 다른 글
| GSAP JS – Professional-Grade JavaScript Animation (0) | 2013.04.02 |
|---|
2013. 4. 22. 17:38
1. 웹폰트란?
웹페이지를 보는 사람의 컴퓨터에 해당 글꼴이 설치되어 있지 않아도,
임시로 글꼴을 받아 웹페이지에서 볼 수 있도록 하는 폰트의 한 종류.
2. 웹폰트는 왜 필요한가?
기본으로 제공하는 폰트 이외에 자신이 평소에 즐겨쓰는 폰트나 웹사이트에 어울리는 폰트를 원할 경우 사용.
윈도우 폰트는 .ttf 포멧 형식이고,
웹폰트는 .eot 형식으로 다르기에 윈도우 폰트를 웹에서 직접 사용하는 것은 안되며,
.eot 형식으로 변환을 해야 웹에서 사용 가능.
3. 웹폰트의 종류
기본적으로 시스템에서 사용중인 TrueType과 OpenType은 생략.
우리가 흔히 적용하는 폰트는 .eot, woff, svg 로 나뉨.
- eot (Embedded Open Type)
익스플로러가 지원하는 폰트로 버전 8 이하에서 사용.
- woff (Web Open Font Format)
2010년 W3C에 의해 초안이 나온 포맷 - 크롬 3.6이상, 파이어폭스, IE9 모두 가능
- svg (Scalable Vector Graphic)
아이폰과 아이패드에서 사용 할 포맷
eot는 용량이 압축되지 않고, svg는 오히려 용량이 더 커지기 때문에
최근 업그레이드 되는 표준 브라우저 등 woff가 앞으로 주력 가능성.
4. 웹폰트는 어떻게 변환하는가?
윈도우 폰트를 웹폰트로 변환하기 위해서는 변환 프로그램을 사용해야 하며,
MS에서 무료로 배포하는 프로그램인 WEFT 등의 툴들을 이용해 변환.
5. 웹페이지에 웹폰트 적용은 어떻게 하는가?
생성된 .eot 파일을 웹에 업로드 한 후, 아래와 같이 css를 적용시켜 준다.
- 기본 사용 형식 예제:
@font-face {
font-family:폰트 이름;
src:url('폰트명.woff') format('woff'); /* 최신 브라우저용 woff */
src:url('폰트명.eot') format('eot'); /* IE8 이하 */
src:url('폰트명.eot') format('eot?') format('eot'); /* IE9 */
src:local('☺'), url('폰트명.ttf') format('truetype');
}
ul li {font-family:폰트 이름;} /* ul li에 해당 폰트 적용 */
'@'의 의미는 외부 파일이나 속성을 불러오는 import 개념이며,
'☺' - 웃는 얼굴 트릭을 써서 사용자의 폰트를 pc에서 골라 브라우저에 표현하는 것을 막는다.
(매킨토시 시스템의 글꼴 이름에, 2바이트 유니코드 문자셋이 적용되지 않는 문제로,
글꼴 이름으로 사용될것 같지 않은 특수문자로 대체)
- 원하는 영역에만 적용시 예제:
@font-face {font-family:폰트 이름; src:url('폰트 위치'); format('포멧형식');}
ul li {font-family:폰트 이름;}
- 웹페이지 전체 글꼴에 적용시 예제:
@font-face {font-family:폰트 이름; src:url('폰트 위치'); format('포멧형식');}
body {font-family:폰트 이름; font-size:75%:}
6. 웹폰트 사용 장점
디자인의 용이성과 타 사이트와의 차별성을 둘 수 있다.
시스템 폰트에 비해 미적 부분이 뛰어나 이미지가 아닌 텍스트로 표현이 가능하기에
이미지로 대체되는 상황을 피할 수 있다. (이러한 이유로 모바일에서 많이 사용하죠.) - 표현의 자유 확장
또한, 텍스트를 이미지로 하는 일반적인 방식이 아니기에 정보전달 및 접근성 측면에서도 좀더 나아질 수 있다.
7. 웹폰트 사용 단점
저작권 문제.
사이트에 접속시 웹폰트 다운로드(나눔고딕 기준 약 4~5MB)로 인해 렌더링 시간이 오래 걸릴 수 있다.
8. 웹폰트 사용시 주의사항
공개된 무료 폰트 이외의 웹폰트 사용시 저작권에 주의해야 한다.
과도하게 변형이 심한 폰트는 오히려 가독성을 떨어뜨린다는 점에 주의해야 한다.
나눔고딕을 사용할 경우, 특히 모바일에서는 약 4~5MB 의 폰트 다운로드 상황에 대해 고려하지 않을 수 없다.
2013. 4. 17. 17:16
html 에서 div에 width값이 지정이 되어있더라도
텍스트에 띄어쓰기가 없으면 줄넘침 현상이 발생한다.
이렇게 나오는 녀석을 해결하려면.....
해결방법 1.
#box {width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
말줄임...으로 해결..;;
해결방법 2.
#box {width:100px;overflow:hidden;word-wrap:break-word;}
자동 줄바꿈으로 해결..;;
익스 7, 8, 9, 파폭, 크롬, 사파리, 오페라 확인;;
----------------------------------------------------
2015.07.07 내용 추가.
----------------------------------------------------
PC의 브라우저에서는 위와 같이 해주면 별 문제가 없었는데
휴대폰으로 모바일 사이트에 적용한 것을 확인할 때에 문제가 생겼다.
영문을 한줄로 길게 넣었을때 넘치는 현상이 발생.
word-break 라는 속성이 있더라.
옵션으로 break-all / keep-all 이 두가지가 있는듯.
문자가 1바이트일 경우에 이 속성이 잘 적용된다.
뭐 한글이던 영문이던 사용자가 뭘 어떻게 써넣을지 모르니
.class {word-wrap:break-word; word-break:break-all;}
이렇게 다 넣어주면 될 듯..!
----------------------------------------------------
2015.11.27 내용 추가.
----------------------------------------------------
두줄 이상 멀티라인의 말줄임 처리를 하고 싶은 경우가 있는데
이때에는
.class {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word;}
이렇게 넣어준다.
-webkit-line-clamp:2;
이 것이 몇줄로 표시할 것인가 하는 옵션..
근데 이게 웹킷엔진을 사용하지 않는 브라우저에서는 문제가 발생-_-한다.
line-height:1.2em;
height:3.6em;
이런식으로 높이값도 조절해줘야 한다.
line-height가 1.2em 이고 3줄에서 자를거면 높이값은 1.2em * 3 = 3.6em
뭐 이런 셈..;;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:break-word; word-break:break-all;
'웹 표준 > CSS' 카테고리의 다른 글
| CSS 선택자 (1) | 2013.02.05 |
|---|---|
| 자유롭고 창의적인 디자인 기법 (CSS) (0) | 2013.02.05 |
2013. 4. 2. 16:05
플래시 액션스크립트에서 많이 사용되었던 TweenMax 와 TimelineMax (난 타임라인맥스는 잘 안써봤지만-_-)
자바스크립트 버전으로 다시 만났다.
http://www.greensock.com/gsap-js/
지금 대세인 jQuery.. 의 .animate() 메서드로도 대략 모션을 주기엔 무리가 없으나
트윈맥스는 아무래도 모션을 잡기에 특화되어있다. 타임라인맥스와 함께한다면 최고이지 않을까 싶다.
jQuery와 함께 써도 상관없고.. 딱히 충돌?) 날 일은 없을듯..
크로스 브라우징의 걱정이 좀 되는데.. 익스 6은 요새 거의 버리는 추세고.. 익스 7에서 제대로 안되는 듯 ㅜㅜ
익스 8부터는 되는거 같다.. (샘플들만 확인해본 바로는-_-)
http://www.greensock.com/jump-start-js/
요것만 봐도 대충 이렇게 쓰는거구나..... 하고 알수 있다..
'JavaScript' 카테고리의 다른 글
| Javascript 코드를 왜 페이지 하단(아래)쪽에 놓을까? (0) | 2013.05.15 |
|---|
2013. 3. 14. 14:37
2013. 2. 5. 17:58
Type 선택자
xhtml 요소명을 선택자로 사용하는 것을 “Type 선택자” 또는 “요소 선택자”, “태그 선택자” 라고 함.
요소명 { 속성 : 값; } // ex) p { color:#ff0000; }
전체 선택자
선택자에 * 기호를 사용하면 모든 요소에 스타일을 지정할 수 있음.
이를 “전체 선택자” 또는 “유니버셜(universal) 선택자” 라고 함.
* { margin:0; padding:0; }
class 선택자와 id 선택자
xhtml 요소에 class나 id 속성을 부여한 경우에 해당 class나 id 이름으로 접근하여 선택할 수 있음.
class 이름은 여러 번 사용할 수 있으니 한꺼번에 스타일 지정할 때 사용하면 편함.
id 이름은 한번만 사용할 수 있기 때문에 특정 요소에 접근하여 스타일을 지정할 때 사용할 수 있음.
class 선택자 (요소명 생략 가능)
요소명.클래스명 { 속성 : 값; }
id 선택자 (요소명 생략 가능)
요소명#아이디명 { 속성 : 값; }
속성 선택자
xhtml 요소가 특정 속성명이나 속성값을 가진 경우 해당 속성명으로 접근하여 스타일을 적용하는 방법.
IE6 과 같은 구버전의 브라우저에서는 지원하지 않는게 함정.
a[target] { background-color:#ff0000; } // a 요소에 target 속성이 있는 경우
a[target=”_blank”] { background-color:#ff0000; } // a 요소에 target 속성의 값이 _blank인 경우
a[class~=”new”] { background-color:#ff0000; } // a 요소의 class 속성이 여러 개 있는 경우
가상 요소와 가상 클래스
사용자가 지정할 필요 없이 기본적으로 제공되는 요소와 클래스.
1. first-line, first-letter 가상 요소
first-line 선택자는 요소의 첫 번째 줄에 있는 컨텐츠만 선택하여 스타일을 지정할 때 사용. first-line 가상 요소 선택자.
고정된 영역이 아니라 웹 브라우저의 크기에 따라 유동적으로 스타일이 적용됨.
first-letter 선택자는 요소의 첫 글자만 선택하여 스타일을 지정할 때 사용. first-letter 가상 요소 선택자.
2. before, after 가상요소
특정 요소에서 내용의 앞이나 뒤에 가상 컨텐츠를 삽입할 때 :before 가상요소와 :after 가상요소를 선택자로 사용.
IE의 경우 8 이상 버전부터 지원 가능.
p:before { content:"문단시작 컨텐츠 삽입"; }
p:before { content:"문단종료 컨텐츠 삽입"; }
근데 이거 쓸 일이 있긴 있으려나 싶음.
3. first-child 가상 클래스
첫 번째 자식 요소에만 스타일을 적용할 수 있는 선택자.
4. 링크 가상 클래스
상황에 따라 링크 스타일을 적용하는 방식.
1. :link - 방문하지 않은 링크
2. :visited - 방문한 링크
3. :hover - 마우스를 올려놓았을 경우
4. :active - 활성화 되었을 경우
5. :focus - 포커스가 생긴 경우
위의 순서대로 선언해야 함.
선택자 조합
1. 하위 선택자
상위 요소가 포함하고 있는 모든 하위 요소에 스타일을 지정할 때 하위 선택자를 사용할 수 있음.
하위 선택자 방식으로 조합할 때는 선택자와 선택자를 공백으로 구분하여 선언.
선택자 선택자 { 속성 : 값; }
div 요소 안의 p 요소에만 color 속성이 적용.
2. 자식 선택자
자식 선택자는 부모 요소의 바로 다음에 있는 자식 요소에 스타일을 적용하는 방법.
선택자와 선택자를 왼쪽 부등호(>)로 구분하여 선언.
IE6 같은 구버전 웹브라우저에서는 지원하지 않음.
선택자 > 선택자 { 속성 : 값; }
child 클래스가 적용된 div 요소의 자식 요소인 p 요소에만 ("동해물과 백두산이 마르고 닳도록") 부분만 적용.
다른 p 요소("하느님이 보우하사 우리나라만세") 부분은 자식이 아닌 손자이기 때문에 적용되지 않음.
3. 인접 형제 선택자
계층 구조로 접근했을 때 먼저 나오는 요소를 형 요소, 뒤에 나오는 요소를 동생요소라고 봄.
동생 요소에 스타일을 적용할 때 사용.
선택자 + 선택자 { 속성 : 값; } // 플러스기호(+)로 구분.
같은 동생 요소라 하더라도 인접한 형 요소가 없으면 두 번째 나오는 동생요소는 스타일이 적용되지 않음.
선택자 그룹화
다수의 요소에 똑같은 선언을 지정할 경우 같은 선언문을 반복해서 작성해야 하기 때문에 코드가 길어짐.
그룹화 하여 같은 선언문을 사용할 수 있음.
선택자, 선택자, 선택자 { 속성 : 값; } // 콤마로 나열함.
'웹 표준 > CSS' 카테고리의 다른 글
| 텍스트 줄넘침 현상. (2) | 2013.04.17 |
|---|---|
| 자유롭고 창의적인 디자인 기법 (CSS) (0) | 2013.02.05 |
