CSS - Whiteship

[CSS] 탭 만들기

탭에 들어갈 요소들을 일단 ul li 엘리먼트를 사용하여 내용을 정의한다. <ul id=”nav”> <li id=”t-email”><a href=””>E-MAIL</a></li> <li id=”t-reportl”><a href=”

CSS

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

링크를 걸면 보통 텍스트 부위만 클릭할 수 있는데, 해당 블럭을 클릭할 수 있게 수정하면 좀 더 편리함. display:block; => a 엘리먼튼에 display:block을 적용함. 마우스를 올렸을 때 배경색이나 배경 이미지를 변경하여 현재 선택하려는 요소가 다른 것과 구분되게 함. a:hover { background-color: #94B8E9;} => hover 유사 클래스를 사용하여 간단하게 롤오버

CSS

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

가로 폭 1px 짜리 그라데이션 이미지를 만들고, 가로로 쭉 반복 시켜줌. background: url(배경이미지) repeat-x; => 배경 이미지를 가로로 반복시킴. 세로로 반복하는 repeat-y도 있음. 배경이 커서 그라데이션 이미지로 커버가 안 될 때는 그라데이션이 끝나는 지점과 같은 색을 배경으로 깔아줌. background: 색상코드 url(images/new/level1_bg.png) repeat-x;

CSS

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:

CSS

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; } 줄 높이를

CSS

Chapter 10. Applying CSS

CSS를 문서에 적용하는 방법 <style> 엘리먼트 <style type="text/css"> <![CDATA[ ... CSS declarations here ... ]]> </style> embedded style sheet라고도 하며, CSS를 이해하지 못하는 브라우저들을 위해 CDATA 주석 안에 둔다. 페이지를 로딩할 때마다 스타일을 정의한 부분도 매번 다운로드 된다. 여러 페이지에서 동일한 스타일을 사용하고

block 엘리먼트 사용하기

Chapter 9. Minimizing Markup

태그 최소화 하기 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&

CSS

Chapter 8. More Lists

순서가 있는 목록을 표현하는 방법 <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>

A

Chapter 7. Anchors

페이지 내부로 이동하는 방법 비어있는 <a> 태그 사용하기 <p><a href="#oranges">About Oranges</a></p><a name="oranges"></a><h2>Oranges Are Tasty</h2> 이동할 위치 위에 name속성을 사용하고 <a&

CSS

Chapter 6. Strong, EM and Other Phrase Elements

표현 vs 구조 왜 <b>나 <i> 대신에 <strong>이나 <em>을 사용해야 하는가? 표현법을 알려주는것이 아니라 의미와 구조를 설정하기 위해서다. <em>은 emphasis 강조, <strong>은 strong 강한 강조: 이 둘을 어떻게 표현하느냐는 브라우저에 달려있다. 보통은 <

CSS

Chapter 5. Forms

폼을 구성하는 방법 <table> 사용하기 <form action="/path/to/script" method="post"> <table> <tr> <th>Name:</th> <td><input type="text" name="name" /></td> </tr> <tr> <th&

blockquote

Chapter 4. Quatations

Quotations을 표현하는 방법 의미의 부재 <p>"Misquotations are the only quotations that are nevermisquoted."</p><p>— Hesketh Pearson</p> 본문의 다른 부분과 확연히 다른 어떤 스타일을 적용할 수가 없다. class 사용하기 <div class="quotation"> <p>Misquotations are

blockquate

Chapter 4. Quatations

Quotations을 표현하는 방법 의미의 부재 <p>"Misquotations are the only quotations that are nevermisquoted."</p><p>— Hesketh Pearson</p> 본문의 다른 부분과 확연히 다른 어떤 스타일을 적용할 수가 없다. class 사용하기 <div class="quotation"> <p>Misquotations are

CSS

Chapter 3. Tables are Evil?

Tabular Data Calendar Spreadsheet Chart Schedule <table> 사용하기 <caption>은 <table> 태그 안에 위치 시킨다. <table>의 summary 속성에 설명을 달 수 있다. 헤더는 <th>로 의미를 부여한다. <th>의 id 속성과 <td>의 headers 속성에

CSS

Chapter 2. Headings

문서의 제목을 나타내는 방법 CSS를 사용하기 pan class="heading">Super Cool Page Title</span>.heading { font-size: 24px; font-weight: bold; color: blue; } CSS를 인식하지 못하는 장치나, 외부 CSS로 빼냈을 때는 예전 브라우저들이 인식하지 못할 수도 있다. 검색 엔진이 <span>태그로 둘러쌓인 부분은 중요하게 여기지 않는다. <

CSS

Chapter 1. Lists

목록을 표편하는 방법 <br/> 사용 Apples<br />Spaghetti<br />Green Beans<br />Milk<br /> CSS를 적용할 수가 없다. 글자가 길면 다음 줄로 넘어가 버리는데, 이 때 알아보기가 쉽지 않다. 비추. <ol>, <li> 사용 <ul>

CSS

4. CSS 적용

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

CSS

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