100S00

헤더 부분을 사이드로 뺀 시안입니다. 헤더 부분은 아래 이미지의 사이트 디자인을 참조하였습니다. 메인 상단페이지는 페이지의 메인인 향수 시각화 영상을 짧게 풀스크린으로 넣으려합니다. 그 다음 텍스트 페이지는 풀스크린 이미지를 백그라운드에 넣고 센터에 텍스르를 넣어 작업할 예정입니다. 세번째 슬라이드 영역은 총 6개의 이미지 슬라이드로 구성되어 있으며 슬라이드 박스와 텍스트 박스를 비정형으로 배치하고 z축에 차이를 주어 표현하려합니다. 슬라이드 영역은 아래 사이트 슬라이드 영역과 수업시간 슬라이드 썸네일 페이지를 참조 하였습니다.

t만들어 온 사이트 완성하기! 사이트 만들기1 여태까지 만들어 온 사이트를 모아 한 페이지로 만들어보았다. 처음엔 head에 메타 태그를 넣어 검색에 노출 되게 해주었다. meta태그란? 태그는 웹 페이지의 HTML 코드에서 사용되며, 웹 브라우저나 검색 엔진 등에게 해당 페이지의 정보를 제공하는 역할을 합니다. 일반적으로 태그 안에 위치하며, 다양한 속성을 사용하여 다양한 정보를 제공할 수 있습니다. 가장 일반적인 태그의 속성으로는 다음과 같은 것들이 있습니다. charset: 페이지의 문자 인코딩 방식을 지정합니다. name: 페이지의 정보의 유형을 지정합니다. 예를 들어, "description"은 페이지의 간단한 요약을 제공합니다. content: name 속성에서 지정한 정보의 내용을 지정합니다..

FOOTER유형 가구 사이트 소개하기 가구 고르는 방법 첫번째 나에게 맞는 인테리어 가구 고르는 방법 두번째 셀프 플래닝 요즘 대세는 미니멀리즘 고객문의 고객지원 자주 묻는 질문 문의하기 배송조회 교환 환불 제품문의 품질 보증 제품 리콜 피드백 부품신청 쇼핑하기 쇼핑하기 헤이오더 Furniture for Business Furniture 모바일 앱 제품 사용 팁/가이드 제품 구매 가이드 서비스 Furniture 서비스 배송 서비스 조립 서비스 설치 서비스 주방 서비스 구매 상담 서비스 인테리어 디자인 서비스 바이백 서비스 Furniture 이야기 Furniture 이야기 브랜드 소개 집에서의 생활 지속가능한 생활 내가 아끼는 집, 나를 아끼는 집 뉴스룸 채용정보 2023 kimhyeonbeen 가구 사이..

텍스트 유형 텍스트 유형 사이트는 텍스트가 주요 콘텐츠인 웹 사이트를 말합니다. 이러한 사이트는 주로 글을 중심으로 정보를 제공하고, 이미지나 동영상보다는 텍스트를 통해 정보를 전달합니다. notice 요즘 대세 미니멀리즘 미니멀리즘? 미니멀리즘(minimalism)은 극도로 단순한 것을 추구하는 미술 및 디자인 용어로, 극단적으로 간결하고 단순한 것을 만드는 것을 목표로 합니다. 이는 미술 분야뿐만 아니라 일상생활에도 적용되는 철학이 될 수 있습니다. 더보기 간결함 미니멀리즘의 가치 중 하나는 간결함입니다. 복잡한 것을 단순화하면서도 중요한 것들만을 추려내어 집중하는 것입니다. 이를 통해 삶이 더욱 단순하고 깨끗하며, 중요한 것에 대한 집중력을 높일 수 있다는 것입니다. 더보기 미니멀 인테리어 미니멀 ..

슬라이드 유형 슬라이드 유형이란? 슬라이드 유형은 웹사이트에서 사용되는 이미지나 콘텐츠를 일정한 간격으로 전환하여 보여주는 기능을 말합니다. 슬라이드는 일반적으로 이미지나 텍스트, 동영상 등 다양한 형태의 콘텐츠를 보여줄 수 있습니다. 슬라이드는 주로 웹사이트의 홈페이지나 특정 섹션에서 사용되며, 사용자가 더 많은 정보를 얻을 수 있도록 도와줍니다. 슬라이드는 여러 가지 방식으로 구현될 수 있으며, 자동으로 전환되거나 사용자가 버튼을 클릭하여 전환할 수도 있습니다. 슬라이드는 웹사이트 디자인에서 매우 중요한 역할을 하며, 사용자의 관심을 끌고 더 많은 정보를 제공하는 데 도움을 줍니다. 슬라이드 유형에는 여러가지가 존재합니다. 이미지 슬라이드: 대부분의 사이트에서 사용되는 슬라이드 유형입니다. 여러 장의..

이미지 텍스트 타입 사이트 만들기 혼자 만들어보기 NOTICE 나에게 맞는 인테리어 인테리어를 선택하는 것은 매우 개인적인 결정입니다. 그러나 일반적으로는 다음과 같은 단계를 거쳐 진행됩니다. 1. 스타일 결정하기: 먼저 자신이 선호하는 스타일을 결정해야 합니다. 전통적인, 현대적인, 귀여운, 거친 등 다양한 스타일이 있으며, 이 중 하나를 선택해야 합니다. 2. 공간 파악하기: 다음으로는 공간을 파악해야 합니다. 방의 크기, 형태, 창문의 위치, 문의 위치 등을 고려해야 합니다. 3. 가구 선택하기: 가구를 선택할 때는 공간과 스타일을 고려해야 합니다. 가구의 크기, 색상, 재질 등을 결정할 때도 스타일을 기반으로 선택해야 합니다. 4. 색상 선택하기: 색상은 인테리어에 매우 중요한 역할을 합니다. 색..

설정 해 둔 리셋 값을 스타일에 넣고 폰트도 넣는다 그후 section 박스를 만들고 class값 image wrap 을 넣어준다. 텍스트를 가운데 넣어주는 리셋 값과 폰트를 적용시키기 위해 center 와 nexon를 넣어줍니다. 그후 섹션을 제목과 부제가 들어갈 container 와 이미지가 들어갈 image inner로 나눠준다. container는 리셋 값을 사용 하고 image inner는 style에 새로운 값을 설정해준다 그리고 이미지가 들어갈 div 박스를 두개 만들어 주고 image 라고 클래스 값을 줍니다. 그후 이미지가 들어갈 박스와 텍스트가 들어갈 박스 각 각 image header ,image body 로 클래스 값을 지정해 줍니다. img src 로 image header 에 이..

카드 유형 정리 1. 피그마에서 레이아웃틀을 제작을 완성한다. 2. visual studio code 에서 div section를 만듭니다. 그 후 head에 스타일 태그를 추가 한 뒤 리셋 값을 설정합니다. 리셋값 이란? CSS 리셋(CSS reset)은 웹 브라우저의 기본 스타일을 초기화하고, 모든 HTML 요소가 동일한 시작점에서 시작하도록 설정하는 CSS 스타일 시트입니다. 리셋 값 폰트 를 다 설정해준다. 그 후 작업을 할 영역인 1200px의 구역을 만들기 위해 를 생성해준 뒤 h2와 p 를 이용하여 제목과 내용을 입력해주고 카드의 섹션인 artcle을 하나 더 생성 해줍니다. 카드가 3개이기 때문에 artcle 안에 div class card 를 3개 만들어 줍니다. 그 후 카드가 잘 정렬이..