코딩공부중인블로그

같은 클래스 라도 추가로 넣는 class의 css의 값에 따라 적용되는 이미지 가 달라집니다. .cards__inner > div { width: 24%; } .cards__inner.col2 > div { width: 49%; } .cards__inner.col3 > div { width: 32.3333%; } .cards__inner.col4 > div { width: 24%; } .cards__inner.col6 > div { width: 15.6666%; } 전체 css .blog__wrap { padding: 100px 0; } .blog__wrap h2 { display: inline-block; border: 1px solid var(--color__black); font-size: 0.8e..

메뉴1 소스 보기 메뉴2 소스보기 슬라이더 1 소스 보기 슬라이더 2 소스 보기 슬라이더 3 소스 보기

전체 소스

지금까지 만든 사이트유형 들을 넣어서 하나의 사이트를 만들어 보도록 하겠습니다. 📖슬라이드유형 보러가기 https://coding23213.tistory.com/43 📖이미지 유형 보러가기 https://coding23213.tistory.com/38 📖이미지/텍스트 유형 보러가기 https://coding23213.tistory.com/42 📖카드유형 보러가기 https://coding23213.tistory.com/30 📖텍스트 유형 보러가기 https://coding23213.tistory.com/47 📖푸터유형 보러가기 https://coding23213.tistory.com/52 우선 새로운 html을 만들어 사이트에 필요한 정보를 적어 줍니다. meta 태그 HTML 문서의 헤더 부분에 포함되..

Figma를 이용해 틀을 만들어 준후 작업을합니다. 우선 body부분에 html을 해주도록 합니다. 그후 style로 가서 만들어 주도록 합니다. 푸터 쿠키 사이트 사이트 소개 정보 확인하기 사이트 도움 주기 쿠키 정보 공유 쿠키 사이트 사이트 소개 정보 확인하기 사이트 도움 주기 쿠키 정보 공유 쿠키 같이 만들기 내 근처 쿠키 모임 제과 학원 알아보기 영상을 통해 만들기 쿠키 나눔 하기 쿠키 주의점 자주 하는 실수 반죽 하는법 오븐 온도 확인하기 재료 확인하기 쿠키의 종류 사진 보기 만들어 보기 쿠키 정보 공유 쿠키 먹어본 후기 고객 문의 1:1 문의 자주 물어보는 질문 광고 문의 정보 수정 요청 2023 쿠키관련 사이트 Portfolio is Power All Right Reserved 푸터 유형01..

우선 FIgma를 이용해 만들고 싶은 텍스트 유형 사이트의 틀을 만들어 줍니다. notice 쿠키를 만들때 주의점 재료의 품질 확인하기 좋은 품질의 재료를 사용하는 것이 맛있는 쿠키를 만드는 핵심입니다. 신선한 재료를 사용하고, 유통기한을 확인하고, 가능한 경우 유기농 또는 천연 재료를 사용하는 것이 좋습니다. 더보기 정확한 양 계산하기 쿠키를 만들 때 정확한 양과 비율을 잘 지켜서 재료를 사용해야 합니다. 레시피에서 지정한 양과 비율을 잘 지켜서 누구든지 쉽게 따라할 수 있는 쿠키를 만들어보아요. 더보기 반죽을 과하게 섞지 않기 반죽을 과하게 섞으면 쿠키가 딱딱해지거나 지루해질 수 있습니다. 반죽이 잘 섞이도록 믹서기나 주걱 등을 사용해서 부드럽게 섞어주시기 바랍니다. 더보기 오븐 온도와 시간 조절하기..

figma를 이용해 만들고 싶은 슬라이드 유형의 사이트를 만든후, HTML로 가 박스 하나를 만들어 안에 들어갈 태그와 텍스트를 넣어 줍니다. 그후 텍스트의 글꼴을 바꾸기 위해 헤드부분에 을 넣고 박스에 class를 nexon 을 주고 css부분 style에.nexon을 만들어 와 밑에 코드와 같이 넣어 주시면 그박스의 모든 글꼴이 바뀝니다. 메인 슬라이드 영역 event 쿠키의 정보를 모아놓은 사이트 다양한 쿠키들에 대한 정보를 제공합니다. 쿠키의 기원부터, 다양한 종류와 특징, 그리고 제조 방법에 이르기 까지 상세한 정보를 제공합니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 css작업을 해보겠습니다. /* slider__wrap */위에..

notice 쿠키의 종류 10가지 쿠키의 종류는 매우 다양합니다. 아래는 10가지 이상의 쿠키 종류를 알려드리겠습니다 ·초코칩 쿠키 (Chocolate Chip Cookie) ·오트밀 쿠키 (Oatmeal Cookie) ·스노우볼 쿠키 (Snowball Cookie) ·마들렌 (Madeleine) ·레몬 바 (Lemon Bar) ·마카롱 (Macaron) ·쇼트브레드 (Shortbread) ·스프링클 쿠키 (Sprinkle Cookie) ·맥아담 쿠키 (Macadamia Nut Cookie) ·글로스 쿠키 (Gloss Cookie) ·section안에 박스 3개를 만들어 넣어야 하는내용과 이미지를 넣습니다. ·class가 section__small인 곳에 폰트 사이즈와 border-radius 50px을..

저번에 했었던 카드 유형 사이트 처럼 figma 로 만들고 싶은 이미지 사이트 만들어 본 후에 body부분에 박스를 만들어 사이트에 들어갈 글과 링크를 넣고 class를 이용해 각 목록에 이름을 주고 묶어 줍니다. 그리고 head부분에 자기가 바꾸고 싶은 폰트의 링크를 가져와 올려줍니다. 쿠키 만드는 방법 다양한 종류의 쿠키가 있으며, 재료와 조리 방법에 따라 다양한맛을 느낄 수 있습니다. 쿠키의 종류 초코칩 쿠키, 오트밀 쿠키, 마키롱, 스노우볼 쿠키, 레몬 쿠키, 등이 있습니다. 자세히 보기 쿠키를 만들어봅시다 밀가루, 버터, 설탕 등을 사용하여 만들며, 다양한 재료를 넣어 맛과 향을 냅니다. 자세히 보기 에 위치한 /*img type*/ 위에 부분은 카드 사이트 유형과 같으므로 넘어가고 /*img ..

Figma로만들고 싶은 카드 사이트 만들어 보기 1. 피그마에 들어가서 Frame 을 크기를 설정합니다. 2. layout grid로 가서 count 12개를 만들어 주시고 color의 투명도를 10%, margin을 380 Gutter를 20으로 해줍니다. 3. 만들고 싶은 사이트의 주제와 내용들 그리고 카드 이미지를 Shift+R을 이용해 간격을 정하고 색도 넣어줍니다. ex) 그리고 HTML,CSS을 이용해 Figma를 통해 만들어본 사이트의 주제와 내용들 그리고 카드 이미지의 간격과 색을 설정해줍니다. 일단 코드를 보겠습니다. 쿠키 만드는 방법 쿠키 만드는 방법은 다양하며, 재료나 조리 방법을 바꿔서 다양한 종류의 쿠키를 만들 수 있습니다. 레시피를 찾아보거나 실험을 해보면서 자신만의 맛있는 쿠키..