C6: Positioning content based on structural markup
- 구조화 된 마크업으로 콘텐츠 배치하기
C7: Using CSS to hide a portion of the link text
- 링크 텍스트의 부분을 숨기기
<p>Washington has announced plans to stimulate economic growth.
<a href="#"><span class="visually-hidden">Washington stimulates economic growth </span>
Full Story</a></p>
Washington has announced plans to stimulate economic growth. Washington stimulates economic growth Full Story
C8: Using CSS letter-spacing to control spacing within a word
- 자간 조절할 때 letter-spacing 속성 쓰기
h2 { letter-spacing: 1em; }
C9: Using CSS to include decorative images
- 장식된 이미지를 포함하기 위해 CSS 사용하기
C12: Using percent for font sizes
- 폰트 사이즈 퍼센트로 사용하기
strong {font-size: 120%}
C13: Using named font sizes
- 이름으로 지정된 폰트 사이즈 사용하기
strong {font-size: larger}
C14: Using em units for font sizes
- em 단위로 된 폰트 사이즈 사용하기
strong {font-size: 1.6em}
C15: Using CSS to change the presentation of a user interface component when it receives focus
- UI 컴포넌트가 focus 되었을때 보이는 것 바꿔주는 CSS 사용하기
- 링크 요소 예제
<style>
#mainnav a:hover, #mainnav a:active, #mainnav a:focus {
background-color: #DCFFFF;
color:#000066;
}
</style>
<ul id="mainnav">
<li class="page_item">Home</li>
<li class="page_item"><a href="/services">Services</a></li>
<li class="page_item"><a href="/projects">Projects</a></li>
<li class="page_item"><a href="/demos">Demos</a></li>
<li class="page_item"><a href="/about-us">About us</a></li>
<li class="page_item"><a href="/contact-us">Contact us</a></li>
<li class="page_item"><a href="/links">Links</a></li>
</ul>
- 포커스 된 요소 하이라이트 예제
<html>
<head>
<style type="text/css">
input.text:focus {
background-color: #7FFF00;
color: #000;
}
input[type=checkbox]:focus + label, input[type=radio]:focus + label {
background-color: #FF6;
color: #000;
}
</style>
</head>
<body>
<form method="post" action="form.php">
<p><label for="fname">Name: </label>
<input class="text" type="text" name="fname" id="fname" />
</p>
<p>
<input type="radio" name="sex" value="male" id="sm" /> <label for="sm">Male</label><br />
<input type="radio" name="sex" value="female" id="sf" /> <label for="sf">Female</label>
<p>
</form>
</body>
</html>
C17: Scaling form elements which contain text
- 텍스트를 포함한 폼 엘리먼트 줄이기
<h1>Contact Us</h1>
<p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p>
<label for="fname">First Name</label><input type="text" name="fname" id="fname" /><br />
<label for="lname">Last Name</label><input type="text" name="lname" id="lname" /><br />
<label for="phone">Telephone</label><input type="text" name="phone" id="phone" /><br />
<label for="email">Email</label><input type="text" name="email" id="email" /><br />
<input type="submit" name="Submit" value="Submit" id="Submit" />
Contact Us
Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.
C18: Using CSS margin and padding rules instead of spacer images for layout design
- 레이아웃 디자인에 여백 이미지 대신 margin 과 padding CSS 쓰기
<style>
table { margin: .5em; border-collapse: collapse; }
td, th { padding: .4em; border: 1px solid #000; }
</style>
<table summary="Titles, authors and publication dates of books in Web development category">
<caption>Books in the category 'Web development'</caption>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>How to Think Straight About Web Standards</td>
<td>Andrew Stanovich</td>
<td>1 April 2007</td>
</tr>
</tbody>
</table>
| Title | Author | Date |
|---|---|---|
| How to Think Straight About Web Standards | Andrew Stanovich | 1 April 2007 |
C19: Specifying alignment either to the left OR right in CSS
- CSS에서 왼쪽 정렬과 오른쪽 정렬 모두 특정해줍니다.
p.left {text-align: left}
p.right {text-align: right}
다음 글에서 계속 이어서 작성하겠습니다.