CSS 정리 03
31 Jan 2019
Reading time ~3 minutes
CSS 정리 03 - CSS 페이지 디자인, attribute(3), HTML5 Semantic Tag, 부모 자식 선택자
CSS 페이지 디자인
- 디자인 추세 : frame태그 -> table태그 -> div태그
- div로 디자인을 한다.
- 가운데 정렬, 높이와 넓이를 설정해준다.
- 각 div는 유일한 id selector를 설정해준다.
- header에는 logo, menu등이 들어간다.
- menu는 navigation bar에 속한다.
- container에는 제공할 서비스가 들어간다.
- footer에는 회사에 대한 정보가 들어간다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/css/main_v20190130.css"/>
<style type="text/css">
#wrap { margin:0px auto; width:800px; height:860px; background-color:#FF0000 }
#header { width:800px; height:140px; background-color:#FF00FF }
#container { width:800px; height:600px; background-color:#FFFF00 }
#footer { width:800px; height:120px; background-color:#0000FF }
</style>
</head>
<body>
<div id="wrap">
<div id="header">header : 800(w) x 140(h)</div>
<div id="container">container : 800(w) x 600(h)</div>
<div id="footer">footer : 800(w) x 120(h)</div>
</div>
</body>
</html>
- 처음엔 wrap에 색을 넣어 전체 영역을 잡는다.
- header, container, footer의 영역을 조절하여 wrap이 모두 가려지도록 공간을 분할한다.
- 영역을 모두 나눈 후 모든 배경색을 제거한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/css/main_v20190130.css"/>
<style type="text/css">
#wrap { margin:0px auto; width:800px; height:860px; }
#header { position:relative; width:800px; height:140px; background:#FFFFFF url(http://localhost:8080/html_prj/common/images/header_bg.png) repeat-x; }
#headerTitle { position:absolute; top:45px; left:280px; font-size:35px; font-family:monaco, HY견고딕, 고딕; font-weight:bold; color:white; }
#container { width:800px; height:600px; }
#footer { width:800px; height:120px; }
#footerTitle { float:right; font-weight:bold; font-size:15px; padding-top:20px; padding-right:20px }
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="headerTitle">SIST Class4</div>
</div>
<div id="container">
</div>
<div id="footer">
<div id="footerTitle">copyright© all right reserved. class4 </div>
</div>
</div>
</body>
</html>
CSS 속성 - 그림자
- 문자열 그림자
- 좌표는 음수도 줄 수 있다.
text-shadow:x좌표 y좌표 번짐값 그림자색;
- 객체 그림자
box-shadow:x좌표 y좌표 번짐값 그림자색;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
span { font-size:80px; text-shadow: -10px -5px 10px #000000;}
div { width:200px; height:100px; box-shadow: 10px 5px 10px #000000 }
</style>
</head>
<body>
<span>오영근</span>
<div>박스쉐도우</div>
</body>
</html>
CSS 속성 - radius
- 모서리를 둥글게 만들 때 사용
border-radius:수치px
- 모서리 별로 둥근정도를 다르게 설정가능
border-radius:좌상px 우상px 우하px 좌하px;
.radius { border:1px solid #333; width:300px; height:100px; margin-top:20px; border-radius:10px; }
<div class="radius">
이번주는 SKY캐슬 막방입니다.<br/>
김주영선생님은 과연 교도소에서 재소자들을 SKY를 보낼 수 있을 것인가..
</div>
.radius { border:1px solid #333; width:300px; height:100px; margin-top:20px; border-radius:0px 10px 0px 10px }
- 원을 만들 수도 있다.
.radius1 { border:1px solid #333; width:200px; height:200px; margin-top:20px; border-radius:100px 100px 100px 100px }
CSS 속성 - overflow
- div 크기보다 내용이 더 많을 때
- 스크롤바를 생성할 수 있다.
- 약관같은 컨텐츠 생성할 때 사용하면 좋다.
overflow:auto;
HTML5 Semantic Tag
- 디자인을 구분하기 위한 의미적인 태그
- header 태그
- 디자인의 header 부분을 알려주는 용도
- nav 태그
- 제공되는 서비스를 이용하기 위해 만들어 놓은 부분(menubar)
- footer 태그
- 디자인의 footer 부분
- section 태그
- 구분되는 하나의 영역
- aside 태그
- 주 서비스 외에 부가적인 서비스 영역
- article 태그
- 게시물을 보여주는 영역
부모 자식 선택자
선택자1 선택자2 { 속성1:속성값; 속성2:속성값; .. . }
- 태그 이름 사이에 공백을 넣어 부모 태그 하위에 있는 태그에 스타일을 적용시키는 것
- 아이디와 클래스도 사용가능
<style type="text/css">
div .this-class { color:#FF0000 }
div #that-id { color:#0000FF }
div.this-class sometag { color:#00FF00 }
div#that-id anothertag { color:#00FFFF }
</style>
</head>
<body>
<div>
<div class="this-class">안녕하세요.
<sometag>이것은 sometag태그입니다.</sometag>
</div>
<div id="that-id">반갑습니다.
<anothertag>이것은 anothertag입니다.</anothertag>
</div>
</div>
</body>
</html>
- 아래처럼 ‘>’를 사용한 선택자도 있음
- 공백과 비슷하지만 두 태그 사이에 다른 태그가 없는 순수 부모-자식 태그간 관계만 적용됨
ul > li { list-style: none }