사이트 만들기16 사이트 만들기 : 반응형 작성 사이트 반응형 만들기 이번에는 앞서 공부한 사이트 유형들을 모두 합친 하나의 사이트를 만들고, 반응형으로 만들어보는 공부를 하였습니다. HTML 코드 슬라이드 부분은 swiper라는 소스를 사용하여 간단히 만들어 보았습니다. swiper 사용법에 대한 설명은 아래쪽에서 자세히 알아봅시다! HTML 보기 (스크롤 주의!) web site 이미지 영역 이미지텍스트 영역 카드 영역 배너 영역 텍스트 영역 로그인 슬라이드 영역 Journey The Blue Sea 보고 있으면 마음이 편안해지는 수평선과 푸른 물결을 감상해 볼까요? 자세히 보기 사이트 보기 Journey The Blue Sea 보고 있으면 마음이 편안해지는 수평선과 푸른 물결을 감상해 볼까요? 자세히 보기 사이트 보기 Journey The Blu.. 2022. 9. 14. 사이트 만들기 : 슬라이드 유형1 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 슬라이드 유형01 슬라이드 유형은 저번에 배운 슬라이드 이펙트를 바탕으로, 이미지가 슬라이드 되어 넘어가는 섹션 유형입니다. 여러장의 이미지를 보여주고 싶을 때 유용하며, 버튼을 눌러 이미지가 넘어가도록 할 수도 있습니다. 그러나, 스크립트에 대한 내용은 다음번에 배워보도록 하겠습니다. 디자인 하기 슬라이드 되며 보일 이미지들을 고르고, 이미지를 넘길 버튼, 이미지 위에 놓일 텍스트 등을 구상합니다. 글씨가 이미지에 묻혀 안보이는 상황이 발생하지 않도록 신경씁시다! HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그.. 2022. 9. 6. 사이트 만들기 : 배너 유형1 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 배너 유형01 배너 유형은 한장의 이미지에 간단한 제목과 글을 작성해 페이지를 구성한 섹션 유형입니다. 슬라이드 유형과는 달리, 하나의 이미지를 효과적으로 보여줄 수 있는 유형이니, 잘 알아두었다가 페이지를 구성할 때 적절하게 배치해봅시다! 디자인 하기 먼저, 배너를 구성할 이미지와 텍스트가 서로 어울리도록 이미지를 고르고, 그 위에 텍스트를 배치합니다. 마찬가지로, 이미지에 텍스트가 묻히지 않도록 이미지나 텍스트의 색상을 잘 조절합니다! HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다... 2022. 9. 6. 사이트 만들기 : 푸터 유형1 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 푸터 유형01 푸터는 사이트의 제일 아래에 위치한 부분입니다. 푸터에는 사이트의 저작권에 대한 정보나, 연락처, 위치 등이 담기게 됩니다. 또한, 사이트 내를 돌아다닐 수 있는 링크가 포함되기도 합니다. 푸터는 사이트에 빠지지 않는 필수적인 요소이므로 신경써서 작업하도록 합시다! 디자인 하기 푸터에는 생각보다 텍스트가 많이 들어가게 됩니다. 보기에 조화롭도록 여백을 조절하거나 단을 잘 나누어서 디자인하도록 합니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 푸터 영역은 footer.. 2022. 9. 6. 사이트 만들기 : 이미지 텍스트 유형1 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 이미지 텍스트 유형01 이미지 텍스트 유형의 사이트는 이미지와 텍스트를 혼합해 사용한 페이지 유형입니다. 이미지를 함께 사용해 텍스트만 사용한 페이지의 단조로움을 해소하고 콘텐츠를 다양하게 합니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. 그리드에 맞춰 구역을 배분하면 보다 안정적인 느낌을 줄 수 있습니다. 이번 유형은 왼쪽에 텍스트를 배치하고, 오른쪽에 이미지를 배치하였습니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 한번.. 2022. 9. 1. 사이트 만들기 : 헤더 유형1 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 헤더 유형01 헤더는 사이트의 제일 위에 위치한 부분입니다. 헤더를 어떻게 디자인하느냐에 따라 사이트의 분위기가 달라지기도 합니다. 또한, 헤더를 잘 디자인하면 사용자가 사이트를 더 편리하게 이용할 수 있으니, 신경써서 작업하도록 합시다! 디자인 하기 헤더는 로고가 위치한 구역, 다른 페이지로 이동할 수 있는 네비게이션(또는 메뉴)가 위치한 구역, 추가적으로 로그인을 할 수 있는 버튼이 위치한 구역 세가지로 나눌 수 있습니다. 각 메뉴가 조화롭게 위치하도록 간격과 글자 크기를 조정합니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 .. 2022. 9. 1. 사이트 만들기 : 텍스트 유형3 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 텍스트 유형03 텍스트 유형의 사이트는 텍스트를 주요 콘텐츠로 배치하고, 콘텐츠는 제목과 본문으로 구성해 이미지 없이 내용을 전달하는 유형입니다. 같은 텍스트 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 세번째 디자인입니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다.. 2022. 8. 30. 사이트 만들기 : 텍스트 유형2 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 텍스트 유형02 텍스트 유형의 사이트는 텍스트를 주요 콘텐츠로 배치하고, 콘텐츠는 제목과 본문으로 구성해 이미지 없이 내용을 전달하는 유형입니다. 같은 텍스트 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 두번째 디자인입니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다.. 2022. 8. 30. 사이트 만들기 : 텍스트 유형 1 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 텍스트 유형01 텍스트 유형의 사이트는 텍스트를 주요 콘텐츠로 배치하고, 콘텐츠는 제목과 본문으로 구성해 이미지 없이 내용을 전달하는 유형입니다. 같은 텍스트 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 첫번째 디자인입니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다.. 2022. 8. 30. 사이트 만들기 : 이미지 유형 3 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 이미지 유형03 이미지 유형의 사이트는 이미지를 주요 콘텐츠로 대치하고, 콘텐츠에 대한 설명은 조금만 곁들인 형태의 페이지 디자인입니다. 같은 이미지 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 세번째 디자인입니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 이미지를 배치하여 전체적인 모습을 만들어 봅니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다. 우리 .. 2022. 8. 21. 사이트 만들기 : 이미지 유형 2 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 이미지 유형02 이미지 유형의 사이트는 이미지를 주요 콘텐츠로 대치하고, 콘텐츠에 대한 설명은 조금만 곁들인 형태의 페이지 디자인입니다. 같은 이미지 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 두번째 디자인입니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 이미지를 배치하여 전체적인 모습을 만들어 봅니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다. 바다 .. 2022. 8. 21. 사이트 만들기 : 이미지 유형 1 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 이미지 유형01 이미지 유형의 사이트는 이미지를 주요 콘텐츠로 대치하고, 콘텐츠에 대한 설명은 조금만 곁들인 형태의 페이지 디자인입니다. 같은 이미지 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 첫번째 디자인입니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 이미지를 배치하여 전체적인 모습을 만들어 봅니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다. 바질 .. 2022. 8. 21. 검색 효과2 검색 이펙트 페이지에 리스트를 만들고, input박스를 만들어 사용자가 리스트의 내용을 검색할 수 있게 한 효과입니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저 검색영역(사용자가 검색하고 싶은 내용을 입력하는 곳)과, 목록리스트를 선택하는 선택자를 지정합니다. 이후 사용자가 입력한 키워드를 변수에 저장한 후, 리스트의 데이터 값에 사용자 키워드가 포함되는지 확인하며 리스트를 숨기고 보이게 합니다. 이를 위해 각 리스트에 data-name="" 속성을 부여하여 데이터 값을 비교할 수 있도록 합니다. 리스트의 테이터 값에 사용자 키워드가 포함되는지는, 문자열 메서드의 하나인 includes() 메서드를 사용합니다. > 선택자 다중선택.. 2022. 8. 17. 사이트 만들기 : 카드 유형 3 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 카드 유형03 카드 유형의 사이트는 콘텐츠를 카드의 형태로 나열합니다. 카드를 어떤 모습으로, 어떻게 배치하냐에 따라 같은 카드 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 세번째 디자인입니다. 세번째 디자인은 세개의 카드를 간격을 두어 배치하였습니다. 카드 사이엔 라인을 그려 구분해 주었습니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. 카드 유형과 같이 중복되는 디자인을 배치하게 될 경우, 카드 하나를 먼저 디자인한 뒤 컴포넌트로 만들어 작업하면 간단합니다. 원본 컴포넌트를 수정하면.. 2022. 8. 10. 사이트 만들기 : 카드 유형 2 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 카드 유형02 카드 유형의 사이트는 콘텐츠를 카드의 형태로 나열합니다. 카드를 어떤 모습으로, 어떻게 배치하냐에 따라 같은 카드 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 두번째 디자인입니다. 두번째 디자인은 한 줄에 카드를 네개씩, 총 두 줄을 배치하였습니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. 카드 유형과 같이 중복되는 디자인을 배치하게 될 경우, 카드 하나를 먼저 디자인한 뒤 컴포넌트로 만들어 작업하면 간단합니다. 원본 컴포넌트를 수정하면 전체의 수정이 가능하며, 각각의 .. 2022. 8. 9. 사이트 만들기 : 카드 유형 1 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 카드 유형01 카드 유형의 사이트는 콘텐츠를 카드의 형태로 나열합니다. 카드를 어떤 모습으로, 어떻게 배치하냐에 따라 같은 카드 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 첫번째 디자인입니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다. 바질 키우는 법 🌱 바질 키우.. 2022. 8. 8. 이전 1 다음 728x90
