'coding' 카테고리의 글 목록 (35 Page)

[반응형] 물감방울 랜딩페이지

안녕하세요. 플입니다. 물감 방울 랜딩페이지가 완성되었어요. 1. 디자인 제작 중이던 물감 방울의 랜딩페이지 작업이 완료되었어요. 단일 페이지로 긴 세로 형태의 사이트입니다. 메뉴를 누르면 스크롤이 해당 위치로 이동하는 사이트예요. 그림이 잘 보이도록 연한 색을 컬러 포인트로 사용했어요. 배경에 연한 노랑을 주로 사용한 이유예요. 2. 사이트 보러 가기 https://ssimplay.github.io/shinedrop/ shine drop 우당탕탕 좌충우돌 신나는 일상이야기. 톡 떨어진 물감에서 태어난 시트렛은 궁금한게 너무나 많다. 세상에는 모르는 것과 신기한 것들 투성이. 여기저기 안가보는 곳 없이 기웃거리며 미끄러�� ssimplay.github.io 클릭하시면 완성된 사이트를 구경하실 수 있어요!..

coding/개발 팁 · 2020. 5. 8. 07:30

[jQuery] 햄버거 메뉴 만들기 1 - fadeOut()

안녕하세요. 플입니다. 오늘은 햄버거 메뉴를 만들어볼게요. 1. 햄버거 메뉴 햄버거 메뉴란 보통 위의 이미지처럼 가로로 긴 둥근 모서리의 직사각형 모양이 세 개 정도 있는 모양의 메뉴를 말합니다. 모바일이 익숙한 사람은 보자마자 메뉴 버튼이라는 것을 쉽게 알 수 있죠. 모양이 햄버거와 비슷해서 햄버거 메뉴라고도 부릅니다. 기본적인 저런 모양 말고도 다양한 모양이 존재합니다. 원 세 개를 가로로 나열한 모양이라던가 혹은 홈페이지 디자인에 따라 개성 넘치는 모양들이 존재합니다. 오늘은 기본적인 모양으로 만들어봤어요. 2. 햄버거 메뉴 fadeOut 설명에 들어가기에 앞서 코딩은 개인마다 쓰는 방식이 조금씩 다르고, 또한 계속 발전해 나가고 있어요. 만약 이 글을 보는 당신이 지금 제가 알려드리는 코드보다 좀..

coding/JavaScript · 2020. 5. 6. 07:30

[html] a태그를 이용한 스크롤다운

안녕하세요. 플입니다. 오늘은 a태그를 이용해 스크롤 다운을 해볼게요. 1. 스크롤다운 스크롤 다운이라는 것은 간단히 말해 상단에서 특정 메뉴를 눌렀을 때 그 메뉴가 있는 곳으로 스크롤이 이동하는 것을 말합니다. 보통 세로로 긴 홈페이지에 많이 사용해요. 그리고 보통은 jQuery로 적용해주지만 오늘은 a태그를 이용해서 스크롤다운 기능을 만들어볼 거예요. 2. id 넣기 스크롤을 멈추게 하고 싶은 영역에 id를 만들어줍니다. class가 있더라도 추가로 넣어주셔도 상관없어요. class는 적용이 안되기 때문에 id로 꼭 넣어주셔야 합니다. 3. a태그에 적용 메뉴로 돌아와 a태그 href 부분에 #+id명을 적어줍니다. 그러면 끝입니다. 간단하죠? jQuery는 엄청 오래 걸리는데.. ㅠㅠ 다만 jQue..

coding/html + css · 2020. 5. 1. 07:30

[brackets] 브라켓 테마 바꾸기

안녕하세요. 플입니다. 오늘은 브라킷에서 테마를 바꿔볼게요. 1. 테마 브라킷을 열어서 보기> 테마 메뉴로 들어갑니다. 2. 테마 설정 테마 설정 창으로 들어와서 현재 테마에서 내용을 클릭해서 바꿔주시면 됩니다. 저는 다크 테마를 사용하고 있는데 테마를 바꿔볼게요. 테마를 선택하면 이렇게 라이트 테마로 바꿀 수 있어요. 옆에 디폴트라고 적혀있는데 원래는 흰 화면이 기본 배경이에요. 라이트 테마를 적용하면 이런 이미지예요. 이건 제가 평소에 쓰는 다크 테마예요. 그럼 이만. 총총.

coding/editor · 2020. 4. 28. 07:30

[Github] 버전 관리 하기

안녕하세요. 플입니다. 오늘은 github에서 버전 관리를 해볼게요. 1. 프로젝트 깃허브의 왼쪽을 보시면 자신이 만든 프로젝트 목록을 확인할 수 있어요. 버전 관리를 하고 싶은 프로젝트를 들어가 줍니다. 프로젝트 목록을 선택하면 들어갈 수 있어요. 프로젝트 생성 방법이 궁금하시다면 아래 링크에서 확인해주세요. https://ssimplay.tistory.com/11 [Github] 깃허브에 웹사이트 등록하기 안녕하세요. 플입니다. 오늘은 깃허브에 웹사이트 등록하는 법을 알아볼게요. 1. 깃허브 회원가입 우선 깃허브에 회원가입을 해주세요. 순서대로 이름/이메일/비밀번호를 입력해주시면 회원가입을 간편하게 할.. ssimplay.tistory.com 2. 파일 업로드 저는 주로 에디터 프로그램으로 작업을 하..

coding/개발 팁 · 2020. 4. 27. 07:30

coding 265