(1) 원인 : 왜 Table을 사용하지 않고, div+css로 하는가? 링크 따라가기
: 레이아웃과 스타일을 따로 분류해서 보기 편하고 유지하기 쉽도록 제작하기 위해서
: 퍼포먼스에서 table보다 훨씬 빠르며, 값싸다 (외국에서는 바이트로 값을 낸다나)
CSS : 스타일 시트 / div로 만든 집에 색을 입히고 가구를 들여놓는다.
(2) 스타일 지정방식 : CSS을 div에 첨부하는 방식 (작은범위에서 큰범위순으로)
<div style="background#000; color:#fff;"></div>
2. <head></head>사이에 들어가는 internal Style - 해당 파일 내 에서는 쓸 수 있다.
3. 외부 링크 External Style - 링크만 걸어주면 어디서든 쓸 수 있다.
<head>사이에 <link href="파일이름.css" rel="stylesheet" type="text/css" />
어쨌든 3번이 따로 관리하니까 좋다.
(3) 문법 : CSS내의 문법
아이디인 경우는 앞에 #을 붙인다. 예) #Name
선택자 { 속성 : 값; } 예) html {margin: 0; padding: 0;}
그럼 클래스는 뭐고 아이디란 무엇인가?
이름을 설정하는 방식의 분류랄까..
클래스(class) : 한 페이지에서 클래스는 여러번 중복 사용 가능, 자기들끼리 중복 사용 가능하다.
아이디 (id) : 한 페이지에서 딱 한.번만 쓴다
Class로 이름을 준 속성은 여러번 쓸 수 있으니 통일되는 스타일에 주로 쓰면 좋고
id로 이름을 준 속성은 한번만 쓰니 큰 골격에 쓰는 것이 좋다 (Top/LeftMenu/Content/Footer)
(4) 주석 넣기
설명을 사이사이에 넣고 싶을 때 /* 설명을 넣으세요 */
(5) 연습
- div를 작성한 골격의 html파일 : document.html이라 정의한다
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
</style>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div class="login"></div>
<div class="notice"></div>
</div>
<div id="footer"></div>
</body>
</html>
- 골격의 위치와 사이즈를 설정해준 CSS파일 : test.css라고 정의한다.
#main{position:relative; width:1000px; height:400px; border:1px solid #09f;}
.login{position:absolute; top:10px; right:10px; width:200px; height:200px; border:1px solid #09f;}
.notice{position:absolute; bottom:20px; left:30px; width:200px; height:200px; border:1px solid #09f;}
#footer{position:relative; width:1000px; height:200px; border:1px solid #09f;}
외국에서는 디자이너가 CSS를 관리하는 것을 당연하게 생각한다고 하니 좀 더 체계적으로 배워야 할 것 같네요.
'개인적인 것 > 주워 배운 것들' 카테고리의 다른 글
| 알아두면 좋은 해외 웹사이트 소개 (0) | 2015.01.05 |
|---|---|
| 메타 태그 - 웹사이트의 기본 정보를 알려주는 태그 (0) | 2014.03.06 |
| 애자일(Agile)에 대해 알아보기 (0) | 2014.02.26 |
| 그리드(Grid) 디자인에 유용한 그리드 시스템 웹사이트 (0) | 2012.10.15 |
| Google web font site 이용하기 (0) | 2012.10.11 |