*선행학습 step5*
<필기>
button - 클릭 가능한 버튼을 나타냄
<button type="button">확인</button>
<button type="submit">확인</button>
<button type="reset">취소</button>
css 표현언어
1. 외부 스타일 시트사용
style.css
<link href="파일경로">
2. 내부 스타일 사용
<style>
css구문작성
<style>
3. 인라인스타일 사용방법 <!-- 옛날 사용법 -->
<p style="font-size:24pc">안녕하세요</p>
<div style="color:red">div입니다.</div>
css구문 - 선택자{ 속성:속성값; }
ex) div { font-size: 24px; }
css 주석 처리 방법 - /**/
선택자
1. 태그 선택자 - html요소의 태그명으로 선택
태그명 { 속성: 속성값; }
ex) div { font-size: 24px; }
2. 아이디 선택자 - html요소의 아이디명으로 선택 (앞에 #을 써준다. #없으면 태그 선택자)
#아이디명 { 속성: 속성값; }
ex) #header { font-size: 24px; }
3. 클래스 선택자 - html요소의 클래스명으로 선택 (앞에 .을 써준다.)
.클래스명 { 속성: 속성값; }
ex) .inner_container { font-size: 24px; }
스타일 속성
1. color 글자의 색상 지정
컬러단위
1) 색이름 ex) green/ red/ blue/ pink
2) 16진수 색상 코드 ex) #ffffff(흰색) / #000000(검정)
3) 컬러함수 rgb(r,g,b) 0~255 / ex) rgb(255,0,0) rgba(r,g,b,a) rgb : 0~255 / a : 0~1
2. font-size 글자의 크기 지정 px, em
웹 페이지 본문 : 14px
웹 제목 : 24px~28px
3. font-family 글자의 서체 지정
font-family: 나눔고딕, dotum;
4. text-decoration 글자의 꾸며주기 지정
underline : 글자 아래 밑줄 / none : 줄 없음 / overline : 글자 윗 줄 / line-through : 중간에 줄
5. text-indent 첫줄 들여쓰기 지정
ex) text-indent : 50px;
6. line-height 줄 간격
ex) line-height : 24px;
7. font-weight 글자의 두께 지정
normal/bold / 100~900 / 100~300 : 얇게 / 400~600 : 보통 / 700~900 : 두껍게
8. text-align 글자 정렬
left / center / right
9. border 속성
border-width / border-style / border-color
ex) div { border: 1px solid red; }
border-top: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
10. padding 속성
컨텐츠와 요소와의 간격(여백) - 내부 여백
padding: 50px;
padding-top : 상단 여백
padding-left : 왼쪽 여백
padding-right : 오른쪽 여백
padding-bottom : 하단 여백
11. background 속성
ex) background: pink;
1) 연습1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
</head>
<body>
<h2>JOIN US 회원가입</h2>
<table border="1" cellspacing="0" cellpadding="10">
<form action="join.php" method="get">
<caption>회원가입 폼</caption>
<tr>
<td>아이디</td>
<td><input type="text" name="userId" required/></td>
</tr>
<tr>
<td>패스워드</td>
<td><input type="password" name="userPw" required/></td>
</tr>
<tr>
<td>패스워드 확인</td>
<td><input type="password" name="userPwCh" required/></td>
</tr>
<tr>
<td>패스워드 분실시 질문</td>
<td>
<select name="pwq">
<option value="pwq1">어릴때 살던 곳은?</option>
<option value="pwq2">초등학교 선생님의 성함은?</option>
<option value="pwq3">나의 가장 소중한 보물은?</option>
</select>
</td>
</tr>
<tr>
<td>패스워드 분실시 답변</td>
<td><input type="text" name="pwa"/></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="userName"/>(공백없이 한글만 입력가능)</td>
</tr>
<tr>
<td>별명</td>
<td><input type="text" name="nickname"/>한글2글자, 영문4글자 이상 입력가능합니다. 공백없이 한글, 영문, 숫자만 입력가능(한글 2자, 영문 4자이상)</td>
</tr>
<tr>
<td>이메일</td>
<td><input type="email" name="userEmail"/>E-mail주소를 입력하십시오.</td>
</tr>
<tr>
<td>성별</td>
<td><input type="radio" name="gender" value="female">여성<input type="radio" name="gender" value="male">남성</td>
</tr>
<tr>
<td>메일링 서비스</td>
<td><input type="checkbox" name="mailok">정보메일을 받겠습니다.</td>
<tr>
<tr>
<td colspan="2">
<button type="submit">확인</button> <!-- button태그 사용 -->
<button type="reset">취소</button>
</td>
</tr>
</form>
</table>
</body>
</html>
2) 연습2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>테이블 태그</title>
<style>
/* border-collapse 속성 : cell과 cell 사이 간격을 제거 */
table { border-collapse: collapse; border: 1px solid red; }
th { border-bottom: 1px solid #ccc; padding: 10px; border-top: 1px solid #ccc; background: pink; }
td { border-bottom: 1px solid #ccc; padding: 10px; }
.test { border-right: 1px solid cyan; }
</style>
</head>
<body>
<table>
<tr>
<th class="test">수업명</th>
<th class="test">개강일</th>
<th>인원</th>
<th>수강료</th>
</tr>
<tr>
<td colspan="2">건축설계 04-07</td> <!-- 열 합치기 -->
<td rowspan="2">25명</td> <!-- 행 합치기 -->
<td>300,000</td>
</tr>
<tr>
<td>웹 개발자 프론트</td>
<td>05-02</td>
<td>360,000</td>
</tr>
</table>
</body>
</html>
3)
4)
5)
6)
'노력이 좋아서' 카테고리의 다른 글
| <step2> 'Illustrator' (0) | 2022.03.22 |
|---|---|
| <step1> 'Illustrator' (0) | 2022.03.21 |
| <step4> 'html 기초' (0) | 2022.03.17 |
| <step3> 'html 기초' (0) | 2022.03.16 |
| <step2> 'html 기초' (0) | 2022.03.15 |