Whiteship's Note


[CSS] 탭 만들기

View/HTML/CSS : 2009.05.26 14:53




탭에 들어갈 요소들을 일단 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;;
            }

이렇게 설정할 수 있다.

'View > HTML/CSS' 카테고리의 다른 글

[IBM DW] HTML5 navigator  (0) 2010.07.06
[CSS] 탭 만들기  (2) 2009.05.26
[CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기  (0) 2009.05.22
[CSS]그라데이션 배경 사용하기  (2) 2009.05.22
XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
top

TAG CSS,

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

View/HTML/CSS : 2009.05.22 09:59



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

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

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

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

'View > HTML/CSS' 카테고리의 다른 글

[IBM DW] HTML5 navigator  (0) 2010.07.06
[CSS] 탭 만들기  (2) 2009.05.26
[CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기  (0) 2009.05.22
[CSS]그라데이션 배경 사용하기  (2) 2009.05.22
XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
top


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

View/HTML/CSS : 2009.05.22 09:54



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

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

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

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

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



'View > HTML/CSS' 카테고리의 다른 글

[IBM DW] HTML5 navigator  (0) 2010.07.06
[CSS] 탭 만들기  (2) 2009.05.26
[CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기  (0) 2009.05.22
[CSS]그라데이션 배경 사용하기  (2) 2009.05.22
XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
top


Chapter 14. Image Replacement

View/HTML/CSS : 2008.03.31 14:01


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;

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

'View > HTML/CSS' 카테고리의 다른 글

[IBM DW] HTML5 navigator  (0) 2010.07.06
[CSS] 탭 만들기  (2) 2009.05.26
[CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기  (0) 2009.05.22
[CSS]그라데이션 배경 사용하기  (2) 2009.05.22
XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
top


Chpater 13. Styling Text

View/HTML/CSS : 2008.03.31 14:00


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;

}

'View > HTML/CSS' 카테고리의 다른 글

[CSS] 탭 만들기  (2) 2009.05.26
[CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기  (0) 2009.05.22
[CSS]그라데이션 배경 사용하기  (2) 2009.05.22
XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
top


Chapter 10. Applying CSS

View/HTML/CSS : 2008.03.26 11:54


CSS를 문서에 적용하는 방법

<style> 엘리먼트

<style type="text/css">

<![CDATA[

... CSS declarations here ...

]]>

</style>
  • embedded style sheet라고도 하며, CSS를 이해하지 못하는 브라우저들을 위해 CDATA 주석 안에 둔다.
  • 페이지를 로딩할 때마다 스타일을 정의한 부분도 매번 다운로드 된다.
  • 여러 페이지에서 동일한 스타일을 사용하고 있을 때, 이것을 변경하려면 여러 페이지를 모두 수정해야 한다.

외부의 스타일 시트 사용하기

<link rel="stylesheet" type="text/css" href="styles.css" />
  • 유지보수하기 편한다.
  • 한 번만 다운로드 한다.
  • 첫 번째 방법처럼 예전 브라우저들은 CSS를 그냥 그대로 화면에 뿌려버릴 수도 있다.

@import 사용하기

<style type="text/css">

<![CDATA[

@import "styles.css";

]]>

</style>
  • 두 번째 방법과 비슷하게 이것도 역시 외부 문서에서 읽어온다.
  • 네스케이프 4.X 이하의 버전에서는 CSS를 화면에 그대로 뿌리는데, 위 처럼 해두면 그걸 숨길 수 있다.

Inline Style

<h1 style="font-family: Georgia, serif; color: orange;">This is a Title</h1>
  • 가장 나중에 설정한 스타일이기 때문에 다른 스타일들을 오버라이딩한다.
  • 내용과 표현이 분리가 되지 않는다.
  • <head>에서 외부 파일을 참조할 수 없을 때 임시적으로 사용할 수 있다.

Extra Credit

Alternate Styles

<link rel="stylesheet" type="text/css" href="default.css" title="default"/>

<link rel="alternate stylesheet" type="text/css" href="largetext.css" title="large" />

<link rel="alternate stylesheet" type="text/css" href="largertext.css" title="larger"/>
  • rel 속성에 alternate stylesheet 값을 사용할 수 있다.
  • title 속성과 값도 추가해서 나중에 선택할 수 있도록 한다.

'View > HTML/CSS' 카테고리의 다른 글

[CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기  (0) 2009.05.22
[CSS]그라데이션 배경 사용하기  (2) 2009.05.22
XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
top


Chapter 9. Minimizing Markup

View/HTML/CSS : 2008.03.23 15:24


태그 최소화 하기

Descendant Selectors

<div id="sidebar">

<h3>About This Site</h3>

<p>This is my site.</p>

<h3>My Links</h3>

<ul>

<li><a href="archives.html">Archives</a></li>

<li><a href="about.html">About Me</a></li>

</ul>

</div>

#sidebar h3 {

font-family: Georgia, serif;

color: #c63;

border-bottom: 1px solid #ccc;

}



#sidebar ul {

list-style-type: none;

}



#sidebar li {

font-weight: bold;

}
  • 하위 태그들의 스타일을 위와 같이 정의하면, 하위 태그들에 굳이 class 속성을 추가하지 않아도 된다.

The Unnecessary <div>

<ul id="nav">

<li><a href="archives.html">Archives</a></li>

<li><a href="about.html">About</a></li>

</ul>
  • block 엘리먼트는 굳이 div로 감싸서 스타일을 적용할 필요가 없다.

'View > HTML/CSS' 카테고리의 다른 글

[CSS]그라데이션 배경 사용하기  (2) 2009.05.22
XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
top


Chapter 8. More Lists

View/HTML/CSS : 2008.03.23 15:20


순서가 있는 목록을 표현하는 방법

<ul> 사용하기

<ul>

<li>1. Chop the onions.</li>

<li>2. Saute the onions for 3 minutes.</li>

<li>3. Add 3 cloves of garlic.</li>

<li>4. Cook for another 3 minutes.</li>

<li>5. Eat.</li>

</ul>
  • 중간에 새로운 요소를 추가하면 번호를 전부 수정해야 한다.
  • 숫자들 앞에 bullet이 붙는다. 이건 CSS로 띄어낼 수도 있지만, CSS를 모르는 옛날 브라우저들은 어떻게 하나..

<ol> 사용하기

<ol>

<li>Chop the onions.</li>

<li>Saute the onions for 3 minutes.</li>

<li>Add 3 cloves of garlic.</li>

<li>Cook for another 3 minutes.</li>

<li>Eat.</li>

</ol>
  • 자동으로 넘버링 해준다.
  • type 속성으로 여러가지 타입의 넘버링을 할 수 있지만, CSS 설정하는 것이 좋다. HTML 4.01에서 deprecated 됐다.

용어와 설명을 표현하는 방법은?

<ul> 사용하기

  • 용어에만 따로 스타일을 적용해야 한다면?

<dl>, <dt>, <dd> 사용하기

<dl>

<dt>CSS</dt>

<dd>A simple mechanism for adding style (e.g. fonts, colors, spacing)

to Web documents.</dd>

<dt>XHTML</dt>

<dd>A family of current and future document types and modules that

reproduce, subset, and extend HTML, reformulated in XML.</dd>

<dt>XML</dt>

<dd>A simple, very flexible text format derived from SGML.</dd>

</dl>
  • term과 description에 각각 스타일을 적용할 수 있다.

'View > HTML/CSS' 카테고리의 다른 글

XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
top

TAG CSS, dl, HTML, ol, 웹 표준

Chapter 7. Anchors

View/HTML/CSS : 2008.03.23 15:18


페이지 내부로 이동하는 방법

비어있는 <a> 태그 사용하기

<p><a href="#oranges">About Oranges</a></p>

<a name="oranges"></a>
<h2>Oranges Are Tasty</h2>
  • 이동할 위치 위에 name속성을 사용하고 <a> 태그는 비어둔다.

헤더 내부에 <a>태그 사용하기

<p><a href="#oranges">About Oranges</a></p>

<h2><a name="oranges">Oranges Are Tasty</a></h2>
  • <a> 태그에 스타일을 적용하면 <h2> 태그에 적용한 스타일을 오버라이딩해버린다.
  • :link라는 pseudo-class를 사용하여 링크에 해당하는 스타일을 별도로 정의할 수 있다.

id 속성 사용하기

<p><a href="#oranges">About Oranges</a></p>

<h2 id="oranges">Oranges Are Tasty</h2>
  • 추가적인 <a> 태그를 사용하지 않아도 된다.
  • id 속성은 모든 엘리먼트에 붙일 수 있기 때문에, 어디든지 원하는 곳으로 이동하게 할 수 있다.
  • 다 좋은데, 몇몇 옛날 브라우저들이 id 속성을 인식하지 못한다.

전부 사용하기

<p><a href="#oranges">About Oranges</a></p>

<h2><a id="oranges" name="oranges">Oranges Are Tasty</a></h2>
  • 두 번째 방법과 마찬가지로, <a> 태그에 스타일 적용할 때 주의해야 함.

Extra Credit

<a> 태그의 title 속성

  • tooltip에 보여줄 내용을 적을 수 있다.
  • 사용자들에게 링크의 목적지에 대한 정보를 줄 수 있다.

a:link 스타일을 정의하여 링크에 해당하는 anchor에만 스타일을 적용할 수 있다.

a:link {

color: green;

text-decoration: none;

font-weight: bold;

}
  • <h2><a id="oranges" name="oranges">Oranges Are Tasty</a></h2> 이렇게 href 속성이 없는 anchor 태그에는 적용되지 않는다.

배경주기

a:link {

padding-right: 15px;

background: url(link_icon.gif) no-repeat center right;

}
  • 링크의 오른쪽에 이미지를 삽입한다.

점선

a:link {

color: green;

text-decoration: green;

border-bottom: 1px dotted green;

}
  • 링크 아래에 표시하는 줄을 점선으로 표시한다.

다녀온 링크 표시

a:visited {

color: purple;

}
  • 이미 클릭했던 링크의 색을 다르게 표시해준다.

마우스를 링크 위에 올릴 때

a:hover {

color: blue;

border-bottom: 1px solid blue;

}

클릭하는 순간

a:active {

color: red;

}

순서

  • LoVe/HAte 순서대로 정의해야 스타일이 섞이지 않는다.
  • a:link, a:visited, a:hober, a:active

'View > HTML/CSS' 카테고리의 다른 글

Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
Chapter 3. Tables are Evil?  (0) 2008.03.18
top

TAG A, CSS, HTML, 웹 표준

Chapter 6. Strong, EM and Other Phrase Elements

View/HTML/CSS : 2008.03.23 15:17


표현 vs 구조

왜 <b>나 <i> 대신에 <strong>이나 <em>을 사용해야 하는가?

  • 표현법을 알려주는것이 아니라 의미와 구조를 설정하기 위해서다.
  • <em>은 emphasis 강조, <strong>은 strong 강한 강조: 이 둘을 어떻게 표현하느냐는 브라우저에 달려있다. 보통은 <em>은 이탤릭체로, <strong>은 굵은 글씨로 표현한다.
  • <b>와 <i>는 표현을 어떻게 할지 나타낼 뿐이다.

링크

  • 링크를 굵은 글씨나 이탤릭체로 표현하고 싶을 때는 CSS로 다음과 같이 설정한다. 표현과 관련된 것이니까...
#sidebar a {
font-weight: bold;
}

#sidebar a {
font-style: italic;
}

굵은 이탤릭체

  • 젤 먼저 얼마나 중요한지 선택하여 <em>이나 <strong> 둘 중 하나를 선택한다.
Building sites with web standards can be <em>fun</em>!

<span> 사용하기

Building sites with web standards can be <em><span>fun</span></em>!

em span {

font-weight: bold;

}
  • 구조와 관계없는 태그를 삽입하였기 때문에, 의미 구분을 제대로 하지 못했다.

class 사용하기

Building sites with web standards can be <em class="bold">fun</em>!

em.bold {

font-weight: bold;

}
  • 이와 반대로 <string> 태그에 italic을 CSS로 설정할 수도 있다.
Building sites with web standards can be <strong class="italic">fun</strong>!

strong.italic {

font-style: italic;

}

Extra Credit

<cite>

  • "<cite>: Contains a citation or a reference to other sources."

<abbr> and <acronym>

  • <abbr>: Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.)
  • <acronym>: Indicates an acronym (e.g., WAC, radar, etc.)
  • 흠.. 두 개 차이가 뭐지..

<code>

  • XHTML 페이지에 소스코드를 적을 때 사용.

<samp>

  • 프로그램이나 스크립트의 예제 결과를 나타낼 때 사용.

<var>

  • <samp>와 비슷하게, <var>는 프로그램 파라미터나 변수를 나타낼 때 사용.

<kbd>

  • 사용자가 입력할 값을 표현할 때 사용.

'View > HTML/CSS' 카테고리의 다른 글

Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
Chapter 3. Tables are Evil?  (0) 2008.03.18
Chapter 2. Headings  (0) 2008.03.18
top


Chapter 5. Forms

View/HTML/CSS : 2008.03.23 15:13


폼을 구성하는 방법

<table> 사용하기

<form action="/path/to/script" method="post">

<table>

<tr>

<th>Name:</th>

<td><input type="text" name="name" /></td>

</tr>

<tr>

<th>Email:</th>

<td><input type="text" name="email" /></td>

</tr>

<tr>

<th>&nbsp;</th>

<td><input type="submit" value="submit" /></td>

</tr>

</table>

</form>
  • 복잡한 폼을 표현할 때에 유용하다.

<br/> 사용하기

<form action="/path/to/script" method="post">
<p>

Name: <input type="text" name="name" /><br />

Email: <input type="text" name="email" /><br />

<input type="submit" value="submit" />

</p>
</form>
  • <br/> 간격이 좀 좁다.
  • 줄도 좀 안 맞는다.
  • CSS로 margin을 줘서 해결할 수 있다.
input {

margin: 6px 0;

}
  • input 컴포넌트의 위와 아래에 6px의 간격을 준다.

<p> 사용하기

<form action="/path/to/script" id="thisform" method="post">

<p><label for="name">Name:</label><br />

<input type="text" id="name" name="name" /></p>

<p><label for="email">Email:</label><br />

<input type="text" id="email" name="email" /></p>

<p><input type="submit" value="submit" /></p>

</form>
  • 각각의 컴포넌트를 <p>로 묶었다.
  • margin은 CSS로 처리할 수 있다.
#thisform p {

margin: 6px 0;

}
  • <label>의 for 속성과 <input>의 id에 같은 값을 설정하여 둘을 묶을 수 있다.
  • 그렇게 하면, 해당하는 컴포넌트와 label같의 구조적인 의미를 묶을 수 있고, label을 클릭하여 해당 컴포넌트에 영향을 줄 수 있어서 클릭이 가능한 범위가 늘어난다.

Form 정의하기

<form action="/path/to/script" id="thisform" method="post">

<dl>

<dt><label for="name">Name:</label></dt>

<dd><input type="text" id"name" name="name" /></dd>

<dt><label for="email">Email:</label></dt>

<dd><input type="text" id="email" name="email" /></dd>

<dt><label for="remember">Remember this info?</label></dt>

<dd><input type="checkbox" id="remember" name="remember" /></dd>

<dt><input type="submit" value="submit" /></dt>

</dl>

</form>
  • <dl>: definition list 사용하기. chapter8에서 자세히 다룬다.
  • label은 <dt>로 감싸고 컴포넌트는 <dd>로 감싼다. 스타일 적용하지 않으면 <dd>들은 기본으로 들여쓰기 해준다. 따라서 어긋나 있다. CSS없이 못 쓰겟다.
form dd {

margin: 0;

}



form dt {

float: left;

padding-right: 10px;

}
  • <dt>와 <dd>가 같은 줄에 놓이게 된다. <dt> 오른쪽으로 10px 간격을 주고 <dd>가 자리를 잡는다.

Extra Credit

<input>의 tabindex 속성 사용하기

<form action="/path/to/script" id="thisform" method="post">

<p><label for="name">Name:</label><br />

<input type="text" id="name" name="name" tabindex="1" /></p>

<p><label for="email">Email:</label><br />

<input type="text" id="email" name="email" tabindex="2" /></p>

<p><input type="checkbox" id="remember" name="remember"

tabindex="3" />

<label for="remember">Remember this info?</label></p>

<p><input type="submit" value="submit" tabindex="4" /></p>

</form>
  • tab키를 눌러서 컴포넌트 순회하는 순서를 설정할 수 있다.

<label>의 accesskey 속성 사용하기

<form action="/path/to/script" id="thisform" method="post">

<p><label for="name" accesskey="9" >Name:</label><br />

<input type="text" id="name" name="name" tabindex="1" /></p>

<p><label for="email">Email:</label><br />

<input type="text" id="email" name="email" tabindex="2" /></p>

<p><input type="checkbox" id="remember" name="remember"

tabindex="3" />

<label for="remember">Remember this info?</label></p>

<p><input type="submit" value="submit" tabindex="4" /></p>

</form>
  • label의 accesskey에 설정한 번호를 누르면 해당 label과 묶여있는 컴포넌트로 커서가 이동한다.
  • 검색창 같이 자주 사용하는 컴포넌트에 달아두면 유용하다.
  • 윈도우에서는 ALT + 숫자, Mac에서는 Command + 숫자를 눌려야 한다.

스타일

  • 폼 내부의 모든 엘리먼트에 공통으로 적용할 것과 그 중 일부에만 적용할 스타일을 구분하여 설정 한다.
#thisform {

font-family: Georgia, serif;

font-size: 12px;

color: #999;

}



#thisform label {

font-family: Verdana, sans-serif;

font-weight: bold;

color: #660000;

}
  • thisform id를 가진 form안에 있는 label들은 font-size: 12px; 속성을 상속받는다. color는 재정의해서 #660000; 값을 사용한다.

<fieldset> 사용하기

  • 필드들을 그룹핑 할 수 있다.
  • <legend>를 사용해서 그룹핑 박스에 이름을 설정할 수 있다.
#thisform fieldset {

border: 1px solid #ccc;

padding: 0 20px;

}

#thisform legend {

font-family: arial, sans-serif;

font-weight: bold;

font-size: 90%;

color: #666;

background: #eee;

border: 1px solid #ccc;

border-bottom-color: #999;

border-right-color: #999;

padding: 4px 8px;

}
  • 이미 form에 있는 <p>에서 충분히 padding을 설정했기 때문에, filedset의 위와 아래의 padding을 0으로 설장하고, 오른쪽과 왼쪽은 20px로 설정한다.
  • legend의 fond-size는 thisform에서 설정한 fond-size 크기에 비례하도록 %를 사용해서 설정한다.

'View > HTML/CSS' 카테고리의 다른 글

Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
Chapter 3. Tables are Evil?  (0) 2008.03.18
Chapter 2. Headings  (0) 2008.03.18
Chapter 1. Lists  (0) 2008.03.18
top

TAG CSS, dd, dl, DT, form, HTML, p, 웹 표준

Chapter 4. Quatations

View/HTML/CSS : 2008.03.23 15:11


Quotations을 표현하는 방법

의미의 부재

<p>"Misquotations are the only quotations that are never

misquoted."</p>

<p>&#8212; Hesketh Pearson</p>
  • 본문의 다른 부분과 확연히 다른 어떤 스타일을 적용할 수가 없다.

class 사용하기

<div class="quotation">

<p>Misquotations are the only quotations that are never

misquoted.</p>

<p>&#8212; Hesketh Pearson </p>

</div>
  • <div> 태그로 감싸고 CSS로 스타일을 줄 수 있다.
  • 하지만 CSS를 지원하지 않는 옛날 브라우저들에게는 안 통한다.
  • <div> 태그로 코드가 금방 지져분해질 것이다.

<blockquote>가 짱

  • 본문에 구조적인 의미를 부여할 수 있다.
  • CSS가 안 통해서 들여쓰기 해준다.
  • 별도의 스타일을 적용할 수 있다.
  • 단, 들여쓰여진 본문을 표현하기 위한 용도로 이것을 사용하는 것은 안 좋은 습관이다.

Extra Credit

cite 속성 추가하기

  • 해당하는 부분의 글이 어디에서 참조됐는지 표현할 수 있다.
  • 하지만, 현재 대부분의 브라우저들은 이 기능을 지원하고 있지 않다.

inline quotation

  • <q> </q>를 사용한다.
  • lang 속성을 사용해서 언어에 맞는 quatation을 사용할 수 있다. www.w3.org/TR/html4/struct/dirlang.html#langcodes 찾조

'View > HTML/CSS' 카테고리의 다른 글

Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
Chapter 3. Tables are Evil?  (0) 2008.03.18
Chapter 2. Headings  (0) 2008.03.18
Chapter 1. Lists  (0) 2008.03.18
top


Chapter 4. Quatations

View/HTML/CSS : 2008.03.20 10:02



Quotations을 표현하는 방법

의미의 부재

<p>"Misquotations are the only quotations that are never

misquoted."</p>

<p>&#8212; Hesketh Pearson</p>
  • 본문의 다른 부분과 확연히 다른 어떤 스타일을 적용할 수가 없다.

class 사용하기

<div class="quotation">

<p>Misquotations are the only quotations that are never

misquoted.</p>

<p>&#8212; Hesketh Pearson </p>

</div>
  • <div> 태그로 감싸고 CSS로 스타일을 줄 수 있다.
  • 하지만 CSS를 지원하지 않는 옛날 브라우저들에게는 안 통한다.
  • <div> 태그로 코드가 금방 지져분해질 것이다.

<blockquate>가 짱

  • 본문에 구조적인 의미를 부여할 수 있다.
  • CSS가 안 통해서 들여쓰기 해준다.
  • 별도의 스타일을 적용할 수 있다.
  • 단, 들여쓰여진 본문을 표현하기 위한 용도로 이것을 사용하는 것은 안 좋은 습관이다.

Extra Credit

cite 속성 추가하기

  • 해당하는 부분의 글이 어디에서 참조됐는지 표현할 수 있다.
  • 하지만, 현재 대부분의 브라우저들은 이 기능을 지원하고 있지 않다.

inline quotation

  • <q> </q>를 사용한다.
  • lang 속성을 사용해서 언어에 맞는 quatation을 사용할 수 있다. www.w3.org/TR/html4/struct/dirlang.html#langcodes 찾조

'View > HTML/CSS' 카테고리의 다른 글

Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
Chapter 3. Tables are Evil?  (0) 2008.03.18
Chapter 2. Headings  (0) 2008.03.18
Chapter 1. Lists  (0) 2008.03.18
top


Chapter 3. Tables are Evil?

View/HTML/CSS : 2008.03.18 19:41


Tabular Data

  • Calendar
  • Spreadsheet
  • Chart
  • Schedule

<table> 사용하기

  • <caption>은 <table> 태그 안에 위치 시킨다.
  • <table>의 summary 속성에 설명을 달 수 있다.
  • 헤더는 <th>로 의미를 부여한다.
  • <th>의 id 속성과 <td>의 headers 속성에 동일한 값을 사용하여 둘의 관계를 표현할 수 있다.
  • abbr 속성을 사용하여 너무 길어서 짤리는 경우에 사용하도록 할 수 있다.
  • <thead>, <tbody>, <tfoot>을 사용하여 테이블 몸체만 따로 스크롤 할 수 있도록 할 수 있다.
  • 브라우저들이 <thead>와 <tfoot>을 먼저 읽도록 <tbody> 위에 놓는다.

CSS

Grid 만들기

table {

border-top: 1px solid #999;

border-left: 1px solid #999;

}

th, td {

border-right: 1px solid #999;

border-bottom: 1px solid #999;

}
  • th와 td의 오른쪽과 아래에 굵기가 1인 검은색 테두리 설정.

틈새 없애기

table {

border-top: 1px solid #999;

border-left: 1px solid #999;

border-collapse: collapse;

}

th, td {

padding: 10px;

border-right: 1px solid #999;

border-bottom: 1px solid #999;

}
  • th, td에 padding을 줘야 Mac용 IE에서도 잘 보인다.
  • padding: 10px 5px 2px 10px -> 위 10px, 오른쪽 5px, 아래 2px, 왼쪽 10px 순으로 padding 적용.

'View > HTML/CSS' 카테고리의 다른 글

Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
Chapter 3. Tables are Evil?  (0) 2008.03.18
Chapter 2. Headings  (0) 2008.03.18
Chapter 1. Lists  (0) 2008.03.18
top


Chapter 2. Headings

View/HTML/CSS : 2008.03.18 19:41


문서의 제목을 나타내는 방법

CSS를 사용하기

pan class="heading">Super Cool Page Title</span>

.heading {

font-size: 24px;

font-weight: bold;

color: blue;

}
  • CSS를 인식하지 못하는 장치나, 외부 CSS로 빼냈을 때는 예전 브라우저들이 인식하지 못할 수도 있다.
  • 검색 엔진이 <span>태그로 둘러쌓인 부분은 중요하게 여기지 않는다.
  • <span>은 inline 엘리먼트기 때문에, 추가적으로 불필요한 <p>나 <div> 태그와 같은 block-level 엘리먼트를 사용해야한다.

p와 b 콤보 사용하기

<p><b>Super Cool Page Title</b></p>
  • CSS를 인식하지 못하더라도 굵게 표시할 수는 있다.
  • 검색 엔진이 <b>로 둘러쌓인 부분을 중요하게 인식하지 않는다.

<h1> 부터 <h6> 사용하기

  • 적달한 헤딩 태그는 표현이 아니라 의미에 가깝다.
  • <h1>, <h2>가 너무 크게 표현되서 기피하는 경향이 있는데, 이것은 CSS로 조정이 가능하다.
  • 검색 엔진이 이 태그들을 중요하게 여긴다.
  • 헤딩 레벨 순서를 건너뛰지 않는 것이 좋다.

간단한 스타일 추가하기

<h1>Super Cool Page Title</h1>

h1 {

font-family: Arial, sans-serif;

font-size: 24px;

color: #369;

}
  • 글자체와 크기 그리고 색상 설정하기.

배경 추가하기

background: url(10x10.gif) repeat-x  bottom;

background: url(icon.gif) no-repeat 0 50%;
  • repeat-x 는 수평으로 반복. repeat-y는 수직으로 이미지 반복.
  • no-repeat은 한 번만 보여주겠다는 설정. 0 50%는 맨 왼쪽 가운데(수직)에 위치시킨다.

카멜레온 효과

<h3><img src="http://images.fastcompany.com/icon/first_imp.gif" width="13" height="13" alt="*" /> FIRST IMPRESSION</h3>


h3 img {

background: #696;

vertical-align: middle;

}
  • 배경색을 주고, 투명한 배경에 하얀색으로 그린 이미지를 삽입한다.

'View > HTML/CSS' 카테고리의 다른 글

Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
Chapter 3. Tables are Evil?  (0) 2008.03.18
Chapter 2. Headings  (0) 2008.03.18
Chapter 1. Lists  (0) 2008.03.18
top


Chapter 1. Lists

View/HTML/CSS : 2008.03.18 19:40


목록을 표편하는 방법

<br/> 사용

Apples<br />

Spaghetti<br />

Green Beans<br />

Milk<br />
  • CSS를 적용할 수가 없다.
  • 글자가 길면 다음 줄로 넘어가 버리는데, 이 때 알아보기가 쉽지 않다.
  • 비추.

<ol>, <li> 사용

<ul>

<li>Apples</li>

<li>Spaghetti</li>

<li>Green Beans</li>

<li>Milk</li>

</ul>
  • 아이템 앞에 bullet을 붙인다.
  • <ul> 이나 <ol>의 하위 엘리먼트로 사용한다.
  • 앞에 bullet이 붙어있기 때문에 다음 줄로 넘어가도 헷갈리지 않는다.
  • block-level 엘리먼트다.

Block-level VS Inline

  • block-level 엘리먼트: 자신만의 줄을 가지고 있으며, 줄바꿈을 한다. 다른 block-level 엘리먼트나 inline 엘리먼트를 포함할 수 있다.
  • inline 엘리먼트: 다른 inline 엘리먼트와 같은 줄에 보여진다. 오직 inline 엘리먼트만 포함할 수 있다.

Bullet 때어내기

  • bullet을 보고 싶지 않을 때는 CSS를 사용해서 때어낼 수 있다.
ul {

list-style: none;

}
  • 들여쓰기도 보고 싶지 않을 때는 CSS에 padding을 0으로 설정한다.
ul {

list-style: none;

padding-left: 0;

}
  • Bullet 대신에 이미지를 사용할 수 있다.
ul {

list-style-image: url(fancybullet.gif);

}
  • 하지만 위의 방법은 특정 브라우저에서는 이상하게 보일 수 있다.
ul {

list-style: none;

}



li {

background-image: url(fancybullet.gif) no-repeat 0 50%;

padding-left: 17px;

}
  • 기본 bullet을 없애고, li의 배경에 그림을 넣는다.

'View > HTML/CSS' 카테고리의 다른 글

Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
Chapter 3. Tables are Evil?  (0) 2008.03.18
Chapter 2. Headings  (0) 2008.03.18
Chapter 1. Lists  (0) 2008.03.18
top


4. CSS 적용




사용자 삽입 이미지

얼추 페이지들이 만들어졌습니다. 확장자만 JSP로 바꿨을 뿐 모두 빈껍데기 라는거~

'Hibernate > 주소록 만들기' 카테고리의 다른 글

6.1. 모델 간의 연관 관계 파악  (0) 2007.01.18
6. 연관 관계 매핑하기  (0) 2007.01.18
5-4. DAO 테스트 만들기  (2) 2007.01.11
5-3. DAO 만들기  (0) 2007.01.11
5-2. 간단한 모델 테스트  (0) 2007.01.11
5-1. 모델 만들기  (0) 2007.01.11
5. 모델, DAO 까지 개발 공정  (0) 2007.01.11
4. CSS 적용  (0) 2007.01.08
3. 화면 만들기  (0) 2007.01.07
2. 주소록 ERD 수정  (0) 2007.01.06
1. 주소록 ERD  (0) 2007.01.06
top


CSS 공부 중



참초 : http://www.w3schools.com/css/css_syntax.asp
위 사이트에서 CSS 기본 문법을 공부 했습니다.

기본 구조는 다음과 같습니다.
selector {property: value}

selector는 HTML 태그나 엘리먼트(ex. body)가 오는 자리이고
property는 기본 속성을 바꾸고 싶은 어트리뷰트(ex. bgcolor)가 오는 자리입니다.
value는 속성에 대입할 값(ex. red)입니다.

property와 value 사이에는 :으로 구분을 합니다.
예)
body {color: black}

속성이 여러 단어로 된 경우 ""으로 묶어 줍니다.
예)
p {font-family: "sans serif"}

여러 속성을 지정할 경우 다음과 같이 ; 으로 구분 합니다.
예)
p {
text-align: center;
color: black;
font-family: arial
}

여러개의 태그에 공통으로 들어있는 속성을 변경하고 싶을 때 selector를 여러개 지정할 수 있습니다.
예)
h1,h2,h3,h4,h5,h6
{
color: green
}

같은 속성에 다른 값을 대입하는 여러 개의 class들을 만들 수 있습니다. 이 것을 적용하고 싶을 때는 태그에 class 속성에서 사용할 class를 지정해 주어야 합니다.
css class 예)
p.right {text-align: right}
p.center {text-align: center}
css 사용 예)
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>

여러개의 class를 하나의 태그에 적용하고 싶을 때는 다음과 같이 스페이스로 공간을 띄고 계속 적어주면 됩니다.
예)
<p class="center bold">
This is a paragraph.
</p>

모든 태그들의 속성에 적용할 class를 정의할 때는 다음과 같이 합니다.
예)
.center {text-align: center}

id selector는 #로 시작합니다.
예)
#green {color: green}

id와 클래스와 사이의 차이점은 . 대신 #을 사용한다는 것이고 id선택자는 한 페이지에서 오직 하나의 엘리먼트와 일치해야 한다는 것입니다.

'Spring > 주소록 만들기' 카테고리의 다른 글

Alt + Shift + X, R 주의  (2) 2006.12.25
Web Application Context 작성  (3) 2006.12.25
Spring MVC 구동을 위한 web.xml 작성  (0) 2006.12.25
이클립스에서 웹 프로젝트 생성하기  (0) 2006.12.25
Spring MVC 공부 중  (10) 2006.12.23
CSS 공부 중  (2) 2006.12.21
주소록 화면 완성  (3) 2006.12.19
중간점검  (0) 2006.12.17
HTML 공부 중 2탄  (2) 2006.12.14
Strict HTML 4.01 지침서  (6) 2006.12.14
HTML 공부 중  (2) 2006.12.13
top

TAG CSS