목록Design (31)
interactive
1.모든 속성은 영문 소문자자로 작성한다. 잘못된 예 올바른 예 .class{Font-Family:AppleGothic} .class{font-family:AppleGothic} 2. 따옴표 사용 범위공백이 포함된 폰트명, 핚글 폰트명, 문자열 데이터 타입, filter 속성의 파라미터값은 작은따옴표(' ')로 감싸며,@charset 선언 시에는 속성 값을 큰따옴표(" ")로 감싼다. 그 외의 경우에는 따옴표를 사용하지 않는다. filter 속성의 파라미터값에 따옴표를 사용하는 것은 선택사항이다.url 데이터 타입에는 작은 따옴표를 사용하지 않는다. - 따옴표 사용 예 잘못된 예 올바른 예 font-family:돋움 font-family:'돋움' filter:progid:DXImageTransform.M..
1. 레이아웃 예약어 • 레이아웃에는 다음 표에 예약된 id만 사용한다. 예약어 범위 #wrap 페이지 전체 영역 #header 머리글 영역 #container 본문 영역 #ct 본문 영역(모바일) #content 주요 콘텐츠 영억 #footer 바닥글 영역 2. 팝업 레이아웃 예약어• 팝업 문서의 레이아웃 지정 범위는 동일하다. • 레이아웃 예약어 앞에 'pop_'를 조합하여 사용한다. 예약어범위 #pop_wrap 페이지 전체 영역 #pop_header 머리글 영역 #pop_container 본문 영역 #pop_content 주요 콘텐츠 영억 #pop_footer 바닥글 영역 3. 레이아웃 네이밍 조합• 레이아웃 id의 네이밍은 조합하여 사용할 수 없다.• 레이아웃에 디자인 속성을 추가/변경하려면 cl..
1. box-shadow의 간단한 문법box-shadow:[inset] (오른쪽위치) (아래위치) (블러) (색상); 2. box-shadow의 지원 브라우저internet Explorer : 버전9만 지원firefox, chrome, safari, opera : yes 미리보기 1 .box-shadow01 { box-shadow:5px 5px 10px #cccccc; } .box-shadow02 { box-shadow:-5px 5px 0 #cccccc; } 미리보기 2 .box-shadow03 { box-shadow:inset 5px 5px 10px #b55a84; } .box-shadow04 { box-shadow:inset 0 0 10px #830d43; } 3. text-shadow 텍스트에 그림..
liner-gradient background:-webkit-gradient(linear,left top, left bottom,color-stop(0,#a6cd2f),color-stop(1,#6e9102)); background:-moz-linear-gradient(top,#a6cd2f,#6e9102); filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#a6cd2f', EndColorStr='#6e9102', GradientType=0); 1. type (유형)type 에는 linear(선형) 과 radial(방사형 또는 원형) 중에서 선택할 수 있다. 2. 시작위치시작위치는 left top 식으로 사용해도 되고, 10 20 등과 같..
CSS3 표준안은 아직 확정이 아닙니다. 이미 인기 있게 사용되고 있는 border-radius나 text-shadow, box-shadow, transform, transition 등은 표준으로 될 것이 확실시 되는 애들이죠. 표준이 아니란 얘기는 아직 모든 브라우저가 동일한 효과를 나타내지 못한다는 소립니다. 대표적으로 인터넷 익스플로러가 있죠. 얘 때문에 HTML5와 CSS3의 발전이 더뎌진다고 볼멘소리 하는 사람도 많습니다. 저도 그중 하나고요. CSS3가 제공하는 놀라운 효과들과 미학을 익스플로러는 무시하고 있죠. 그러나 CSS3는 미래의 기술입니다. IE9가 이미 다수의 CSS3를 지원하고 있고 IE10 이상부터는 거의 모든 CSS3를 적용할 것이라고 약속한 바 있죠. 마이크로소프트가 직접 I..
1. 기본적인 html 셋팅메타테그를 이용하여 모바일에 적합한 사이트 만들어야 합니다. content="width=device-width"는 웹페이지의 가로를 모바일 가로사이즈에 맞춘다는 뜻입니다. 즉, 가로 스크롤이 생기지 않습니다.initial-scale=1은 화면을 초기화 할때 몇배율로 할 것인지 정합니다. 1로 한다면 딱 정상적인 배율로 보입니다.maximum-scale=1은 손가락 두개를 쫙 벌려서 확대를 얼마나 할 수 있는지에 대한 부분입니다.1로 하면 확대가 안되고 2로 하면 두배, 3으로하면 세배 확대가 됩니다.minimum-scale=1은 반대로 손가락 두개를 오므려서 얼마나 축소할 수 있는지에 대한 부분입니다.1로하면 축소가 안되고, 0.5는 50%축소가 됩니다.user-scalable..
white-space 공백 줄바꿈문자 처리방법 (띄어쓰기나 줄바꿈으로 이한 공백부분 등) white-space:normal; normal이 기본값, 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다. 지정된 넓이의 끝에서 자동으로줄바꿈한다. - 코드에서의 원래 텍스트여수 밤바다 이 조명에 담긴 아름다운 얘기가 있어 네게 들려주고파 white-space:pre; 띄어쓰기는 실제 입력한 칸 수대로, 줄바꿈도 엔터를 친 대로 나온다. 넘어가는 부분에서 강제 줄바꿈은 되지 않는다. white-space:nowrap; 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다. 넓이를 지정하였어도 자동으로 줄바꿈 되지 않게 강제로 개행을 막아준다. word-break 텍스트가 들어가는 블럭요소의 넓이에 맞춰 줄바꿈 하는 ..
크롬, 사파리, 파폭 등에서디자인스타일과 상관없이 input, textarea 에 커서이동시 노란테두리가 생긴다.브라우저 기본속성 outline이 자동설정 되기 때문이다. 기본설정된 outline을 없앨려면 css에 input{ outline-style:none;} , textarea{ outline-style:none;}
IE등 일부 브라우저에서 링크가 포함된 경우 클릭시 테두리에 점선이 생기면서 링크영역임을 알려준다. 특히 이미지(IMG)에 링크가 포함된 경우 불필요한 영역 표시와 함께 점선 테두리로 인해 지저분해 보이기 쉽다. a {outline:none; select-dummy: expression(this.hideFocus=true);}