본문 바로가기
Q 인터넷 정보

인스타그램 계정 프로필 링크 페이지 여러개 만들기 part 2

by Grey.han 2022. 7. 22.
반응형

 

위 사진과 글들을 사이트 가운데로

모아주는 작업을 해보겠습니다

<div> </div>로 묶기

 

그다음 다시 class="wrap"으로 이름을 정해줍니다


display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

다시 위 style 태그로 돌아가서

.wrap{}안에 백그라운드색 넓이 마진폭

 

그리고 위 코드를 복사 붙여넣기 합니다

가운데로 모여진것을 확인 할 수 있습니다

(백그라운드 그린 컬러는 지울거에요~!)

 

main과 sub로 다시 돌아가서

margin폭을 설정해 줍니다

마진 폭은 글자 사이에 간격을 의미합니다


<a target="_blank" href="">유튜브</a>
<a target="_blank" href="">블로그</a>
<a target="_blank" href="">인스타</a>


a태그를 복사해서 위 처럼 붙여넣기 해주세요


            width: 300px;
            height: 50px;

            background-color: white;
            border-radius: 8px;

            margin-bottom: 10px;

            font-size: 14px;
            font-weight: bold;
            color: black;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            text-decoration: none;
            box-shadow: 3px 3px 5px 0px black;

위 코드를 style 태그 안에 붙여넣기 하시면 됩니다

style 태그 안에 위 코드를 붙여넣기 해줍니다

 

.wrap > a {}

<style> 태그 안에서 wrap으로 이름 붙인

div안에 모든 a 태그에 적용한다는 의미

여기 까지 되셨다면 다음과 같이

완성됩니다

추가적으로 마우스를 가져다가 대었을때

색감이 살짝 변화는 효과를 적용 시켜보겠습니다

a태그 hover 적용후 다음 #f2f2f2 색상을 적용합니다


* {
    font-family: "Pretendard",serif;
}

그 다음 <style>밑에 글꼴을 넣어주면 마무리됩니다

 

다음 글에서는 github를 통해서 링크를 클릭했을때

실제로 동작할 수 있게 배포하는 내용을 다루겠습니다

 

 

반응형

댓글