profile
코드공부
post-thumbnail

data.json

data를 만들어서 직접 적용하는 방법data가 있는 주소를 가져와서 적용하는 방법data.jsonindex.htmlmain.jsdata.jsonhtml main.js결과 화면html main.js결과화면해당 이미지 썸네일과 타이틀 글이 나오는 걸 확인 할 수 있다

2022년 10월 30일
·
0개의 댓글
·

스크롤 했을 때 이미지 움직이기

스크롤을 할 때, 이미지가 밀리면서 움직이는 효과를 주고 싶을 때!한 곳이 아닌 여러곳을 컨트롤 하고 싶을 때!data-scroll이라는 가상의 data를 가지고 각각(each)의 index(태그의 순서),item(해당 태그)를 이용하여 원하는 곳의 data-scrol

2022년 10월 29일
·
0개의 댓글
·
post-thumbnail

화면 꽉 찬 메뉴 만들기

위에 사진처럼 메뉴 하나하나 색이 다르고 꽉 차게 나오는 메뉴구성 만들기👌 gsap.set으로 기본 셋팅을 해준다메뉴 li 하나하나 위로 올려준다. 후에 차례차례 스르륵 나오게 하는 효과를 주기 위해!👌 타임라인을 만들어주고 멈춤 상태여야 해서 paused true

2022년 10월 29일
·
0개의 댓글
·
post-thumbnail

jQuery

jQuery 해당 사이트에 들어가서 주황색 다운로드 버튼을 눌러준다맨 아래로 내려가 jQuery CDN을 클릭한다어떤걸 눌러도 상관 없음 주소를 복사해온다html 안에 스크립트를 작성하거나 따로 js 파일을 만들어서 작성을 하거나 항상 시작 선언문은 이 뜻은 모든 문서

2022년 10월 26일
·
0개의 댓글
·
post-thumbnail

scss

css 전처리 도구세세한 소분으로 수정할 부분을 정확히 파악할 수 있다코드의 재활용성을 올리고 가독성을 올릴 수 있다변수 사용mixin.scss이나 variable.scss에 담아놓은 것을 원하는 곳에 불러서 쓸 수 있다중첩기능중첩 기능을 이용하여 중복적인 코드를 줄일

2022년 10월 21일
·
0개의 댓글
·
post-thumbnail

포토샵 시안 웹사이트 제작

포토샵 시안으로 gglap 웹사이트 만들기포토샵 배경의 눈을 끄고 투명한 상태에서 slice tool(c)를 이용하여 원하는 부분을 전체적으로 잡아주고 ctrl + shift + alt + s 를 눌러주어 저장을 한다.👌!! 최대한 이미지 고유의 사이즈대로 여백없이

2022년 10월 21일
·
0개의 댓글
·
post-thumbnail

naver 클론 코딩

여러 이미지가 모여져 있는 하나의 이미지를 사용하여 좌표값만으로 이미지를 보여지게 한다.background로 싸그리 잡아서 작성하면 안되고 image와 repeat, size 따로따로 줘야한다. 네이버의 이미지 같은 경우 두배 가까이 큰 이미지이다. 이 이유는 dpi가

2022년 10월 21일
·
0개의 댓글
·

css

🧩Reset 기본 리셋 *태그가 가지고 있는 기본영역들이 사라지고, 폰트 기본 사이즈 16이 된다 ul 기본으로 가지고 있는 스타일이 사라짐 a 밑줄과 색 리셋 img 인라인블록 요소이기 때문에 여백을 없애기 위함(vertical-align:top 쓰기도 함)과 이

2022년 10월 19일
·
0개의 댓글
·

웹 접근성과 웹표준

웹 사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장하는 것장애인 및 고령자 등 모든 사람다양한 플랫폼 및 디바이스와 웹 브라우저 등 모든 환경웹 표준은 시멘틱 웹을 구성하기 위하여 사전에 미리 약속되어진 작업 방식웹 접근성을 확보하기 위해

2022년 10월 19일
·
0개의 댓글
·

마크업

의미가 있는 태그!1\. 협업에서의 이점이 있다2\. 직관성이 좋다3\. seo(검색엔진최적화)에서 좋은 점수를 얻는다4\. 접근성이 좋다

2022년 10월 19일
·
0개의 댓글
·