SEOLHEE

사이트 만들기 1. 헤더(header) 영역 웹 사이트의 맨 위쪽에 위치하는 영역으로, 일반적으로 로고, 메뉴, 검색창 등이 포함됩니다. 보통 헤더 영역은 모든 페이지에서 고정되어 있으며, 사용자가 사이트를 이용하는 동안 어디에 있더라도 항상 쉽게 접근할 수 있도록 디자인됩니다. 2. 슬라이드(slider) 영역 (https://seolheeone.tistory.com/42) 웹 사이트에서 대개 이미지나 동영상 등을 보여주는 컨텐츠를 표시하는 영역입니다. 슬라이드 영역은 웹 사이트의 주요 내용을 시각적으로 강조하기 위해 자주 사용됩니다. 3. 이미지(image) 영역 (https://seolheeone.tistory.com/36) 웹 페이지에서 이미지를 보여주는 영역입니다. 이미지는 웹 페이지에서 중요한..

푸터 유형이란? 웹사이트의 푸터(footer)란 일반적으로 웹페이지의 가장 하단 부분에 위치한 영역을 말합니다. 푸터는 일반적으로 웹사이트의 맨 아래쪽에 있지만, 디자인에 따라 다르게 배치될 수도 있습니다. 푸터에는 다양한 정보나 링크를 제공할 수 있습니다. 일반적으로 푸터에는 다음과 같은 정보가 포함될 수 있습니다. 저작권 정보 : 사이트의 저작권 정보 및 사용 조건에 대한 정보가 포함됩니다. 연락처 정보 : 회사의 연락처 정보, 이메일 주소, 전화번호 등이 포함될 수 있습니다. 사이트 맵 : 전체 웹 사이트의 구성과 링크가 포함될 수 있습니다. 개인 정보 보호 정책 : 웹 사이트에서 수집하는 개인 정보와 관련된 정보 및 보호 조치에 대한 정보가 포함됩니다. 소셜 미디어 링크 : 회사의 소셜 미디어 계..

텍스트 유형이란? 텍스트 유형 사이트는 텍스트가 주요 콘텐츠인 웹 사이트를 말합니다. 이러한 사이트는 주로 글을 중심으로 정보를 제공하고, 이미지나 동영상보다는 텍스트를 통해 정보를 전달합니다. 예를 들어, 뉴스 사이트나 블로그, 정부 기관의 법률정보 제공 사이트, 학술지 등이 텍스트 유형 사이트에 해당합니다. 이러한 사이트에서는 텍스트가 핵심 콘텐츠이기 때문에, 텍스트의 품질과 내용의 신뢰성이 중요합니다. 텍스트 유형 사이트는 디자인적인 요소나 그래픽보다는 정보 전달에 중점을 둔 사이트이기 때문에, 디자인이 간결하고 직관적인 것이 좋습니다. 또한, 검색 엔진 최적화(SEO)를 고려하여, 텍스트의 키워드 사용과 구성 등이 중요합니다. 텍스트 유형 장점 정보 전달에 뛰어남 : 텍스트가 핵심 콘텐츠이기 때문..

슬라이드 유형 페이지란? 슬라이더는 여러 콘텐츠를 중요한 공간에 한 번에 넣을 수 있게 해 준다. 하지만 화면이 크든 작든, 사람들은 슬라이더를 그냥 지나치는 경우가 많다. 정적인 히어로 이미지(메인 전체를 차지하는 큼직한 이미지와 텍스트)나 좋은 UI로 콘텐츠를 잘 배치하는 것이 더 나은 해결책이다. 하지만 슬라이더가 꼭 필요하면, 내비게이션을 잘 사용하고 내용을 잘 구성해야 한다. 특징 웹사이트 맨 위에 있다. 로딩했을 때 모니터 화면의 상당 부분을 차지한다. (한 번에 하나씩) 여러 장을 보여 준다. 캐로셀 안에는 넘길 수 있는 내용이 더 있다는 것을 알려 주는 표시자나 내비게이션이 있다. 이미지와 짧은 텍스트가 있다. 내용은 조직의 소개나 사명에 대한 것 혹은 주요 정보나 프로모션이다. 장점 여러..

이미지 텍스트 유형이란? 이미지 텍스트 유형은 크게 두 가지로 나뉩니다. 포함된 이미지 텍스트 (Included Image Text) : 이미지에 직접 포함된 텍스트로, 이미지 파일 자체에 포함된 텍스트를 의미합니다. 예를 들어, 로고나 헤더 이미지 등에서 사용됩니다. 인식 가능한 이미지 텍스트 (Recognizable Image Text) : 이미지에 포함된 텍스트를 OCR (Optical Character Recognition) 기술 등을 사용해 인식 가능한 텍스트를 말합니다. 이러한 텍스트는 이미지와 함께 웹 페이지나 문서에서 노출될 수 있습니다. 예를 들어, 웹사이트에서 이미지에 포함된 제목이나 캡션 등에서 사용됩니다. 장점 검색 엔진 최적화 (SEO) : 이미지에 포함된 텍스트를 검색 엔진이 인..

이미지 유형 페이지란? 이미지 유형 UI는 사용자 인터페이스(UI)에서 이미지를 사용하여 사용자 경험을 개선하고 시각적인 효과를 주는 것을 의미합니다. 이는 일반적으로 웹, 모바일 앱, 데스크탑 애플리케이션 등 다양한 디지털 플랫폼에서 사용됩니다. 형태 제품 이미지를 사용하여 제품 정보를 보여주는 제품 카탈로그 이미지 슬라이더를 사용하여 다양한 이미지를 보여주는 이미지 갤러리 아이콘 이미지를 사용하여 메뉴나 버튼을 보여주는 아이콘 메뉴 장점 시각적인 효과 이미지를 사용하면 일반적인 텍스트나 아이콘보다 더욱 시각적인 효과를 줄 수 있습니다. 예를 들어 제품에 대한 이미지를 사용하면 제품의 외관을 더욱 잘 보여줄 수 있으며, 효과적인 광고 효과를 얻을 수 있습니다. 인지도와 기억력 향상 이미지는 텍스트보다 ..

카드 UI의 장점 주요 콘텐츠를 카드로 구성할 경우 거의 무한대로 확장하거나 변형할 수 있어 활용이 쉽습니다. 반응형 디자인에서 카드 UI가 많이 쓰이는 이유이기도 합니다. 여러 디바이스를 통해 서비스를 이용하는 환경에서도 일관된 경험을 제공할 수 있습니다. 1. 컨텐츠 덩어리 채로 분리 비슷한 속성에 맞춰서 섹션이 분리가 되어 텍스트 양을 줄이고, 정보의 조각을 하나의 유의미한 정보로 붙여줍니다. -> 정보 정리 전달이 잘 됩니다. 2. Easy to Digest (정보 확인이 쉬움) 사용자들의 정보 접근과 인식을 도와줍니다. 3. 시각적 즐거움 카드 기반 디자인은 이미지 정보에 의존적입니다. 이미지는 효과적/즉각적으로 관심을 이끌어 사이트/모바일 디자인에 효과적입니다. 4. 다양한 스크린 사이즈에 잘..

태그는 주제별 그룹의 콘텐츠 섹션을 나타낼 때 사용하며, 각 섹션에는 ~ 요소를 자식으로 포함시켜 식별해야 합니다. 태그는 스타일링 요소가 아니기 때문에 그룹화나 편의를 위함이라면 태그를 사용하는 것이 좋습니다. 통상적인 문서 또는 어플리케이션의 섹션(구획)을형성하는 요소로, 대부분 항상 heading 요소들과(가끔은 heading)요소들을 로 감싸기도 한다.), 그리고 때때로 요소와도 함께 사용되기도 합니다. 홈페이지의 뉴스 부분처럼 페이지의 주요 부분인, 긴 글의 세부사항과 같은 관련 컨텐츠의 묶음, 또는 탭 키 사용을 요하는 인터페이스를 가진 웹 어플리케이션에서의 페이지릐 묶음 단위라 생각하면 됩니다. 정의(Definition) 태그는 주제별 그룹의 콘텐츠 섹션을 정의합니다. 태그는 탭 페이지, 홈..

시멘틱 마크업(Semantic markup) 시멘틱(Semantic)의 사전적 뜻은 "의미론적인" 정도로 해석할 수 있다. 이것은 마크업을 할 때 의미를 부여하는 태그로 보면 된다. 실제로 마크업을 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것도 중요하다. 즉, 시멘틱 마크업이란 HTML 문서를 작성할 때 의미를 잘 전달하도록 만드는 것을 말한다. 위 사진에 있는 이 없다면 스크린리더에서는 그저 '반응형 웹'이라고 읽어주기만 할 것이다. 시멘틱 마크업 태그 종류 시멘틱 마크업을 하는 이유 1. 검색 엔진 최적화(SEO) 웹 브라우저에 검색을 하게 되면 검색엔진을 통해 정보를 제공하는데 이, 로봇이 프로그램을 이용해 검색엔진의 크롤..