[Day 49] CSS

📍 목차
1. CSS 적용 방법
2. 실습

---

1. CSS 적용 방법

CSS (Cascading Style Sheets)

---

2. CSS 적용 실습

📌 인라인 스타일 Inline Style Sheet

👍🏻 빠르게 테스트로 style 적용하기 편리함

👎🏻 style을 수정하려면 모든 줄을 하나하나 수정... 유지보수하기 매우 불편

코드 안에 스타일 적용

---

📌 내부 스타일 Internal Style Sheet

👎🏻 파일 내부에서 코드가 복잡하지 않을 때는 괜찮지만 코드가 길어지면 style도 길어지기 때문에 복잡해진다.

title 아래 style 코드 입력 / .클래스명 으로 선언

---

📌 외부 스타일 External Style Sheet

: 코드가 길어지면 읽기 힘들기 때문에 외부에 CSS파일을 만들어 연결시키는 방법

👍🏻 유지보수, 재사용, 협업에 최적화

링크로 CSS파일과 HTML 파일을 연결시킨다.

CSS 파일을 작성하면 HTML 파일에 반영된다.

 

---

📌 display 속성

줄바꿈으로 내려가는 div와 inline 속성인 span

 

★ display.html에서는 div와 span의 속성들을 파악한 후 스타일 지정을 해야할 것 같다.

 

---

📌 Navigation 속성

<li> semantic 태그 안에 <a>태그를 넣고, class를 선언 / style에서 마진, 패딩, 호버 등 적용

---

📌 Float 

div, img 태그에 class를 선언하고, style에서 크기, 위치, 색상 등 적용 (Float-right/left)

📌 Position

집합 모양을 만들기 위해 태그 안에 태그를 구성 / style에서 사이즈, 색상 적용

---

과제.
Map UI Design

어떤 정보가 담긴 맵인가요? 또는 어떤 정보를 담아야 하나요?
(컬러 스킴은 브랜드와 조화를 이루어야 함)
푸드 딜리버리용 지도일 수 도 있고, 아니면 기차역을 인터랙티브하게 보여주는 지도일수도 있고!

 

카드... 왜 너만 올라가니..?

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

 

😵‍💫 검색까지 할 수 있게 만들어보고 싶었지만,, 컨디션 이슈로 살짝 미루기..ㅎ
근데.. 바텀시트 내용을 스크롤하면.. 바텀시트 범위를 넘어가 카드들이 올라가버린다... 왓더... 해결하려니까 머리가 또 생각을 멈춰서.. 오늘은 여기까지..ㅠ