비주얼 스튜디오 코드 33 _ 프로필 카드 만들기

☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 33 _ 프로필 카드 만들기

조반짝 2023. 6. 15. 12:24

728x90

피그마에서 이미지 600 x 600 px 사이즈로 만들어서 작업할 폴더에 export하기

css reset 셋팅하기

html

바디안에 section(카드부분)이 들어가야한다.

css 에서 편집하기

body: 배경색 넣어주기 !

section 태그

박스 넣어주기

width : 340px 너비값 넣어주고 높이값은 안넣어준다.

하지만 padding 값을 넣어주면 너비값이 지정되어있기 때문에 높이값이 30+30 으로 되서 60px이 지정됨

margin : 50px auto; 는 박스를 가운데 정렬을 해준다.

box-shadow: 10px 10px 30px rgba(0,0,0,0.1) > 그림자 투명도 지정해준다.

html에 다시 돌아가서 섹션 안에 nav 태그 넣어주기

폰트어썸에서 bar 아이콘 복사해서 nav 태그에 붙여넣어준다. (단, 폰트어썸 링크 걸어줘야함!!_)

폰트어썸 sticky 검색해서 메모장 모양 nav안에 붙여넣기

css 에서 nav 편집해주기

● :nth-child() - 형질이 다른 태그들 중에 순서를 찾아주는 태그

● :nt-of-type() - 형질이 다른 태그들이 있을 때 특정 태그와 순서를 찾아주는 태그

bar 와 sticky를 왼쪽 오른쪽으로 띄워주어야한다. float: left / float: right

float을 띄웠으니까 부모인 .menu에 clearfix를 넣어줘야한다.

클리어픽스를 하나하나 넣어줘야하는데 reset 에 한번에 넣어줘도 되고 매번 할때마다. 넣어줘도 된다.

클리어픽스를 세가지방법으로 넣어줄 수 있다.

1번) css에 자식의 부모에 각각 clearfix 주기

2번) html에서 부모에 clearfix 주기

3번) reset 에서 전체적으로 clearfix 주기

다시 html에 돌아가서 섹션 밑에 아티클태그에 사진이미지를 넣어주어야한다.

● section > article 섹션안에 아티클이 들어가야한다.

css에서 article 편집해주기

버튼 편집해주기

페이스북 아이콘과 주소 넣어주기

ul li태그로 골격만들어준다.

폰트어썸에서 아이콘 복사해서 붙여넣기한다.

span 태그로 부가 설명 넣어줌

i태그와 span태그는 인라인구조이기 때문에 한줄로 나열되어서 나온다.

ul에 클래스 이름을 지정해준다.

css에서 content 편집해주기

링크단추만들어주기

html에 nav태그를 만들어준다 class="others"

nav 안에 a태그를 만들어준다.

a태그에 다른파일들을 링크로 걸어줄 수 있다.

css에서 편집해주기

버튼 활성화 / 비활성화 편집해주기

html에 돌아가서 other > a태그에 클래스를 지정해준다.

css 돌아가서 편집해준다.

완성!

링크 걸어주기

index파일과 style.css 를 복사해 주어서

링크도 다르게 링크를 걸어준다,

각 index 에 class="on" 을 넣어준다.

스타일별로 버튼 색을 바꿔준다.

단추를 누르면 각 각 인덱스 파일별로 화면이 나온다.

여러개 index.html에 하나의 style.css 적용해주기

index.html에 body 에 class="index1" 이름지정해주기

나머지 3개 index.html 파일도 2,3,4 이름 변경해준다.

css 에 변화되는 부분만 따로 지정하여

body.index1, body.index2, body.index3,body.index4 class마다 배경색을 다르게 지정해준다.

그림자 색 바꾸기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>프로필 카드 만들기</title>
    <link rel="stylesheet" href="./css/all.min.css">
    <link rel="stylesheet" href="./css/style.css">

    <!-- 웹폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body class="index1">
    <section>
        <nav class="menu">
            <a href="#"><i class="fa-solid fa-bars"></i></a>
            <a href="#"><i class="fa-solid fa-note-sticky"></i></a>
        </nav>
        <article class="profile">
            <img src="./people/p1.png" alt="00의 프로필이미지">

            <h1>DCODELAB</h1>
            <h2>UI/UX INTERACTIVE DEVELOPER</h2>
            

            <a href="#" class="btnview">VIEW MORE</a>
        </article>

        <ul class="content">
            <li>
                <i class="fa-brands fa-facebook-f"></i>
                <span>Visit My Facebook page.</span>
            </li>
            <li>
                <i class="fa-solid fa-envelope"></i>
                <span>daifu@nate.com</span>
            </li>
        </ul>
        <nav class="others">
            <a href="index1.html" class="on"></a>
            <a href="index2.html"></a>
            <a href="index3.html"></a>
            <a href="index4.html"></a>
        </nav>
    </section>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>프로필 카드 만들기</title>
    <link rel="stylesheet" href="./css/all.min.css">
    <link rel="stylesheet" href="./css/style.css">

    <!-- 웹폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body class="index2">
    <section>
        <nav class="menu">
            <a href="#"><i class="fa-solid fa-bars"></i></a>
            <a href="#"><i class="fa-solid fa-note-sticky"></i></a>
        </nav>
        <article class="profile">
            <img src="./people/p2.png" alt="00의 프로필이미지">

            <h1>DCODELAB</h1>
            <h2>UI/UX INTERACTIVE DEVELOPER</h2>
            

            <a href="#" class="btnview">VIEW MORE</a>
        </article>

        <ul class="content">
            <li>
                <i class="fa-brands fa-facebook-f"></i>
                <span>Visit My Facebook page.</span>
            </li>
            <li>
                <i class="fa-solid fa-envelope"></i>
                <span>daifu@nate.com</span>
            </li>
        </ul>
        <nav class="others">
            <a href="index1.html"></a>
            <a href="index2.html" class="on"></a>
            <a href="index3.html"></a>
            <a href="index4.html"></a>
        </nav>
    </section>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>프로필 카드 만들기</title>
    <link rel="stylesheet" href="./css/all.min.css">
    <link rel="stylesheet" href="./css/style.css">

    <!-- 웹폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body class="index3">
    <section>
        <nav class="menu">
            <a href="#"><i class="fa-solid fa-bars"></i></a>
            <a href="#"><i class="fa-solid fa-note-sticky"></i></a>
        </nav>
        <article class="profile">
            <img src="./people/p3.png" alt="00의 프로필이미지">

            <h1>DCODELAB</h1>
            <h2>UI/UX INTERACTIVE DEVELOPER</h2>
            

            <a href="#" class="btnview">VIEW MORE</a>
        </article>

        <ul class="content">
            <li>
                <i class="fa-brands fa-facebook-f"></i>
                <span>Visit My Facebook page.</span>
            </li>
            <li>
                <i class="fa-solid fa-envelope"></i>
                <span>daifu@nate.com</span>
            </li>
        </ul>
        <nav class="others">
            <a href="index1.html"></a>
            <a href="index2.html" ></a>
            <a href="index3.html" class="on"></a>
            <a href="index4.html"></a>
        </nav>
    </section>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>프로필 카드 만들기</title>
    <link rel="stylesheet" href="./css/all.min.css">
    <link rel="stylesheet" href="./css/style.css">

    <!-- 웹폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body class="index4">
    <section>
        <nav class="menu">
            <a href="#"><i class="fa-solid fa-bars"></i></a>
            <a href="#"><i class="fa-solid fa-note-sticky"></i></a>
        </nav>
        <article class="profile">
            <img src="./people/p4.png" alt="00의 프로필이미지">

            <h1>DCODELAB</h1>
            <h2>UI/UX INTERACTIVE DEVELOPER</h2>
            

            <a href="#" class="btnview">VIEW MORE</a>
        </article>

        <ul class="content">
            <li>
                <i class="fa-brands fa-facebook-f"></i>
                <span>Visit My Facebook page.</span>
            </li>
            <li>
                <i class="fa-solid fa-envelope"></i>
                <span>daifu@nate.com</span>
            </li>
        </ul>
        <nav class="others">
            <a href="index1.html"></a>
            <a href="index2.html"></a>
            <a href="index3.html"></a>
            <a href="index4.html" class="on"></a>
        </nav>
    </section>
</body>
</html>

< 공통 css >

@charset "utf-8";

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul,
ol{
    list-style: none;
}

a{
    text-decoration: none;
    color: #222;
}




section{
    /* 박스 만들기 */
    width: 340px;
    padding: 30px;
    background-color: #fff;
    margin: 50px auto;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.1);
    /* 투명도 */
    border-radius: 10px;
}

section .menu{
    width: 100%;
}

section .menu::after{
    content: "";
    display: block;
    clear: both;    
}

section .menu a{
    color: #666;
    font-size: 20px;
}

section .menu a:nth-child(1){
    float: left;
}
section .menu a:nth-child(2){
    float: right;
}

section .profile{
    width: 100%;
    /* 이미지가 인라인구조이기 때문에 text-align이 적용됨 */
    text-align: center;
}
section .profile img{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 5px 15px 30px rgba(173,216,230,0.8)
}

section .profile h1{
    font-weight: bold;
    font-size: 22px;
    font-family: "arial";
    /* 폰트스타일 */
    line-height: 1;
    color: #555;
    margin-bottom: 5px;
}
section .profile h2{
    font-weight: normal;
    font-size: 12px;
    font-family: "arial";
    color: #bbb;
    margin-bottom: 30px;
}
section .profile .btnview{
    /* a태그 블럭구조로 바꿔주기 */
    display: block;
    width: 180px;
    height: 32px;
    background-color: #444;
    /* 버튼 가운데 정렬해주기 */
    margin: 0 auto 20px; /*위쪽 왼,오른 아래쪽*/
    /* 버튼 그라디언트 */
    background: linear-gradient(45deg, #4affff, #35e0f7);
    border-radius: 16px;
    box-shadow: 5px 10px 20px rgba(0,255,255,0.3);
    font-weight: bold;
    color: #fff;
    font-size: 10px;
    /* 글자세로가운데 정렬 */
    line-height: 32px;
    text-align: center;    
}

section .content{
    margin-bottom: 25px;
}
section .content li{
    width: 100%;
    /* 줄간격 */
    padding: 10px 0;
    /* 가운데 선 넣어주기 */
    border-bottom: 1px solid #eee;
}

section .content li:last-child{
    border-bottom: 0;
}


section .content li i{
    width: 20%;
    /* 전체너비에 20퍼센트주겠다 */
    text-align: center;
    color: #555;
    font-size: 15px;
    text-shadow: 2px 2px 2px #ddd;
}
section .content li span{
    font-family: 'Orbitron', sans-serif;
    font-weight: normal;
    font-size: 11px;
    color: #555;
    letter-spacing: 1px;
    /* 글자 자간 조절 */
}

section .others{
    text-align: center;
    width: 100%;
}
section .others a{
    display: inline-block;
    /* 원을 옆으로 배치해줌 > 인라인속성의 옆으로 배치해주고 블럭속성을 가진다 */
    width: 30px;
    height: 30px;
    background-color: #35e0f7;
    border-radius: 50%;
    margin: 0 10px;
    /* 원 사이 간격 */

    /* 원 비활성화 */
    opacity: 0.4;
    filter: saturate(0.7);
    /* 채도값 낮춰주기 */

}

/* 원 활성화 */
section .others a.on{
    opacity: 1;
    filter: saturate(1);
}

section .others a:nth-of-type(1){
    background-color: #35e0f7;
    box-shadow: 5px 5px 5px rgba(74,255,255,0.7);
}
section .others a:nth-of-type(2){
    background-color: #55f5cd;
    box-shadow: 5px 5px 5px rgba(85,245,178,0.7);
}
section .others a:nth-of-type(3){
    background-color: #ff80df;
    box-shadow: 5px 5px 5px rgba(255,128,223,0.7);
}
section .others a:nth-of-type(4){
    background-color: #a764fd;
    box-shadow: 5px 5px 5px rgba(167,148,253,0.7);
}


/* 변화되는 부분만 지정 */

/* index1 */
body.index1{
    background-color: #edfaff;
}

body.index1 section .profile img{
    box-shadow: 5px 15px 30px rgba(173,216,230,0.8);
}

body.index1 section .profile .btnview{
    background: linear-gradient(45deg, #4affff, #35e0f7);
    box-shadow: 5px 8px 20px rgba(0,255,255,0.3);  
}

/* index2 */
body.index2{
    background-color: #edfaeb;
}
body.index2 section .profile img{
    box-shadow: 5px 15px 30px #bdccb7;
}
body.index2 section .profile .btnview{
    background: linear-gradient(45deg, #a0ff9d, #55f5b2);
    box-shadow: 5px 8px 20px rgba(173,216,230,0.8);  
}

/* index3 */
body.index3{
    background-color: #fff3fd;
}
body.index3 section .profile img{
    box-shadow: 5px 15px 20px rgba(235, 121, 206, 0.7);
}
body.index3 section .profile .btnview{
    background: linear-gradient(45deg, #ef74ff, #ff11c4);
    box-shadow: 5px 8px 20px rgba(235, 121, 206, 0.7);
}

/* index4 */
body.index4{
    background-color: #f5f0ff;
}
body.index4 section .profile img{
    box-shadow: 5px 15px 30px rgba(167,148,253,0.7);
}
body.index4 section .profile .btnview{
    background: linear-gradient(45deg, #8e74ff, #a011ff);
    box-shadow: 5px 8px 20px rgba(167,148,253,0.7);
}

728x90

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

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 _ 35 로딩 애니메이션 (0)	2023.06.16
비주얼 스튜디오 코드 34 _ 애니메이션 효과 _ 마을의 하루 예제 (0)	2023.06.15
비주얼 스튜디오 코드 32 _ 베지에곡선 사용하기 (0)	2023.06.14
비주얼 스튜디오 코드 31_ 상하 / 좌우 슬라이드 배너 (0)	2023.06.14
비주얼 스튜디오 코드 30 _ 마우스오버 효과 ⑤ (0)	2023.06.14

현재글비주얼 스튜디오 코드 33 _ 프로필 카드 만들기

조반짝의 도전일지

공부, 취미, 여행 모두 경험해보고 싶은 조반짝의 도전일지입니다. ✨contact_ looby777@naver.com ✨Instagram_holylovuuu_illust

ACTIVE, 프론트엔드, 코딩테스트, 자바스크립트, JavaScript, Java, SQL, position, if문, Parallax, float, media, HTML, 비주얼스튜디오코드, 웹디자인, CSS, For문, offset, 이클립스, 자바,

Today :
Yesterday :

조반짝의 도전일지