본문 바로가기
코딩/웹 프로그래밍

인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(1)

뱁새의이중장부 2022. 8. 1. 14:33
반응형

 

안녕하세요.

오늘은 인스타그램프로필에서 여러개의 링크를 걸기 위해 사용하는 링크트리 페이지를 따라 만들어보겠습니다.

 

우선 멀티링크, 링크트리가 무엇인지부터 확인해보겠습니다.

  • 개인 인스타그램 게시글에는 링크를 걸 수 없습니다.
  • 프로필에는 링크를 걸 수 있는데 하나만 걸 수 있습니다.

그래서 블로그와 유튜브, 마플샵 등 다양한 페이지를 운영중인 경우 여러 페이지 중 하나의 페이지만 링크를 걸 수 있습니다.

 

예를 들면 아래와 같이 인스타그램 프로필에는 하나의 링크만 걸 수 있습니다.

하지만 저 링크에 접속하면?

이렇게 네이버 블로그와 굿즈샵, MBTI 테스트 페이지의 링크가 걸려있는 페이지로 접속할 수 있습니다.

오늘 웹 프로그램이을 통해 만들어볼 페이지가 바로 이렇게 여러개의 링크가 모여있는 멀티링크 페이지입니다.

 

1. 프리뷰

  • HTML, CSS를 이용해 멀티링크 페이지를 구현합니다.
  • 작성한 페이지를 Github에 업로드하여 소스코드를 쉽게 관리할 수 있도록 해줍니다.
  • Netlify와 Github를 연동하여 멀티링크 페이지를 배포합니다.

*github는 우리가 만든 웹 사이트의 코드를 관리하기 쉽게 도와줍니다.

*netlify는 우리가 만든 웹 사이트를 서버에 올려 다른 사람들도 접속이 가능하도록 도와줍니다.

*모든 과정은 VSCode환경을 기준으로 소개합니다.

 

2. HTML, CSS로 웹페이지 구현하기

(1) HTML 전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>멀티링커</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header">
        <div class="titlebox">
            <img id="profile" src="puppysmain.png">
            <h1>퍼피스클라이밍</h1>
            안녕하세요 퍼피스 클라이밍입니다
        </div>
    </div>
    <br>

    <div class="body">
        <div class="link1">
            <button class="button1">
            <a id="link1" target="_blank" href="https://blog.naver.com/puppysclimbing">퍼피스 클라이밍 네이버 블로그</a>
            </button>
        </div>
    
    <br>

        <div class="link2">
            <button class="button2">
            <a id="link2" target="_blank" href="https://marpple.shop/kr/puppysclimbing">퍼피스 클라이밍 굿즈 샵</a>
            </button>
        </div>
    </div>
    <br>


    <div class="footer">
        <div class="tail">
            <a id="taillink" target="_blank" href="https://instagram.com/gogo_post_it">@by gogo_post_it</a>
        </div>
    </div>
</body>
</html>

 

(2) HTML 코드 분석

html 코드 분석에 들어가기에 앞서, html 은 태그라고 부르는 특별한 구성으로 이루어져 있습니다.

아래에서 바로 보이겠지만 <head>이렇게 괄호 안에 영문으로 된 태그 이름이 들어가있으며,

다양한 태그들을 조합하여 페이지를 구성하고 있습니다.

이 태그를 사용할때는 주의점이 있는데, 태그를 사용하였으면 꼭 태그를 닫아주어야 한다는 것입니다.

태그를 닫는 방법은 </head>와 같이 태그 이름 앞에 슬래시를 붙여주면 됩니다.

즉, <head> </head> 요렇게 사용하시면 됩니다.

물론 <meta>태그 같이 닫지 않아도 되는 태그도 있으니 참고해주세요.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>멀티링커</title>
    <link rel="stylesheet" href="style.css">
</head>

우선 head 태그 영역입니다.

title 태그에는 아래와 같이 웹 브라우저 탭에서 확인할 수 있는 페이지 제목을 입력합니다.

여러분이 원하는대로 변경해주시면 됩니다.

마지막 부분에는 link태그를 이용해 CSS파일을 연결해줍니다.

CSS 코드를 작성하면 html로 작성한 웹페이지를 예쁘게 꾸며주는 역할을 합니다.

그리고 작성한 CSS 코드를 적용하려면 CSS파일과 HTML파일을 연결해주어야 합니다.

 

<body>
    <div class="header">
        <div class="titlebox">
            <img id="profile" src="puppysmain.png">
            <h1>퍼피스클라이밍</h1>
            안녕하세요 퍼피스 클라이밍입니다
        </div>
    </div>
    <br>

    <div class="body">
        <div class="link1">
            <button class="button1">
            <a id="link1" target="_blank" href="https://blog.naver.com/puppysclimbing">퍼피스 클라이밍 네이버 블로그</a>
            </button>
        </div>
    
    <br>

        <div class="link2">
            <button class="button2">
            <a id="link2" target="_blank" href="https://marpple.shop/kr/puppysclimbing">퍼피스 클라이밍 굿즈 샵</a>
            </button>
        </div>
    </div>
    <br>


    <div class="footer">
        <div class="tail">
            <a id="taillink" target="_blank" href="https://instagram.com/gogo_post_it">@by gogo_post_it</a>
        </div>
    </div>
</body>

다음으로 body 태그에는 페이지의 내용들을 집어넣어줍니다.

우리가 만들 웹페이지는 크게 세개의 영역으로 나뉩니다.

첫번째 영역에는 이미지와 이름, 간단한 소개가 들어가는 프로필 영역이 위치합니다.

두번째 영역에는 링크들이 버튼 형태로 들어갑니다.

세번째 영역에는 본인 페이지의 링크가 들어갑니다.

 

첫번째 영역부터 만들어보겠습니다.

    <div class="header">
        <div class="titlebox">
            <img id="profile" src="puppysmain.png">
            <h1>퍼피스클라이밍</h1>
            안녕하세요 퍼피스 클라이밍입니다
        </div>
    </div>
    <br>

우선 div 태그를 이용해 영역을 나눠줍니다.

저는 각각 header, body, footer라는 class를 부여하여 세개의 영역을 구분해주었습니다.

class나 id를 부여하면 뒤에서 다룰 CSS를 이용해 태그 영역 꾸미기를 할 수 있습니다.

영역을 나눠준 뒤에는 다시 div 태그를 이용하여 프로필영역을 꾸며줍니다.

 

우선은 img 태그를 이용하여 본인이 원하는 이미지를 삽입합니다.

이미지 파일의 경로는 src 옵션으로 지정해주면 되는데,

만약 이미지 파일과 html파일이 동일한 경로에 있다면 파일명만 넣어주면 됩니다.

그리고 img 태그에 class나 id를 부여해줍니다.

 

다음으로는 제목에 많이 사용하는 h1태그를 이용해 이름을 넣어줍니다.

저는 퍼피스클라이밍이라는 인스타그램 계정을 운영하고 있어서 그 이름을 넣어주었습니다.

만약 글씨가 너무 크다면 h2, h3 등 숫자를 높일수록 작게 만들 수 있으니 참고해주세요.

마지막으로는 그냥 텍스트를 넣어 페이지에 대한 소개 글을 넣어주었습니다.

 

위 코드를 실행하면 우리가 작성한 페이지가 나타나게 됩니다.

코드를 실행하는 방법은 vscode에서 live server익스텐션을 다운받거나,

아니면 우리가 작성한 html 페이지를 더블클릭해서 직접 열어주면 됩니다.

위 방법들로 코드를 실행하면 아래 이미지와 같은 화면이 보입니다.

사진이 짤린 영역에는 경로를 지정해준 이미지가 들어가게 됩니다.

 

참고로 최하단에 br 태그를 넣은 이유는 두번째 영역과 첫번째 영역 사이를 띄어주기 위해서입니다.

 

이제 두번째 영역을 만들어보겠습니다.

    <div class="body">
        <div class="link1">
            <button class="button1">
            <a id="link1" target="_blank" href="https://blog.naver.com/puppysclimbing">퍼피스 클라이밍 네이버 블로그</a>
            </button>
        </div> 
        
    <br>

        <div class="link2">
            <button class="button2">
            <a id="link2" target="_blank" href="https://marpple.shop/kr/puppysclimbing">퍼피스 클라이밍 굿즈 샵</a>
            </button>
        </div>
    </div>
    <br>

역시 div 태그를 이용하여 구역을 나눠줍니다.

저는 div 태그에 link1, link2라는 class를 부여해주었습니다.

이후 button 태그를 이용하여 버튼 형태를 만들어 줍니다.

이제 a태그를 이용하여 페이지의 링크를 걸어줍니다.

target 옵션에 _blank라는 값을 넣어주면 링크를 눌렀을때 새창으로 띄워줍니다.

target 옵션을 넣지 않으면 링크를 눌렀을때 현재 페이지에서 링크로 이동합니다.

href 옵션에는 원하는 페이지의 주소를 넣어주면 됩니다.

a태그 사이에 텍스트를 넣어주면 텍스트에 링크가 걸립니다.

예를 들면 <a>텍스트를 넣어주세요</a> 형태로 만들어주면

텍스트를 넣어주세요 라는 텍스트에 링크가 걸리게 됩니다.

 

위 코드를 실행하면 아래 이미지와 같이 나타나게 됩니다.

마지막으로 세번째 영역을 만들어주겠습니다.

    <div class="footer">
        <div class="tail">
            <a id="taillink" target="_blank" href="https://instagram.com/gogo_post_it">@by gogo_post_it</a>
        </div>
    </div>

역시 div 태그를 이용해 영역을 구분해주었고,

a태그를 이용해 링크를 걸어주었습니다.

 

이제 코드를 실행해보면 아래와 같은 페이지가 나타납니다.

 

(3) CSS 전체 코드

.header {

}

.body {
    background-color: skyblue;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.footer {

}


.titlebox {
    background-color: skyblue;
    padding: 20px;
    color: white;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

#profile {
    width: 150px;
    height: 150px;
    border-radius: 30%;
}

.link1 {
    text-align: center;
}

.button1 {
    width: 100%;
    background-color: rgb(150, 211, 235);
    padding: 20px;
    color: white;
    border-radius: 20px;
    text-align: center;
    border: none;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

#link1 {
    color: white;
    font-size: 25px;
    text-decoration-line: none;
}



.link2 {
    text-align: center;
}

.button2 {
    width: 100%;
    background-color: rgb(150, 211, 235);
    padding: 20px;
    color: white;
    border-radius: 20px;
    text-align: center;
    border: none;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

#link2 {
    color: white;
    font-size: 25px;
    text-decoration-line: none;
}



.tail {
    background-color: rgb(255, 255, 255);
    padding: 10px;
    color: skyblue;
    border-radius: 10px;
    border: 1px solid skyblue;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

#taillink {
    color: skyblue;
    font-size: 15px;
    text-decoration-line: none;
}

 

(4) CSS 코드 분석

.header {

}

.body {
    background-color: skyblue;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.footer {

}

CSS를 이용하여 HTML을 꾸며주기 위해서는 HTML 코드에 부여한 class와 id를 알아야합니다.

우리는 아까 세개의 큰 영역을 div태그로 나누고, 각각 header, body, footer라는 클래스를 부여해주었습니다.

CSS에서 class명을 선언할때는 부여한 class명 앞에 온점(.)을 붙여주면 됩니다.

만약 id명을 선언해야 할때는 id명 앞에 샾(#)을 붙여주면 됩니다.

 

저는 세 개의 큰 영역 중에서 body 영역만 꾸며주었습니다.

background-color는 말그대로 배경색을 의미합니다.

padding은 여백을 의미하는데 아래 그림에서 초록색으로 색칠된 영역이 바로 padding으로 만들어준 여백입니다.

border-radius는 div태그로 만들어준 영역의 테두리를 둥글게 만들어줍니다.

box-shadow는 이름에서도 알 수 있듯 div 태그로 만들어준 영역에 그림자를 만들어줍니다.

0은 가로 그림자를 의미합니다.

값을 키우면 오른쪽으로 그림자가 길어집니다.

15px는 세로 그림자를 의미합니다.

값을 키우면 아래로 그림자가 길어집니다.

35px는 얼마나 흐리게 할지를 의미합니다.

rgba는 그림자 색을 의미합니다.

 

.titlebox {
    background-color: skyblue;
    padding: 20px;
    color: white;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

#profile {
    width: 150px;
    height: 150px;
    border-radius: 30%;
}

다음으로는 titlebox 클래스와 profile 아이디를 꾸며줍니다.

titlebox 클래스를 부여해준 div영역은 아래 이미지와 같습니다.

color는 글자색을 의미하며, 저는 흰색으로 지정해주었습니다.

text-align은 텍스트를 정렬해주는 옵션입니다.

저는 center값을 넣어서 가운데로 정렬해주었습니다.

 

profile 아이디를 부여해준 영역은 아래 이미지와 같습니다.

width는 이미지의 넓이를 의미합니다.

height는 이미지의 높이를 의미합니다.

 

.link1 {
    text-align: center;
}

.button1 {
    width: 100%;
    background-color: rgb(150, 211, 235);
    padding: 20px;
    color: white;
    border-radius: 20px;
    text-align: center;
    border: none;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

#link1 {
    color: white;
    font-size: 25px;
    text-decoration-line: none;
}



.link2 {
    text-align: center;
}

.button2 {
    width: 100%;
    background-color: rgb(150, 211, 235);
    padding: 20px;
    color: white;
    border-radius: 20px;
    text-align: center;
    border: none;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

#link2 {
    color: white;
    font-size: 25px;
    text-decoration-line: none;
}

link1 클래스는 아래 이미지 영역입니다.

 

button1 클래스는 아래 이미지 영역입니다.

width옵션에 100%값을 주면 웹브라우저의 크기에 맞춰서 영역의 크기가 변합니다.

이미지로 표현하기가 애매한데 100%로 값을 주면

전체화면, 창화면 모두에서 버튼의 크기가 좌우로 꽉 차게 됩니다.

background-color에 색의 이름 대신 rgb값을 넣어줘도 됩니다.

border는 영역의 테두리에 대한 옵션입니다.

none값을 주면 테두리가 없어집니다.

 

link1 아이디는 아래 이미지 영역입니다.

font-size는 텍스트 크기를 의미한다.

text-decoration-line는 링크가 입혀진 텍스트의 아래에 있는 밑줄을 결정하는 옵션입니다.

none 값을 주면 밑줄을 없애줍니다.

 

.tail {
    background-color: rgb(255, 255, 255);
    padding: 10px;
    color: skyblue;
    border-radius: 10px;
    border: 1px solid skyblue;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

#taillink {
    color: skyblue;
    font-size: 15px;
    text-decoration-line: none;
}

tail 클래스 영역은 아래 이미지와 같습니다.

border에서 1px값은 테두리 선의 굵기를 의미합니다.

solid는 테두리선의 모양을 의미합니다.

solid 값을 주면 실선 형태로 그어집니다.

skyblue 값은 테두리선의 색을 의미합니다.

 

taillink 아이디 영역은 아래 이미지와 같습니다.

 

이상으로 웹페이지 코딩에 대해 알아보았습니다.

다음시간에는 Github에 코드를 업로드하고 관리하는 방법을 배우도록 하겠습니다.

netlify로 배포 후 웹페이지를 수정할 경우 github를 이용해서 해야하므로 중요한 부분입니다.

반응형
저작자표시 비영리 변경금지

'코딩 > 웹 프로그래밍' 카테고리의 다른 글

인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(3)  (0) 2022.08.15
인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(2)  (0) 2022.08.11
Vue - Vue가 뭔가요?, Vue 설치하기  (0) 2021.12.31
HTML[2] - 주요 태그 배우기  (0) 2021.08.21
HTML[1] - HTML이란?  (0) 2021.07.25

'코딩/웹 프로그래밍' Related Articles

티스토리툴바