이번 시간부터는 CSS에 대해 공부합니당!
😻CSS란?
- Cascading Style Sheets
- HTML요소가 화면, 종이 또는 기타 미디어에 표시되는 방법
- 많은 작업을 절약. 한 번에 여러 웹페이지의 레이아웃 제어 가능
- 외부 스타일 시트는 CSS파일에 저장됨
😻Syntax(구문)
- CSS규칙세트는 selector와 declaration block으로 구성
- selector은 스타일을 지정할 HTML요소를 가리킴
- declaration block에는 세미콜론으로 구분된, 하나 이상의 선언이 포함
- 각 declaration에는 콜론으로 구분된 CSS속성 이름과 값이 포함
- 여러 CSS declaration은 세미콜론으로 구분하고, declaration block은 중괄호로 묶음
😻Selectors(선택자)
Selectors(선택자) : 태그를 가리키는 의미
📌태그(Tag)를 이용하는 방법
📌id를 이용하는 방법
-동일한 id명 중복사용 하지말것!👉자바스크립트로 태그를 제어할 경우 문제됨
📌class를 이용하는 방법
-동일한 class명 사용가능
-같은 태그 또는 다른 태그들을 동일한 효과적용
✔All CSS simple Selectors
😻CSS How to
👇html에 css를 적용하는 방법👇
📌External CSS
- < link rel="stylesheet" href="저장이름.css">
- 하나의 파일만 변경하여 전체 웹사이트 모양을 변경 가능
- 이 시트는 모든 텍스트 편집기에서 작성할 수 있으며, css확장자로 저장해야함
- 외부 .css파일에는 HTML태그가 없어야함
📌Internal CSS
📌Inline CSS
😻CSS Comments(주석)/* */
/*내용*/
😻Opacity/ Transparency (불투명도/투명도)
- opacity 속성은 요소의 불투명도/ 투명도를 지정
- 0.0-1.0 사이의 값을 취할 수 있음
- 값이 낮을수록 더 투명
😻참고
😉과제
회원가입양식 만들기,,잘 만든건지 모르ㄱ겠,,
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
border-collapse: collapse;
text-align: left;
}
</style>
</head>
<body>
<form action="/action_page.php">
<table>
<tr>
<td style="background-color: indianred;">
<label for="name">✔이름</lable>
</td>
<td>
<input type="text" id="name" name="name">
</td>
</tr>
<tr>
<td style="background-color: indianred;">
<label for="아이디">✔아이디</label>
</td>
<td>
<input type="text" id="아이디">
<input type="button" value="✔아이디중복확인" onclick="Idcheck">
</td>
</tr>
<tr>
<td style="background-color: indianred;">
<label for="psword">✔비밀번호</label>
</td>
<td>
<input type="password" id="psword" name="psword">
</td>
</tr>
<tr>
<td style="background-color: indianred;">
<label for="pswcheck">✔비밀번호 확인</label>
</td>
<td>
<input type="password" id=pswcheck name="pswcheck">
</td>
</tr>
<tr>
<td style="background-color: indianred;">
<label for="birthday">✔생년월일/성별</label>
</td>
<td>
<input type="date" id="birthday" name="birthday">
<label for="male">남자</label>
<input type="radio" id="male" name="gender" value="male">
<lable for="female">여자</lable>
<input type="radio" id="female" name="gender" value="female">
</td>
</tr>
<tr>
<td style="background-color: indianred;">
<label for="email">✔이메일</label>
</td>
<td>
<input type="email" id="email" name="email">@<input type="email" id="email" name="email">
<select id="email" name="emailselect">
<option value="네이버">네이버</option>
<option value="다음">다음</option>
<option value="구글">구글</option>
<option value="기타">기타</option>
</select>
<input type="button" value="✔인증코드 발송" onclick="emailsend"><br>
<input type="email" id="email" name="email">
<input type="button" value="✔인증확인" onclick="emailcheck"><br>
</td>
</tr>
<tr>
<td style="background-color: indianred;">
<label for="phone">✔연락처</label>
</td>
<td>
휴대전화 <select id="phone" name="phoneN">
<option value="선택">선택</option>
<option value="010">010</option>
<option value="011">011</option>
</select>-
<input type="text" id="phone1" name="phone" maxlength="4">-
<input type="text" id="phone2" name="phone" maxlength="4">
<br>일반전화 <select id="call" name="callN">
<option value="선택">선택</option>
<option value="02">02</option>
<option value="031">031</option>
<option value="051">051</option>
</select>-
<input type="text" id="call1" name="phone" maxlength="4">-
<input type="text" id="call2" name="phone" maxlength="4">
</td>
</tr>
<tr>
<td style="background-color: indianred;">
<label for="zipcode">✔우편번호</label>
</td>
<td>
<input type="text" id="zipcode">
<input type="button" value="주소검색" onclick="adresssh">
</td>
</tr>
<tr>
<td style="background-color: indianred;">
<label for="adress">✔주소</label>
</td>
<td>
<input type="text" id="adress"><br>
<input type="text" id="adress">
</td>
</tr>
<tr>
<td style="background-color: indianred;">
<lable for="event">정보수신 여부</label>
</td>
<td>
서비스 및 이벤트 소식을
<input type="checkbox" id="event1" name="event1">
<lable for="event1">Email로 수신하겠습니다.</lable>
<input type="checkbox" id="event2" name="event2">
<lable for="event1">SMS로 수신하겠습니다.</lable>
</td>
</tr><br>
</table>
<br><br><input type="submit" value="저장">
<input type="reset" value="취소">
</form>
</body>
</html>
열심히가 되는 길♨_♨