![[7/9] 폼태그와 CSS시작 - 선택자](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fln3tK%2FbtrSHKL3I6p%2FqNZxSv7oGvh2zxhgPt2pb1%2Fimg.png)
Form태그
- HTMl 문서에서 사용자로부터 데이터를 입력받을 수 있는 가장 기본적인 방법은 input태그를 이용하는 것이다.
- input 태그는 form 요소 내에서 사용된다
📌form태그★
- form태그 : 사용자로부터 값을 입력받아 웹프로그램을 요청하여 전달하는 태그
- => 하위태그로 입력태그(input, select, textArea 등)와 전달기능(=submit)을 제공하는 태그(button, input)를 반드시 선언
- action 에는 어플리케이션을 걸어주면된다(ex) 서블릿
- method : get방식으로 할것인지 post방식으로 할것인지 적어주어야 한다
- 반드시 입력태그(input태그)
- submit태그가 존재해야함
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>form태그</h1>
<!-- form태그 : 사용자로부터 값을 입력받아 웹어플리케이션을 요청하여 전달하는 태그-->
<!-- => 하위태그로 입력태그(input, select, textArea 등)와 전달기능(=submit)을 제공하는 태그(button, input)를 반드시 선언 -->
<!-- action속성 : 웹프로그램(서블릿)의 URL주소를 속성값으로 설정 -->
<!-- => action속성이 생략된 경우 자동으로 현재 문서를 재요청 -->
<!-- method속성 : 요청방식(입력값 전달방식)을 속성값으로 설정 - get(), post -->
<!-- => GET : 입력값을 URL 주소의 QueryString으로 전달 -소용량이고, 보안이 필요없는 값을 전달할때 사용-->
<!-- => POST : 입력값을 리퀘스트 메세지의 바디에 저장하여 전달 - 대용량 또는 보안이 필요한 값을 전달할때 사용 -->
<!-- 폼태그를 이용할때에는 주로 post방식을 사용하는 것을 권장 -->
<!-- enctype : 입력값에 대한 전달 형태를 속성값으로 설정 -->
<!-- => 속성값 : application/x-www-form-urlencoded(기본), multipart/form-data -->
<!--application/x-www-form-urlencoded : 입력값을 텍스트 형태(인코딩형태)로 전달하라 -->
<!-- multipart/form-data : 입력값을 원시데이터로(있는 그대로) 전달 - 주로 파일전달할때 사용된다-->
<!-- name속성값은 자바스트립트의 Element객체로 사용 => 자바스크립트에서 유효성검사를 할 수 있게 된다-->
<form action = "" method = "post" name = "loginform"></form>
<!-- 입력태그 -->
아이디 : <input type = "text" name = "id"><br>
비밀번호 : <input type = "password" name = "password"><br>
<!-- 웹프로그램을 요청하여 전달기능을 제공하기위한 태그 -->
<!-- submit기능이 있어야 전달기능을 한다 -->
<button type = "submit">로그인</button>
</form>
</body>
</html>
📌input태그
: 값을 입력받거나 이벤트 기능을 제공
- 주요속성으로는 type, name, value가 있다
- input태그의 속성들
- type : 입력폼의 유형을 결정하는 속성값으로 설정
- name : 태그 이름(=자바스크립트에서 객체로 사용)을 속성값으로 설정
실행 프로그램에서 입력값을 구분하기 위한 변수명 - value : 입력태그의 초기값을 속성값으로 설정
- size : 입력태그의 크기를 속성값으로 설정
- maxlength : 입력값의 최대길이를 속성값으로 설정
- autofocus : 입력초점이 위치되도록 설정 - 생략가능
- required : 필수 입력값에 대한 설정 - 값을 입력하지 않으면 error
- placeholder : 입력값에 대한 설명을 속성값으로 설정
- readonly : 입력태그를 읽기 전용으로 설정하는(ex)아이디를 변경하지 못하게 할때)
- checked(radio나 checkbox에서만) : 우선선택 설정 - 속성값 생략가능
- min : 입력 최소값을 속성값으로 설정
- max : 입력 최대값을 속성값으로 설정
type의 속성들
| 구분 | 입력형식 | 설명 |
| 텍스트 | text | 사용자에게 값을 입력받아 전달 |
| password | 사용자에게 텍스트를 입력받아 전달- 입력값을 변환 | |
| 선택 | radio | 사용자에게 텍스트를 입력받아 전달- 입력값을 변환 |
| checkbox | 사용자에게 텍스트를 입력받아 전달- 입력값을 변환 | |
| 버튼 | submit | 전송버튼 |
| reset | 초기화 버튼 | |
| button | 임의 기능의 버튼 | |
| image | 이미지 전송버튼 | |
| 기타 | file | 파일을 선택하여 전달 - form태그의 enctype속성값을 multipart/form-data로 설정해야만 한다 |
| hidden | 사용자에게 값을 입력받지 않고 원하는 값을 전달하기 위해서 사용 value를 꼭 주어야한다 | |
| 이메일을 입력받아 전달 - 이메일 검증 | ||
| number | 숫자를 입력받아 전달 - 숫자가 아니면 전달이 안됨 | |
| tel | 전화번호를 입력받아 전달 - 스마트기기에서 입력패드가 변경되도록 하는 기능을 하지 , 유효성검사를 하는것이 아님 | |
| url | 전화번호를 입력받아 전달 - 스마트기기에서 입력패드가 변경되도록 하는 기능을 하지 , 유효성검사를 하는것이 아님 | |
| search | 전화번호를 입력받아 전달 - 스마트기기에서 입력패드가 변경되도록 하는 기능을 하지 , 유효성검사를 하는것이 아님 | |
| color | 색을 선택하여 전달 - 색상값(#RRGGBB)문자열로 전달된다 | |
| range | 등급을 선택하여 전달 -min과 max속성으로 범위를설정 할 수 있다 | |
| date | 날짜를 입력(선택)받아 전달 | |
| time | 시간을 입력(선택)받아 전달 | |
| datetime-local | 날짜와 시간을 입력(선택)받아 전달 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>input태그</h1>
<hr>
<form action="" method="post" name="form">
<input type="hidden" name="num" value="100">
<p>아이디 : <input type="text" name="id" size="10"
maxlength="20" autofocus="autofocus" required="required"></p>
<p>비밀번호 : <input type="password" name="passwd" placeholder="비밀번호를 입력해 주세요.">
<p>이름 : <input type="text" name="name" value="홍길동" readonly="readonly">
<p>성별 : <input type="radio" name="gender" value="M" checked="checked">남자
<input type="radio" name="gender" value="W">여자</p>
<p>취미 : <input type="checkbox" name="hobby" value="등산">등산
<input type="checkbox" name="hobby" value="낚시">낚시
<input type="checkbox" name="hobby" value="게임">게임
<input type="checkbox" name="hobby" value="독서">독서</p>
<p>사진 : <input type="file" name="file"></p>
<p>이메일 : <input type="email" name="email"></p>
<p>나이 : <input type="number" name="age" min="1" max="200"></p>
<p>전화번호 : <input type="tel" name="phone"></p>
<p>SNS : <input type="url" name="sns"></p>
<p>검색단어 : <input type="search" name="keyword"></p>
<p>좋아하는 색 : <input type = "color" name = "color">
<p>java 수준 : 상<input type = "range" name = "degree" min = "1" max = "3">하</p>
<p>생년월일 : <input type = "date" name = "birthday"></p>
<p>기상시간 : <input type = "time" name = "wakeuptime"></p>
<p>알람시간 : <input type = "datetime-local" name = "alarm"></p>
<!-- form태그의 입력값 전달기능(submit) 구현하기 위한 태그들 -->
<!-- 👉input 태그의 type속성값으로 submit 설정(submit button) -->
<!-- 👉button 태그의 type속성값으로도 submit설정이 가능하다 -->
<!-- 👉img 태그의 type속성값으로도 submit설정이 가능하다 -->
<!-- 👉태그의 클릭이벤트핸들러로 등록된 javaScript로 이용하여 submit기능을 구현할 수 도 있다.-->
<!-- <input type="submit" value="회원가입">-->
<button type = "submit"></button>
<!-- form태그의 입력값 전달기능(submit) 구현하기 위한 태그들 -->
<!-- 👉input 태그의 type속성값으로 submit 설정(submit button) -->
<!-- 👉button 태그의 type속성값으로도 submit설정이 가능하다 -->
<!-- 👉img 태그의 type속성값으로도 submit설정이 가능하다 -->
<!-- 👉태그의 클릭이벤트핸들러로 등록된 javaScript로 이용하여 submit기능을 구현할 수 도 있다.-->
<input type = "reset" value = "다시입력"></button>
<button type = "reset"></button>
</form>
</body>
</html>
📌label태그
: label태그 범위를 선택하면 입력초점이 제공된다(사용자 편의성을 제공을 하기 위해)
예를들면 체크박스의 이름을 클릭해도 해당 체크박스가 ✔되는것.
- label태그의 for속성 을 이용하면 라벨을 줄 텍스트(?)가 떨어져있는 경우에도 사용할 수 있게된다
- for = "id" 형식으로 사용하면된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>Label 태그</h1>
<hr>
<!-- label 태그 미사용 : 입력태그를 선택해야만 초점을 제공한다 -->
<h3>label태그 미사용</h3>
<p>이름 : <input type = "text"></p>
<p>취미 :
<input type = "checkbox">등산
<input type = "checkbox">낚시
<input type = "checkbox">독서
<input type = "checkbox">게임
<input type = "checkbox">산책
</p>
<hr>
<!-- label 태그 사용 : label태그 번위를 선택하면 입력초점이 제공되어진다 -->
<!-- => 라벨 태그의 for 속성을 이용하여 입력초점 제공(라벨을 줄 텍스트가 떨어져있는 경우 사용) -->
<h3>label 사용</h3>
<p><label>이름 : <input type = "text"></label></p>
<p>취미 :
<input type = "checkbox" id = "hobby1"><label for = "hobby1">등산</label>
<input type = "checkbox" id = "hobby2"><label for = "hobby2">낚시</label>
<input type = "checkbox" id = "hobby3"><label for = "hobby3">독서</label>
<input type = "checkbox" id = "hobby4"><label for = "hobby4">게임</label>
<input type = "checkbox" id = "hobby5"><label for = "hobby5">산책</label>
</p>
</body>
</html>
📌textarea태그
: 여러줄의 텍스트를 입력받아 전달
태그내용이 입력태그의 초기값으로 설정
- rows속성 : 행의 크기를 속성값으로 설정
- cols속성 : 열의 크기를 속성값으로 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>textArea태그</h1>
<hr>
<!-- textArea태그 : 여러줄의 텍스트를 입력받아 전달 -->
<!-- =>태그 내용이 입력태그의 초기값으로 설정-->
<!-- rows속성 : 행의 크기를 속성값으로 설정 -->
<!-- cols속성 : 열의 크기를 속성값으로 설정 -->
<form action = "" method = "post">
<table>
<tr>
<td>장점</td>
<td>
<textarea rows = "5" cols = "80" name = "good">장점이 많습니다</textarea>
</td>
</tr>
<tr>
<td>단점</td>
<td>
<textarea rows = "5" cols = "80" name = "good">단점도 많습니다</textarea>
</td>
</tr>
<tr>
<td colspan = "2">
<button type = "submit">입력확인</button>
</td>
</tr>
</table>
</form>
</body>
</html>
📌select태그
: 목록 중 하나만 선택하여 전달
- 하위태그로 option, optgroup이 있다.
- option태그 : 선택목록을 출력한다
- optgroup 태그: 선택목록들의 그룹을 출력
- selected 속성 : 우선선택을 결정한다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<h1>select태그</h1>
<hr>
<!-- select 태그 : 목록 중 하나만 선택하여 전달 -->
<!-- =>하위태그 : option, option group -->
<!-- option태그 : 선택 목록 출력 -->
<!-- selected 속성 : 우선선택 설정 - 속성값 생략 가능 -->
<form action = "" method = "post">
<label for = "class">학과</label>
<select id = "class" name = "class">
<!-- optgroup 태그 : 목록 그룹 출력-->
<!-- label 속성 : 그룹명을 속성값으로 설정 -->
<optgroup label = "공과대">
<option value = "arch">건축공학과</option>
<option value = "computer" selected = "selected">컴퓨터공학과</option>
<option value = "machanic">기계공학과</option>
<option value = "checmical">화확공학과</option>
<option value = "indust">산업공학과</option>
</optgroup>
<optgroup label = "인문대">
<option value = "philo">철학과</option>
<option value = "lang">어문학과</option>
<option value = "history">사학과</option>
</optgroup>
</select>
<button type = "submit">입력</button>
</form>
<body>
</body>
</html>
📌datalist태그
: input태그의 입력값을 제공한다
- datalist의 list안에 들어가있는 목록들을 입력폼에 focus를 주었을때 밑에 촤르륵 뜨게 한다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>datalist 태그</h1>
<hr>
<!-- datalist태그 : input태그의 입력값을 제공 -->
<form action="" method = "post"></form>
<label for = "subject">좋아하는 과목</label>
<!-- list속성 : 목록을 제공하는 datalist태그 고유값을 속성값으로 설정 -->
<input type = "text" name = "subject" id = "subject" list = "subject_list">
<button type = "submit">입력완료</button>
<datalist id = "subject_list">
<option> JAVA </option>
<option> Servlet </option>
<option> Spring </option>
</datalist>
</body>
</html>
📌fieldset태그
: 입력영역 구분하는 역할
- 하위태그로 legend태그가 있다
- legend태그 : 입력 영역의 제목을 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
<style type="text/css">
fieldset {
width: 500px;
margin: 5px 20px;
}
li {
list-style-type: none;
}
</style>
</head>
<body>
<h1>fieldset 태그</h1>
<hr>
<!-- fieldset 태그 : 입력영역 구분 - 하위태그 : legend -->
<h3>회원가입</h3>
<form action="" method="post">
<fieldset>
<!-- legend 태그 : 입력영역의 제목 출력 -->
<legend>로그인 정보</legend>
<ul>
<li>아이디 : <input type="text" name="id"></li>
<li>비밀번호 : <input type="password" name="passwd"></li>
</ul>
</fieldset>
<fieldset>
<legend>사용자 정보</legend>
<ul>
<li>이름 : <input type="text" name="name"></li>
<li>이메일 : <input type="text" name="email"></li>
<li>전화번호 : <input type="text" name="phone"></li>
<li>주소 : <input type="text" name="address"></li>
</ul>
</fieldset>
<fieldset>
<ul>
<li>
<button type="submit">회원가입</button>
<button type="reset">다시입력</button>
</li>
</ul>
</fieldset>
</form>
</body>
</html>
CSS
- css는 단계적적용이 된다
- 상속의 개념이 중요하다
- 선택자의 개념도 중요하다
📌old(css를 쓰지않고)
: 태그와 디자인 관련 태그 속성을 이용하여 웹문서 디자인
=> 생산성과 유지보수의 효율성이 낮아진다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 align = "center">old style</h1>
<hr>
<p><font size = "7" color = "green">브라우저에 출력될 내용</font></p>
<p><font size = "7" color = "blue">브라우저에 출력될 내용</font></p>
<p><font size = "7">브라우저에 출력될 내용</font></p>
<p><font size = "7">브라우저에 출력될 내용</font></p>
</body>
</html>📌css의 사용
: style태그를 사용하여 웹문서의 스타일을 설정한다
- type속성값으로 "text/css"를 설정하여 css스타일을 사용
- 선택자를 이용하여 박스모델을 선택할 수 있다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- style 태그 : 웹문서의 스타일 설정 -->
<!-- type 속성값으로 "text/css"를 설정하여 CSS스타일을 사용 -->
<style type="text/css">
/* CSS 주석문 */
/*
Selector[,Selector.....][:paduo - class]
property: Value[value value....];
property: Value [value vlaue....];
....
*/
/* 선택자(Selector) : 엘리먼트(태그 - 박스모델)를 선택하기 위한 표현형식*/
h1 {
text-align : center;
}
p {
font-size : 40px;
color: red;
}
p:nth-child(2n) { /*2n번째에 놓인것에만 해당*/
color : blue;
}
</style>
</head>
<body>
<h1>CSS 스타일</h1>
<hr>
<p>브라우저에 출력될 내용</p>
<p>브라우저에 출력될 내용</p>
<p>브라우저에 출력될 내용</p>
<p>브라우저에 출력될 내용</p>
</body>
</html>📌cascade
: 부모 엘리먼트에 적용된 스타일은 자식 엘리먼트에 상속되어 적용된다
- !important : 단계적 적용을 무시하고 최우선적인 스타일을 적용하기 위한 메소드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*
부모 엘리먼트에 적용된 스타일은 자식 엘리먼트에 상속되어 적용된다
=>일부스타일은 상속되지 않는다.
*/
body {
color : red;
}
/*
스타일은 HTML선언 순서 또는 CSS선언 순서에 의해 단계적으로 적용된다
*/
p {
color : blue;
}
/*
!important : 단계적 적용을 무시하고 최우선적인 스타일을 적용하기 위한 메소드?
*/
ul{
color : aqua !imporant; /*aqua색이 우선적으로 선택된다*/
}
ul{
color : green;
}
</style>
</head>
<body>
<h1>CascadeStyleSheet 스타일의 단계적 적용과 상속</h1>
<hr>
<p>브라우저에 출력될 아주 중요한 내용입니다</p>
<ul>
<li>아주 중요한 내용01</li>
<li>아주 중요한 내용02</li>
<li>아주 중요한 내용03</li>
</ul>
</body>
</html> 📌format
- 전체웹문서
-link 태그 : 외부파일을 불러와 내용을 포함하는 기능 제공
-CSS파일을 읽어 웹문서에 CSS스타일 적용
-모든 웹문서에 동일한 스타일을 적용하기 위해 사용 - 사이트에 일관성을 제공하기 위해서 사용 - 현재웹문서
-style태그로 현재 웹문서의 css스타일 적용
-선택자로 선택된 모든 엘리먼트에 동일한 스타일이 적용 - 특정부분
-태그의 style속성으로 CSS속성을 저용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 📌(전체웹문서)link 태그 : 외부파일을 불러와 내용을 포함하는 기능 제공 -->
<!-- CSS파일을 읽어 웹문서에 CSS스타일 적용 -->
<!-- 모든 웹문서에 동일한 스타일을 적용하기 위해 사용 - 사이트에 일관성을 제공하기 위해서 사용 -->
<link href="04_style.css" style type="text/css" rel = "stylesheet">
<!-- 📌(현재 웹문서)style태그로 현재 웹문서의 CSS스타일 적용 -->
<!-- 선택자로 선택된 모든 엘리먼트에 동일한 스타일 적용 -->
<style type="text/css">
/*
*/
h2 {
color : skyblue;
}
h3{
color : blue;
}
h4{
color : aqua;
}
</style>
</head>
<body>
<h1>CSS 스타일 적용 방법</h1>
<hr>
<h2>브라우저에 출력될 아주 중요한 내용 입니다.</h2>
<h3>브라우저에 출력될 아주 중요한 내용 입니다.</h3>
<!-- 📌(특정부분)태그의 style속성으로 CSS 속성을 적용 -->
<h4 style = "color : marron;">브라우저에 출력될 아주 중요한 내용 입니다.</h4>
</body>
</html>📌Selector - basicSelector
- *참고) 부트스트랩을 이용하면 선택자들이 미리 만들어져 있기 떄문에(스타일이 미리 다 만들어져있기 때문에) 그냥 가져다 사용하면 된다
1) 전체선택자 : 모든 엘리먼트를 선택한다(비권장)
- * 을 이용한다
2) 태그선택자 : 태그명을 이용하여 엘리먼트를 선택
3) ★클래스 선택자 : 태그의 class속성값을 이용하여 엘리먼트를 선택
- 사용하는이유? : 다수의 엘리먼트를 선택해서 스타일을 적용하기 위해서이다
- 클래스 선택자는 태그선택자와 구별하기 위해 . 을 앞에 붙여서 사용한다
4) 아이디 선택자 : 태그의 id속성값을 이용하여 엘리먼트 선택
- 주로 레이아웃과 관련된것에 많이 사용
- 하나의 엘리먼트를 선택하여 스타일 적용
- 아이디 선택자는 태그 선택자와 구분하기 위해 (#)을 이용한다
5) 후손 선택자 : 상위 엘리먼트에 존재하는 모든 하위 엘리먼트(계층적 구조를 가지고 있다)에서 선택
- 형식) 부모 선택자(공백)후손선택자
6) 자식 선택자 : 엘리먼트에 아래에 존재하는 하위 엘리먼트에서 선택
- 형식) 부모 선택자(>)자식 선택자
7) 필터 선택자 : 다수의 선택 엘리먼트 중 원하는 엘리먼트만을 선택할 때 사용
- 원하는 엘리먼트는 클래스 선택자를 사용하여 선택
- 형식) 선택자(.)클래스선택자
8) 인접형제 선택자 : 선택 엘리먼트와 같은 깊이의 엘리먼트 중 첫번째 엘리먼트를 선택
- 형식) 선택자(+)선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type = "text/css">
/* 전체 선택자 : 모든 엘리먼트 선택 - 비권장 */
/* * {
margin : 0;
padding
}
*/
/* 태그선택자 : 태그명을 이용하여 엘리먼트 선택 */
h2 {color : green;}
p {color : blue;}
/* 클래스 선택자 : 태그의 class속성값을 이용하여 엘리먼트 선택 */
/* 클래스 선택자를 사용하는 이유 : 다수의 엘리먼트를 선택하여 스타일 적용하기 위해서 이다. */
/* => 클래스 선택자는 태그선택자와 구별하기 위해 (.)을 앞에 붙여 사용함 */
.text1 {color : aqua;}
.text2 {text-align : center;}
.text3 {color : orange;}
/* 아이디 선택자 : 태그의 id속성값을 이용하여 엘리먼트 선택 - 주로 레이아웃과 관련된것에 많이 사용
=> 하나의 엘리먼트를 선택하여 스타일 적용
=> 아이디 선택자는 태그 선택자와 구분하기 위해 ()#)을 이용한다
*/
#text4 {color : olive;}
#text5, text6 {color : gray;} /* 선택자는 ,를 이용하여 여러개 나열하여 선언가능*/
/*
후손 선택자 : 상위 엘리먼트에 존재하는 모든 하위 엘리먼트(계층적 구조를 가지고 있다)에서 선택
형식) 부모 선택자(공백)후손선택자
*/
#super1 div {color : purple;}
/*
자식 선택자 : 엘리먼트에 아래에 존재하는 하위 엘리먼트에서 선택
형식) 부모 선택자(>)자식 선택자
*/
#super2 > div {color : lime;}
/*
필터 선택자 : 다수의 선택 엘리먼트 중 원하는 엘리먼트만을 선택할 때 사용
=> 원하는 엘리먼트는 클래스 선택자를 사용하여 선택
형식) 선택자(.)클래스선택자
*/
#super3 div{color : maroon;}
#super3 div.choice{color : red;}
/*
형제 선택자 : 선택 엘리먼트와 같은 깊이의 엘리먼트 중 원하는 엘리 먼트를 선택
=> 원하는 엘리먼트는 클래스 선택자를 사용하여 선택
형식) 선택자(~)선택자
*/
#h2~p{color : magenta;}
/*
인접 형제 선택자 : 선택 엘리먼트와 같은 깊이의 엘리먼트 중 첫번째 엘리먼트를 선택
형식) 선택자(+)선택자
*/
#h2+p{color : pink;}
</style>
</head>
<body>
<h1>기본선택자</h1>
<hr>
<h2>태그선택자</h2>
<p>브라우저에 추력될 아주 중요한 내용</p>
<p>브라우저에 추력될 아주 중요한 내용</p>
<p>브라우저에 추력될 아주 중요한 내용</p>
<!-- class속성 : 스타일 적용을 위한 class이름을 속성값으로 설정할 수 있음 -->
<!-- => class 속성값은 공백을 이용하여 여러개 작성이 가능 - 다수의 스타일을 적용 -->
<!-- 태그에 같은 class 속성값을 사용 가능 -->
<h2 class = "text1">태그선택자</h2>
<p class = "text1 text2">브라우저에 추력될 아주 중요한 내용</p>
<p class = "text1 text2">브라우저에 추력될 아주 중요한 내용</p>
<p class = "text2 text3">브라우저에 추력될 아주 중요한 내용</p>
<hr>
<!-- id 속성 : 태그에 고유값을 속성값으로 설정 -->
<!-- id속성값은 하나만 작성가능하며, 중복 사용이 불가능하다
중복되면 나중에 자바스크립트 자체가 실행안되는 오류가 일어날 수 있으므로 주의 -->
<h2 id = "text4">아이디 선택자</h1>
<p id = "text5">브라우저에 추력될 아주 중요한 내용</p>
<p id = "text6">브라우저에 추력될 아주 중요한 내용</p>
<hr>
<h2>후손선택자</h2>
<div id = "super1">
<div>사원이름</div>
<ul>
<li><div>홍길동</div></li>
<li><div>임꺽정</div></li>
<li><div>전우치</div></li>
</ul>
</div>
<h2>자식 선택자</h2>
<div id = "super2">
<div>사원이름</div>
<ul>
<li><div>홍길동</div></li>
<li><div>임꺽정</div></li>
<li><div>전우치</div></li>
</ul>
</div>
<h2>필터 선택자</h2>
<div id = "super3">
<div>사원이름</div>
<ul>
<li><div>홍길동</div></li>
<li><div class = "choice">임꺽정</div></li>
<li><div>전우치</div></li>
</ul>
</div>
<hr>
<h2 id = "h2">형제선택자 또는 인접 형제 선택자</h2>
<p>브라우저에 출력될 아주 중요한 내용입니다</p>
<p>브라우저에 출력될 아주 중요한 내용입니다</p>
<p>브라우저에 출력될 아주 중요한 내용입니다</p>
</body>
</html>
📌Selector - 속성선택자
: 태그의 속성이나 속성값을 이용해서 엘리먼트를 선택
- 기본적형식은 선택자{속성}이다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
div{
font-size : "20px"
line-heighr : 35px
}
a{
color : red;
tex-decoration: none;
}
/* 속성 선택자 : 태그의 속성이나 속성값을 이용하여 엘리먼트 선택
형식 ) 선택자{속성} => 속성의 존재유무를 이용하여 엘리먼트를 선택
*/
a[href] {color : green;}
/*
형식 ) 선택자[속성 = "값"] => 속성값이 값과 설정값이 같은 경우 속성값을 이용
*/
a[href = "#abc"] {color : blue;}]
/*
형식 ) 선택자[속성 ~= "값"] => 속성값에 설정값이 단어로 포함된 엘리먼트를 선택
*/
div[title ~= "여성"] {color : lime;} /*여성, 여성 화장품이 바뀐다*/
/*
형식 ) 선택자[속성 *= "값"] => 속성값에 설정값이 문자로 포함된 엘리먼트를 선택
*/
div[title *= "여성"] {color : maroon;}
/*
형식 ) 선택자[속성 ^= "값"] => 속성값이 설정값으로 시작되는 엘리먼트를 선택
*/
div[title ^= "남성"] {color : magenta;}
/*
형식 ) 선택자[속성 $= "값"] => 속성값이 설정값으로 종료되는 엘리먼트를 선택
*/
div[title $= "남성"] {color : blue;}
</style>
</head>
<body>
<h1>속성 선택자</h1>
<hr>
<div><a>하이퍼링크 기능을 제공하기 위한 태그1</a></div>
<div><a href ="#">하이퍼링크 기능을 제공하기 위한 태그2</a></div>
<div><a href = "#abc">하이퍼링크 기능을 제공하기 위한 태그3</a></div>
<hr>
<div title = "여성">여성</div>
<div title = "남성">남성</div>
<div title = "화장품">화장품</div>
<div title = "여성화장품">여성화장품</div>
<div title = "여성 화장품">여성 화장품</div>
<div title = "남성화장품">남성화장품</div>
<div title = "남성 화장품">남성 화장품</div>
<div title = "화장품 남성">화장품 남성</div>
</body>
</html>
📌Selector - 가상선택자
: 선택엘리먼트의 상태에 따른 스타일을 적용
- 기본적형식은 선택자 : 상태이다
| link | 하이퍼 링크의 URL주소를 한번도 요청하지 않은 상태 |
| visited | 하이퍼링크의 URL주소를 한번이상 요청한 상태 |
| active | 선택 엘리먼트를 마우스커서로 누른상태 |
| hover | 선택 엘리먼트에 마우스 커서가 위치했을때 |
| first-child | 선택된 엘리먼트 중 첫번째 엘리먼트 선택 |
| last-child | 선택된 엘리먼트 중 마지막 엘리먼트 선택 |
| nth-child(x) | 선택된 엘리먼트 중 앞에서 x번째 엘리먼트 선택 |
| nth-child(2n-1) | 선택된 엘리먼트 중 홀수번째 엘리먼트 선택 |
| nth-child(2n) | 선택된 엘리먼트 중 짝수번째 엘리먼트 선택 |
| nth-child(xn) |
선택된 엘리먼트 중 x번째 엘리먼트 선택 |
| only-child | 선택된 엘리먼트가 하나인 경우 |
| not | 선택 엘리먼트를 제외한 엘리먼트 |
| disabled | 선택된 엘리먼트가 비활성화 상태 |
| checked | 엘리먼트가 선택된 상태(radio, checkbox) |
| selected | 엘리먼트가 선택된상태(option) |
| focus | 입력초점이 위치한 상태 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
font-size: 20px;
line-height: 35px;
}
a {
color: orange;
text-decoration: none;
}
a:link {
color: lime;
}
a:visited {
color: olive;
}
a:active {
color: purple;
}
a:hover {
color: blue;
text-decoration: underline;
}
ul li:first-child { color: red; }
ul li:last-child { color: green; }
ul li:nth-child(2) { color: gold; }
ul li:nth-last-child(2) { color: silver; }
/*ol li:nth-child(2n-1) {color : orange;}*/
ol li:nth-child(odd) {color : orange;}
/*ol li:nth-child(2n) {color : megenta;}*/
ol li:nth-child(even) {color : megenta;}
ol li:nth-child(3n) {color : lime;}
ol li:only-child {color : red;}
input {
border : 1px solid pink;
}
input[type = "text"]{
border : 1px solid aqua;
}
input:not(type = "text"]) {border : 1px solid ornage;}
input[type = "text"] {border : 2px dotted purple;}
input:focus { border : 3px solid red;}
</style>
</head>
<body>
<h1>가상 선택자</h1>
<hr>
<div>
<a href="http://www.daum.net">다음</a>
<a href="http://www.naver.com">네이버</a>
<a href="http://www.google.com">구글</a>
</div>
<ul>
<li>홍길동</li>
<li>전우치</li>
<li>홍경례</li>
</ul>
<ol>
<li>홍길동</li>
<li>전우치</li>
<li>홍경례</li>
</ol>
<ol>
<li>홍길동</li>
</ol>
<table>
<tr>
<td>아이디</td>
<td>
<input type = "text" name = "id" vlaue="abc123" readonly = "readonly">
</td>
<tr>
<td>아이디</td>
<td>
<input type = "text" name = "id" vlaue = "abc123" disabled = "disabled">
</td>
</tr>
<tr>
<td>비밀번호</td>
<td>
<input type = "password" name = "password" >
</td>
</tr>
<tr>
<td>이메일</td>
<td>
<input type = "email" name = "email" >
</td>
</tr>
</table>
</body>
</html>'💻 수업정리 (2020) > CSS & HTML' 카테고리의 다른 글
| [7/13] 박스모델 (0) | 2020.07.13 |
|---|---|
| [7/10] font의 사용과 이미지 사용 (0) | 2020.07.10 |
| [7/8 HTML] 태그 이용하기 (0) | 2020.07.08 |
| [7/7] WAS와 아파치 톰캣을 이용하여 웹서버 환경설정하기 (0) | 2020.07.07 |