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. 다양한 스크린 사이즈에 잘..

CSS 문자 관련 스타일 아무리 웹에서 이미지나 비디오의 비중이 커지더라도 텍스트는 웹에서 빠질 수 없는 핵심적인 요소일 것입니다. 웹에서 텍스트를 스타일하기 위해서 사용할 수 있는 CSS 속성에 대해서 알아보겠습니다. 01. font - family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', dotum, arial, Helvetica, sans-serif; 02. font - size 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. css에서 유용하게 사용하는 단위에는 다음과 같..

grid layout 그리드는 그리드를 선언하는 요소와 하위의 자식 요소들로 구성됩니다. 그리드를 구성하는 자식요소들을 "아이템" 이라고 하며, 자식 요소들의 태그 종류에 관계 없이, 그리드 바로 하위의 자식요소들만 아이템이 됩니다. 그리드 선언은 css 속성으로 아래와 같이 시작합니다. display : grid; 그리드 속성 선언 만으로는 자식 아이템들에 아무런 영향을 미치지 않습니다. 추가 그리드 속성이 정의되지 않으면 "display: grid;" 는 "display: block;" 과 같습니다. 레이아웃 grid 유형 (예제) 결과 grid와 flex의 차이점 flex box는 한 줄로 된 행 혹은 열 방향의 레이아웃과 같이 일차원의 레이아웃을 염두에 두고 설계되었지만, grid는 행과 열 모두..

flex flex는 flexble의 준말로 유동적인 레이아웃을 손쉽게 만들 수 있다는 의미를 가진다. 기존의 웹페이지를 만들 때 사용하던 올드한 레이아웃 제작방법을 개선하고자 flexbox가 생겨났다. flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex; display: -webkit-flex; display: -ms-flexbox; 위 구문은 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻입니다. 필수 지정 속성 1. display : flex; 2. flex-direction : 방향; flex를 활용하기 위해서는 부모에 필수적으로 달아줘야하는 css 속성이 있..

Float float는 그대로 번역하자면 '띄우다'라는 뜻입니다. float는 css에서 정렬하기 위해 사용되는 속성입니다. 예를 들어, 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나 오른쪽으로 띄워서 정렬하거나 각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치(layout) 할 때도 사용할 수 있습니다. Float 속성 값 none : 요소를 띄우지 않음 (기본값) left : 요소를 왼쪽에 띄움 right : 요소를 오른쪽에 띄움 initial : 기본값으로 설정함 inherit : 부모 요소로부터 상속함 Float 해제(clear) 'float' 속성이 적용되지 않도록 지정(해제) 'float: left' 를 해제하려 한다면, 해제되길 원하는 요소 css에 'clear :..

선택자(selector) 선택자란 CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. CSS로 속성을 부여하는 형식은 다음과 같습니다. 1. type 선택자 CSS의 선택자 중 하나인 타입 선택자는 HTML 요소의 태그 이름을 이용해 스타일을 적용합니다. 예를 들어, p 선택자는 모든 태그에 스타일을 적용합니다. h1 { ... } p { ... } 2. id 선택자 CSS에서 ID 선택자는 # 기호를 사용하여 정의됩니다. ID 선택자는 특정 요소의 ID 속성을 기반으로 스타일을 적용합니다. 예를 들어, #myElement는 요소를 선택합니다. #cssid { ... } 3. class 선택자 CSS에서 class 선택자는 . 기호를 사용하여 정의합니다. 예를 들어, 와 같..

선택자(selector) 선택자란 CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. CSS로 속성을 부여하는 형식은 다음과 같습니다. 선택자의 종류 type 선택자 id 선택자 class 선택자 등이 있습니다. 그 중에서 id 선택자와 class 선택자 그리고 둘의 차이점을 알아보겠습니다. 1. id 선택자 id 사용할 때 중요한 것은 한페이지에서 한번만 사용이 가능합니다. id는 페이지 내에서 특정 위치나 태그를 지정하는 것이기 때문에 오직 페이지내에서 한번만 사용할 수 있습니다. css에서의 정의하는 방법은 #id_name{속성명:속성값; 속성명:속성값;} 이런식으로 적용합니다. 2. class 선택자 자주 사용되는 스타일에 적용하는 것이라고 생각하시면 됩니다. 예를 ..

1. Inline : 해당 요소에 직접 스타일 속성을 적용 직접 태그에 스타일을 적용하는 방법입니다. 통일성 및 가독성을 해치며 유지보수가 어렵기 때문에, 특수한 경우에만 제한적으로 사용합니다. Inline https://seolheeone.tistory.com/ 2. Internal : head태그 > style태그에 작성하는 법 head 태그 내에 style 태그를 이용해서, HTML 내의 전체 태그에 서식을 적용합니다. 전체 웹페이지에 적용되기 때문에 global 방식이라 부르기도 하고, head 태근에 스타일을 정의하기 때문에 embedded 방식이라고도 합니다. body 태그 내의 h2는 모두 빨간색이고 40px 크기로 출력됩니다. 3. Extermal : 외부 스타일 시트 파일 이용. link..

코딩테스트 입문 Day 24 수학, 시뮬레이션, 문자열, 조건문, 반복문 출처 https://programmers.co.kr/ 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 치킨쿠폰 문제 프로그래머스 치킨은 치킨을 시켜먹으면 한 마리당 쿠폰을 한 장 발급합니다. 쿠폰을 열 장 모으면 치킨을 한 마리 서비스로 받을 수 있고, 서비스 치킨에도 쿠폰이 발급됩니다. 시켜먹은 치킨의 수 chicken이 매개변수로 주어질 때 받을 수 있는 최대 서비스 치킨의 수를 return하도록 solution 함수를 완성해주세요. 제한사항 chicken은 정수입니다. 0 ≤ c..

패럴랙스 이펙트란? 패럴랙스 이펙트는 사용자가 스크롤을 내리거나 올릴 때, 배경과 함께 웹 페이지의 요소들이 서로 다른 속도로 움직이는 것을 말합니다. 이는 일반적으로 CSS와 JavaScript를 사용하여 구현되며, 웹 페이지를 더욱 동적이고 인터랙티브하게 만들어줍니다. 웹사이트 패럴랙스 이펙트를 사용하면 사용자가 웹 페이지를 스크롤 할 때, 배경 이미지와 함께 다양한 요소들이 움직이는 것처럼 보입니다. 예를 들어, 웹 페이지에 일러스트나 이미지를 배경으로 사용하면 이를 이용하여 사용자의 눈길을 이끌거나 페이지의 구조를 강조할 수 있습니다. 또는 텍스트나 버튼과 같은 요소들도 패럴랙스 이펙트를 이용하여 동적인 효과를 줄 수 있습니다. 패럴랙스 이펙트는 웹 디자인의 트렌드 중 하나로, 사용자 경험을 개선..

패럴랙스 이펙트란? 패럴랙스 이펙트는 사용자가 스크롤을 내리거나 올릴 때, 배경과 함께 웹 페이지의 요소들이 서로 다른 속도로 움직이는 것을 말합니다. 이는 일반적으로 CSS와 JavaScript를 사용하여 구현되며, 웹 페이지를 더욱 동적이고 인터랙티브하게 만들어줍니다. 웹사이트 패럴랙스 이펙트를 사용하면 사용자가 웹 페이지를 스크롤 할 때, 배경 이미지와 함께 다양한 요소들이 움직이는 것처럼 보입니다. 예를 들어, 웹 페이지에 일러스트나 이미지를 배경으로 사용하면 이를 이용하여 사용자의 눈길을 이끌거나 페이지의 구조를 강조할 수 있습니다. 또는 텍스트나 버튼과 같은 요소들도 패럴랙스 이펙트를 이용하여 동적인 효과를 줄 수 있습니다. 패럴랙스 이펙트는 웹 디자인의 트렌드 중 하나로, 사용자 경험을 개선..

패럴랙스 이펙트란? 패럴랙스 이펙트는 사용자가 스크롤을 내리거나 올릴 때, 배경과 함께 웹 페이지의 요소들이 서로 다른 속도로 움직이는 것을 말합니다. 이는 일반적으로 CSS와 JavaScript를 사용하여 구현되며, 웹 페이지를 더욱 동적이고 인터랙티브하게 만들어줍니다. 웹사이트 패럴랙스 이펙트를 사용하면 사용자가 웹 페이지를 스크롤 할 때, 배경 이미지와 함께 다양한 요소들이 움직이는 것처럼 보입니다. 예를 들어, 웹 페이지에 일러스트나 이미지를 배경으로 사용하면 이를 이용하여 사용자의 눈길을 이끌거나 페이지의 구조를 강조할 수 있습니다. 또는 텍스트나 버튼과 같은 요소들도 패럴랙스 이펙트를 이용하여 동적인 효과를 줄 수 있습니다. 패럴랙스 이펙트는 웹 디자인의 트렌드 중 하나로, 사용자 경험을 개선..

패럴랙스 이펙트란? 패럴랙스 이펙트는 사용자가 스크롤을 내리거나 올릴 때, 배경과 함께 웹 페이지의 요소들이 서로 다른 속도로 움직이는 것을 말합니다. 이는 일반적으로 CSS와 JavaScript를 사용하여 구현되며, 웹 페이지를 더욱 동적이고 인터랙티브하게 만들어줍니다. 웹사이트 패럴랙스 이펙트를 사용하면 사용자가 웹 페이지를 스크롤 할 때, 배경 이미지와 함께 다양한 요소들이 움직이는 것처럼 보입니다. 예를 들어, 웹 페이지에 일러스트나 이미지를 배경으로 사용하면 이를 이용하여 사용자의 눈길을 이끌거나 페이지의 구조를 강조할 수 있습니다. 또는 텍스트나 버튼과 같은 요소들도 패럴랙스 이펙트를 이용하여 동적인 효과를 줄 수 있습니다. 패럴랙스 이펙트는 웹 디자인의 트렌드 중 하나로, 사용자 경험을 개선..

패럴랙스 이펙트란? 패럴랙스 이펙트는 사용자가 스크롤을 내리거나 올릴 때, 배경과 함께 웹 페이지의 요소들이 서로 다른 속도로 움직이는 것을 말합니다. 이는 일반적으로 CSS와 JavaScript를 사용하여 구현되며, 웹 페이지를 더욱 동적이고 인터랙티브하게 만들어줍니다. 웹사이트 패럴랙스 이펙트를 사용하면 사용자가 웹 페이지를 스크롤 할 때, 배경 이미지와 함께 다양한 요소들이 움직이는 것처럼 보입니다. 예를 들어, 웹 페이지에 일러스트나 이미지를 배경으로 사용하면 이를 이용하여 사용자의 눈길을 이끌거나 페이지의 구조를 강조할 수 있습니다. 또는 텍스트나 버튼과 같은 요소들도 패럴랙스 이펙트를 이용하여 동적인 효과를 줄 수 있습니다. 패럴랙스 이펙트는 웹 디자인의 트렌드 중 하나로, 사용자 경험을 개선..

마우스 이펙트란? 마우스 이펙트(Mouse Effect)란 마우스를 움직이는 동안 마우스 포인터가 가지는 효과를 말합니다. 이는 주로 웹 사이트나 앱 디자인에서 사용되며, 마우스 움직임에 반응하는 다양한 효과가 있습니다. 예를 들어, 마우스를 움직이면 배경색이 바뀌거나, 이미지가 움직이거나, 텍스트가 확대되거나 축소되는 등의 효과가 있습니다. 이를 통해 사용자의 마우스 조작에 반응하여 화면을 보다 생동감 있게 만들어줍니다. 마우스 이펙트는 웹 개발에서 CSS, JavaScript 등을 이용하여 구현됩니다. 사용자 경험을 높이기 위해 다양한 마우스 이펙트를 적용할 수 있습니다. 이번 마우스 이펙트에서는 사진 안에서 마우스 커서가 보이지 않게 해주었습니다. 마우스 이펙트(4) 사이트 코드 Javascript..

패럴랙스 이펙트란? 패럴랙스 이펙트는 사용자가 스크롤을 내리거나 올릴 때, 배경과 함께 웹 페이지의 요소들이 서로 다른 속도로 움직이는 것을 말합니다. 이는 일반적으로 CSS와 JavaScript를 사용하여 구현되며, 웹 페이지를 더욱 동적이고 인터랙티브하게 만들어줍니다. 웹사이트 패럴랙스 이펙트를 사용하면 사용자가 웹 페이지를 스크롤 할 때, 배경 이미지와 함께 다양한 요소들이 움직이는 것처럼 보입니다. 예를 들어, 웹 페이지에 일러스트나 이미지를 배경으로 사용하면 이를 이용하여 사용자의 눈길을 이끌거나 페이지의 구조를 강조할 수 있습니다. 또는 텍스트나 버튼과 같은 요소들도 패럴랙스 이펙트를 이용하여 동적인 효과를 줄 수 있습니다. 패럴랙스 이펙트는 웹 디자인의 트렌드 중 하나로, 사용자 경험을 개선..

GSAP( GreenSock Animation Platform) 라이브러리 HTML Three.js는 3D 그래픽을 만들기 위한 JavaScript 라이브러리이며, Threex는 Three.js를 이용한 다양한 기능들을 제공하는 라이브러리입니다. SimplexNoise.js는 Threex에서 제공하는 노이즈 생성 라이브러리로, 지형 모양을 생성하는 데 사용됩니다. threex.terrain.js는 Threex에서 제공하는 지형 생성기입니다. 이 코드들을 사용하여 지형을 만들고 Three.js의 WebGLRenderer를 사용하여 3D 지형을 화면에 렌더링합니다. var onRenderFcts = []; //화면 설정 var renderer = new THREE.WebGLRenderer({ antialia..

리액트란? React는 Facebook에서 개발한 자바스크립트 라이브러리입니다. React는 웹 애플리케이션의 사용자 인터페이스를 구축하기 위한 컴포넌트 기반 접근 방식을 사용합니다. 이러한 방식은 애플리케이션의 복잡도를 줄이고 유지 보수성을 높이는데 도움이 됩니다. React는 가상 DOM(Virtual DOM) 개념을 사용하여 애플리케이션의 성능을 최적화합니다. React는 데이터가 변경될 때마다 전체 페이지를 다시 로드하는 것이 아니라 변경된 부분만 업데이트합니다. 이는 더 나은 사용자 경험을 제공하고, 빠른 애플리케이션 응답 속도를 유지하는 데 도움이 됩니다. 장점 가독성과 유지보수성 : React는 컴포넌트 기반으로 작성되어, 코드의 가독성과 유지보수성을 높일 수 있습니다. 각각의 컴포넌트는 독..

리액트란? React는 Facebook에서 개발한 자바스크립트 라이브러리입니다. React는 웹 애플리케이션의 사용자 인터페이스를 구축하기 위한 컴포넌트 기반 접근 방식을 사용합니다. 이러한 방식은 애플리케이션의 복잡도를 줄이고 유지 보수성을 높이는데 도움이 됩니다. React는 가상 DOM(Virtual DOM) 개념을 사용하여 애플리케이션의 성능을 최적화합니다. React는 데이터가 변경될 때마다 전체 페이지를 다시 로드하는 것이 아니라 변경된 부분만 업데이트합니다. 이는 더 나은 사용자 경험을 제공하고, 빠른 애플리케이션 응답 속도를 유지하는 데 도움이 됩니다. 장점 가독성과 유지보수성 : React는 컴포넌트 기반으로 작성되어, 코드의 가독성과 유지보수성을 높일 수 있습니다. 각각의 컴포넌트는 독..