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

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

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

그래서 문장 안에서 코드 부분을 강조하는 용도로 사용한다.

웹에서도 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있도록 하는 도움을 준다.Github에서는 README.md를 통해 우선적으로 접하게 된다.문법이 쉽고 간결하다.관리가 쉽다.지원 가능한 플랫폼과 프로그램이 다양하다.표준이 없다.모든 HTML 마크업을

git reset --hard HEAD~2 : 2버전 전으로 버전을 되돌린다.git reset --hard ORIG_HEAD : 되돌리기 명령을 취소한다.git clone 'Git주소' : 원하는 저장소에 GitHub 프로젝트 복사한다.git branch -r : 복제

브랜치 git add .git commit -m '변경사항'git push origin signin이전에 설명했던 위 과정을 통해 새로운 버전을 생성할 수 있다.Github에서 Pull requests를 통해 브랜치를 확인할 수 있다.compare을 선택하여 내가 수정

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

Git(깃)은 컴퓨터 파일의 변경사항을 추적하고 여러 사용자들 간에 파일 작업을 조율하기 위한 대표적인 버전 관리 시스템(VCS)이다.터미널에 입력git config --global core.autocrlf true(win)/auto(mac) : OS간의 줄바꿈 문자열

그래서 SPA(Single Page Application) 같은 단일 HTML 제공 사이트는 페이지 구조에 따라 이러한 메타 정보를 위해 별도의 컴퓨팅 서버가 필요할 수 있다.

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

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

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

Swiper HTML, CSS, JS 에서 반응형 슬라이드 및 스와이프 기능을 쉽게 구현할 수 있도록 해주는 라이브러리 사용방법 1) HTML에 Swiper 라이브러리 삽입 2) HTML에 Swiper 컨테이너 생성

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

HTML 클래스 속성의 작명법요소\_\_일부분 : Underscore(Lodash) 기호로 요소의 일부분을 표시요소--상태 : Hyphen(Dash) 기호로 요소의 상태를 표시BEM 미적용 코드BEM 적용 코드

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

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

=Document Object Model, Application Programming Interface자바스크립트에서 HTML을 제어하는 명령들 (이미 약속되어 있는 명령)메소드를 체인처럼 이어서 만드는 것

hello-yello-green-apple단어 사이에 '-'를 사용하는 방식HTTML, CSS에서 주로 사용hello_yello_green_apple단어 사이에 '\_'를 사용하는 방식HTTML, CSS에서 주로 사용helloYelloGreenApple첫 번째 단어를