CSS [CSS] 탭 만들기 탭에 들어갈 요소들을 일단 ul li 엘리먼트를 사용하여 내용을 정의한다. <ul id=”nav”> <li id=”t-email”><a href=””>E-MAIL</a></li> <li id=”t-reportl&
CSS [CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기 링크를 걸면 보통 텍스트 부위만 클릭할 수 있는데, 해당 블럭을 클릭할 수 있게 수정하면 좀 더 편리함. display:block; => a 엘리먼튼에 display:block을 적용함. 마우스를 올렸을 때 배경색이나 배경 이미지를 변경하여 현재 선택하려는 요소가 다른 것과 구분되게 함. a:hover { background-color: #94B8E9;} =>
CSS [CSS]그라데이션 배경 사용하기 가로 폭 1px 짜리 그라데이션 이미지를 만들고, 가로로 쭉 반복 시켜줌. background: url(배경이미지) repeat-x; => 배경 이미지를 가로로 반복시킴. 세로로 반복하는 repeat-y도 있음. 배경이 커서 그라데이션 이미지로 커버가 안 될 때는 그라데이션이 끝나는 지점과 같은 색을 배경으로 깔아줌. background: 색상코드 url(images/new/
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>
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. 줄 높이 설정하기
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><
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.
A Chapter 7. Anchors 페이지 내부로 이동하는 방법 비어있는 <a> 태그 사용하기 <p><a href="#oranges">About Oranges</a></p><a name="oranges"></a><h2>Oranges Are Tasty</h2> 이동할
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&
blockquote Chapter 4. Quatations Quotations을 표현하는 방법 의미의 부재 <p>"Misquotations are the only quotations that are nevermisquoted."</p><p>— Hesketh Pearson</p> 본문의 다른 부분과 확연히 다른 어떤 스타일을 적용할 수가 없다. class 사용하기 <div class="quotation"
blockquate Chapter 4. Quatations Quotations을 표현하는 방법 의미의 부재 <p>"Misquotations are the only quotations that are nevermisquoted."</p><p>— Hesketh Pearson</p> 본문의 다른 부분과 확연히 다른 어떤 스타일을 적용할 수가 없다. class 사용하기 <div class="quotation"
CSS Chapter 3. Tables are Evil? Tabular Data Calendar Spreadsheet Chart Schedule <table> 사용하기 <caption>은 <table> 태그 안에 위치 시킨다. <table>의 summary 속성에 설명을 달 수 있다. 헤더는 <th>로 의미를 부여한다. <th>의 id 속성과
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>, <
CSS CSS 공부 중 참초 : http://www.w3schools.com/css/css_syntax.asp위 사이트에서 CSS 기본 문법을 공부 했습니다. 기본 구조는 다음과 같습니다. selector {property: value} selector는 HTML 태그나 엘리먼트(ex. body)가 오는 자리이고property는 기본 속성을 바꾸고 싶은 어트리뷰트(ex. bgcolor)가 오는 자리입니다.value는 속성에 대입할