CSS 기술(2)

C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized

• 브라우저가 리사이즈 될 때 라인의 평균 80글자 이하가 되도록 컬럼의 너비를 relative measurements로 사용하기.

<style>
	#main_content {max-width: 70em}
	or
	#main_content {width: 90%}
</style>
<div id="main_content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>

C21: Specifying line spacing in CSS

• CSS로 라인간 간격 조정하기

p { line-height: 150%; }

C22: Using CSS to control visual presentation of text

텍스트의 시각적 요소를 조정하기 위해 CSS 사용하기

• 많이 쓰는 속성들은 예제를 제외하고, 써보지 않은 속성만 예제를 사용해 보겠습니다.

• font-family 사용하기
• text-align 사용하기
• font-size 사용하기
• color 사용하기
• font-style 사용하기
• font-weight 사용하기
• text-transform 사용하기
• line-height 사용하기
• letter-spacing 사용하기
• background-image 사용하기
• first-line 사용하기
  • 글의 첫번째 줄에 따로 스타일을 적용할 수 있습니다.

    .startline:first-line { font-size:2em; color:#990000; }
        <p class="startline">Once upon a time...<br />
    ...in a land far, far away...  </p>  
  

  Once upon a time...
  ...in a land far, far away...

• first-letter 사용하기
  • 첫번째 글자에 스타일을 줄 수 있습니다.

      .startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }
      <p class="startline">Once upon a time...<br />
      ...in a land far, far away...  </p>  
    

  Once upon a time...
  ...in a land far, far away...

C23: Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content

• 메인 컨텐츠의 텍스트와 배경색을 지정하지 않고 CSS의 배너, 기능 및 탐색 같은 보조 컨텐츠의 텍스트와 배경색 지정하기

C24: Using percentage values in CSS for container sizes

• 컨테이너 사이즈에 CSS로 퍼센트 값 사용하기

C25: Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors

• 텍스트 및 텍스트 배경색을 지정하지 않고 웹페이지의 영역을 설명하기 위해 CSS에서 border 및 레이아웃 지정하기

C27: Making the DOM order match the visual order

• DOM 순서를 시각적 순서와 일치시키기

C28: Specifying the size of text containers using em units

• em 단위를 사용하여 텍스트 컨테이너의 크기 지정

#nav_menu { width: 20em; height: 100em }

#nav_list { font-size: 100%; }

input.form1 { font-size: 100%; width: 15em; }

input.pick { font-size: 100%; width: 10em; }

input.choose { width: 1.2em; height: 1.2em; }

C29: Using a style switcher to provide a conforming alternate version

• 스타일 전환기를 사용하여 적합한 대체 버전 제공
  • 유저가 교체할 시각적 요소를 선택할 수 있게 제공

C30: Using CSS to replace text with images of text and providing user interface controls to switch

• CSS를 사용하여 텍스트를 텍스트 이미지로 바꾸고 사용자 인터페이스 컨트롤을 제공하여 전환
  • 유저가 교체할 시각적 요소를 선택할 수 있게 제공

다음 글에서 계속 이어서 작성하겠습니다.