SITE/CARD3 SITE | cardType #3 SITE를 만들어봅시다 ! 이번에는 또 다른 형식의 카드 유형으로 사이트 구성을 만들어봅시다. 1. Figma 활용하기 큰 영역 안에 3개의 카드가 있는 형태 입니다. 카드만 있는 것이 아닌 각각을 구분하는 선과 소제목 표시, 프로필 등 디테일 요소가 추가 되었습니다. 2. CSS 살펴보기 3. HTML 살펴보기 건축의 세계 Architects 세상에서 제일 높은 빌딩은 어디에 위치해 있고 특징이 무엇일까 ? (TOP5를 통해 살펴보자) 세상에서 제일 높은 빌딩은 어디에 위치하고 있으며 누가 설계하였을까? 높게 짓기 위해 특별히 적용한 공법이 있는지 다같이 알아보기로 하자. 먼저 5위를 말해보자면... Arc_Building 9 minute ago Roma (서양 건축사) 로마네스크 시대의 특징과 건축의.. 2022. 8. 11. SITE | cardType #2 SITE를 만들어봅시다 ! 이번에는 또 다른 형식의 카드 유형으로 사이트 구성을 만들어봅시다. 1. Figma 활용하기 같은 디자인의 카드를 4개씩 총 8개 배열한 형태입니다. 먼저 공통적인 카드의 틀을 만들어 놓고 component 처리를 해서 배열해주면 혹여나 수정사항이 생긴다해도 하나를 수정하면 전체가 똑같이 반영되어 수정이 용이합니다. 2. CSS 살펴보기 3. HTML 살펴보기 계절별 추천 여행지 봄, 여름, 가을, 겨울 4계절별 각각에 맞는 여러 여행지와 추천 식당, 카페 등을 모아서 정리해보았습니다. 잘 참고하셔서 좋은 여행 되시길 바래요! lt;article class="card"> lt;img src="img/card_bg02_01.jpg" alt="봄 Spring"> lt;h3 clas.. 2022. 8. 10. SITE | cardType #1 SITE를 만들어봅시다 ! 우리가 평소에 자주 볼 수 있는 사이트를 생각해보면 수많은 레이아웃과 유형들로 이루어져 있음을 알 수 있습니다. 오늘은 그 중에서도 카드 유형 첫번째 방법을 배워봅시다. 1. Figma 활용하기 모든 사이트들은 각각의 레이아웃을 가지고 있습니다. 레이아웃이 잘 짜여 있어야 그에 맞춰 코딩하기가 편하기 때문에 오차가 없도록 만들어 주는 것이 중요합니다. 아래 참고 사진은 figma를 통해 frame에 layout grid - Columns 를 사용해주었습니다. 2. CSS 살펴보기 #1. .section > h2 { } 부모 바로 밑에 있는 자식에게만 적용하고 싶을 때는 스트레칭(Stretching)> >스트레칭은 쉽게 말해서 평상시 상태보다 근육의 길이를 늘려주는 것으로 근육의.. 2022. 8. 9. 이전 1 다음
