본문 바로가기

카테고리 없음

첫 개발 시작!

시작부터 조별과제라니! 눈앞이 어두컴컴해지는것만 같았다. 

하지만 벌써부터 포기할수는 없는법이다. 전공도, 해온일도 코딩과는 상관이 없었기 때문에 힘겹지만 최대한 복습하며 어떻게든 강의를 이해하고 남들을 따라가기 위해 노력하는 중이다.

 

이 블로그 또한 그 일환중 하나로, 앞으로 겪을 일들을 이곳에 저장해 두기로 했다. 그래야 내가 무었을 했고, 할건지를 명확히 정리할수 있기 때문이다.

 

다시 본론으로 돌아와서, 첫 과제는 바로 팀원과 함께 소개용 웹페이지를 만드는 것이다.

우선 나는 초보였기에 다른 조원들의 도움을 많이 받게 되었다.

 

이 모든걸 혼자 한다고 생각하면... 하지만 개발자가 되려면 그정도는 당연히 해야한다고 생각하자 앞으로 갈길이 멀다는걸 

 

우선 내가 맡은 역할은 메인 페이지를 만드는 것이였다.

 

다시 강의를 들으면서 열심히 페이지를 만드는데, 버튼을 오른쪽 끝으로 보내려고 아무리

.mybtn {
            margin-left: auto;
        }

를 했는데 되지 않아서 고생하다가 width를 설정해 줘야 움직이는걸 보곤 뭔갈 빼먹으면 하나도 작동하지 않는다는걸 깨달았다. width는 위대하단걸 느꼈다. width는 구역의 길이를 정해주기 때문에, 구역을 건드리려면 반드시 설정을 해야하는 것이였다.

 

제목을 만들때에도

.mytitle {
            height: 200px;
            color: white;

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


            background-image: url('이미지 주소');
            background-position: center;
            background-size: cover;

 

이렇게 구역을 정하고 글자를 가운데로 모으고 거기에 이미지를 씌웠다. 그런데,

            margin: 20px auto 0px auto;

를 대신 넣었다가 이건 글자만 중앙으로 이동시키는게 아니라는것만 깨달았다.

 

그리고 카드도 만들었는데, 이상하게도 카드를 만들때에

        .mycards {
            width: 1000px;

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

            margin: 20px auto 20px auto;

        }

이러면 글자가 가운데에 와야할 텐데 사진을 안넣으면 가운데지만 사진을 안넣으면 원래대로 돌아가는것이 아닌가? 당황해서 지우고 원래대로 돌아가보자, 사진을 넣은 뒤엔 카드 안의 글자가 가운데로 모인게 아니라 카드들이 가운데로 몰린다는 결과를 얻어냈다. 역시 코딩이란 신기하다...

 

중간에 박스 넣는법

<div class="mybox">
        <h1>팀 소개</h1>
        <h5> 칙칙한 남자들끼리 모여있는 에이영팔입니다. 저희는 비 전공자 3명과 전공자 1명으로 구성되어 있으며 팀원 모두가 이번 과제를 무사히 마칠 수 있게 노력하려고 합니다.</h5>

    </div>

그리고 위에

.mybox{
            width: 500px;
            margin: 20px auto 0px auto;
            padding: 20px;
            border: 1px solid blue;
            border-radius: 5px;

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

           
        }

 

아마 앞으로 많이 쓰게될거 같으니 저장해두자!