스파르타 코딩클럽 내일배움캠프가 시작되었다.
첫 팀 프로젝트로 팀 소개 웹페이지를 제작하는 과제가 발제되었다.
프로젝트 시작 전 팀원들과 함께 S.A(Starting Assignmen)를 설계하고
그 중 나는 프론트 포지션에서 팀원 소개 페이지에 등록하기 위한 팀원 등록(Sign up)
페이지를 담당하기로 했다.
<style>
.form-input {
background-color: green;
width: 50%;
height: 950px;
}
.file-input {
background-color: pink;
width: 50%;
height: 200px;
}
.logo-img {
background-color: grey;
width: 500px;
height: 300px;
background-image: url("");
background-position: center;
background-size: cover;
}
</style>
<body>
<div class="wrap">
<div class="form-input"></div>
<div class="file-input"></div>
<div class="logo-img"></div>
<div class="btn"></div>
</div>
</body>레이아웃을 하기 위해 기본적인 틀만 그리고, css로 색을 입혔는데 나는 width를 50%씩 주었기 때문에 스크린이 좌우 반반으로 그려질 줄 알았다 하지만 결과는 수직으로 쌓여갔다.
구글링 해본 결과 display : flex 속성을 통해 가로로 배치가 가능했다.
부모 태그에 display:flex를 먼저 입력 후 다음 나오는 div의 박스는 가로로 배치가 되어
flex:1(비율)을 해주면 좌우 반반 비율로 div가 나눠지고, 오른쪽의 div에서 flex-direction: column;를 입력해주면 다음 순서로 들어오는 div들은 다시 세로로 정렬이 된다. 그 외 justify-content(수평방향으로 여백)와 align-items(수직방향으로 여백) flex-wrap(공간이 좁아질 때 줄바꿈 여부) 등이 있다.
웹개발 회고록
오 구글링으로 얻은 해답! 벌써 자기주도적 학습 습관을 쌓아가고 계신 것 같네요 ㅎㅎ 아주 좋습니다 규현님 앞으로도 이렇게 달려달려봅시다 화이팅!