TIL : 반응형 웹 3

https://developer.mozilla.org/ko/docs/Glossary/Entity
https://hihiha2.tistory.com/154

 

🌼 엔터티 (Entity)

 

엔터티(Entity)는 앰퍼샌드(&)로 시작하고 세미콜론(;)으로 끝나는 텍스트 조각('문자열')

엔터티는 예약된 문자에 주로 사용된다. 

 <button class="header__hamberger">&#9776;</button>
 <button class="header__search">&#128269;</button>

이렇게 하면 아래와 같이 햄버거 버튼과 돋보기 버튼을 만들 수 있다.

 

 

🌼 onsubmit = "return false;"

페이지가 새로고침 되는 것을 방지

 

🌼 reset.css

브라우저마다 기본으로 제공하는 스타일이 있기에 프로젝트 초기에 css를 초기화하고 시작하는 것이 좋다. 

 

 

 

👇 코딩할 것

<반응하는 header>

• 크기 변화에 따라 검색창이 그에 맞게 변하도록 
• 800px 정도 되면 타이틀이 없어지도록
• 400px 정도 되면 검색창 대신 돋보기가 보이도록

---

 

<반응하는 네비게이션 바>

• 기본 바
• 800px 되면 메뉴 글자가 없어지면서 빈 공간이 사라져야 함
• 400px보다 작으면 nav bar를 아예 없앤다.

 

---

<썸네일>

4열로 동영상 정렬

3열로 동영상 정렬

2열로 동영상 정렬

1열로 동영상 정렬