[내일배움단 ai트랙 3기]미니 프로젝트(3)

[내일배움단 ai트랙 3기]미니 프로젝트(3)

2022. 8. 29. 00:41ㆍ스파르타코딩클럽[AI트랙 3기]/TIL

22.08.28

오늘도 아침에 눈 뜨자 마자 컴터앞에 앉았다. 약속이 있어서 조금이라도 더 해놓고 가자는 마인드.내가 처음에 생각했던 것보다 페이지가 많이 만들어졌다. 옛말에 첫술에 배부를 순 없다는데 배가 터질것 같았다. 혼자 꽤나 만족하면서 팀원들께 나의 코드를 공유했는데,,,,,, 이게 왠걸. 사진이 안나온다는 것이다ㅠㅠ 뭐가 문제지..? 우선 내가 하는 것에서는 다시 정상적으로 출력이 되는데 내일 다른 조원님께 확인해달라고 부탁해야지.. 우리 팀원님들께서 본인들이 하신걸 보내주셨는데,, 진짜 나는 무슨 유치원 숙제한 그런 느낌이고, 팀원분들은 대학생이 과제한, 아니 그냥 개발자가 만든 포폴같은 느낌을 주었다....휴 언제 따라가지... 또 모르는 것을 왕창 물어봤는데 친절하게 하나씩 다알려주셨다. 역시나 인복이 많은 것일까~ 다행이라 생각하며 오늘은 코딩을 마치겠다. 더이상 사실 하고 싶지않다. 아니 하고싶지않다는게 코딩이 하고싶지 않다는 것이 아니라 나는 현재 내 소개 페이지에 만족하기 때문이다. 확실히 혼자 만들어가면서 정말 어렵다는 느낌을 받는다. 솔직히 기억도 잘 안나서 구글링 하는데, 언제까지 구글링해야하지.... 과연 내글이 언젠가 남에게 도움이 되는날이 올까? 그런 개발자가 되기위해 열심히 블로그도 쓰고 코딩도 해야겠다!!

*실습내용

1)사진이랑 글 가운데로 옮기기
style에서 text-align : center;
2)배경 선이랑 지우기
주석처리로 일단 지움
3)본격적으로 꾸미기
ㅇitem1
-이모티콘 넣어주기 (구글링으로 코드 검색) <html>
-글자 간격 조정<css>
letter-spacing/word-spacing: 글자/단어 -> 단위는 %, px, em 다 가능
-줄 간격 조정<css>
line-height:
-글자폰트 수정<css>
font-style: italic(필기 기울임), oblique(그냥 기울임)
-글자 굵게<css>
font-weight: bold, normal,숫자(100~800)
&폰트관련 참고 : https://www.codingfactory.net/10553
-하이퍼링크<html>
글자: <A href="url"></A>
그림: <A href="url"><IMG src="사진 위치" border="0"></A>
+)기본적으로 하면 그창에서 바로 띄어지는데 target을 하면 새창에서 띄울 수 있다 -> <A href="url">tatget="_blank"
+)링크 색 바꾸기 <html> -> <body link="#ff0000" alink = "#00ff00" vlink="#0000ff">
ㅇcontainer2
-sns 링크 추가하기
-이미지 둥글게 하기
<img style="border-radius: 2px">
-테두리 그림자 효과
box-shadow: 0px 0px 10px 0px #d8d8d8;
ㅇmain
테두리, 글자 정리

*code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>아우디팀_자기소개_정진엽</title>
    <style>
        .item1{
            background-color: #73F1E8;
            border-radius: 20px;

            flex-grow:2;

            letter-spacing: 1px;
            line-height: 40px;

            font-style: normal;
            font-weight : bold;

            box-shadow: 0px 0px 20px 0px #d8d8d8;

        }

        .item2{

            text-align: center;

            background-image :url("https://postfiles.pstatic.net/MjAyMjA4MjdfMjQ3/MDAxNjYxNTY3MjY2Mzkw.5K6mObyWzUGc2-9arMdmUUxuia-lRp63GGjDcpvlLjIg.KNESPUj1XRPpsCWF0q0X5z1PWk6L8NMmHNyclm2iXm0g.JPEG.yeobdol/IMG_3566.JPG?type=w580");
            background-size : cover;
            background-position: center;
            border-radius: 20px;

            flex-grow:1;

            width: 260px

        }
        .item3{
            #background-color: aqua;
            background-size : cover;
            background-position: center;
            border-radius: 20px;

            flex : 1 1 0;

            text-align :center;

            font-weight : bold;

            box-shadow: 0px 0px 10px 0px #d8d8d8;

        }
        .item4{
            #background-color: aqua;
            background-size : cover;
            background-position: center;
            border-radius: 20px;

            flex : 1 1 0;

            text-align :center;

             font-weight : bold;

            box-shadow: 0px 0px 10px 0px #d8d8d8;
        }
        .item5{
           #background-color: aqua;
            background-size : cover;
            background-position: center;
            border-radius: 20px;

            flex : 1 1 0;

            text-align :center;

             font-weight : bold;

            box-shadow: 0px 0px 10px 0px #d8d8d8;
        }
        .item6{
            #background-color: aqua;
            background-size : cover;
            background-position: center;
            border-radius: 20px;

            flex : 1 1 0;

            text-align :center;

             font-weight : bold;

            box-shadow: 0px 0px 10px 0px #d8d8d8;
        }


        .container1{
            display:flex;
            flex-flow: row wrap;


            #border: 1px solid black;

            height: 500px;

        }
        .container2{
            display:flex;
            flex-flow: row wrap;

            #border: 1px solid black;

            height: 300px;
            #justify-content: space-around;

        }
        .add{
            padding-left:6.1em
        }

        .main{
            border: 2px solid black;
            background-color: grey;
            border-radius:20px;

            width: 1500px;
            font-size : 25px;
            font-weight: bold;
        }
        .footer {
            grid-area: footer;
            font-size: small;
            font-weight: 100;
            text-align: center;
            margin-top: 15px;
            color: #c6c6c6;
        }
    </style>
</head>
<body link="#ff0000" alink="#00ff00" vlink="#0000ff">
    <h5>자기소개_정진엽</h5>
    <div class="container1">
        <div class="item1">
        <h1>&#128680;T.M.I ZONE&#128680;</h1>
        &#128512;MBTI : ENTJ-T<br>
        &#128513;장점 : 포기를 잘 안한다. 상황판단이 빠르다. 처세에 능하다.<br>
        &#129309;협업 스타일 : 상황에 맞게 내가 이끌어야 한다면 이끌고, 그렇지 않다면 따른다.<br>
        &#127984;궁극적 목표 : 건강하게 개발을 오래할 수 있는 개발자가 되는 것.<br>
            &#128421;블로그 주소 : <A href="https://pocachips.tistory.com/" target="_blank">티스토리 - https://pocachips.tistory.com/</A><br>
                <div class="add"> &emsp; <A href="https://velog.io/@_pocachip" target="_blank">VELOG - https://velog.io/@_pocachip</A><br>
                 &emsp;<A href="https://blog.naver.com/yeobdol" target="_blank">네이버 블로그 - https://blog.naver.com/yeobdol</A><br></div>
        &#129335;취미 : 여행, 축구, 웨이트, 전시감상, 커피, 글쓰기, 보드(스노우, 웨이크, 크루즈),<br>
            &emsp;&emsp; &emsp;&emsp;등산, 달리기, 주짓수, 복싱, 태권도, 피아노, 트럼펫, 사진, 음악 감상, 음주(위스키),<br>
            &emsp;&emsp; &emsp;&emsp;싸이클, 수영, 수집(신발, 축구유니폼, 옷), 공연관람
            </div>
         <div class="item2">
        </div>
        </div>
    <br>
    <div class="container2">
        <div class="item3">
            <img src="https://postfiles.pstatic.net/MjAyMjA4MjhfMjk2/MDAxNjYxNjQ2MjY0NDg3.ubPr51kLcI0hbUsW5Jne-TZYKDMm-UJ8GUub2N_B26gg.JgXiVFnGeg5c9se2qHsp11pUZH9xDpi0Cp8GbA7ebhEg.JPEG.yeobdol/IMG_0175.jpg?type=w580" width="200px" height="250px" style="border-radius: 20px"><br>
                &#9992;여행을 좋아하구요
        </div>
        <div class="item4">
            <img src="https://postfiles.pstatic.net/MjAyMjA4MjhfNzIg/MDAxNjYxNjQ2MjY0Njkx.Lw4eS8osES_e4OOvorOhftcNabAB-28h1TEjIH-bijQg.Gs1f9xxFpep9Yj4abiJ1fLwNPcyGAJF2EAnetl1GFxsg.PNG.yeobdol/IMG_5192.png?type=w580" width="200px" height="250px" style="border-radius: 20px"><br>
            &#128187;<A href="https://www.instagram.com/_pocachip/" target="_blank">SNS</A>도 열심히 합니다!
        </div>
        <div class="item5">
            <img src="https://postfiles.pstatic.net/MjAyMjA4MjhfNjQg/MDAxNjYxNjQ2MjY0NjI2.OSIA4jkjweGFPkml1gRIjk4rUsNo6xT78TF5jmmqK7gg.k0081GZealC93LAmE9hG2hwNzuAJOhmE58Z1Nw25Dh8g.JPEG.yeobdol/IMG_5191.jpg?type=w580" width="200px" height="250px" style="border-radius: 20px"><br>
            &#128095;수집하는 것을 즐기구요
        </div>
        <div class="item6">
            <img src="https://postfiles.pstatic.net/MjAyMjA4MjhfMTc4/MDAxNjYxNjQ2MjY0NTA0.gNvnPXU_gcVrZNcvoF3tAYhNx0TfenAihkYRyL6OPr0g.6NIAt8TzGfncpJmUJQBFsy8JVkIsZZKu-BTV3mwwqrcg.JPEG.yeobdol/IMG_1229.jpg?type=w580" width="200px" height="250px" style="border-radius: 20px"><br>
            &#9968;최근에는 등산에 빠졌어요!
        </div>
            </div>

    <p>
    <div class="main">
        &#128266;저를 한마디로 소개하자면 딱히 잘하는 것은 없지만 못하는 것도 없는 사람입니다.<br>
        &#128266;한 분야에 깊게 빠지기 보다는 여러가지 다 해보고 죽자는 마인드로 열심히 사는 사람입니다.<br>
        &#128266;개발공부를 이제 막 시작했는데 늦었다고 생각 안합니다.<br>
        &#128266;정신과 육체가 건강하고 발전을 멈추지 않는 개발자가 되는 것이 저의 꿈입니다!
    </div>
    <div class="footer">copyright 2022. JEONG JINYEOB All rights Reserved. </div>
</body>
</html>

'스파르타코딩클럽[AI트랙 3기] > TIL' 카테고리의 다른 글

[내일배움단 ai트랙 3기]미니 프로젝트(6+발표) (0)	2022.09.01
[내일배움단 ai트랙 3기]미니 프로젝트(5) (0)	2022.08.31
[내일배움단 ai트랙 3기] TIL 220829 (2)	2022.08.30
[내일배움단 ai트랙 3기]미니 프로젝트(2) (0)	2022.08.27
[내일배움단 ai트랙 3기] TIL 220826 (0)	2022.08.27

포카칩의 개발일지

포카칩의 개발일지

태그

최근글

댓글

공지사항

아카이브

'스파르타코딩클럽[AI트랙 3기] > TIL' 카테고리의 다른 글

관련글

티스토리툴바