개인적인 것/주워 배운 것들

Div와 CSS에 대한 간단요약

뉴질랜드 외국인 2012. 10. 15. 06:23
반응형



(1) 원인 : 왜 Table을 사용하지 않고, div+css로 하는가?  링크 따라가기 
: 레이아웃과 스타일을 따로 분류해서 보기 편하고 유지하기 쉽도록 제작하기 위해서
: 퍼포먼스에서 table보다 훨씬 빠르며, 값싸다 (외국에서는 바이트로 값을 낸다나)

div : division - 구역, 구분, 분할 / div로 집의 골조를 만든다
CSS : 스타일 시트 / div로 만든 집에 색을 입히고 가구를 들여놓는다.



(2) 스타일 지정방식 : CSS을 div에 첨부하는 방식 (작은범위에서 큰범위순으로)

1. 직접 스타일 지정하는 inline Style방식 - 이건 혼자만 쓸 수 있다.
<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
아이디인 경우는 앞에 #을 붙인다. 예) #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라고 정의한다.

*{margin:0; padding:0;}
#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를 관리하는 것을 당연하게 생각한다고 하니 좀 더 체계적으로 배워야 할 것 같네요.






반응형