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

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

2022. 8. 27. 21:55ㆍ스파르타코딩클럽[AI트랙 3기]/TIL

22.08.27

우선 우리팀은 팀으로서 제대로 협업 하기 전에 각자 자신을 소개하는 페이지를 만들기로 합의했다. 다행이라고 생각한 것은 내가 직접 해볼 수 있는 기회가 생겼다는 것이고, 불행이라고 생각한 것은 내가 할 줄 아는 것이 아무 것도 없다는 것이다. 지난 날들 공부한다고 했는데, 도대체 내가 한 것은 어디에 써먹을 수 있다는 말인가... 아니 분명히 배웠는데 도무지 어디에 무엇을 사용해야할지 떠오르지 않는다... 암담하네 ㅠ 아냐! 난 할 수 있어! 아니 해야해!!! 라고 생각하고 시작한 것은 스파르타 강의 처음부터 다시듣기다... html부터 css까지 아주 기초적인 부분도 몰라서 해매다가 조금씩? 배운 것 같은 내용도 있다... 차근 차근 다시하기로 했다. 내일은 더 나아지겠지라는 생각보다.. 내일은 더 많은 것을 배워야지하는 생각으로 열심히 해야지! 오늘 그래도 코딩을 하면서 뭔가 재밌을것만 같다는 느낌(재밌었다는 아님)이 든 것 같아 다행이다! 화이팅~

*실습 내용

ㅁhtml 뼈대 만들기
1)바탕화면에 프로젝트 파일 생성(frontend파일까지 생성)
2)파이참켜서 열어주기(파일이름 정하고 html파일 생성)
3)뼈대에 헤드에는 위에 뜨는 창이름. 바디에는 적을 내용
4)레이아웃 정하기

5)사진 넣기
*내 컴퓨터에 있는 사진파일을 넣기 위해서 시도한 방법
ㄱ)블로그 업로드
ㄴ)업로드한 이미지 블로그 게시물 들어가서 검사
ㄷ)검사에서 url 따기
ㄹ)붙여넣기
->성공(하긴했는데 이건 이 방법 말고는 없을까? 다른 어떤 개발자도 이렇게 안할 것 같다는 생각이 든다.)
6)사진 비율 맞추기
*실수 : 백그라운드 사이즈 : cover 했는데 사진이 없어짐. > 위에 이미지에 ;안하고 띄워서 그럼.
7)사진 위치 조정(사진자리 말고 배경 틀안에서 이미지의 위치 조정)
background-position : right;
+)background 3총사 -> background-image : url("") / background-size : center / background-position: center.
+)귀퉁이 border-radious :10px;
8)작은본문이랑, 큰본문 쓰기
*중요: flex 이용해서 옆으로 만들어주기
flex레이아웃 이용.
html구조
<div class="container">
<div class="item">helloflex</div>
<div class="item">abc</div>
<div class="item">helloflex</div>
</div>
cf)flex-direction, wrap 한 번에 써주기 -> flex-flow ==> flex-flow : row wrap;
*실수 : 이상하게 item1과 item2 사이에 간격이 있었고 가운데 뭐가 있는마냥 좀처럼 좁혀질 기미가 안보였다.(배열하는 코드를 제대로 썼음에도 불구하고) 확인해보니 초반에 작업할때 했던 마진 값을 넣어둔 것이 화근이었다. 우선 item1에서 윗부분에 색칠이 안되는 것을 보고 마진을 지웠는데 여백이 사라졌다. 마찬가지로 포카칩 사진에서도 위쪽 마진을 없앴더니 정상적으로 딱 붙는다! 기분 좋음..
-이제 컨텐츠 들어가는 컨테이너의 크기를 크게 해줬는데 자동으로 늘어나지는 않는다. 이거 높이 비율 맟추는 거 해보자.
*실수 : 높이 비율 맞추던 중 이상하게 자동으로 안들어난다고 생각했다. 그런데 알고보니 align-content 라는 요상한 코드가 있었던 것! 이런 녀석을 잘 확인해주어야한다.

&참고한 블로그 : https://heinafantasy.com/80?category=883955

&참고한 블로그 : https://studiomeal.com/archives/533

9)두번 째 밑에 나와 관련된 다른 사진 4개 추가
플렉스 활용 : 여기서 사진 넣었는데 사진 제대로 안나오고 글자 적으니 그제서야 나온다. 사진의 가로길이가 너무 안나오는데, 글자 길이 만큼 길어지는 현상 발견?!
*flex 너비
flex-grow: 증가 너비 비율/shrink:감소 너비 비율/basis:기본 너비
flex-width와 basis차이는 width는 내용상관없이 크기 고정, basis는 내용에 따라 변경
10)내용 적기
item1에 내용 적기
  해주면 띄어쓰기 함. &ensp 하면 두개만큼 띄우기, &emsp;하면 공백 네개만큼 띄움. 그런데 css배웠으면 써먹자. 띄어쓰기가가 필요한 부분에 div 먹여주고 <style>에서 처리하는 방법을 이용. (하지만 암만봐도 지저분하다.)
<style>에 .add{padding-left:1.8em}

아이템(div) 정렬과 여백 설정하기 - flex container 속성(2)

div 박스의 사이 간격을 동일하게 하고 싶다면? 내부 컨텐츠 길이에 상관없이 div 박스가 동일한 넓이를 갖게 하고 싶다면? 이번 포스팅은 이러한 물음들에 대한 좋은 해결책이 될 것이다. 이번에

heinafantasy.com

아이템(div) 정렬과 여백 설정하기 - flex container 속성(2)

heinafantasy.com

*code

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

            flex-grow:2;

        }

        .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;

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

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

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

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

            image
        }


        .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
        }
    </style>
</head>
<body>
    <h1>자기소개_정진엽</h1>
    <div class="container1">
        <div class="item1">
        <h1>T.M.I zone</h1>
        MBTI : ENTJ-T<br>
        장점 : 포기를 잘 안한다. 상황판단이 빠르다. 처세에 능하다.<br>
        협업스타일 : 상황에 맞게 내가 이끌어야 한다면 이끌고, 그렇지 않다면 따른다.<br>
        궁극적목표 : 건강하게 개발을 오래할 수 있는 개발자가 되는 것.<br>
        블로그주소 : 티스토리 - https://pocachips.tistory.com/<br>
                <div class="add">VELOG - https://velog.io/@_pocachip<br>
                네이버 블로그 - https://blog.naver.com/yeobdol<br></div>
        취미 : 여행, 축구, 웨이트, 전시감상, 커피, 글쓰기, 보드(스노우, 웨이크, 크루즈),<br>
             &emsp;&emsp;&emsp;등산, 달리기, 주짓수, 복싱, 태권도, 피아노, 트럼펫, 사진, 음악 감상, 음주(위스키),<br>
             &emsp;&emsp;&emsp;싸이클, 수영, 수집(신발, 축구유니폼, 옷), 춤(?)
            </div>
         <div class="item2">
            <h1>사진 들어갈 곳</h1>
        </div>
        </div>
    <br>
    <div class="container2">
        <div class="item3">
            <img src="https://postfiles.pstatic.net/MjAyMjA4MjdfMjQ3/MDAxNjYxNTY3MjY2Mzkw.5K6mObyWzUGc2-9arMdmUUxuia-lRp63GGjDcpvlLjIg.KNESPUj1XRPpsCWF0q0X5z1PWk6L8NMmHNyclm2iXm0g.JPEG.yeobdol/IMG_3566.JPG?type=w580" width="50px" height="50px"><br>
            여행을 좋아하구요
        </div>
        <div class="item4">
            <img src="https://postfiles.pstatic.net/MjAyMjA4MjdfMjQ3/MDAxNjYxNTY3MjY2Mzkw.5K6mObyWzUGc2-9arMdmUUxuia-lRp63GGjDcpvlLjIg.KNESPUj1XRPpsCWF0q0X5z1PWk6L8NMmHNyclm2iXm0g.JPEG.yeobdol/IMG_3566.JPG?type=w580" width="50px" height="50px"><br>
            SNS도 열심히 합니다!
        </div>
        <div class="item5">
            <img src="https://postfiles.pstatic.net/MjAyMjA4MjdfMjQ3/MDAxNjYxNTY3MjY2Mzkw.5K6mObyWzUGc2-9arMdmUUxuia-lRp63GGjDcpvlLjIg.KNESPUj1XRPpsCWF0q0X5z1PWk6L8NMmHNyclm2iXm0g.JPEG.yeobdol/IMG_3566.JPG?type=w580" width="50px" height="50px"><br>
            수집하는 것을 즐기구요
        </div>
        <div class="item6">
            <img src="https://postfiles.pstatic.net/MjAyMjA4MjdfMjQ3/MDAxNjYxNTY3MjY2Mzkw.5K6mObyWzUGc2-9arMdmUUxuia-lRp63GGjDcpvlLjIg.KNESPUj1XRPpsCWF0q0X5z1PWk6L8NMmHNyclm2iXm0g.JPEG.yeobdol/IMG_3566.JPG?type=w580" width="50px" height="50px"><br>
            최근에는 등산에.....
        </div>
            </div>

    <p>
    <div class="main">
        저를 한마디로 소개하자면 딱히 잘하는 것은 없지만 못하는 것도 없는 사람입니다! 한 분야에 깊게 빠지기 보다는 여러가지<br>
        다 해보고 죽자는 마인드로 열심히 사는 사람입니다. 개발공부를 이제 막 시작했는데 늦었다고 생각 안합니다! 정신과 육체가 <br>
        건강한 개발자가 되는 것이 저의 꿈입니다!
    </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기]미니 프로젝트(3) (2)	2022.08.29
[내일배움단 ai트랙 3기] TIL 220826 (0)	2022.08.27

포카칩의 개발일지

포카칩의 개발일지

태그

최근글

댓글

공지사항

아카이브

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

관련글

티스토리툴바