입력 양식
form
웹 서버에 정보를 제출하기 위한 양식을 정의하는 요소
속성 의미 값
| 속성 | 의미 | 값 |
| action | 전송한 정보를 처리할 URL | URL |
| name | 고유한 양식의 이름 | |
| method | 서버로 전송할 HTTP 방식 | GET, POST |
| autocomplete | 사용자가 이전에 입력한 값으로 자동완성 기능을 사용할 것인지 여부 | on, off |
| novalidate | 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정 | 논리값 Boolean |
| target | 서버로 전송 후 응답받을 방식을 지정 | _self, _blank |
* lang = “en” → lang = “ko” ( VSCode 파일>기본설정>설정>emmet>emmet variables 항목추가 )
// 입력한 내용을 검색할 수 있음
<form
action="https://search.naver.com/search.naver"
autocomplete="off"
novalidate
readonly
target="_blank"
>
<input type="email" name="query">
<button>검색</button>
</form>
// query=ㅇㅇㅇ ㅇㅇㅇ자리에 검색어
https://search.naver.com/search.naver?query=어피치* 검증을 더 상세하게 스크립트 만들어서 쓰려면 novalidate 사용해야 함
* 부모태그(감싸는 태그, 바깥 태그)를 추가하고 싶다면 자식태그(감싸진 태그, 안쪽 태그)가 될 대상을 선택 후
crtl+shift + p → 약어 → emmet wrap with abbreviation → 감쌀 태그 입력
⇒ ctrl + alt + t 단축키 설정 추천 (인텔리제이와 동일하게)
input
사용자에게 입력 받을 데이터 양식을 지정
- input은 빈 태그
- readonly 속성은 수정은 불가능하지만 데이터가 서버로 전송
- disabled 속성은 수정도 불가능하고 데이터가 서버로 전송 X
** img, input, button 는 inline-block
| 속성 | 의미 | 값 | 특징 |
| type | 입력받을 데이터의 종류 | 별도 정리 | |
| value | 양식의 초기값 | ||
| name | 양식의 이름 | ||
| placeholder | 사용자가 입력할 값의 힌트 | text | type이 text, search, tel, url, email일 경우만 |
| checked | 양식이 선택된 상태로 시작 | 논리값 | type이 checkbo, radio일 경우만 |
| disabled | 양식을 비활성화 | 논리값 | |
| readonly | 수정 불가한 읽기 전용 | 논리값 |
input type 속성 정리
| 값 | 데이터 종류 | 특징 |
| text | 일반 텍스트 | |
| password | 비밀번호 | 가려지는 양식 |
| 이메일 | ||
| search | 검색 | |
| checkbox | 체크박스 | |
| radio | 라디오 버튼 | 같은 name 속성 그룹 내 하나만 선택 가능 |
| number | 숫자 | |
| button | 일반 버튼 | <button> 처럼 사용 |
| submit | 서버 전송 버튼 | form 내용을 서버로 전송 |
| reset | 초기화 | form 내부 양식 모두 제거 |
| file | 파일 | |
| range | 범위 컨트롤 | min, max, step, value 속성 사용 |
| hidden | 보이지 않지만 서버로 전송할 내용 | value 속성으로 값을 지정 |
전역 속성 Global Attribute
class 속성
class - HTML: Hypertext Markup Language | MDN
- class 속성은 요소의 별칭을 지정합니다. 또한 공백을 통해 여러 개의 클래스를 지정 가능
- CSS나 JavaScript의 요소 선택기를 통해서 요소를 제어할 때 사용
id 속성
id - HTML: Hypertext Markup Language | MDN
- id 속성은 문서에서 고유한 식별자를 정의
- class는 중복으로 설정 가능하지만 id는 유일해야 함
- 정말 중요한 부분이 아니면 대부분 class로 요소를 제어하는 것이 일반적
data 속성
data-* - HTML: Hypertext Markup Language | MDN
- data-* 속성은 사용자 정의 데이터 속성을 지정
HTML에 JavaScript에서 이용할 수 있는 데이터를 저장해두는 용도로 사용
이 외에 style 속성, title 속성, 주석이 있음
CSS
HTML문서에 CSS를 적용하는 방법
1. 인라인 스타일 시트 : 태그에 style 속성 (유지보수 문제로 사용 권장X)
2. 내부 스타일 시트 : HTML 문서 안에 <style> 태그 사용 (하나의 문서에만 적용)
3. 외부 스타일 시트 : CSS파일 (확장자 .css)로 저장해두어 HTML문서에 파일명으로 연결 (*** 권장)
<html>
<head>
<link rel="stylesheet" href="css/style.css"> -- 스타일
파일 연결
</head>
<body>
<p> Hello~~ CSS!</p>
</body>
</html>* 리액트: 인라인, 내부로 보이지만 실제 컴파일 시 외부 스타일 방식이 적용됨
./style.css : 현재 폴더에서 찾아봐라 (./ 생략 가능)
../style.css : 상위 폴더에서 찾아봐라
선택자
- 전체 선택자 ( * ) vs 태그 선택자 (body)
전체 선택자는 내부의 요소 하나하나 선택
body 태그 선택자는 다른 태그들을 감싸는 body 요소 하나를 선택
클래스 선택자, 아이디 선택자
// id="apple" 선택
#apple {
background: red;
}
// class="orange" 선택
.orange {
color: orange;
font-style: italic;
}
일치 선택자
- 선택자 여러개를 동시에 만족하는 요소를 선택합니다.
ex) 태그+클래스 조합 → li.orange → li태그 && orange 클래스
태그+아이디 조합 → 태그 && 아이디
= > 모두 만족하는 요소에만 스타일 적용
** 띄어쓰기 주의! 일치 선택자가 아닌 후손 선택자로 인식할 수 있음
/* li && #apple && .green */
li#apple.green {
color: yellowgreen;
}
/* 띄어쓰는 순간 의미가 바뀜. 주의! */
li# apple .green {
color: yellowgreen;
}
h1.yellow.low#change.primary {
background: violet;
}
<h1 id="change" class="yellow low primary">안녕하세요</h1>
자식 선택자, 후손 선택자
자식 선택자 : 현재 요소 내의 바로 아래 자식 요소만을 가리키는 선택자 , 직속 자식
후손 선택자 : 바로 인접 자식이 아니어도 후손 요소 중에 어느 단계에 있기만 해도 선택 (자식 포함)
** 후손 선택자 권장
중간에 html에서 자식 태그를 추가한다면 css 의 자식 관계를 바꿔야 함
명확한 후손 구별을 위해 조상을 나열하는 방식을 사용
/*
자식, 후손, 형제 선택자
- 가장 마지막 선택자가 타겟이고
앞에는 전부 조건이다.
ul 의 자식, div 의 자식
li.orange = ul > .orange -> 적용은 둘다 되는데 우선순위가 다를 수 있음
*/
body > div > ul > #apple {
color: red;
}
body > ul > #apple { /* 적용 안 됨!! */
color: red;
}
#circle>h1.title>.left.low>#banana /* --> .left 앞에 아무것도 적지 않으면 div(기본값)*/
/* div_.orange -> div의 후손 (공백 1) */
div .orange {
background: orange;
}
/* 자식 태그를 쓰면 중간에 추가된 section 때문에 적용이 안 됨 -> 후손써라 */
body > div > ul {
list-style: none;
}
인접 형제 선택자, 일반 형제 선택자
- 인접 형제 선택자 : 현재 요소 바로 뒤에 나오는 형제 요소 한개만을 선택 (+)
- 일반 형제 선택자 : 현재 요소 바로 뒤에 나오는 형제 요소 전체를 선택 (~)
<style>
// + : 동생 인접 형제(위 형, 아래 동생)
.orange + li {
color: orangered;
}
// ~ 일반 형제 선택자
.red ~ li {
background: red;
}
</style>
</head>
<body>
<ul>
<li class="orange">어륀지</li>
<li>사과</li> // 글꼴색 변경
<li>딸기</li>
<li class="orange">오렌지</li>
<li class="red">자몽</li> // 글꼴색 변경
<li>포도</li> // 배경색 변경
<li>레몬</li> // 배경색 변경
</ul>
* 형제 선택자 응용
tr + tr : 첫번째 tr 빼고 전부
그룹 선택자
여러 개의 선택자를 콤마(,)를 구분자로 사용해 나열해서 선택
p, span {
font-size: 1.5em;
color: red;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: 400;
margin: 0;
padding: 0;
}
.apple #fox,
div > div.tiger,
.banana {
}
속성 선택자
- html태그의 속성을 사용하여 선택 ( [속성=속성값] )
- [attribute^="a" ]: a로 값이 시작하는 해당 속성들 선택
- [attribute$=value]: 속성 값이 특정 문자열로 끝나는 요소를 선택
- [attribute*=value]: 속성 값에 특정 문자열이 포함된 요소를 선택
// style 속성 선택자
[type=password] {
color: red;
width: 100px;
}
[disabled] {
opacity: 0.3;
}
input[checked] {}
div.apple #lion[value=1234] {} // div.apple 후손 #lion[value~]속성 선택
a[href^="#"] { // a태그 href 속성 중 #으로 시작하는 요소 선택
color: orange;
}
img[src$=".png"] {}
<!-- div*3>input -->
<div><input type="text" value="hello"></div>
<div><input type="password" value="1234"></div>
<div><input type="text" value="금지금지" disabled></div>
* :not(selector): 특정 선택자와 일치하지 않는 요소를 선택
가상 클래스 선택자 Pseudo class selector
:hover
마우스를 해당 요소에 올려뒀을 때
<style>
a {
color: orange;
}
a:hover {
font-size: 20px;
font-weight: 700;
color: red;
}
</style>
:active
mouse down, 마우스로 해당 요소를 꾹 누를 때
.box {
width: 100px;
height: 100px;
background: red;
transition: 0.7s;
}
.box:hover {
width: 200px;
background: orange;
/* transition: 1s; 본체에 해야 hover 되고 안될때 모두 적용*/
}
.box:active {
height: 200px;
background: yellowgreen;
}
:focus
input이나 tab키로 해당 요소를 선택해서 커서가 활성화된 상태면 focus (↔blur)
#common {
width: 100px;
margin-top: 20px;
padding: 5px;
outline: none;
transition: 0.5s;
}
#common:focus {
border-color: red;
width: 200px;
}
** 개발용어로 "focus"와 "blur"를 설명할 때 일반적으로 사용되는 용어는 "active"와 "inactive"
focus는 요소가 활성화되거나 사용자 입력을 받을 수 있는 상태
blur는 요소가 비활성화되거나 사용자 입력을 받을 수 없는 상태
:nth-child()
<style>
#fruits li:nth-child(1) {
color: red;
}
li:nth-child(2) {
color: yellowgreen;
font-size: 20px;
}
#fruits li:first-child {
font-size: 24px;
}
/* n에서 0부터 순차적으로 대입해봤을때
선택되는 태그를 스타일 적용 */
#fruits li:nth-child(2n) {
background: aqua;
}
#food li:nth-child(3) {
background: rgb(228, 228, 205);
}
#food li:last-child {
background: rgb(228, 228, 205);
}
</style>
*** nth-child 주의사항
중간에 다른 태그가 있다면? 어디의 n번째인지 주의!
- nth-child(전체 요소 중 n번째)
- nth-type-of(같은 요소 중 n번째)
// 적용 안 됨 (sports 자식들 중 3번째 먼저 찾고 -> div 확인 -> 안 맞아서 적용X)
.sports div:nth-child(3) {
background: blue;
}
// 전체 요소 중 n번째 (배구 적용)
.sports div:nth-child(4) {
background: blue;
}
// 다른 태그를 직접 지정 (하하호호)
.sports p:nth-of-type(1) {
font-style: italic;
}
// 같은 태그 중 n번째 요소 (배구)
.sports div:nth-of-type(3) {
font-style: italic;
}
</style>
</head>
<body>
<div class="sports">
<div>축구</div>
<div>농구</div>
<p>하하호호</p>
<div>배구</div>
<div>야구</div>
</div>
before, after
- 도형을 만드려면 display 속성 필수
- before, after에 content 속성은 무조건 써야함
** 연습 문제 중 헷갈렸던 :not() 사용
div.container > :not(p) p {
font-weight: bold;
}=> div.container 자식 중 p는 제외하고, 후손 중 p 선택
/* 5. 모든 `<a>` 태그 중 "href" 속성값이 "#"으로 시작하는 요소를 선택하세요.
6. "main-content" 바로 안의 첫 번째 `<article>` 요소를 제외한 모든 `<article>` 요소를 선택하세요. */
a[href^="#"] {
color: orange;
}
#main-content>article:not(:first-of-type) {
border: 1px solid blueviolet;
}
:not 연습하다 보니 not() 안에 odd를 대입하는 방식으로 풀었는데
홀수를 제외하고 = 짝수만 선택 으로 푸는 게 더 직관적일 듯 함
/* "menu" 클래스를 가진 <ul> 요소 내의 <li> 태그 중에서
홀수 번째 자식인 <li> 요소를 제외한 모든 <li> 요소에 배경 색상을 적용하세요.
*/
.menu>li:not(:nth-child(odd)) {
background: bisque;
}
//:not을 사용하지 않고 even만 적용
.menu li:nth-child(even) {
background-color: #f2f2f2;
}
