웹1 9일차 - 마켓컬리3

[🐟display: flex; 🐟 ] {flex를 가진 box} [flex-container] flex를 적용한 태그는 flex-container라고 부른다. -item을 정렬하는 코드는 전부 flex-container에 작성된다. ㄴ justify-content: 가로 정렬 ㄴ align-items: 세로 정렬 ㄴ flex-direction: 정렬 방향 ㄴ flex-wrap: 줄바꿈 정렬(반응형) ㄴ align-content: 줄바꿈 되었을 때 정렬(반응형) -브라우저에서 도형취급 받는다. margin-left: auto;와 margin-right: auto;로 중앙 정렬한다. -width: auto;일 때 100%로 작동한다. [flex-item] flex를 적용한 태그의 자식 태그는 flex-ite..

• format_list_bulleted 웹
• · 2024. 4. 3.

웹1 8일차 - 마켓컬리2

[✨코드짜는 순서] 가장 큰 박스부터 안쪽 방향으로 폴더 정리하듯이 오브젝트를 생성해준다. ex) div.top-popup-section > div.air-box + div.text-box + div.icon-box > close icon + div.top-bar-section > div.left-box + div.nav + div.right-box ... ... [텍스트 세로 정렬] line-height 속성의 속성값을 기본(혹은 상위 요소) 높이보다 높게 설정하면 자동적으로 세로 정렬이 된다. 단, 여러 줄의 텍스트라면 행간이 굉장히 넓어질 수 있으므로, 텍스트를 div로 감싸서 div를 세로 정렬하는 식으로 하는 것이 좋다. **css팁 padding, border가 크기에 포함되는 css 속성 :..

• format_list_bulleted 웹
• · 2024. 4. 3.

웹1 7일차 - 마켓컬리1

[마켓컬리 피그마 예제] - 웹은 연령이 높을 수록 그리드(container)를 좁게 쓰고 (ex . 마켓컬리, 도서 사이트들), ㄴ고정형 + 적응형 - 연령이 낮을 수록 그리드를 넓게 쓴다. (ex. 나이키) ㄴ반응형 + 적응형 ✨✨(if, inline-block를 쓴다면)처음에는 그리드를 내가 그려서(계산해서) 중앙부터 맞춰나가야 한다.✨✨ 양쪽, 사이사이 여백까지 신경써서 계산하도록 한다. 가장 큰 요소는 피그마에서 넓이나 높이를 줘도, 화면 크기와 같도록 맞춘다. 상위 엘리먼트의 높이가 auto로 되어있으면 하위 엘리먼트의 높이(내용물)를 따라간다. 그러니 특별한 경우가 아니라면 상위, 하위 엘리먼트 모두에게 높이를 주지 말고 하위에만 적용하도록 한다. {구글 아이콘 삽입하기 링크} 아이콘의 두께..

• format_list_bulleted 웹
• · 2024. 3. 29.

웹1 6일차

[구글 폰트] - 구글 폰트 사이트 들어가서 사이드 바가 안 보일 시 filter 버튼을 누른다. - reset all 버튼을 누르면 설정이 기본값으로 변하여 디자인 기초적으로 내가 원하는 것을 찾기 쉬운 상태가 된다. 사람들이 가장 많이 쓰는 순서대로 정렬된다. {Roboto}- 영문은 roboto가 가장 많이 쓰인다. {Noto Sans KR}- 한글은 noto sans korean이 가장 많이 쓰인다. - 예쁘긴 하나 위아래 행간(line-height)이 달라서 아이콘과 텍스트가 중앙정렬이 맞지 않다. - 이를 보완한 글씨체는 프리텐다드와 스위트 폰트가 있다. - 두께를 하나씩 가져올 수 없게 설정되어 있다. --> 두께별로 모두 가져와야 한다. (파일의 크기가 무겁다.) - 폰트를 가져오는 버튼이..

• format_list_bulleted 웹
• · 2024. 3. 27.

웹1 5일차

[inline-block 여백 제거를 위한 여정..!😭] 👇 👇 👇 👇 👇 👇 👇 👇 👇 [브라우저에서 텍스트 취급받는 요소] 1. 텍스트 2. inline 3. inline-block [텍스트 특징] - 행간과 자간이 있다. ㄴ 행간: 줄과 줄 사이 여백 ㄴ 자간: 글자와 글자 사이 여백 [그래서 여백이 왜 생기는가?] 기본적으로 폰트는 가독성 때문에 자간과 행간이 존재한다. inline과 inline-block도 브라우저에서 텍스트 취급받기 때문에 텍스트처럼 양 옆과 하단에 여백이 생긴다고 이해하면 좋다. inline-block의 요소 하나하나가 글자처럼 여겨져 '자간'이 생겨버린다. 그것이 여백이 된것이다. [해결법] 박스의 폰트 사이즈를 0으로 적용한다. 박스만 적용하고 싶다면 상위 엘리먼트에 폰..

• format_list_bulleted 웹
• · 2024. 3. 25.

웹1 4일차

*** CSS - CLASS와 ID *** 태그에 이름을 지어 선택자로 활용할 수 있다. [class와 id 차이점] class는 같은 이름을 사용할 수 있다. html : class="" css 선택자 : . id는 같은 이름을 여러번 사용할 수 없다. html : id="" css선택자: # 프론트엔드 영역에서 많이 사용 [이름 짓기] 두 단어 이상 -를 쓴다. ex) best-item 뒷 단어에 대문자 활용이 가능하다. ex) best-Item (but, 많이 사용하지 않는 방법.) "~안에 있는 ~"로 표현 가능하다. ex) best-item__text-box [이름 지을 때 주의사항] 영문부터 시작 해야한다. 숫자만 사용할 수 없다. 누구나 구분할 수 있도록 짓는게 좋다. 띄어쓰기X, 총 2개가..

• format_list_bulleted 웹
• · 2024. 3. 20.