웹프로그래밍 (5) 썸네일형 리스트형 자바스크립트로 버튼 효과 만들기 웹페이지에서 버튼 눌렀을때 뭐가 튀어나오게 하거나 텍스트를 바꿔준다거나 그런 다양한 기능들을 구현하기 위해서는 자바스크립트를 써야 함. 물론 버튼 디자인은 HTML과 CSS로 한다. 오늘 포스팅 내용은 버튼 디자인은 모르겠고 버튼을 눌렀을때 기능을 부여하는 것이 핵심. 바로 예제 코드 들어감 뿅 버튼 div 태그에 스타일을 넣어서 display: none 옵션을 넣으면 기본적으로 div 태그의 내용이 웹페이지에 표현되지 않음. 근데 버튼을 만들어서 div 태그의 스타일 옵션을 display: block 으로 바꿔주면 div 태그의 내용이 웹페이지에 표현됨 이렇게 된다는 이야기임. 자 여기서 버튼 태그에 onclick이라는 옵션이 들어가있는데 말그대로 저 태그를 클릭했을때 특정 코드를 실행시켜준다. onc.. 자바스크립트로 HTML에서 특정 id의 텍스트 바꾸기 자바스크립트는 HTML을 조작할 수 있는 프로그래밍 언어임 바로 예제 갈길게여 안녕? 위 예제를 돌리면 우리는 insa라는 id를 가진 태그의 내용물을 '안녕하세요?'라는 텍스트로 바꿀 수 있음 이게 가능한 이유가 저기 이렇게 글자 색도 바꿔줄 수 있음. style 옵션 뒤에 color도 넣을 수 있고, background-color, font-size 등 CSS 옵션을 넣을 수 있다. 아주 간단함. 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(3) 안녕하세요. 링크트리 페이지 코딩으로 만들기 3탄입니다. 1탄과 2탄은 아래 링크를 참고해주세요. 2022.08.01 - [코딩/웹 프로그래밍] - 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(1) 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(1) 안녕하세요. 오늘은 인스타그램프로필에서 여러개의 링크를 걸기 위해 사용하는 링크트리 페이지를 따라 만들어보겠습니다. 우선 멀티링크, 링크트리가 무엇인지부터 확인해보겠습니다. 개인 bebutae.tistory.com 2022.08.11 - [코딩/웹 프로그래밍] - 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(2) 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(2) 안녕하세요. 링크트리 페이지 코딩으로 만들기 2탄입니다. 우리는.. 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(2) 안녕하세요. 링크트리 페이지 코딩으로 만들기 2탄입니다. 우리는 HTML과 CSS로 코딩한 페이지를 깃허브 저장소에 올리고, Netlify를 깃허브 저장소에 연동시켜 웹페이지를 배포할 예정입니다. 1탄에서는 링크트리 페이지를 HTML과 CSS로 코딩해보았습니다. 2022.08.01 - [코딩/웹 프로그래밍] - 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(1) 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(1) 안녕하세요. 오늘은 인스타그램프로필에서 여러개의 링크를 걸기 위해 사용하는 링크트리 페이지를 따라 만들어보겠습니다. 우선 멀티링크, 링크트리가 무엇인지부터 확인해보겠습니다. 개인 bebutae.tistory.com 2탄에서는 코딩한 페이지를 깃허브 저장소에 올려보겠습니다. 깃허브를.. 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(1) 안녕하세요. 오늘은 인스타그램프로필에서 여러개의 링크를 걸기 위해 사용하는 링크트리 페이지를 따라 만들어보겠습니다. 우선 멀티링크, 링크트리가 무엇인지부터 확인해보겠습니다. 개인 인스타그램 게시글에는 링크를 걸 수 없습니다. 프로필에는 링크를 걸 수 있는데 하나만 걸 수 있습니다. 그래서 블로그와 유튜브, 마플샵 등 다양한 페이지를 운영중인 경우 여러 페이지 중 하나의 페이지만 링크를 걸 수 있습니다. 예를 들면 아래와 같이 인스타그램 프로필에는 하나의 링크만 걸 수 있습니다. 하지만 저 링크에 접속하면? 이렇게 네이버 블로그와 굿즈샵, MBTI 테스트 페이지의 링크가 걸려있는 페이지로 접속할 수 있습니다. 오늘 웹 프로그램이을 통해 만들어볼 페이지가 바로 이렇게 여러개의 링크가 모여있는 멀티링크 페이지.. 이전 1 다음
