TIL 0401

먼지·2024년 4월 1일
html국비쌍용교육센터
0

Today I Learned

목록 보기
31/89
post-thumbnail

Table에 스타일 추가

기본적으로 테두리는 두 줄이다.

border - collapse : collapse;
-> 테두리를 한 줄로 할 수 있다.

중앙 정렬할 때

margin(태그 밖 여백을 의미함) 을 상하 0px , 좌우 auto;

수평 방향으로 남은 여백을 좌우에 동등하게 분배함
제목 위치 지정

caption-side: 원하는 위치;

태그 안 쪽 여백

padding: 원하는 공백만큼의 넓이;

td 내용 정렬

가로 방향 정렬
text-align: center;

세로 방향 정렬
vertical-align: top;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table에 스타일 추가</title>

<style type="text/css">
table {
	border: solid 1px orange; /* 테두리 */
	/* 기본적으로 테두리는 두 줄이다. border - collapse : collapse */
	border-collapse: collapse;
	width: 500px; /* 넓이 부여 */
	/* 
	중앙 정렬할 때
	테이불에 margin (태그 밖 여백을 의미함) 을 상하 0px , 좌우 auto;
	수평 방향으로 남은 여백을 좌우에 동등하게 분배함
	*/
	margin: 0 auto;
	/* 제목 위치 지정 */
	caption-side: bottom;
}

th {
	border: solid 1px orange;
	background-color: #FC6;
	color: #fff;
	/* 태그 안 쪽 여백 */
	padding: 5px;
}

td {
	height: 100px;
	border: solid 1px orange;
	/* 가로 방향 정렬 */
	text-align: center;
	/* 세로 방향 정렬 */
	vertical-align: top;
}

tr.bg td{
	color: #000;
	background-color: #EAF3D3;
	vertical-align: bottom;
}
caption {
	color: #f60;
	font-size: 11pt;
	font-weight: bold;
	margin-top: 5px;
}
</style>
</head>
<body>

	<table>
		<caption>table에 스타일 추가</caption>
		<tr>
			<th>도시</th>
			<th>계절</th>
			<th>나라</th>
		</tr>
		<tr>
			<td>서울</td>
			<td>봄</td>
			<td>대한민국</td>
		</tr>
		<tr class="bg">
			<td>런던</td>
			<td>여름</td>
			<td>영국</td>
		</tr>
	</table>

</body>
</html>

실행 화면

DIV 스타일 설정

vertical-align : middle;
=> div에서는 적용이 불가능하여, div의 공간을 테이블의 셀 공간으로 지정해서 vertical-align이 적용되도록 처리

display: table-cell;

두 번째 방법

display: flex;
align-items: center; / 세로 정렬 /
justify-content: center; / 가로 정렬 /

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DIV</title>
<style type="text/css">
div.a{
	width: 500px;
	height: 100px;
	border: solid 1px orange;
	text-align: center;
	vertical-align : middle;
	display: table-cell;
}

div.b {
	width: 500px;
	height: 100px;
	border: solid 1px orange;
	text-align: center;
	/* align-content: center; */
	display: flex;
	align-items: center; /* 세로 정렬 */
	justify-content: center; /* 가로 정렬 */
}

</style>
</head>
<body>
<div class="a"><span>하하</span></div>
<br>
<div class="b"><span>호호</span></div>
</body>
</html>

실행 화면

CSS Color

RGB

알파(투명도) : 0.0 (완전 투명) ~ 1.0(완전 불투명)
투명도 개별 명시, opacity로 표시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RGB, RGBA</title>

<style type="text/css">
div {
	width: 300px;
	height: 30px;
}

div.c1 {
	background-color: rgb(150, 20, 20);
}

div.c2 {
	background-color: rgb(250, 200, 25);
}

div.c3 {
	background-color: rgb(25, 50, 200);
}
div.d1 {
	background-color: rgba(222, 70, 10, 1.0);
}

div.d2 {
	background-color: rgba(222, 70, 10, 0.8);
}

div.d3 {
	background-color: rgba(222, 70, 10, 0.6);
}

div.d4 {
	background-color: rgba(222, 70, 10, 0.4);
}

div.d5 {
	background-color: rgba(222, 70, 10, 0.2);
}

div.e1 {
	background-color: rgb(222, 70, 10);
	opacity: 1.0;
}

div.e2 {
	background-color: rgb(222, 70, 10);
	opacity: 0.8;
}

div.e3 {
	background-color: rgb(222, 70, 10);
	opacity: 0.6;
}

div.e4 {
	background-color: rgb(222, 70, 10);
	opacity: 0.4;
}

div.e5 {
	background-color: rgb(222, 70, 10);
	opacity: 0.2;
}
</style>

</head>
<body>
	<div class="c1"></div>
	<div class="c2"></div>
	<div class="c3"></div>

	<br>
	<div class="d1"></div>
	<div class="d2"></div>
	<div class="d3"></div>
	<div class="d4"></div>
	<div class="d5"></div>

	<br>
	<div class="e1"></div>
	<div class="e2"></div>
	<div class="e3"></div>
	<div class="e4"></div>
	<div class="e5"></div>

</body>
</html>

실행 화면

HSL

HSL : 색조(hue), 채도(lightness)로 컬러 표현

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HSL, HSLA</title>
<style type="text/css">
div {
	width: 300px;
	height: 30px;
}

div.a1 {
	background-color: hsl(320, 100%, 25%);
}

div.a2 {
	background-color: hsl(320, 100%, 50%);
}

div.a3 {
	background-color: hsl(320, 100%, 75%);
}

div.b1 {
	background-color: hsla(165, 35%, 50%,0.2);
}
div.b2 {
	background-color: hsla(165, 35%, 50%,0.4);
}
div.b3 {
	background-color: hsla(165, 35%, 50%,0.6);
}
div.b4 {
	background-color: hsla(165, 35%, 50%,0.8);
}
div.b5 {
	background-color: hsla(165, 35%, 50%,1.0);
}
</style>
</head>
<body>
	<div class="a1"></div>
	<div class="a2"></div>
	<div class="a3"></div>

	<br>
	<div class="b1"></div>
	<div class="b2"></div>
	<div class="b3"></div>
	<div class="b4"></div>
	<div class="b5"></div>
</body>
</html>

실행 화면

Background

속성설명
background-image배경 이미지 지정
background-repeat배경 이미지 반복 방식 지정
background-attachment배경 이미지 고정/스크롤 여부
background-position배경 이미지 위치 지정
background-size배경 이미지 사이즈 지정(넓이, 높이)

일괄 지정

background : color image repeat attachment positon
순서로 지정

사이즈 지정
background-size : 150px 250px;
background-size: 150px;
넓이만 지정하는 경우 높이를 비율에 맞추어 자동 저장

가로로만 반복
background-repeat: repeat-x;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<style type="text/css">
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>
</head>
<body>
하하
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

크크
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

푸푸
</body>
</html>

FullScreen

이미지에 따라 중앙 부분만 보여질 수 있기 때문에 상단이 보여져야 할 경우에는 center center 제거

배경이미지 크기를 대상 요소(html, 즉 웹 문서) 에 가득 차게 표시
background-size: cover;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>풀 스크린 배경 만들기</title>

<style type="text/css">
html {
	background: url('../files/landscape.jpg')
	no-repeat
	center
	center
	fixed;
	background-size: cover;
}
</style>
</head>
<body>
</body>
</html>

박스

속성설명
여백(margin)부모 항목과 경계 사이의 간격
경계(border)블록의 외곽 특성
채워넣기(padding)경계와 블록 내용 사이의 간격
내용(content)HTML 문서의 실제 내용

박스 속성

속성속성값의미
width숫자 또는 백분율넓이
height숫자 또는 백분율높이
floatleft, right,none위치
margin, margin-top
margin-bottom,margin-left
margin-right		숫자 또는 백분율여백
padding, padding-top
padding-bottom,
padding-left, padding-right		숫자 또는 백분율채워넣기
border, border-top,
border-bottom, border-left,
border-right		숫자 또는 백분율경계

border-radius 속성

  • 박스 모서리 둥글게 만들기

    border-radius:속성값;

border-*radius 속성

  • 박스 모서리 다르게 지정하기

    border-*-radius:속성값;
    border-top-left-radius:10px;
    박스 모델의 왼쪽 윗부분을 10px만큼 둥글게
    border-top-right-radius:10px;
    박스 모델의 오른쪽 윗부분을 10px만큼 둥글게

Box-Shadow 속성

  • 선택한 요소에 그림자 효과 내기

    box-shadow:수평거리 값 | 수직거리 값 | blur 값 | 확장거리 값 | 색상 값 | inset;

이름설명
가로 오프셋 거리그림자가 가로로 얼마나 떨어져 있는지 지정. 양수값은 요소의 오른 쪽, 음수값은 요소의 왼쪽에 그림자 표시
세로 오프셋 거리그림자가 세로로 얼마나 떨어져 있는지 지정. 양수값은 요소의 아래, 음수값은 요소의 위쪽에 그림자 표시
blur radius그림자의 번지는 정도를 지정. 0이 최소값이며 이 값을 생략하면 번지는 효과를 사용하지 않음
그림자 색상그림자 색상을 지정. 16진수로 된 색상값을 사용. 색상 이름이나 RGB 값 모두 사용.

Display 속성

  • display 속성은 해당 요소가 화면에 어떻게 보여질 것인지 지정하는 것
속성설명
block블록 레벨 박스로 만듬
inline인라인 레벨 박스로 만듬
inline-block블록 레벨 박스이지만 인라인 레벨 박스처럼 배치
none박스를 만들지 않으며 시각적으로 표시하지 않음
inherit상위 요소의 display 속성을 상속받음
table블록 레벨의 표로 만듬
inline-table인라인 레벨의 표로 만듬(HTML에서 table에 해당)
table-row표의 행으로 만듬(HTML에서 tr에 해당)
table-row-group표의 본체 행 그룹으로 만듬(HTML에서 tbody에 해당)
table-header-group헤더 행 그룹으로 만듬(HTML에서 thead에 해당)
table-footer-group푸터 행 그룹으로 만듬(HTML에서 tfoot에 해당)
table-column표의 열로 만듬(HTML에서 col에 해당)
table-column-group표의 열 그룹으로 만듬(HTML에서 colgroup에 해당)
table-cell표에서 하나의 셀로 만듬(HTML에서 td나 th에 해당)
table-caption표의 캡션을 만듬(HTML에서 caption에 해당)
list-item목록의 항목을 표시할 수 있도록 기본적인 블록 박스와 표시자 박스를 만듬(HTML에서 li에 해당)

Box

  • margin
    태그의 테두리 밖 여백
margin:		 4 (상 우 하 좌)
             3 (상 좌우 하)
             2 (상하 좌우)
             1 (상우하좌)

  • 방향 표시
    margin-top, margin-bottom, margin-left, margin-right

  • padding
    태그의 테두리 안 여백

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델</title>
<style type="text/css">
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>
</head>
<body>
	<ul>
		<li>테두리가 없는 곳</li>
		<li class="withborder">테두리가 있는 곳</li>
	</ul>
</body>
</html>

Border-radius

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border-radius</title>
<style type="text/css">
p {
	font-family: 돋움;
	font-size: 10pt;
	line-height: 20px;
}
div.rounded {
	background: #666;
	color:#fff;
	width: 230px;
	padding: 10px;
	border-radius: 10px; /* 모서리를 둥글게 처리 */
}
</style>
</head>
<body>
	<div class="rounded">
		<p>
			내 그늘 아래 그림자 길어질수록<br> 
			나의 어지럼증 깊어져<br> 
			세상이 몇바퀴씩 곤두박질치네요
		</p>
	</div>
</body>
</html>

Border-radius 원 그리기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border-radius(원 그리기)</title>
<style type="text/css">
	.circle1{
		background-color: #ffb3ba;
		 width: 200px;
		 height: 200px;
		 border-radius: 100px;
	}
	.circle2{
		background-color: #fff;
		border: solid 5px #bae1ff;
		 width: 200px;
		 height: 200px;
		 border-radius: 100px;
	}

</style>
</head>
<body>
<div class="circle1"></div><br>
<div class="circle2"></div>
</body>
</html>

profile
먼지
Lucky Things🍀
이전 포스트

TIL 0329

다음 포스트

TIL 0402

0개의 댓글