스터디 주제
- HTML input, label, textarea, select, datalist, fieldset 태그
- CSS 선택자
스터디 내용
<HTML 태그>
- Input 태그
- Label 태그
- Textarea 태그
- Select 태그
- Datalist 태그
- Fieldset 태그
<CSS 선택자>
<종합예제실습>
<HTML 태그>
input 태그
min 속성 : 최소값을 속성값으로 설정
max 속성 : 최대값을 속성값으로 설정
type 속성값
- email(HTML5) : 이메일을 입력받아 전달 - 입력값에 대한 이메일 형식 검증
- number(HTML5) : 숫자값을 입력받아 전달(증가 또는 감소 버튼 제공)
- tel(HTML5) : 전화번호를 입력받아 전달 - 스마트기기의 입력패드 변경
- url(HTML5) : URL 주소를 입력받아 전달 - 스마트기기의 입력패드 변경
- search(HTML5) : 검색 관련 키워드를 입력받아 전달 - 스마트기기의 자동완성 기능 사용
- color(HTML5) : 색 선택하여 전달 전달
- range(HTML5) : 등급을 입력받아 전달 - min 속성과 max 속성으로 등급 설정
- date(HTML5) : 날짜(년-월-일)를 입력받아 전달 - 달력을 이용하여 날짜 선택 가능
- time(HTML5) : 시간({오전|오후}시:분)를 입력받아 전달 - 시계를 이용하여 시간 선택 가능
- datetime-local(HTML5) : 날짜와 시간을 입력받아 전달 - 날짜와 시간 선택 가능
- form 태그에서 입력태그 외에 요청 이벤트(Submit Event)를 제공하는 태그가 반드시 존재
- form 태그의 선언된 모든 입력태그에 대한 초기화 이벤트(Reset Event)를 제공하는 태그
label 태그
입력태그에 입력초점(포커스 - Focus)를 제공
label 태그를 사용하면 label 태그 범위의 박스모델을 선택해도 입력초점 제공
textarea 태그 : 여러 줄의 텍스트를 입력받아 전달
- rows 속성 : 입력태그의 행크기를 속성값으로 설정
- cols 속성 : 입력태그의 열크기를 속성값으로 설정
Select 태그
select 태그 : 목록에서 1개 또는 1개 이상을 선택하여 전달
=> 하위태그 : option, optgroup
- multiple 속성 : 다수의 목록을 선택하여 전달 - 속성값 생략 가능
optgroup 태그 : 목록에 대한 그룹 설정
- label 속성 : 그룹명을 속성명으로 설정
option 태그 : 선택 목록 출력
- selected 속성 : 우선 선택 설정 - 속성값 생략 가능
datalist 태그 : input 태그에 입력 가능한 값을 제공 - 하위태그 : option
- list 속성 : datalist 태그의 식별자를 속성값으로 설정
fieldset 태그 : 입력영역 구분 - 하위태그 : legend, input, select, textarea
legend 태그 : 입력영역의 제목 출력
<CSS>
선택자(Selector)
선택자(Selector) : 엘리먼트(태그 - 박스모델)을 선택하기 위한 표현방법
style 태그 : 웹문서에 스타일 설정
=> type 속성값으로 [text/css]를 설정하여 CSS 스타일 적용
/* CSS 주석문 /
Selector[, Selector,...][:paduo-class] { Property: Value [value ...]; Property: Value [value ...]; .... } */
부모 엘리먼트에 적용된 스타일은 자식 엘리먼트에 상속되어 적용
⇒ 상속되지 않는 스타일 속성 존재
DOM 트리 구조
부모 엘리먼트에 적용된 스타일은 자식 엘리먼트에 상속되어 적용 => 상속되지 않는 스타일 속성 존재
스타일은 CSS 선언 순서 또는 HTML 선언 순서에 의해 단계적으로 적용 !important : 단계적 적용을 무시하고 최우선적으로 적용될 스타일에 대한 속성값 HTML 태그의 계층 순서에 의해 스타일 적용 - 자식 엘리먼트가 나중에 적용
link 태그 : 외부파일을 불러와 내용을 연결하는 기능 제공
=> CSS 파일을 불러와 웹문서에 CSS 스타일 적용
href 속성 : 불러올 외부파일의 URL 주소를 속성값으로 설정
type 속성 : 불러올 파일 형식(MimeType)을 속성값으로 설정
rel 속성 : 파일 연결 관계를 속성값으로 설정 - CSS 파일의 속성값 : stylesheet
모든 웹문서에 동일한 스타일 적용하기 위해 사용
CSS 적용방법
- 링크 에 미리 스타일 적용하여 가져다 쓰기 - 전체적인 서식 통일성을 위함
- style 태그 사용 - 선택자로 선택한 엘리먼트마다 적용을 위함
- 태그의 style 속성 적용 - 세부적인 스타일 적용의 위함
*(전체 선택자) : 모든 엘리먼트를 선택 - 비권장
클래스 선택자 :
class 속성 : CSS 스타일 적용을 위한 클래스명을 속성값 설정
태그에는 동일한 class 설정 가능 - 다수의 태그에 동일한 스타일 적용
class 속성값은 공백을 이용하여 여러 개 설정 가능 - 하나의 태그에 여러개의 스타일 적용
클래스 vs 태그 선택자
다양한 스타일 적용에 용이 (태그 선택자는 1가지 스타일만 적용 가능)
id 선택자
: 태그의 id 속성값을 이용하여 엘리먼트 선택
=> id 속성값으로 하나의 엘리먼트를 선택하여 동일한 스타일 적용 태그 선택자와 구분하기 위해 id 선택자는 id 속성값 앞에 [#]으로 시작되도록 표현 선택자는 ,를 사용하여 여러 개 나열하여 선언 가능
id 속성 : 태그 식별자를 속성값 설정
=> 태그를 구분하기 위한 고유값으로 다른 태그와 같은 id 속성값 설정 불가능
id 선택자와 class 선택자를 쓰는 이유는
css에서 디자인 할때 내용이 중복되거나(class 선택자 사용)
특정 부분에만 디자인 하고 싶을 때(id 선택자 사용)
이름을 부여해서 디자인을 한다.
후손 선택자 :
부모 엘리먼트의 내부의 엘리먼트 중 선택자로 선택된 모든 깊이의 엘리먼트 선택 형식)부모선택자 후손선택자
자식선택자 :
부모 엘리먼트의 첫번째 깊이의 엘리먼트 선택
형식)부모선택자 > 자식선택자
필터선택자:
다수의 선택 엘리먼트 중 원하는 엘리먼트만 선택
=> 필터 선택자는 클래스 선택자로만 선언 가능
형식)선택자.클래스선택자
형제 선택자
선택 엘리먼트와 다음에 출력될 같은 깊이의 엘리먼트 선택
형식)선택자 ~ 자식 선택자
인접 형제 선택자
선택 엘리먼트와 다음에 출력될 같은 깊이의 첫번째 엘리먼트 선택
형식)선택자 + 자식 선택자
<<실습 예제>>
'Web Dev' 카테고리의 다른 글
| 50일차 Study (1) | 2021.12.23 |
|---|---|
| 49일차 Study (0) | 2021.12.21 |
| 47일차 Study (0) | 2021.12.18 |
| 46일차 Study (4) | 2021.12.16 |
| 45일차 Study (0) | 2021.12.16 |