폰트, 좌우 중앙 정렬

/ 사용법 : font-family: 1차 폰트, 2차 폰트 ... /
/ 사용법 : font-family: 1차 폰트 2차 폰트 /
.arial {
font-family: Arial, Helvetica, sans-serif;
}

.roman {
font-family: "Times New Roman", Times, serif;
}

.italic {
/ 이텔릭체 속성 /
font-style: italic;
/ 좌/중앙/우
text-align: center; left; right;
/
text-align: center;
}

현대방식 시멘틱 태그

현대방식 html 시맨틱 태그

머리말

• 메뉴1
• 메뉴2

소본문1 소본문2 부산광역시 .... # 행간(세로 간격) 태그

p {
font-size: 20px;
/ 행간 : 글자 세로 간격 /
line-height: 150%;}

속성 선택자

/ 사용법
태그[속성="값"]{속성:값; /

nput[type="text"] {
background-color: red;
}

input[type="password"] {
background-color: blue;
}

후손 선택자

/ 후손선택자 : 부모 태그 밑에 모든 자식(손자포함) 들 선택 /
/ 사용법::
부모선택자 자식(손자)선택자 {
color: 값;
}
/
#header h1 {
color: red;
}

자식 선택자

/ 자식 선택자 : 부모선택자 바로 아래 자식만 선택됨
사용법:
부모 선택자 > 자식선택자 {
속성: 값 } /
#header > h1 {
color: red;
}

etc, action

/ 반응 선택자 /
/ hover : 마우스를 올렸을때
active : 클릭했을때 /
h2:hover {
color: red;
}

h2:active {
color: blue;
}

---

/ nth-child(수식) {
속성: 값; /

li:nth-child(2n) {
background-color: aqua;
}

li:nth-child(2n + 1) {
background-color: blue;
}

박스 속성 (외곽선, 여백)

/ TODO: 외곽선 /
/ 사용법: border : 선두께 선스타일 선색깔 /
border: 15px solid rgb(44, 138, 86);
/ TODO: 패딩(안쪽 여백/
padding: 30px;
/ TODO: 마진(바깥 여백) /
margin: 10px;

/ 안쪽 여백(패딩) /
/ 사용법 : padding: 상 우 하 좌; (12시부터 시계방향) /
padding: 30px 0 30px 0;
/ 바깥 여백(마진) /
margin: 10px 0 10px 0;

/ todo: 선택자들에게 공통 디자인 적용방법
선택자, 선택자2,,,,,,,{속성:값; /
table,
tr,
th,
td {