html 구조와 설계(뼈대)
css 스타일 디자인(살)
선택자
캐스케이딩
박스모델
디스플레이
위치제어:float,
position
overflow
vertical-align
line-height
css 주석방식
/*주석*/
<div style="border:1px #f00 solid; width:200px; height:200px;"></div>
속성:값; 속성:값;
id=주민등록번호같은
class=직업군
width값을 넣지않으면 width:auto
auto는 나의 부모만큼.
현재 박스의 부모는 바디
#box{width:100%; height:100px; border:1px red solid; margin-left:200px;}
--> 100%+100px(스크롤생김)
#box{width:auto; height:100px; border:1px red solid; margin-left:200px;}
--> 100px+auto
<style>
.menu{width:400px; height:200px, border:1px #f00 solid;}
.inner{border:1px f00 solid; width:auto; margin:10px;}
</style>
<body>
<div class="menu">
<div class="inner">메뉴리스트</div>
</div>
</body>
menu에 넓이는 절대값이고 값이 바뀔때마다 inner넓이를 auto로 하면 inner의 넓이가 margin10px로 자동으로 맞춰짐
=
height는 auto로 맞추면 컨텐츠만큼.(글씨를 넣거나하면 그만큼 늘어남)
height는 값을 주지않으면 오그라듬 (없음)
<head>
<style>
html{height:100%;}
body{height:100%;}
.box{border:1px #f00 solid; height:; height:100%;}
</style>
</head>
<body>
<div class="box"></div>
</body>
auto모르면
유지보수성이 덜어진다. 깨진다.
margin은 바깥여백. 위치이동X
margin:10px 20px 30px 40px; 시계방향으로 값이 들어감
:10px 20px-->2진수. 10 20 10 20 시계방향으로.
:10px 20px 30px-->마지막 left는 20px
왼쪽에 여백주고싶을때 margin-left10px 또는 margin:0 0 0 10
패딩과 규칙이 똑같음.
.box{border:1px #f00 solid; width:600px; height:100px; margin:0 auto;}
width값 절대값600에 margin 0 auto 0 auto 알아서 가운데 정렬.(브라우저 줄일때 margin이 변함)
.box{border:1px #f00 solid; width:auto; height:100px; margin:10px;}
width값 오토에 margin 10px 가운데 정렬.(브라우저 줄일때 margin10은 안변하고 width값이 변함)
border
border:1px #f00 solid
border-width:1px; border-color:#f00; border-style: solid;
border-width:1px 2px 3px 4px; border-color:red blue green orange; border-style: solid dotted dashed groove;
선을 없애려면 width값 0을 주거나 선은있는데 안보이게 할때 color에 transparent로 투명.
border:1px #f00 solid; border-bottom:0;
밑에만 없앨때
padding은 auto개념 X
/*css3*/
border-radius:10px(사각모서리에 라운드)
호환성이 낮다. css3라
http://www.w3schools.com/css/css_border.asp
.은 class를
#은 id를
max width 1024px; 1024이상으론 안커지고 이하로는 자유롭
min width 1024px; 1024부터는 크기 자유롭. 1024이하부턴 먹혀들어감
max height 200px; 텍스트에 맞춰늘어남. 최대200까지
min height 200px; 텍스트가 없어도 최소200. 그이상으로 늘어남
background
background-color:rgb(255,255,0);
#ff 00 00
0~9 A~F 16*16=256
255가 16진수로하면 ff
background-color:rgba(255,255,0,0.3);
a는 알파값 0.3 반투명--> css3에서밖에안됨
background-repeat:yes
no-repeat
repeat-x 가로로
repeat-y 세로로
background-position:50px 50px;
x y 절대값,상대값,지정값이 들어갈수도있다.
가로로 세로로 이동
background-position:right-top
right-botoom
left-top
left-bottom
centercenter
background-position:right 10px bottom 10px;
오른쪽에서10 밑에서 10떨어짐
gradation
http://www.colorzilla.com/gradient-editor/
