책 읽고 개념 정리

<실전프로젝트 반응형 웹퍼블리싱>

1. <nav>

만약 '메인 메뉴'와 '서브 메뉴'와 같이 두개 이상의 메뉴 카테고리가 있을 때,

주 메뉴인 '메인 메뉴'만 <nav>로 감싸는 것이 좋다.

---

2. input[type=number]

value = 기본값, 시작값

step= 증가하는 숫자

<input type="number" value="10" step="20">

---

3. required

input태그 안에 required="required"을 삽입하여 폼 양식이 제대로 안채워졌을 경우, '전송'버튼을 눌러도 넘어가지 않고 오류 메세지를 출력

---

4. autocomplete

input태그 안에 autocomplete="on" or autocomplete="off"를 삽입하여 자동완성 기능 해줌

---

5. list

input태그 안에 list=""를 삽입하여 미리 만들어 놓은 리스트 항목이 자동완성처럼 나타나게 해줌

<input type="text" list="something_you_want">
<datalist id="something_you_want">
    <option value="html"></option>
    <option value="css"></option>
    <option value="javascript"></option>
    <option value="jquery"></option>
    <option value="php"></option>
</datalist>

---

6. disabled, readonly

input태그 안에 disabled="disabled", readonly="readonly"를 삽입하여 해당 input에 값을 못쓰도록 막거나, 이미 정해진 값을 수정하지 못하도록 함

<input type="text" disabled="disabled">
<input type="number" value="25" readonly="readonly">

---

7. pattern

input태그 안에 pattern=""을 삽입하여 정규값과 일치하는가 확인함

(required은 그 값을 입력했는지 안했는지, pattern은 이와 동시에 제대로 썼는지까지)

---

8. multiple

input태그 안에 multiple="multiple"을 삽입하여 2개 이상의 값을 가질 수 있게 함

<input type="file" multiple="multiple">

(▲파일 1개만 선택 가능)

(▲파일 여러개 선택 가능)

---

9. :first-letter

요소의 첫글자

---

10. :first-line

요소의 첫 줄

---

11. 주의! float

float할때 가로 값을 같이 줘야 구형 브라우저에서 다 잘나옴

---

12. 주의! position

position 중 fixed는 구형브라우저에서는 안됨

---

13. background-position

background-position: cover (박스의 가로길이에 맞춰)

background-position: contain (그림의 세로길이에 맞춰)

---

14. background:url과 background-origin

background-origin: border-box (보더까지 색 채워줌)

background-origin: padding-box (보더 직전까지 색 채워줌)

background-origin: content-box (내용까지 색 채워줌)

---

15. background-color와 background-clip

background-clip: border-box (보더까지 색 채워줌)

background-clip: padding-box (보더 직전까지 색 채워줌)

background-clip: content-box (내용까지 색 채워줌)

(만약 안된다면 padding줬나 확인)

---

16. text-shadow 글자 그림자 여러개 주는 법

p {
    text-shadow: 2px 2px rebeccapurple,
    4px 4px red,
    6px 6px rosybrown,
    8px 8px royalblue;
}

hello!

---

17. word-wrap

영문을 띄어쓰기 없이 쓸경우 width값을 줘도 박스 밖으로 튀어나오는데 이때 써주면 자동 줄바꿈 됨