| CSS text-decoration란? 글자의 꾸미기 모양을 지정할 때 사용합니다. |
| 기본 정보 | 지원 브라우저/CSS 버전 | ||||||||||||
|
|
| 속성값 | ||||||||||||||||||||||||
|
인라인 요소의 높이를 설정하는 값으로 즉 줄 간격 설정이다.
만약 블록 레벨 요소에 값을 지정한 경우에는 해당 박스에 포함될 인라인 요소 박스의 최소 높이를 지정하는 것이 된다.
설정 값은 하위 요소로 상속된다.
※ IE7과 Firefox2에서 인라인 요소에 대한 기본 높이값의 차이가 많이 나기기 때문에 상위레벨(body 등)에서 픽셀이나 포인트로 결정해 주는 것이 좋다.
normal
: 기본값. 기본 크기
크기 및 단위(px,em,pt,%) : 크기 지정 예>10px, 10em, 10pt, 10%
- 백분율(%)은 부모 요소를 기준으로 계산된다.
inherit
: 부모 요소의 값을 상속하도록 지정한다.(IE6, IE7 지원 안한다.)
기본값은 normal이며, 브라우저가 적절한 줄간격을 설정한다.
(실수값+단위 형태"로 지정할 수 있다.)
전각(em)의 경우는, 해당 글꼴의 줄 간격을 1로 간주하고 백분율(%)은 100%로 간주하고 계산된다. 즉, 상위레벨의 값을 1(em), 100(%)으로 계산하여 표현한다. 픽셀(px) 및 포인트(pt)등과 같은 값을 지정할 수도 있다. 단, 인라인 레벨의 박스 높이인 만큼 음수값을 지정할 수 없다.
[css-tip]CSS 네비게이션 메뉴 만들기(가로형)
3개의 메뉴로 구성되어 있는 가로형 메뉴를 만들어 보자.
메뉸는 아래처럼 보여지게 된다.
<body>
<ul id="nav">
<li><a href="http://okkks.tistory.com" target="_blank">여기는</a></li>
<li><a href="http://okkks.tistory.com" target="_blank" class="active">http://okkks.tistory.com</a></li>
<li><a href="http://okkks.tistory.com" target="_blank">입니다.</a></li>
</ul>
</body>
</html>
메뉴에 주로 사용하는 ul, li 태그의 조합으로 구성을 한다.
[nav.css]
#nav
{
margin:0;
padding:0;
}
#nav li
{
margin:0;
padding:0;
list-style-type:none;
display:inline;
float:left;
}
#nav a
{
line-height:14px;
font-weight:bold;
margin:0 10px 4px 10px;
text-decoration:none;
font-size:12px;
color:#9c9;
}
#nav a.active, #nav a:hover
{
color:#363;
}
#nav 설명
magin, padding => 여백을 없앤다.
#nav li 설명
margin:0;
padding:0;
=> 여백 및 들여쓰기 없앤다.
list-style-type:none =>블릿을 없앤다.
display:inline; => 리스트를 같은 줄에 표시하한다.
float:left; => 리스트를 왼쪽으로 붙여서 표시
#nav a 설명
line-height:14px; => 줄 간격 지정
font-weight:bold; => 굵은 글자
margin:0 10px 4px 10px; => 여백 간격을 조정한다.(순서대로 위,오른쪽,아래,왼쪽=시계방향)
text-decoration:none; => 글자의 꾸미기를 보통 모양으로 지정
font-size:12px; => 글자 크기
color:#9c9; => 글자 색상
#nav a.active, #nav a:hover 설명
color:#363; => 글자 색상
a.active
=> <a>엘리먼트(a 태그)에 class="active" 형태로 사용한다.
메뉴를 선택하면 해당 메뉴를 선택했다는 효과를 주기위해 class에서 사용할 수 있게 active 라는 이름을 직접 만들었다. 선택한 메뉴는 class="active" 를 사용하고 그렇지 않은 메뉴들은 class="" 를 사용한다.
예:선택 안한 메뉴 효과>
<li><a href="http://okkks.tistory.com" target="_blank" class="">여기는</a></li>
예:선택한 메뉴 효과>
<li><a href="http://okkks.tistory.com" target="_blank" class="active">http://okkks.tistory.com</a></li>
a:hover
=> 마우스 오버시 글자 색상
이처럼 같은 속성을 여러군데에서 사용하려면 "," 를 이용해서 설정할 수 있다.
alt, title의 차이?
1. alt(alternative) : '이미지의 대안, 이미지에 대한 설명'이라고 보시면 됩니다. 용도는
① 인터넷 속도, 또는 컴퓨터 사양 문제로 웹브라우저 설정을 '이미지 출력 안 함'으로 한 사용자에게 이미지에 대한 간략한 설명을 볼 수 있음. (데스크탑이 아닌 모바일기기로 접속시에도 유용함.)
② 시각장애인의 웹서핑시 사용하는 리더(reader) 프로그램이 텍스트는 읽어주나, 이미지는 읽을 수 없으므로 alt태그 안의 설명을 읽어줌.
③ 일반인 웹서핑시 인터넷 접속 등의 문제로 해당 이미지를 불러오지 못했을 때, 배꼽과 함께 이미지 설명을 보여줌.
2. title : 이미지 위에 마우스 포인터를 올려 놓았을 때 풍선 도움말처럼 뜨게 함.
① 이미지뿐 아니라, a태그, span태그, td태그 등 거의 대부분의 태그에 사용할 수 있고, '클릭하시면 다음 사진으로 바뀝니다.' 등의 간단한 풍선도움말 형식을 사용할 수 있음. 특히 웹표준에서는 a태그에 title 속성은 필수항목임. 링크주소에 대한 설명을 넣어, 링크주소에도 의미를 부여할 수 있음.
② 터치스크린 모바일기기에서 웹브라우징시에는 a링크 또는 이미지에 마우스 포인터를 올려놓을 수 없으므로, 한 번 터치시 title내용을 보여주고, 두 번 터치시 해당 링크로 접속이 됨.
③ 일반적인 게시판 리스트 페이지에서 게시물 제목을 일정 길이로 잘랐을 때, title속성에 전체 제목을 넣어주면, 해당 게시물을 클릭할 필요 없이 마우스 오버만으로 전체 제목을 볼 수 있음.
IE에서 alt속성의 내용을 마우스 오버시 보여줌으로 인해 alt와 title의 구별에 혼동을 주곤 하지만, alt와 title은 용도와 기능 면에서 확실히 다른 속성이다.
색상 코드 표
|
| |||||||||
| #93DAFF | #98DFFF | #9DE4FF | #A2E9FF | #A7EEFF | #ACF3FF | #B0F7FF | #B4FBFF | #B9FFFF | #C0FFFF |
| #87CEFA | #91D8FA | #A5D8FA | #AFDDFA | #B9E2FA | #C3E7FA | #CDECFA | #D7F1FA | #E1F6FA | #EBFBFF |
| #00BFFF | #0AC9FF | #14D3FF | #1EDDFF | #28E7FF | #32F1FF | #3CFBFF | #46FFFF | #96FFFF | #C8FFFF |
| #00A5FF | #00AFFF | #00B9FF | #00C3FF | #00CDFF | #00D7FF | #00E1FF | #00EBFF | #00F5FF | #00FFFF |
| #1EA4FF | #28AEFF | #32B8FF | #3CC2FF | #46CCFF | #50D6FF | #5AE0FF | #6EE0FF | #6EEAFF | #78F3FF |
| #1E90FF | #289AFF | #32A4FF | #3CAEFF | #46B8FF | #50C2FF | #5ACCFF | #64D6FF | #6EE0FF | #78EAFF |
| #96A5FF | #A0AFFF | #AAB9FF | #B4C3FF | #BECDFF | #C8D7FF | #D2E1FF | #DCEBFF | #E8F5FF | #F4FFFF |
| #86A5FF | #90AFFF | #9AB9FF | #A4C3FF | #AECDFF | #B8D7FF | #CCE1FF | #E0EBFF | #EBF5FF | #F9FFFF |
| #6495ED | #6E9FED | #78A9ED | #82B3ED | #8CBDED | #96C7ED | #A0D1F7 | #AADBFF | #B4E5FF | #BEEFFF |
| #0078FF | #0A82FF | #148CFF | #1E96FF | #28A0FF | #32AAFF | #3CB4FF | #46BEFF | #50C8FF | #5AD2FF |
| #0064FF | #0A6EFF | #1478FF | #1E82FF | #288CFF | #3296FF | #3CA0FF | #46AAFF | #50B4FF | #5ABEFF |
| #0000FF | #3232FF | #5050FF | #646EFF | #6478FF | #6482FF | #648CFF | #6496FF | #64A0FF | #64AAFF |
| #4169E1 | #4B73E1 | #557DE1 | #5F87E1 | #6991E1 | #739BE1 | #7DA5E1 | #87AFEB | #91B9F5 | #9BC3FF |
| #0064CD | #0A6ECD | #1478CD | #1E82CD | #288CD2 | #3296D7 | #3CA0E1 | #46AAEB | #50B4F5 | #5ABEF5 |
| #5A5AFF | #6464FF | #6E6EFF | #7878FF | #8282FF | #8C8CFF | #A0A0FF | #B4B4FF | #C8C8FF | #D2D2FF |
| #7B68EE | #8572EE | #8F7CEE | #9986EE | #A390EE | #AD9AEE | #B7A4EE | #C1AEEE | #CBB8EE | #D5C2EE |
| #6A5ACD | #7E6ECD | #8878CD | #9282CD | #9C8CCD | #A696CD | #B0A0CD | #BAAAD7 | #C4B4E1 | #CEBEE1 |
| #0000CD | #2828CD | #4646CD | #6464CD | #6E6ED7 | #7878E1 | #8282EB | #8C8CF5 | #9696FF | #A0A0FF |
| #00008C | #14148C | #28288C | #3C3C8C | #50508C | #646496 | #7878AA | #8C8CBE | #A0A0C8 | #B4B4DC |
| #483D8B | #52478B | #5C518B | #665B8B | #70658B | #7A6F95 | #84799F | #8E83A9 | #988DB3 | #A297BD |
| #000069 | #1E3269 | #323C73 | #3C467D | #3C5087 | #3C5A91 | #46649B | #506EA5 | #5A78AF | #6482B9 |
| #3DFF92 | #47FF9C | #51FFA6 | #5BFFB0 | #65FFBA | #6FFFC4 | #79FFCE | #75FFCA | #7AFFCF | #7FFFD4 |
| #55EE94 | #5FEE9E | #69EEA8 | #73EEB2 | #7DEEBC | #87EEC6 | #91F8D0 | #9BFFDA | #A5FFE4 | #AFFFEE |
| #66CDAA | #70D2B4 | #7AD7BE | #84DCC8 | #8EE1D2 | #98EBDC | #9DF0E1 | #A2F5E6 | #A7FAEB | #ACFFEF |
| #AAEBAA | #B4F0B4 | #BEF5BE | #C8FAC8 | #D2FFD2 | #DCFFDC | #E1FFE1 | #E6FFE6 | #EBFFEB | #F0FFF0 |
| #80E12A | #8AE634 | #94EB3E | #9EF048 | #A8F552 | #B2FA5C | #BCFF66 | #C1FF6B | #C6FF70 | #CBFF75 |
| #52E252 | #5CE75C | #66EC66 | #70F170 | #7AF67A | #84FB84 | #89FB89 | #8EFB8E | #93FB93 | #98FB98 |
| #64CD3C | #6ED746 | #78E150 | #82EB5A | #8CF064 | #96F56E | #9BFA73 | #A0FA78 | #A5FA7D | #AAFA82 |
| #13C7A3 | #18CCA8 | #1DD1AD | #22D6B2 | #27DBB7 | #2CE0BC | #31E0C1 | #36E0C6 | #3BE0CB | #40E0D0 |
| #46B4B4 | #50BEBE | #5AC8C8 | #64D2D2 | #6EDCDC | #73E1E1 | #78E6E6 | #7DEBEB | #82F0F0 | #87F5F5 |
| #20B2AA | #2ABCB4 | #34C6BE | #3ED0C8 | #48DAD2 | #52E4DC | #57E9E1 | #5CEEE6 | #61F3EB | #66F8F0 |
| #5F9EA0 | #69A8AA | #73B2B4 | #7DBCBE | #87C6C8 | #91D0D2 | #96D5D7 | #9BDADC | #A0DFE1 | #A5E3E6 |
| #3CB371 | #46BD7B | #50C785 | #5AD18F | #64DB99 | #6EE5A3 | #73EAA8 | #78EFAD | #7DF4B2 | #82F9B7 |
| #2E8B57 | #389561 | #429F6B | #4CA975 | #56B37F | #60BD89 | #65C28E | #6AC793 | #6FCC98 | #74D19D |
| #228B22 | #2C952C | #369F36 | #40A940 | #4AB34A | #54BD54 | #5EC75E | #63CC63 | #68D168 | #6DD66D |
| #497649 | #538053 | #5D8A5D | #679467 | #719E71 | #7BA87B | #80AD80 | #85B285 | #8AB78A | #8FBC8F |
| #006400 | #0A6E0A | #147814 | #1E821E | #288C28 | #329632 | #3CA03C | #41A541 | #46AA46 | #4BAF4B |
| #008C8C | #0A9696 | #14A0A0 | #1EAAAA | #28B4B4 | #32BEBE | #37C3C3 | #3CC8C8 | #41CDCD | #46D2D2 |
| #008080 | #0A8A8A | #149494 | #1E9E9E | #28A8A8 | #32B2B2 | #37B7B7 | #3CBCBC | #41C1C1 | #46C6C6 |
| #FFB6C1 | #FFBBC6 | #FFC0CB | #FFC5D0 | #FFCAD5 | #FFCFDA | #FFD4DF | #FFD9E4 | #FFDEE9 | #FFE3EE |
| #FFAAAF | #FFB4B9 | #FFBEC3 | #FFC8CD | #FFD2D7 | #FFDCE1 | #FFE1E6 | #FFE6EB | #FFEBF0 | #FFF0F5 |
| #FF9E9B | #FFA8A5 | #FFB2AF | #FFBCB9 | #FFC6C3 | #FFD0CD | #FFD5D2 | #FFDAD7 | #FFDFDC | #FFE4E1 |
| #FF7A85 | #FF848F | #FF8E99 | #FF98A3 | #FFA2AD | #FFACB7 | #FFB1BC | #FFB6C1 | #FFBBC6 | #FFC0CB |
| #FF5675 | #FF607F | #FF6A89 | #FF7493 | #FF7E9D | #FF88A7 | #FF92B1 | #FF9CBB | #FFA6C5 | #FFB0CF |
| #FF82FF | #FF8CFF | #FF96FF | #FFA0FF | #FFAAFF | #FFB4FF | #FFBEFF | #FFC8FF | #FFD2FF | #FFDCFF |
| #FF7DB4 | #FF87BE | #FF91C8 | #FF9BD2 | #FFA5DC | #FFAFE6 | #FFB4EB | #FFB9F0 | #FFBEF5 | #FFC3FA |
| #FF69B4 | #FF73BE | #FF7DC8 | #FF87D2 | #FF91DC | #FF9BE6 | #FFA5F0 | #FFAAF5 | #FFAFFA | #FFB4FF |
| #FF1493 | #FF1E9D | #FF28A7 | #FF32B1 | #FF3CBB | #FF46C5 | #FF50CF | #FF5AD9 | #FF64E3 | #FF6EED |
| #DB7093 | #DB7A9D | #DB84A7 | #E08EB1 | #E598BB | #EAA2C5 | #EAB1D4 | #EFACCF | #F4BBDE | #F4B6D9 |
| #D7567F | #DC6089 | #E16A93 | #E6749D | #EB7EA7 | #F088B1 | #F592BB | #FA9CC5 | #FFA6CF | #FFB0D9 |
| #C71585 | #C71F8F | #C73399 | #C73DA3 | #CC47AD | #D151B7 | #D65BC1 | #E065CB | #EA6FD5 | #F479DF |
| #CD1039 | #CD1F48 | #CD2E57 | #CD3861 | #CD426B | #D24C75 | #D7567F | #DC6089 | #E16A93 | #E6749D |
| #B9062F | #B91A4D | #BE2457 | #C32E61 | #C8386B | #CD4275 | #D24C7F | #D75689 | #DC6093 | #E16A9D |
| #FAEB78 | #FAF082 | #FAF58C | #FAFA96 | #FAFAA0 | #FAFAAA | #FAFAB4 | #FAFABE | #FAFAD2 | #FAFAD2 |
| #FFDC3C | #FFE146 | #FFE650 | #FFEB5A | #FFF064 | #FFF56E | #FFFA78 | #FFFA82 | #FFFF8C | #FFFF96 |
| #FFC81E | #FFD228 | #FFD732 | #FFDC3C | #FFE146 | #FFE650 | #FFEB5A | #FFF064 | #FFF56E | #FFF978 |
| #FFB400 | #FFBE0A | #FFC314 | #FFC81E | #FFCD28 | #FFD232 | #FFD73C | #FFDC46 | #FFE150 | #FFE65A |
| #FDCD8C | #FDD296 | #FDD7A0 | #FDDCAA | #FDE1B4 | #FDE6BE | #FDEBC8 | #FDF5D2 | #FDF5DC | #FDF5E6 |
| #FAC87D | #FACD87 | #FAD291 | #FAD79B | #FADCA5 | #FAE1AF | #FAE6B9 | #FAEBC3 | #FAEBCD | #FAEBD7 |
| #FFA500 | #FFAF0A | #FFB914 | #FFC31E | #FFCD28 | #FFD732 | #FFDC37 | #FFE13C | #FFE641 | #FFEB46 |
| #FF9100 | #FF9B00 | #FFA500 | #FFAF00 | #FFB900 | #FFC300 | #FFC800 | #FFCD00 | #FFD200 | #FFD700 |
| #FF8200 | #FF8C0A | #FF9614 | #FFA01E | #FFAA28 | #FFB432 | #FFB937 | #FFBE3C | #FFC341 | #FFC846 |
| #FFA98F | #FFB399 | #FFBDA3 | #FFC7AD | #FFD1B7 | #FFDBC1 | #FFE0C6 | #FFE5CB | #FFEAD0 | #FFEFD5 |
| #FFA374 | #FFAD7E | #FFB788 | #FFC192 | #FFCB9C | #FFD0A1 | #FFD5A6 | #FFDAAB | #FFDFB0 | #FFE4B5 |
| #FF9473 | #FF9E7D | #FFA887 | #FFB291 | #FFBC9B | #FFC6A5 | #FFD0AF | #FFD0AF | #FFD5B4 | #FFDAB9 |
| #FF7F50 | #FF895A | #FF9364 | #FF9D6E | #FFA778 | #FFB182 | #FFBB8C | #FFC091 | #FFC596 | #FFCA9B |
| #CD853F | #CD8F49 | #D29953 | #D7A35D | #DCAD67 | #E1B771 | #E6C17B | #EBC680 | #F0CB85 | #F5D08A |
| #D2691E | #D27328 | #D27D32 | #D7873C | #DC9146 | #E19B50 | #E6A55A | #EBAA5F | #EBAF64 | #F0B469 |
| #AE5E1A | #B86824 | #C2722E | #CC7C38 | #D68642 | #E0904C | #E59551 | #EA9A56 | #EF9F5B | #F4A460 |
| #8B4513 | #8B4F1D | #8B5927 | #8B6331 | #906D3B | #957745 | #9F814F | #A48654 | #A98B59 | #AE905E |
| #FF9696 | #FFA0A0 | #FFAAAA | #FFB4B4 | #FFBEBE | #FFC8C8 | #FFD2D2 | #FFDCDC | #FFE6E6 | #FFF0F0 |
| #F08080 | #F08A8A | #F09494 | #F59E9E | #FAA8A8 | #FAB2B2 | #FAB7B7 | #FABCBC | #FAC1C1 | #FAC6C6 |
| #F56E6E | #F57878 | #F58282 | #F58C8C | #F59696 | #F5A0A0 | #F5AAAA | #FAB4B4 | #FABEBE | #FAC8C8 |
| #F06464 | #F06E6E | #F07878 | #F08282 | #F08C8C | #F09696 | #F4A0A0 | #F4AAAA | #F4B4B4 | #FEBEBE |
| #FF0000 | #FF3232 | #FF4646 | #FF5050 | #FF5A5A | #FF6464 | #FF6E6E | #FF7878 | #FF8282 | #FF8C8C |
| #EB0000 | #EB3232 | #EB4646 | #EB5050 | #EB5A5A | #EB6464 | #F06E6E | #F57878 | #FA8282 | #FA8C8C |
| #CD0000 | #CD3C3C | #CD4646 | #CD5050 | #D25A5A | #D76464 | #DC6E6E | #E17878 | #E68282 | #EB8C8C |
| #CD5C5C | #CD6666 | #CD7070 | #CD7A7A | #D28484 | #D78E8E | #DC9898 | #E6A2A2 | #EBACAC | #F0B6B6 |
| #B90000 | #B93232 | #B93C3C | #B94646 | #B95050 | #BE5A5A | #C35F5F | #C86464 | #CD6969 | #D26E6E |
| #B22222 | #B24040 | #B24A4A | #B25454 | #B75E5E | #BC6868 | #C17272 | #CB7776 | #CB7C7C | #D08180 |
| #A52A2A | #AA3E3E | #AF4848 | #B45252 | #BE5C5C | #C36666 | #CD7070 | #CD7A7A | #D28484 | #D78E8E |
| #800000 | #803232 | #853C3C | #8F4646 | #945050 | #9E5A5A | #A36464 | #AD6E6E | #B77878 | #C18282 |
| #CD853F | #CD8B45 | #CD904A | #D2954F | #D29A54 | #D79F59 | #D7A45E | #E1A963 | #E1AE68 | #E6B36D |
| #DB631F | #E56D29 | #E57733 | #EA813D | #EF8B47 | #EF904C | #F49551 | #F49A56 | #F49F5B | #F4A460 |
| #D2691E | #D27328 | #D77D32 | #D7873C | #DC9146 | #E19B50 | #E6A055 | #EBA55A | #F0AA5F | #F5AF64 |
| #A0522D | #A05C37 | #A06641 | #A5704B | #AA7A55 | #B4845F | #B98E69 | #C39873 | #CDA27D | #D7AC87 |
| #8B4513 | #8B4F1D | #8B5927 | #8B6331 | #906D3B | #9A7745 | #A4814F | #AE8B59 | #B89563 | #C29F6D |
| #DA70D6 | #DF75DB | #E47AE0 | #E97FE5 | #EE84EA | #F389EF | #F88EF4 | #FD93F9 | #FF98FE | #FF9DFF |
| #BA55D3 | #BF5AD8 | #C45FDD | #C964E2 | #CE69E7 | #D36EEC | #D873F1 | #DD78F6 | #E27DFB | #E782FF |
| #9932CC | #9E37D1 | #A33CD6 | #A841DB | #AD46E0 | #B24BE5 | #B750EA | #BC55EF | #C15AF4 | #C65FF9 |
| #9400D3 | #9905D8 | #9E0ADD | #A30FE2 | #A814E7 | #AD19EC | #B21EF1 | #B723F6 | #BC28FB | #C12DFF |
| #942894 | #9E329E | #A83CA8 | #B246B2 | #BC50BC | #C65AC6 | #D064D0 | #DA6EDA | #E478E4 | #EE82EE |
| #8c008c | #960a96 | #a014a0 | #aa1eaa | #b428b4 | #be32be | #c83cc8 | #d246d2 | #dc50dc | #e65ae6 |
| #800080 | #8a0a8a | #941494 | #9e1e9e | #a828a8 | #b232b2 | #bc3cbc | #c646c6 | #d050d0 | #da5ada |
| #834683 | #8d508d | #975a97 | #a164a1 | #ab6eab | #b578b5 | #bf82bf | #c98cc9 | #d396d3 | #dda0dd |
| #828282 | #8c8c8c | #969696 | #a0a0a0 | #aaaaaa | #b4b4b4 | #bebebe | #c8c8c8 | #d2d2d2 | #dcdcdc |
| #000000 | #282828 | #323232 | #3c3c3c | #464646 | #505050 | #5a5a5a | #646464 | #6e6e6e | #787878 |
웹표준 교과서 : XHTML과 CSS로 하는 '바른' 웹 사이트
[구매가능 사이트 : 강컴] http://kangcom.com/sub/view.asp?sku=200707180005
[구매가능 사이트 : 예스24] http://www.yes24.com/24/goods/2634462
* 예스24가 조금 싸네요.
웹 2.0을 이끄는 방탄웹(크리에이티브한 웹 표준 기법과 제작 사례)
[구매가능 사이트 : 강컴] http://kangcom.com/sub/view.asp?sku=200902050008
[구매가능 사이트 : 예스24] http://www.yes24.com/24/goods/3280568
* 같은 가격
제프리 젤드만의 웹표준 가이드: 웹 디자이너와 개발자, 그리고 사용자를 위한 올바른 선택(2ed)
[구매가능 사이트 : 강컴] http://kangcom.com/sub/view.asp?sku=200712210002
[구매가능 사이트 : 예스24] http://www.yes24.com/24/goods/2795721
* 강컴이 조금 싸네요.
CSS 마스터 전략 : 고급 웹 표준 사이트 제작을 위한
[구매가능 사이트 : 강컴] htthttp://kangcom.com/sub/view.asp?sku=200612140007
[구매가능 사이트 : 예스24] http://www.yes24.com/24/goods/2306350
* 같은 가격
[관련 추천 블로그] http://blog.webmini.net/465
[웹 표준 사이트] w3schools.com
[css-tip]CSS hack 정리
다양한 브라우저와 브라우저의 버그를 이용하여 특정 브라우저에만 css를 적용하는 것을 "CSS 핵"이라고 한다. 크로스브라우징을 위해 사용을 하고 있지만 사용하지 않고 구현하기를 권장한다.
css 핵은 사용하지 않는 것이 좋다.
새로운 브라우저가 생겼을 경우나 기존 브라우저의 버전 변경시 다시 손을 봐야 하는 경우가 생길 수도 있으며 css 문법상 올바르지 않는 것도 있을 수 있고 무엇보다 크로스브라우징, 웹 표준에 맞지 않아 올바른 CSS 라고 볼 수가 없다.
스타핵 (star hack)
셀렉트 앞에 * 을 붙히며 Win IE 4~7 에만 적용(IE8, FF에는 적용 안됨)
예> P { padding:3px; *padding:0px; } /* IE8, FF는 padding:3px, IE4~7는 padding:0px 적용 */
셀렉트 앞에 *html 을 붙히며 Win IE 4~6, Mac IE 4~5 에만 적용
예> * html p { padding:3px; } /* 맨앞에 *html 을 붙힌다. */
예> p { _padding:3px; } /* padding 앞에 _ 를 붙힌다. */해시 핵 (hash hack)
속성의 앞에 # 를 붙이며 Win IE 4~6, Mac IE 5, Opera 7, Mozila, Firefox 적용(CSS의 문법상 속성의 앞에 #를 두는 것은 문법적으로 바르지 않다.)
예> p { #padding:3px; } /* padding(속성) 앞에 #를 붙힌다. */
스타 7 핵 (star 7 hack)
셀렉트 앞에 html* 를 붙이며 Win IE 5.5~6, Map IE 5, Safari 에만 적용(html* 과 선택자 사이에 공백을 두면 안된다.)예> html*p { padding:3px; }IE7 전용핵
셀렉트 앞에 *:first-child+html 를 붙히며, IE 7에만 적용예> *:first-child+html p { padding:3px; }사파리용 핵
body:first-of-type
예> body:first-of-type #wrap이밖에도 브라우저 배제를 위한 핵과 박스모델 핵 패스필터 등이 있다.소스 예>style="text-align:left;padding-left:5px;*padding-left:7px;_padding-left:0px;"소스 예 설명> 위 소스 중 padding 부분[ff,ie8]padding-left:5px;[ie7]*padding-left:7px;[ie6]_padding-left:0px;[css-tip]css 초기화
초기화를 하지 않는 경우 브라우저마다 버전마다 기본으로 지정되어있는 css를 사용하게되어 크로스브라우징을 구현하는데 문제가 된다.
초기화를 하게 되면 모든 브라우저에서 다 공통으로 지정이되므로 크로스브라우징을 구현함에 있어서 권장한다.
아래 에를 참고로 본인이 원하는 css 초기화를 구현할 수 있다.
예> * 는 전체를 뜻한다.
/* css 초기화 */
*{
margin:0; /* margin 여백 : 0 */ padding:0; /* padding 여백 : 0 */ border:0; /* 선 굵기 : 0 */ background-color:transparent; /* 배경색상 투명 */ color:#666; /* 색상 */ font-size:100%; /* 폰트 크기 */ font-weight:normal; /* 폰트 굴기 */ font-style:normal; /* 폰트 모양 */ text-decoration:none; /* 폰트 장식 */}
|
