박스모델
html 요소들을 박스형태로 그리기
패딩은 투명하므로 배경이미지와 배경색이 보이게 된다.
경계선 스타일
<body>
<p style="border-style:none;" >none</p>
<p style="border-style:dotted;" >dotted</p>
<p style="border-style:dashed;" >dashed</p>
<p style="border-style:solid;" >solid</p>
<p style="border-style:double;" >double</p>
<p style="border-style:groove;" >groove</p>
<p style="border-style:inset;" >inset</p>
<p style="border-style:outset;" >outset</p>
</body>
경계선의 폭 , 색상 , 둥근 경계선
<head>
<style>
p.thick {border-style: solid; border-width : thick; , border-color : green;}
p.medium {border-style : solid; border-width : medium;}
p.thin { border-style: solid; border-width : 1px;}
div {
border : 2px solid red;
border-radius : 25px;
}
</style>
</head>
<body>
<p class="thick" >경계선이 thick 으로 설정되었음</p>
<p class="medium" >경계선이 medium 으로 설정되었음</p>
<p class="thin" >경계선이 1px 으로 설정되었음</p>
<div>border-radius 속성을 사용하면 둥근 경계선 만들 수 있다.</div>
</body>
경계선 그림자
<head>
<style>
div {
width : 300px;
height : 50px;
background-color : green;
box-shadow : 20px 10px 5px #666666; //퍼짐정도 : 흐리고 진한정도
}
</style>
</head>
<body>
<div></div>
</body>
요소 크기 설정
<style>
#target1 {
width : 100px;
height : 50px;
background-color : yellow;
}
#target2 {
width : 100px;
height : 50px;
background-color : lightgreen;
}
</style>
<body>
<p id="target1">이것은 p요소입니다.</p>
<div id="target2">이것은 div 요소입니다.</div>
</body>
마진과 패딩 설정하기
auto : 브라우저가 마진을 계산한다.
length : 마진을 px, pt, cm 단위로 지정할 수 있다. 디폴트는 0px 이다.
% : 마진을 요소 폭의 퍼센트로 지정한다.
inherit : 마진이 부모 요소로부터 상속된다.
margin-top : 10px; margin-right : 10px; margin-left : 10px; margin-bottom: 10px ;
margin : 10px 20px 30px 40px ( top , right , bottom, left 순서 )
background : 한줄에서 모든 배경 속성을 정의한다.
background-attachment : 배경이미지가 고정되어 있는지 스크롤 되는지를 지정한다.
ex) background-attachment : fixed;
background-color : 배경 색을 정의한다.
background-image : 배경 이미지를 정의한다.
ex> background-image : url("./images/back1.jpg");
background-position : 배경 이미지의 시작위치를 지정한다.
background-repeat : 배경 이미지의 반복여부를 지정한다.
ex) background-reapeat : no-repeat;
배경이미지 크기
<style>
div{
width : 500px; height : 100px; --> div 자체 사이즈
background : url(../images/tree.jpg)
background-size : 100px 100px; --> 이미지부분사이즈인듯?
background-repeat : no-repeat;
}
</style>
<body>
<div>안녕하십니까 안녕하세요
</div>
</body>
링크 스타일
<style>
a:link {color : red;} 방문되지 않은 링크의 스타일
a:visited {color : green;} 방문된 링크의 스타일
a:hover 마우스가 위에 있을때의 스타일
a:active 마우스로 클릭되는 때의 스타일
</style>
<body>
<p>
<a href="" target="_blank">
</p>
리스트 스타일
기초 :
<ul></ul> -> unordered list 순서가 필요없는 목록
<ol></ol> -> ordered list 숫자나 알파벳 등 순서가 있는 목록
<dl></dl> -> definition list 의 약자로 용얼르 설명하는 목록
안에 나열하는애들이 <li></li>이다.
list-style : 리스트에 대한 속성을 한줄로 설정한다.
list-style-image : 리스트 항목 마커를 이미지로 지정한다
list-style-position : 리스트 마커의 위치를 안쪽인지 바깥쪽인지를 지정한다.
list-style-type : 모양지정한다.
ex) ul.style1 {list-style type : circle; } 동그라미
ul.style1 {list-style type : square; } 네모모양
ul.style1 {list-style type : upper-roman; } 로마숫자
ul.style1 {list-style type : lower-alpha; } a,b,c 모양
ex)
<style>
ul {
list-style : none l text-align : center;
border-top : 1px solid red;
border-bottom : 1px solid red; padding : 10px 0 ;
}
ul li {
display : inline ; text-transfor: uppercase;
padding : 0 10px; letter-spacing : 10px;
}
ul li a {text-decorration:none; color : black;
}
ul li a : hover {text-decoration : underline; }
</style>
ex)
<body>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Blog</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</body>
테이블 스타일
border : 테이블의 경계선
ex)
<style>
table, td, th { border : 1px solid blue;}
</style>
border-collapse : 이웃한 셀의 경계선을 합칠 것인지 여부
ex) collapse or separate
<style>
table {border-collapse :collapse ;}
table, th, td {border : 1px solid blue; }
</style>
width : 테이블의 가로 길이
height :테이블의 세로 길이
border-spacing : 테이블 셀 사이의 거리
empty-cells : 공백 셀을 그릴 것인지 여부
table-align : 테이블 셀의 정렬 설정
테이블배경색
<style>
td, th {color : white; background-color : green;}
</style>
color 는 글자색 background-color 는 배경색
테이블 텍스트 정렬 , 캡션
<style>
table, td, th {border : 1px solid blue; }
table {width : 100%}
td { text-align : center; }
caption {caption-side : bottom ; }
</style>
<body>
<table border="1">
<caption>vvip 고객리스트</caption>
<tr><td>이름</td></tr>
</table>
짝수행과 홀수행 다르게 하기
<style>
#list { font-family : "Trebuchet MS", sans-serif ; width : 100% ; }
#list td , #list th {
border : 1px dotted gray;
text-align : center;
}
#list th { color : white; background-color : blue; }
#list tr.class1 td {background-color : yellow }
</style>
<body>
<table id="list">
<tr><td>이름</td><td>이메일</td></tr>
<tr><td>김철수</td><td>coral@</td></tr>
<tr class="class1"><td>김보라</td><td>cowj@</td></tr>
<tr><td>김정</td><td>ddl@</td></tr>
<tr class="class1"><td>김라</td><td>ssswj@</td></tr>
</table>
</body>
댓글
댓글 쓰기