'coding/html + css' 카테고리의 글 목록 (12 Page)

[css] 마우스 올리면 나타나는 버튼 만들기

안녕하세요. 플입니다. 마우스 올리면 나타나는 버튼의 css를 진행해볼게요. 1. html 보고오기 2020/05/22 - [Try/coding] - [html] 마우스를 올리면 나타나는 버튼 만들기 2. 전체 css li{ float:left; width:30%; margin:0 1%; height:218px; border:3px dashed $sub_color; a{ display:none; position:relative; width:100%; height:218px; text-align:center; background: $sub_color; line-height: 218px; color:$main_color; font-size:28px; font-family:'NanumBarunpen'; fon..

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

[html] 마우스를 올리면 나타나는 버튼 만들기

안녕하세요. 플입니다. 마우스를 올리면 나타나는 버튼을 만들어볼게요. 1. 전체 html 한 방울 두 방울 오늘은 html 코드만 우선 진행할게요. 먼저 전체 코드를 보여드릴게요. 2. 코드 하나씩 뜯어보기 한 방울 마우스를 올리면 태그가 나타나게 만들 거예요. 그래서 태그와 태그를 나란히 넣어줬어요. 저는 여러 개를 만들 예정이기 때문에 태그를 이용했습니다. 나란히 두는 것이 중요한 부분이에요. 3. css 보러 가기 준비 중 그럼 이만. 총총.

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

[html] 서브페이지 만들기

안녕하세요. 플입니다. 오늘은 서브페이지 틀을 만드는 기본적인 방법을 알아볼게요. 1. 파일 생성 먼저 서브페이지의 html 파일을 만들어줍니다. 간단하게 오른쪽 클릭을 해서 파일 만들기를 눌러주신 후 sub1.html이라는 이름의 파일을 생성합니다. 이름은 본인이 헷갈리지 않으면 다른 이름으로 해도 상관없어요. 저는 한눈에 알기 쉽게 sub1이라는 이름을 주로 사용한답니다. 2. 서브메뉴 생성 이미 기획단계에서 서브메뉴를 구성하고 메인 페이지를 만들었다면 상관없지만 오늘은 추가 작업이라 메뉴에 서브페이지 링크가 없어요. 그래서 우선 서브 메뉴를 생성해 줄 거예요. 이렇게 기존 메뉴에 더해 추가해줍니다. 링크도 sub1.html로 걸어주는 것을 잊지 말고요. 3. index 복사하기 다음은 서브페이지에 ..

coding/html + css · 2020. 5. 15. 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

coding/html + css 101