2024.04.01
table에 스타일 추가
<style>
table{
border:solid 1px orange;
/* 기본적으로 테두리는 두 줄이고 border-collapse: */
border-collapse:collapse;
width:500px;/*넓이*/
/*
중앙 정렬할 때
테이블의 margin(태그 밖 여백)을 상하 0px, 좌우 auto.
수평방향으로 남은 여백을 좌우에 동등하게 분배함
*/
margin:0 auto;
/* 제목 위치 지정 */
caption-side:bottom;
}
th{
border:solid 1px orange;
background-color:#ffcc66;
color:#FFF;
padding:5px;
}
td{
border:solid 1px orange;
height:100px;
/* 가로 방향 정렬 */
text-align:center;
/* 세로 방향 정렬 */
vertical-align:top;
}
tr.bg td{
color:#000;
background-color:#EAF3D3;
vertical-align:bottom;
}
caption {
color:#ff6600;;
font-size:11pt;
font-weight:bold;
margin-top:5px;
}
</style>
div 세로 정렬
<style>
div.a{
width:500px;
height:100px;
border:solid 1px orange;
/*방법 1*/
display:table-cell;
text-align:center;/* 가로 정렬 */
vertical-align:middle;/* 세로 정렬 (테이블의 셀이 아니면 적용되지 않음)*/
/* div의 공간을 테이블의 셀 공간으로 지정해서 vertical-align이 적용디도록 처리 */
}
div.b{
width:500px;
height:100px;
border:solid 1px orange;
/* 방법 2*/
display:flex;
align-items:center;/* 세로 정렬 */
justify-content:center;/* 가로 정렬 */
}
</style>
RGB,RGBA (투명도 설정)
<style>
div{
width:300px;
height:30px;
}
/* 기본 */
div.c1 {
background-color:rgb(150,20,20);
}
/* 알파(투명도) : 0.0(완전 투명) ~ 1.0(완전 불투명) */
div.d1 {
background-color:rgba(225,70,10,1.0);
}
/* 투명도를 별도의 속성 opacity로 표시 */
div.e1 {
background-color:rgb(225,70,10);
opacity:1.0;
}
</style>
HSL,HSLA (색조,채도 설정)
<style>
/*
HSL : 색조(hue), 채도(saturation), 명도(lighteness)로 컬러 표현
*/
div{
width:300px; height:30px;
}
div.a1{
background-color:hsl(320,100%,25%);
}
div.b1{
background-color:hsla(165,35%,50%,0.2);
}
</style>
배경이미지 설정
<style>
/*
배경이미지
속성 설명
background-image 배경이미지 지정
background-repeat 배경이미지 반복 방식 지정
background-attachment 배경이미지 고정/스크롤 여부
background-position 배경이미지 위치 지정
background-size 배경이미지 사이즈 지정(넓이,높이)
일괄 지정
backgorund:color image repeat attachment position
*/
body{
/* 일반적으로 사용하는 배경 이미지 처리, 배경 이미지 반복 */
background-image:url(../files/landscape.jpg);
/* 사이즈 지정 background-size:150px(넓이) 250px(높이);*/
/* 넓이만 지정할 경우 높이를 비율에 맞추어 자동 지정 */
/* background-size:150px; */
/* 가로로만 반복 */
/* background-repeat:repeat-x; */
/* 미반복 */
background-repeat:no-repeat;
/* 배경 이미지 위치 설정하기 */
/* background-position:100px 100px; */
/* 배경 이미지가 스크롤 되지 않게 하기 */
background-attachment: fixed;
background-position:center center;
}
</style>
풀 스크린 배경 이미지 만들기
<style>
html{
/* 사용하는 이미지에 따라 중앙 부분만 보여질 수 있기 때문에 상단이 보여져야 할 경우 center center 제거*/
background:url('../files/landscape.jpg') no-repeat center center fixed;
/* 배경이미지 크기를 대상 요소(html, 즉 웹문서)에 가득 차게 표시 */
background-size:cover;
}
</style>
박스 모델
<style>
/*
태그의 테두리 밖 여백
margin:속성값 4 (상 우 하 좌)
3 (상 좌우 하)
2 (상하 좌우)
1 (상우하좌)
방향 표시
margin-top, margin-bottom, margin-left, margin-right
태그의 테두리 안 여백
padding:속성값 4 (상 우 하 좌)
3 (상 좌우 하)
2 (상하 좌우)
1 (상우하좌)
방향 표시
padding-top, padding-bottom, padding-left, padding-right
테두리(border)
border-style 박스 테두리의 스타일 지정
속성값
none : 테두리를 표시하지 않음
hidden : 테두리를 숨김
dotted : 점
dashed : 점선
solid : 실선
double : 두 줄
groove : 테두리를 오른쪽 아래에서 빛을 받은 스타일로 지정
ridge : 테두리를 왼쪽 위에서 빛을 받은 스타일로 지정
outset : 테두리를 밖으로 나온 스타일로 지정
inset : 테두리를 안으로 파인 스타일로 지정
border-width : 박스 테두리의 굵기 지정
thin, medium, thick
border-color : 박스 테두리의 색상 지정
방향별로
border-top-
border-right-
border-bottom-
border-left-
일괄 지정
border:style width color
*/
ul{
list-style:none; /* 리스트의 점 아이콘 제거 */
background:green;
/* 상단 오른쪽 하단 왼쪽 */
margin:10px 5px 5px 10px;/* 테두리 밖 여백 */
padding:10px;/* 테두리 안 여백 */
}
li{
color:red;
background:yellow;
margin:10px;
padding:10px;
}
li.withborder{
border-style:dashed;/* 점선 */
border-width:medium;/* 테두리의 두께를 중간으로 설정 */
border-color:black;/* 테두리 색깔 */
}
</style>
Border-Radius
<style>
p{
font-family:돋움;
font-size:10pt;
line-height:20px;/* 줄 간격 */
}
div.rounded{
background-color:#666;
color:#fff;
width:230px;
padding:10px;
border-radius:10px;/* 모서리를 둥글게 처리 */
}
</style>
<style>
.circle1{
background-color:#c60;
width:200px;
height:200px;
border-radius:100px;
}
.circle2{
background-color:#fff;
border:solid 3px #a72525;
width:200px;
height:200px;
border-radius:100px;
}
</style>
Box-Shadow
<style>
#shadowed{
/* 가로 세로 두께 그림자색상 */
box-shadow:5px 5px 10px #000;
}
a#link img:hover{
/* 이미지에 커서를 올리면 입체감을 주는 효과 */
box-shadow:0 5px 10px rgba(0,0,0,0.6);
}
</style>
Position
<style>
/*
position:absolute > 절대위치 지정
position:relative > 상대위치 지정
position:fixed > 고정위치 지정
*/
#box1{
position:absolute;
/*position:relative;*/
/*position:fixed;*/
left:30px;
top:30px;
width:100px;
height:100px;
background:yellow;
}
#box2{
width:100px;
height:300px;
background:pink;
}
</style>
z-index
<style>
div.gallery figure {
position:absolute;
}
/*
z-index : 요소를 쌓는 순서를 정함
z-index:숫자 -> 숫자가 클 수록 앞에 표시
*/
#f1{
left:0;
top:0;
z-index:3;
}
#f2{
left:150px;
top:50px;
z-index:2;
}
#f3{
left:300px;
top:100px;
z-index:1;
}
</style>
Overflow
<style>
/* overflow 속성
값 설명
visible 오버플로우된 항목을 잘라내지 않는다.(기본값)
hidden 오버플로우된 부분을 감춤
scroll 오버플로우 속성에 강제로 스크롤 바를 생성
auto 오버플로우되면 자동적으로 스크롤 바가 생성됨 */
.div01{
background-color:yellow;
width:200px;
height:100px;
overflow:hidden;/* 내용이 정해진 크기를 벗어날 때 어떻게 지정할지 */
}
.div02{
background-color:pink;
width:200px;
height:100px;
overflow:auto;
}
</style>
Resize
<style>
.resize{
font-size:11pt;
position:absolute;
left:50px;
top:20px;
width:200px;
height:50px;
padding:5px;
border:1px solid #06F;
overflow:hidden;
/* 가로 방향, 세로 방향 모두 사이즈 변경 가능 */
resize:both;
}
</style>
마우스 커서 모양 제어
<style>
a{
/* n-resize, e-resize, crosshair, text, wait, help, move, pointer */
cursor:help;
}
h1{
/*
url 명시 후에 이미지를 불러오지 못 했을 때 auto 또는 기본적으로 지원하는 커서값을 넣어야 함
또는 기본 이미지를 명시하지 않았을 때 이미지를 못 불러오더라도 브라우저가 기본적인 커서를 표시함.
*/
cursor: url('../files/cursor-01.png') 20 20, crosshair;
}
span{
cursor:pointer;
}
</style>
Float
<style>
/*
float : 요소를 떠있게 처리, 세로로 배치되어 있는 요소를 가로로 배치해서 사용
*/
div#a {
width:75%;
background:pink;
float:left;
}
div#b {
width:25%;
background:green;
float:left;
}
</style>
<style>
#a {
width:74%;
height:300px;
background-color:pink;
float:left;
}
#b {
width:24%;
height:300px;
background-color:skyblue;
float:right;
}
#c {
/* float 속성 무효화 */
clear:both;
width:100%;
height:50px;
background-color:yellow;
}
</style>
Rotate
<style>
/*
transform 속성 : 태그의 변경
값 설명
rotate(각도) 요소를 지정한 각도만큼 회전시킴. 각도는 도(degree)를 사용하거나 라디안 값을 사용
*/
.my-photo{
position:absolute;
left:50px;
top:70px;
transform:rotate(15deg);
}
</style>
Scale
<style>
/*
scale(sx,sy) : 가로로 sx만큼, 세로로 sy만큼 확대. sy값이 지정되지 않았으면 sx값과 같다고 가정
sclaeX(sx) : 가로로 sx만큼 확대. scale(sx,1)과 같음
sclaeY(sy) : 가로로 sy만큼 확대. scale(sy,1)과 같음
*/
.my-photo{
position:absolute;
left:150px;
top:120px;
transform:scale(1.5,1.5);
}
</style>
Skew
<style>
/*
skew(각도,각도) : 첫 번째 각도는 x축상의 왜곡을 가리키고, 두 번째 각도는 y축상에서의 왜곡 각도임.
두 번째 값이 주어지지 않으면 y축에 각도를 0으로 간주하여 y축으로는 왜곡이 일어나지 않음
skewX(각도) : x축을 따라 주어진 각도만큼 왜곡
skewY(각도) : y축을 따라 주어진 각도만큼 왜곡
*/
.my-photo{
position:absolute;
left:50px;
top:50px;
transform:skew(10deg,10deg);
}
</style>
Translate
<style>
/*
translate(tx,ty) : x축으로 tx만큼, y축으로 ty만큼 이동.
ty값이 주어지지 않으면 0으로 간주
translateX(tx) : x축방향으로 tx값만큼 이동
translateY(ty) : y축방향으로 ty값만큼 이동
*/
.my-photo{
transform:translate(200px,100px);
}
</style>
'IT 국비 교육' 카테고리의 다른 글
쌍용교육센터 - 33일 (1) | 2024.04.03 |
---|---|
쌍용교육센터 - 32일 (0) | 2024.04.02 |
쌍용교육센터 - 30일 (2) | 2024.03.29 |
쌍용교육센터 - 29일 (0) | 2024.03.28 |
쌍용교육센터 - 28일 (1) | 2024.03.27 |