웹사이트 만들기

웹 사이트가 쇼셜미디어(카카오톡 등)에 공유될때 우선적으로 활용되는 정보 지정og:type : 페이지의 유형og:site_name : 속한 사이트의 이름og:title : 페이지의 이름(제목)og:description : 페이지의 간단한 설명og:image : 페이지의

a 태그를 이용하여 특정 페이지로 이동할 수 있도록 해준다. 이때 href="/"를 입력함으로써 로고 클릭 시 메인 페이지로 이동한다는 것을 의미한다.이미지는 inline 요소이기에 하단에 불필요한 백이 생길 수 있다.이때 이미지를 block 요소로 지정함으로써 불필요

JavaScript를 이용하여 웹 애니메이션을 만들때 도움을 주는 라이브러리https://cdnjs.com/libraries/gsap해당 사이트를 통해 gsap 라이브러리를 이용할 수 있다.스크롤을 함으로써 특정 영역 이상 스크롤을 하였을 경우 뱃지를 숨긴다.

Swiper을 이용하여 공지사항의 텍스트가 자동으로 움직으도록 구현하였다.Swiper 에 대한 정보는 링크 참조new Swiper(선택자, 옵션)direction : 슬라이드 방향 지정autoplay : 자동 재생과 관련된 설정loop : 슬라이드 루프(무한 회전)을

flex-wrap: wrap;을 이용하여 만약 버튼이 부모 요소의 크기에 넘친다면 다음줄로 줄바꿈을 해준다.flex-grow: 1 속성을 사용하여 너비를 전체 너비로 지정해줄 수 있다.일반적으로 유튜브와 같은 영상들은 16:9 비율을 통해 사용한다.padding-top

transform: rotateY(-180deg) 요소를 뒤집는다.(Y축으로 -180도)backface-visibility : hidden 뒷면을 안보이도록 처리한다.perspective: 600px; 원근법을 이용해서 600px 거리에서 3차원의 효과를 시각적으로 보

input : 사용자에게 데이터를 입력받는 역할type="text" : 문자 타입을 입력받기 위한 요소input type="password" : 비밀보호 타입을 입력받기 위한 요소input type="submit" : 타입을 'submit'을 사용하면 해당 버튼이 선택

HTML에서는 한글을 쓰면 영어와 다르게 줄바꿈이 있을 경우 단어 단위가 아닌 글자 단위로 줄바꿈이 이루어진다.word-break: keep-all;을 사용함으로써 한글에 줄바꿈이 있어도 글자 단위가 아닌 단어 단위로 줄바꿈이 이루어지도록 해준다.각 버튼을 누르면 링크

위 코드에서는 showSearch() 함수를 통해 검색바가 보이면 html에 fixed 클래스를 추가하고 hideSearch() 함수를 통해 검색바가 없어지면 html에 fixed 클래스를 제거한다.이때 html에 fixed 클래스가 추가되었다면 css에서 positi

마우스 스크롤이 있을 경우 네비게이션 바가 항상 최상단에 위치하고 있어야 한다.이를 위해서는 position: sticky;를 사용하면 된다. sticky를 사영하기 위해서는 top, bottom, left, right 중 1개를 지정해야하는데 해당 페이지에서는 항상