[CSS] 탭 만들기

탭에 들어갈 요소들을 일단 ul li 엘리먼트를 사용하여 내용을 정의한다.

<ul id=”nav”>
  <li id=”t-email”><a href=””>E-MAIL</a></li>
  <li id=”t-reportl”><a href=””>KOMA-REPORT</a></li>
  <li id=”t-em”><a href=””>KOMA-EM</a></li>
</ul>

이 상태에서는 세로로 쭉 나열하며 목록에 점 하나씩을 달고 있는 형태가 된다.

이제 ul에 width를 넓히고, li들을 왼쪽에 차곡 차곡 떠있게 설정한다.

            #nav {
                float: left;
                width: 100%;
                margin: 10px 10px 0 0;
                padding: 10px 0 0 0;
                list-style: none;
                background: url(/images/new/bt_line.png) repeat-x bottom left;
            }
           
            #nav li {
                float: left;
                margin: 0;
                padding: 0;
                font-size: 80%;
            }

이때 float을 사용하고 있는 li를 감싸는 nav에도 꼭 float을 설정해야 페이지가 깨지지 않는다.

다음은 a를 탭 모양으로 다듬어 준다. 패딩 주고, 패딩, 마진을 주고, 탭 전체를 클릭할 수 있게 설정한다.

            #nav a {
                float: left;
                display: block;
                margin: 0 1px 0 0;
                padding: 4px 8px;
                color: #333;
                text-decoration: none;
            }

마우스를 올렸을 때 다른 모습으로 효과를 준다.

            #nav a:hover {
                color: #333;
                background: #edf4fc;
                border: #9fc5f6 solid 1px;
                border-bottom: none;
            }

클릭한 탭의 모양이 변경되도록 설정한다. 이 부분이 조금 재미있는데, 클릭을 하면 자바스크립트로 body의 id 값을 변경하고, 해당 id의 body 밑에 있는 특정 탭의 id에 있는 a를 css로 꾸며 주면 된다.

            body#em #t-em a{
                color: #333;
                background: #edf4fc;
                border: #6593cf solid 1px;
                border-bottom: none;;
            }

이런 형태다. body#em #t-em a 이것을 #em #t-em a 이렇게 써도 상관없으며, 모든 탭에 적용해야 하기 때문에.

            #email #t-email a,
            #report #t-report a,
            #em #t-em a {
                color: #333;
                background: #edf4fc;
                border: #6593cf solid 1px;
                border-bottom: none;;
            }

이렇게 설정할 수 있다.

[CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기


링크를 걸면 보통 텍스트 부위만 클릭할 수 있는데, 해당 블럭을 클릭할 수 있게 수정하면 좀 더 편리함.

display:block;
=> a 엘리먼튼에 display:block을 적용함.

마우스를 올렸을 때 배경색이나 배경 이미지를 변경하여 현재 선택하려는 요소가 다른 것과 구분되게 함.

a:hover { background-color: #94B8E9;}
=> hover 유사 클래스를 사용하여 간단하게 롤오버 적용.

[CSS]그라데이션 배경 사용하기


가로 폭 1px 짜리 그라데이션 이미지를 만들고, 가로로 쭉 반복 시켜줌.

background: url(배경이미지) repeat-x;

=> 배경 이미지를 가로로 반복시킴. 세로로 반복하는 repeat-y도 있음.

배경이 커서 그라데이션 이미지로 커버가 안 될 때는 그라데이션이 끝나는 지점과 같은 색을 배경으로 깔아줌.

background: 색상코드 url(images/new/level1_bg.png) repeat-x;

Chapter 14. Image Replacement

Fahrner Image Replacement (FIR)

  • CSS를 적용해서 이미지로 교체할 텍스트를 표시한다.
<h1 id="fir">Fahrner Image Replacement</h1>
  • 텍스트를 제거해야 하니까 <span>으로 감싸서 제거한다.
<h1 id="fir"><span>Fahrner Image Replacement</span></h1>

#fir span {

display: none;

}
  • fir css를 사용해서 백그라운드에 이미지로 만든 글자를 적용한다.
#fir {

width: 287px;

height: 29px;

background: url(fir.gif) no-repeat;

}
  • 장점: css를 지원하지 않는 브라우저에서는 그냥 보통 텍스트라도 보여줄 것이다.
  • 단점: display가 비주얼하게 글자를 숨기는 것 뿐만 아니라, 완전히 없애드릴 수도 있다. <span>이라는 별의미없는 태그가 필요하다. 이미지를 꺼버리는 사용자들에게는 난감하다.

Leahy/Langridge Image Replacement (LIR)

  • 별의미 없는 <span> 엘리먼트 없이 텍스트를 이미지로 바꾸기
  • 엘리먼트의 높이를 0으로 만들고 교체할 이미즤 크기만큼 padding-top을 설정한다.
<h1 id="lir">Leahy/Langridge Image Replacement</h1>


#lir {

padding: 90px 0 0 0;

overflow: hidden;

background: url(lir.gif) no-repeat;

height: 0px !important; /* for most browsers */

height /**/:90px; /* for IE5/Win */

}
  • Screen-reader 애플리케이션이 텍스트를 읽을 수 있다.(display 속성을 사용하지 않아서.)
  • 이미지를 꺼두고 CSS만 켜두는 사람에게는 아무것도 안보인다.
  • IE5/Windows 브라우저를 위해서 Box Model 핵을 사용해야 한다.

The Phark Method

  • 글자 들여쓰기를 엄청많이 해서 페이지에 존재하고 있지만, 보이지는 않도록 한다.
<h1 id="phark">The Phark Method</h1>

#phark {

height: 26px;

text-indent: -5000px;

background: url(phark.gif) no-repeat;

}
  • 간단해서 좋아보이지만 여전히 이미지를 꺼두면 안 보인다.

Chpater 13. Styling Text

Hypertext를 좀 더 멋지게 보이게 하는 방법

Times They are a-Changing

  • Times(Times new roman) 글자체는 여러 브라우저의 기본 글자체다. however, this
    could easily be changed by users to whatever they fancy, and of course
    shouldn’t be relied upon.

줄 높이 설정하기

body {

line-height: 1.5em;

}
  • 줄 높이를 설정하여 가독성을 높일 수 있다.

글자체 설정하기

body {

font-family: "Lucida Grande", "Trebuchet MS", sans-serif;

line-height: 1.5em;

}
  • 사용자의 컴퓨터에 설치되어 있는 폰트를 고려하여 여러 개의 폰트를 설정한다.
  • 맨 앞에 것이 없으면 그 다음 것을 적용한다.
  • 글자체가 여러 단어로 구성되어 있다면, 따옴표로 묶는다.

Kerning (a.k.a. Letter-Spacing)

h1 {

letter-spacing: -2px;

}
  • 글자들의 간격을 조정할 수 있다.

Drop Caps

<p><span class="drop">I</span>f you're painting with latex paints, and
  • 문단을 멋지게 표현하기 위한 스타일 훅이 필요하다.
  • CSS2를 적용하는 브라우저들은 이런 훅이 필요없이 :first-letter 사용하면 된다.
.drop {

float: left;

font-size: 400%;

line-height: 1em;

margin: 4px 10px 10px 0;

padding: 4px 10px;

border: 2px solid #ccc;

background: #eee;

}

Text alignment

body {

font-family: Georgia, Times, serif;

line-height: 1.5em;

text-align: justify;

}
  • text-align: justify를 사용하면 양쪽으로 정렬된다.

Transforming Text

h1 {

letter-spacing: 4px;

font-style: italic;

text-align: center;

text-transform: uppercase;

}
  • text-transform: uppercase;를 사용해서 글자를 모두 대문자로 바꿀 수 있다.

Small Caps

h1 {

letter-spacing: 4px;

text-align: center;

font-variant: small-caps;

}
  • font-variant: small-caps;를 사용해서 전부 대문자로 바꿔주고, 단어의 첫 글자 이외의 글자들을 조금 작게 보여준다.

문단 들여쓰기

p {

text-indent: 3em;

}