css적용방법

인라인 스타일
style엘리먼트를 사용
외부파일 생성

font-size : 폰트의 크기를 조절

<h1  style="font-size: 20px; background: red;"  >00</h1>

style 선택자
selector 방식 #은 id를 뜻한다.
대부분 id는 단순하게 적용할때 쓰이고
자주쓰이는 것은 class

ul > li
ul 안에 들어있는 li만 설정함
‘>’ 하위 엘리먼트를 뜻함

---

css

line 태그는 3가지의 속성값이 존재함

href :파일의 경로
type : 파일의 형태
rel : stylesheet

key = value
href = “파일경로” type=“text/css” rel="stylesheet"

border = 테두리의 두께
테이블 만들때 두께 조절
0px 두께가 없음

<style>

table{
width: 100%;
border: 1px  solid  #333333;
}

.a{
border-spacing: 0px;
}
</style>

<link  href=".\css\index.css"  type="text/css"  rel="stylesheet">

다른 파일 안에 css파일 활용 .\css\index.css

. … /

절대경로 : 처음부터 끝까지 적어놓은것
상대경로 : .\index.css

dir 명령어를 사용하면 현재 디렉토리에서 가지고있는 파일과 디렉토리를 보여줍니다.
cd document : cd 명령어를 이용해서 디렉터리 이동가능

margin : 바깥여백
padding : 안쪽여백
width : 가로길이
height : 세로길이

margin : 12시 3시 6시 9시
margin 서로 요소간의 간격을 나타냄

*{
font-size: 12px;
}

body{
margin: 0px;
}

#header{
background: red;
height: 120px;
padding: 12px;
box-sizing: ;
}

#visual{
background: blue;
height: 450px;
}

#content{
background: yellow;
height: 300px;
}

회원가입 폼 만들기

20211221.html

<!DOCTYPE  html>
<html  lang="en">
<head>
<meta  charset="UTF-8">
<meta  http-equiv="X-UA-Compatible"  content="IE=edge">
<meta  name="viewport"  content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link  href=".\css\20211221.css"  type="text/css"  rel="stylesheet">
</head>
<body>
	<div  class="container">
		<table  border="1";  id="main"  >
			<tr>
				<td>아이디 : <input  type="text"  placeholder="아이디를 입력하세요."></td>
			</tr>
			<tr>
				<td>비밀번호 : <input  type="password"  placeholder="비밀번호를 입력하세요."></td>
			</tr>
			<tr>
				<td>성별 : <input  type="radio"  name="gender"  id="men">남자<input  type="radio"  name="gender"  id="women">여자</td>
			</tr>
			<tr>
				<td>이메일 : <input  type="email"  placeholder="@"></td>
			</tr>
			<tr>
				<td>주소 : <input  type="text"  placeholder="주소를 입력하세요."</td>
			</tr>
			<tr>
				<td><input  type="button"  value="제출"  style="background: #1a73e8; color: #FFF;">
				<input  type="button"  value="취소"  style="background: #1a73e8; 	     color: #FFF;"></td>
			</tr>
		</table>
	</div>
</body>
</html>

20211221.css

*{
margin: 0px;
padding: 0px;
text-align: center;
background: #fff;
}

#main{
position: absolute;
border-color: #FFF;
}

td{
background: #fff;
}

table{
background-size: contain;
list-style: none;
background: skyblue;
}

.container{
width: 300px;
height: 400px;
margin: 100px  auto;
position: relative;
}

결과

회원가입 폼 만들기 2

css파일을 따로 만들지 않고 간단하게 만듦
테이블 테두리를 없애고 중앙에 위치 시키는것에 대해 초점

<!DOCTYPE  html>
<html  lang="en">
<head>
<meta  charset="UTF-8">
<meta  http-equiv="X-UA-Compatible"  content="IE=edge">
<meta  name="viewport"  content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
	table{
	width: 500px;
	border: 1px  solid  #333333;
	}
	.a{
	border-spacing: 0px;
	margin: 100px  auto;
	position: relative; /*테이블 안쪽으로 정렬하기*/
	}
</style>
</head>
<body>
<h2  style="text-align: center;">회원가입</h2>
	<table  class="a">
	<tr>
	<td>이름</td>
		<td><input  type="text"  placeholder="이름"  style="width: 300px; text-align: center;"</td>
		<td><input  type="reset"  value="초기화"></td>
	</tr>
	<tr>
		<td>이메일</td>
		<td><input  type="email"placeholder="@"  style="width: 300px; text-align: center;"></td>
		<td><input  type="submit"  value=" 제출 "></td>
	</tr>
	<tr>
		<td>전화번호</td>
		<td><input  type="text"  style="width: 300px; text-align: center;"></td>
	</tr>
	<tr>
		<td>아이디</td>
		<td><input  type="text"placeholder="ID"  style="width: 300px; text-align: center;"></td>
	</tr>
	<tr>
		<td>비밀번호</td>
		<td><input  type="password"placeholder=""  style="width: 300px; text-align: center;"></td>
	</tr>
	</table>
</body>
</html>

결과