Daily Coding Daily Coding

오늘 배운 내용 1️⃣ CSS 변수 2️⃣ 루트, html, * 선택자 비교 3️⃣ css transform, transition 1️⃣ CSS 변수 1. 선언 방법 --변수명: 값; 2. 사용 방법 속성: var(--변수명); ** 디폴트값 선언 가능 var(--변수명, default 값); 3. 예시 --color-grey-100: rgb(236, 236, 236); background-color: var(--color-grey-100); 2️⃣ 루트, html, * 선택자 비교 html html 요소를 선택한다(html 파일의 최상위 루트 요소) CSS 규칙은 html 및 html의 다른 요소에도 상속된다 :root (가상 선택자) 문서의 최상위 루트 요소를 선택한다 최상위 요소 안에 포함된 요소에..

💡 반응형 웹사이트 만들기 미디어 쿼리 미디어쿼리 작성법 @media (min-width or max-width: 1200px) { p { font-size: 2rem; } } max-width Desktop 먼저 작업 후 Mobile 작업 min-width Mobile 먼저 작업 후 Desktop 작업 반응형웹 & 햄버거 메뉴를 만들어보자! HTML 태그 WEBFOOD Browse Meals My Orders Browse Meals My Orders CSS 태그 /* *************************************************************** */ /* ham menu */ .menu-btn { width: 2rem; height: 2rem; display: fle..

나는 음식 컨텐츠를 정렬하기 위해 display: flex 속성을 사용했는데, 강의에서는 display: grid 속성을 사용해서 차이점을 찾아봤다 flex는 1차원으로 수평 수직 중 하나의 방향으로만 레이아웃 할 수 있는 반면, grid는 2차원으로 수평, 수직을 동시에 레이아웃 할 수 있다! *flex 속성과 grid 속성에 대한 추가 강의를 들은 뒤 포스팅 업데이트 예정

💡 이번 모듈 목표: 반응형 웹사이트 만들기 먼저 반응형 웹사이트로 만들어보기 적합한 웹사이트를 퍼블리싱했다! (햄버거 먹고싶다) em? rem? %? 어떤 것을 사용해야 할까? 평소에 사용하던 익숙한 px 외에 다른 단위들을 서로 비교해보자 px % em rem 이해하기 쉽고, 절대적인 값이다 부모 요소에 상대적이다 폰트 사이즈에 상대적이다 root element(HTML, 브라우저)의 폰트 사이즈에 상대적이다 사용자 환경에 구애를 받지 않고, 사이즈가 바뀌지 않는다 폭포처럼 부모- 자식 간의 연속적인 속성 때문에 다루기가 어렵다 폭포처럼 부모- 자식 간의 연속적인 속성 때문에 다루기가 어렵다 만약 적용 가능한 경우 선호된다 구글 크롬 - 환경설정에서 브라우저의 기본 폰트 사이즈가 16임을 확인할 수 ..

🔥 카드를 배치하는데 이용한 주요 css 속성 display: grid grid-templete-columns: nfr nfr : nth-of-type grid-column 유니코드 문자를 이용해서 버튼 옆에 화살표 만들기 Arrows (Unicode block) - Wikipedia Unicode block Unicode character block ArrowsRangeU+2190..U+21FF(112 code points)PlaneBMPScriptsCommonAssigned112 code pointsUnused0 reserved code points1.0.0 (1991)91 (+91)3.0 (1999)100 (+9)3.2 (2002)112 (+12) Code chartNote: [1][2] Arrow..

overflow border radius 값이 이미지에 먹히지 않는 현상 발생! 💡overflow: hidden * 컨테이너 자식에게 적용X, 컨테이너 자체에 적용O main li { display: flex; background-color: white; box-shadow: 0px 4px 16px 2px rgba(219, 219, 219, 0.561); border-radius: 16px; overflow: hidden; width: 600px; } CSS grid 💡 Task - Card를 2개씩 한 줄에 두고 싶다 - Card 3는 한 열을 다 차지하게 하고 싶다 /* css grid */ display: grid; /* 그리드 내 사용 가능한 공간 정의하는 방법: fr(fraction) */ gr..

✨ 앞서 배운 내용을 바탕으로 footer를 제작하여 첫 번째 랜딩 페이지를 완성했다!

CSS img 속성 💡 object-fit margin collapsing issue 1. 인접 요소 발생 2. 부모-자식간에도 발생(margin, padding값이 없는 부모 + margin, padding값이 있는 자식) 해결방법: 부모에 padding 값을 준다