'coding' 태그의 글 목록 (10 Page)

[영상] 랜딩페이지 html 작업

안녕하세요. 플입니다. 오늘은 랜딩페이지 html 작업 영상을 가져왔어요. 1. 랜딩페이지 html 작업 https://youtu.be/FMYF65EbuP4 코드가 잘 보이도록 신경을 써봤는데 어떤지 궁금하네요. 랜딩페이지 html 작업을 영상으로 만들어봤어요. 아직 css가 들어가지 않아서 실제 화면은 전혀 랜딩페이지 같지 않지만 다음 css 작업 영상은 그럴싸해질 테니 다음 영상도 기대해주세요~ 그럼 이만. 총총.

Design/프리미어 · 2020. 5. 7. 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

[css] 배경 이미지 고정하기

안녕하세요. 플입니다. 오늘은 배경 이미지를 고정해볼게요. 1. 배경 이미지 고정 배경 이미지가 고정된다는 말이 무슨 말이냐면 아마 위의 이미지처럼 스크롤을 내릴 때 이미지가 같이 내려오는 것이 아니라 그 자리에 고정된 채로 움직이지 않는 모습을 본 적이 있으실 거예요. 그런 효과를 주는 css를 넣어줄 것입니다. 글로는 조금 이해하기 어려우시다면 아래 링크에서 확인해주세요. 포스팅하고 있는 지금은 아직 완성된 페이지가 아니긴 하지만 예시로 올려둘게요. https://ssimplay.github.io/paintdrop/ paint drop 우당탕탕 좌충우돌 물감친구들의 신나는 일상이야기. 톡 떨어진 물감에서 태어난 물감찍이는 궁금한게 너무나 많다. 세상에는 모르는 것과 신기한 것들 투성이. 여기저기 안가..

coding/html + css · 2020. 4. 22. 07:30

[css] linear-gradient 반반무많이 2탄

안녕하세요. 플입니다. liner-gradient를 사용할 때 주의할 점이 있어서 2탄으로 돌아왔습니다. 1. liner-gradient https://ssimplay.tistory.com/239 [css] 배경색 반반 무많이 안녕하세요. 플입니다. 오늘은 배경색을 반씩 나눠서 두 가지 색으로 만들어볼게요. 1. 크기 정하기 이렇게 이미지가 색 경계에 걸쳐있을 때가 있어요. 코딩 안된다고 시안을 막 뜯어고치는 건 너무 슬프잖아요?.. ssimplay.tistory.com 배경색 반나누는 1탄은 링크로 남겨둘게요. 2. 그라데이션이 되는 이유 아 퍼센트를 조정하면 두가지색으로 나눌 수 있겠군! 하고 신나서 만들었는데 그라데이션이 된 경우가 있으신가요? div{ background:linear-gradien..

coding/html + css · 2020. 4. 20. 07:30

coding 89