CSS
Mobile용 Meta Tag
MobileOptimized Meta Tag Microsoft에서 모바일을 위해 Layout의 가로 크기를 조정하기 위해 고안한 태그 ex) Smartphone : content = "176" pocket pc : content="240" or content="480" HandheldFriendly Meta Tag Palm의 AvantGo mobile browser를 위한 태그 모바일 화면 크기 조정관련 설정 ex) * true : 모바일용(화면 크기 조정 기능) * false : Desktop에 최적화된 html 사용 Viewport Meta Tag 대부분의 스마트폰 브라우저에서 화면의 크기를 조정하기 위해 사용 기존 width값은 980px ex) Viewport META Example Value D..
li 메뉴
@charset "UTF-8"; /* default.css - Type Selector Definition */ body { margin:0;padding:0; font-size:9pt; } #selectLang { margin:0; padding:0; } #gnb { margin:0; padding:0; } #lnb { margin:0; padding:0; } #lnb ul { margin:0; padding:0; } #lnb { border-top:1px solid #dddddd; padding:4px 5px; width:190px;} #lnb li { padding-bottom:4px; list-style:none; } #lnb li a { padding:6px 5px 6px 13px; width:..
class vs. id
클래스 .(마침표) class 문서에서 주로 사용되는 서식을 클래스명으로 지정하여 문서에 통일감을 준다. 등 여러 개의 태그에 적용 가능하다. 아이디 #(hash) id 스크립트 언어 (자바스크립트)로 아이디에 지정된 스타일이나 행동 양식을 변경. Dynamic HTML 구현 시 주로 사용 등 하나의 태그에만 적용하여 사용한다.
id selector & Selectors can be contextual
id selector #green {color: green} p#para1 { text-align: center; color: red } p#exampleID1 { background-color: white; } p#exampleID2 { text-transform: uppercase; } Good Morning Hello This paragraph has an ID name of "exampleID1" and has a white CSS defined background This paragraph has an ID name of "exampleID2" and has had its text transformed to uppercase letters. Selectors can be contextual Th..
Grouping & Add Styles to Elements with Particular Attributes
Grouping h1,h2,h3,h4,h5,h6 { color: green } Add Styles to Elements with Particular Attributes input[type="text"] {background-color: blue}
Pseudo-Class Selector & CSS 글꼴 꾸밈관련 스타일
- Pseudo-Class Selector - A:link 보통 때의 링크 텍스트의 스타일 A:visited 이미 방문한 적이 있는 링크의 스타일 A:hover 마우스가 링크 위를 스쳐 지날 때의 색깔 A:active 마우스를 클릭하여 실제로 해당 링크로 페이지가 옮겨지는 동안의 색깔 Example) a:link { text-decoration:underline; color:#8600E4 } a:visited { text-decoration:underline; color:#800080 } a:hover { text-decoration:underline; color:#FF0000 } a:active { text-decoration:underline; color:#0000FF } - CSS 글꼴 꾸밈관련 스..