HTML43 슬라이드 이펙트 1 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 트랜지션 효과 슬라이드 효과는 다수의 이미지가 있을 때, 시간이 지날 때 한장씩 슬라이드 되며 보여지도록 한 효과입니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__img와 또 한번 감싼 slider__wrap을 만들었습니다. CSS 코드 각 이미지에 바로 위 부모요소를 기준으로 포지션을 주어, 위치를 이동시킬 수 있도록 하였습니다. 또한 이미지가 순서대로 위치할 수 있도록 z-index로 z축 상의 위치를 조정해주었습니다. .slider__wrap { width: 100%; height: 100vh; displa.. 2022. 8. 29. GSAP 알아보기 GSAP 알아보기 CSS 애니메이션을 쉽게 작성할 수 있는 GSAP에 대해 알아봅시다! GSAP란? GSAP는 GreenSock에서 만든 자바스크립트 애니메이션 라이브러리입니다. 복잡한 애니메이션을 구현하려면, CSS나 일반적인 자바스크립트로 작성으로는 너무 복잡하고 한계가 느껴지기 마련입니다. 이런 상황에서 보다 쉽게 애니메이션을 만들 수 있도록 만들어주는 도구가 바로 GSAP입니다. GSAP 공식 사이트 방문하기 GSAP 사용하기 * 1. gsap cdn 연결하기 * * 2. gsap.to() 작성하기 * gsap.to("대상", { 속성1, 속성2, 속성3, … }); * gsap.to의 주요 속성과 예시 * x : x축으로 해당 값만큼 이동 ( x: 200 ) y : y축으로 해당 값만큼 이동 (.. 2022. 8. 29. 사이트 만들기 : 이미지 유형 3 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 이미지 유형03 이미지 유형의 사이트는 이미지를 주요 콘텐츠로 대치하고, 콘텐츠에 대한 설명은 조금만 곁들인 형태의 페이지 디자인입니다. 같은 이미지 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 세번째 디자인입니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 이미지를 배치하여 전체적인 모습을 만들어 봅니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다. 우리 .. 2022. 8. 21. 사이트 만들기 : 이미지 유형 2 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 이미지 유형02 이미지 유형의 사이트는 이미지를 주요 콘텐츠로 대치하고, 콘텐츠에 대한 설명은 조금만 곁들인 형태의 페이지 디자인입니다. 같은 이미지 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 두번째 디자인입니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 이미지를 배치하여 전체적인 모습을 만들어 봅니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다. 바다 .. 2022. 8. 21. 사이트 만들기 : 이미지 유형 1 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 이미지 유형01 이미지 유형의 사이트는 이미지를 주요 콘텐츠로 대치하고, 콘텐츠에 대한 설명은 조금만 곁들인 형태의 페이지 디자인입니다. 같은 이미지 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 첫번째 디자인입니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 이미지를 배치하여 전체적인 모습을 만들어 봅니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다. 바질 .. 2022. 8. 21. 구조 알아보기 : 블록 구조 / 인라인 구조/ 인라인블록 구조 블록 구조 / 인라인 구조 / 인라인블록 구조 HTMl의 요소들은 그 특성에 따라 블록 구조와 인라인 구조로 나뉘어집니다. 각 구조의 특성을 알고 적절히 사용하도록 합니다. > 블록(block) 구조 블록(block) 구조는 영역의 너비가 상위 영역의 전체 너비만큼 만들어져, 줄바꿈이 일어납니다. 블록 구조인 요소는 padding, margin 과 같은 여백 값이 적용됩니다. 기본 설정이 블록 구조인 태그는 div, p, h1~h6, ul, li, ol, table, form, section, footer 등이 있습니다. > 인라인(inline) 구조 인라인(inline) 구조는 영역의 너비가 텍스트 또는 컨텐츠의 너비만큼만 만들어져, 줄바꿈이 일어나지 않고 옆으로 나열됩니다. 인라인 구조인 요소는 pa.. 2022. 8. 21. 검색 효과2 검색 이펙트 페이지에 리스트를 만들고, input박스를 만들어 사용자가 리스트의 내용을 검색할 수 있게 한 효과입니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저 검색영역(사용자가 검색하고 싶은 내용을 입력하는 곳)과, 목록리스트를 선택하는 선택자를 지정합니다. 이후 사용자가 입력한 키워드를 변수에 저장한 후, 리스트의 데이터 값에 사용자 키워드가 포함되는지 확인하며 리스트를 숨기고 보이게 합니다. 이를 위해 각 리스트에 data-name="" 속성을 부여하여 데이터 값을 비교할 수 있도록 합니다. 리스트의 테이터 값에 사용자 키워드가 포함되는지는, 문자열 메서드의 하나인 includes() 메서드를 사용합니다. > 선택자 다중선택.. 2022. 8. 17. 검색 효과 1 검색 이펙트 페이지에 리스트를 만들고, input박스를 만들어 사용자가 리스트의 내용을 검색할 수 있게 한 효과입니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저 검색영역(사용자가 검색하고 싶은 내용을 입력하는 곳)과, 목록리스트를 선택하는 선택자를 지정합니다. 이후 사용자가 입력한 키워드를 변수에 저장한 후, 리스트의 데이터 값에 사용자 키워드가 포함되는지 확인하며 리스트를 숨기고 보이게 합니다. 이를 위해 각 리스트에 data-name="" 속성을 부여하여 데이터 값을 비교할 수 있도록 합니다. 리스트의 테이터 값에 사용자 키워드가 포함되는지는, 문자열 메서드의 하나인 indexOf() 메서드를 사용합니다. > 선택자 다중선택이.. 2022. 8. 16. 구조 관련 요소 알아보기 구조 관련 요소 html의 구조를 이루는 요소는 header, section, footer, article 등이 있습니다. 해당 요소들을 알맞게 배치하여 시멘틱 마크업에 활용하도록 합니다. 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 1. HTML문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색 등의 내용들을 포함할 수 있습니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 , 태그는 포함할 수 없습니다. 1. HTML문서에서 맥락이 같은 요소들을 주제별로 그룹화해주는 태그이며 섹션 주제에 대한 제목 요소(~)를 포함하는 것이 좋습니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다. 1. HTML문서의 푸터 영역을 의미하는 태그로 섹션 작성.. 2022. 8. 14. 사이트 만들기 : 카드 유형 3 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 카드 유형03 카드 유형의 사이트는 콘텐츠를 카드의 형태로 나열합니다. 카드를 어떤 모습으로, 어떻게 배치하냐에 따라 같은 카드 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 세번째 디자인입니다. 세번째 디자인은 세개의 카드를 간격을 두어 배치하였습니다. 카드 사이엔 라인을 그려 구분해 주었습니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. 카드 유형과 같이 중복되는 디자인을 배치하게 될 경우, 카드 하나를 먼저 디자인한 뒤 컴포넌트로 만들어 작업하면 간단합니다. 원본 컴포넌트를 수정하면.. 2022. 8. 10. 사이트 만들기 : 카드 유형 2 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 카드 유형02 카드 유형의 사이트는 콘텐츠를 카드의 형태로 나열합니다. 카드를 어떤 모습으로, 어떻게 배치하냐에 따라 같은 카드 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 두번째 디자인입니다. 두번째 디자인은 한 줄에 카드를 네개씩, 총 두 줄을 배치하였습니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. 카드 유형과 같이 중복되는 디자인을 배치하게 될 경우, 카드 하나를 먼저 디자인한 뒤 컴포넌트로 만들어 작업하면 간단합니다. 원본 컴포넌트를 수정하면 전체의 수정이 가능하며, 각각의 .. 2022. 8. 9. 웹 표준, 웹 접근성, 웹 호환성 알아보기 웹 개발자가 알아야 할 규칙 웹 페이지를 만들게 된다면 반드시 지키지는 않아도 지키면 좋은, 지킬수록 좋은 규칙들이 있다. 웹 표준, 웹 접근성, 웹 호환성이 이에 해당한다. 웹 표준이란? 웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미합니다. 왜 지켜야 할까? 1. 수정 및 운영관리가 용이합니다. 2. 접근성이 향상됩니다. 3. 검색엔진에 최적화 됩니다. 4. 파일 사이즈를 축소시켜, 서버 공간을 절약합니다. 5. 마크업을 효율적으로 할 수 있습니다. 6. 다른 브라우저에서의 호환 가능.. 2022. 8. 8. 사이트 만들기 : 카드 유형 1 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 카드 유형01 카드 유형의 사이트는 콘텐츠를 카드의 형태로 나열합니다. 카드를 어떤 모습으로, 어떻게 배치하냐에 따라 같은 카드 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 첫번째 디자인입니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다. 바질 키우는 법 🌱 바질 키우.. 2022. 8. 8. 이전 1 2 다음 728x90
