내일배움 캠프 사전캠프 과정에서 개인 공부는 공부대로 하면서 처음으로 팀단위 프로젝트를 진행하게 되었는데..!!
우리팀은 남자만 4명이 모인 4조였다 ㅎㅎ
다들 워낙 심성이 착하셔서 의견내는데 부담이 없었고 오랜만에 대학교때 조별과제하던게 생각나 설레기도 하였다 헿
코딩작업을 하기전 팀 및 팀원 소개 페이지를 만드는 거였는데, 피그마를 통해 팀장이 구색을 저렇게 갖추어줘서 각자 파트를 나누어서 만들면서 합치기로 하였는데,
일단 여기서 제가 맡은건 팀소개쪽(사진 포함)
얼추 구색은 맞게 제작은 하였으나 피그마에서 보이는 것처럼 사진을 글 옆에 넣는 작업이 어려웠다.
다행히 사진같은 경우 포토샵을 만져본 경험이 있어서 이미지에 링크 거는 작업은 나름 쉽게(?) 진행되었으나, 피그마 디자인처럼 글 옆에 사진 넣는게 잘 되지않았다.
style 태그에 img에 포지션을 relative / absolute 로 조정해봐도 되지 않았고, 다른 방법을 고민해보았다
div로 묶어서 시도하여도 별 차이가 없었으나, absolute 즉 강제로 위치 변경을 시도하여서 위치변동을 성공하였다
img {
position: absolute;
top : 200px;
right : 200px;
width: 800px;물론 뭔가 이쁘게 들어가진 않아서 추후 더 고민해볼 예정이다
이 후 다크모드를 내가 만들어보기로 하였는데,
수업때 따라만하다 직접 만들려니 너무 막막하였다.
하지만 웹 개발자로서 첫번째 역량은 검색의 생활화이기에 쫄지 않고, 많은 검색을 해보았으나, 수많은 사람들이 적어놓은 벨로그같은 글을 읽어봐도 명확히 이해가 잘 되지 않았다.
아직 지식이 많이 부족하다는걸 느꼇고, 열심히 공부해야겠다 생각하였다.
그와 별개로 어쨋든 내가 맡은 역할은 수행해야했기 때문에 유튜브를 참고하였는데,
<script>
.dark-mode {
background-color: black;
color : white;
}
</script>
<button onclick="darkMode()" id="button">Dark Mode</button>
<script>
function darkMode(){
var body = document.body;
body.classList.toggle("dark-mode");
var button = document.getElementById("button");
if(button.innerHTML =="Dark Mode") {
button.innerHTML = "Light Mode";
} else {
button.innerHTML = "Dark Mode"
}
}
</script>아주 간단한 script와 body쪽 코딩인데, 여기서 포인트는 dark-mode 세부 내용에 배경색, 글자색만 설정해놨다는 것이고, Dark Mode 라는 버튼을 만들어주었고, 그 버튼에 클릭기능을 넣어줬다는 것이다.
그리고 그 script의 dark-mode에 함수를 넣어줬는데, toggle 즉 껏다 켰다 하는 기능을 넣어줬다는게 중요하다. 한번 버튼 클릭해서 끝나는게 아닌 계속 켰다 껐다 할 수 있고, 그 속에 배경 어두운 버전, 밝은 버전을 만들 수 있다는 의미인 것이다.
아직은 공부 역량이 부족해 하나한 어떤 기능으로 적혀있는지 파악은 못하였지만, 당장 중요한건 내가 이 기능을 실현하기 위해 검색을 잘 해냈다는 것이고, 당장 하나하나 공부해서 알아내는건 지금 시점에선 중요하지 않은 것 같다고 느꼈다. 당연히 무시할 순 없지만 하나하나 파고들면 진도가 나갈 수 없기 때문에..
그 toggle 기능 속에 또 기능을 넣어주려고 if else문을 만들었고, 버튼이름이 Dark Mode일땐 눌럿을 때 Light Mode로 바뀌게 하고 그게 아니면 Dark Mode로 바뀌게 즉 그대로 유지되게 만들었기 때문에, 아주 손쉽게 다크모드를 생성하였던 것 같다 ㅎㅎ
===============================================================
#container {
display : flex;
flex-direction: row;
flex-wrap:nowrap;
justify-content: flex-start;
}최초엔 사진 위치에 대해 강제적으로 움직이는 alsolute를 사용하였었는데
좀 더 고민을 하며 검색을 하다 display : flex를 사용하기로 하였다
글 문장과 사진을 한 div로 묶어 flex로 정리하는 순간 옆에 놓을 수 있기 때문이다
대신에 그렇게 넣어보니 정사각형이였던 사진이 세로로 긴 직사각형으로 되었다
프로젝트를 진행하는 팀원들과 해당 문제 해결을 위해 고민을 해보니 글 문장이 워낙 세로로 길어서 거기에 맞춰서 사진도 길게 나왔던 것이다.
해결 방법은 1. 사진을 따로 div로 묶는다 2. 사진 img의 가로 세로 값을 임의로 지정해준다
둘 다 구현하는데 문제는 없지만 사진 자체를 div로 묶어서 따로 값을 조절해주는게 나중에 덜 헤깔리지 않을까 생각하게 되었다
그 과정에서 direction : row를 빼봤지만 변동되지 않았고(기본 세팅값임)
img style="margin-left: 500px;" src="" flex-wrap:nowrap / flex-direction : row 등등 다양한 걸 건드려보았지만 사진 크기에 대해서는 영향이 끼쳐지지 않는구나 깨닫게 되었다.
===============================
다 만든 각자의 파트를 합친 후에는 피드백 과정에서 글 문단이랑 사진이 너무 좌우로 떨어져있다하여 가운데로 모이는 작업을 진행하여야하였다.
<script>
#container {
display : flex;
justify-content: center;
flex-direction: row;
flex-wrap:nowrap;
text-align: center;
margin : 0 auto;
}
</script>
<div id="container">
<div>
<h1><팀 소개 : 불4조></h2>
<br>
<h2>0. 팀명의 의미</h2>
<li>4조로 배정되었기도 하고, 불사조처럼 부트캠프 끝까지 죽지않고 불타오르며 달려나가기 위해 작명하였다</li>
<h2>1. 팀 구성원</h2>
<li>팀장 - 김명섭</li>
<li>팀원 : 서병택, 김진현, 천민규</li>
<h2>2. 팀의 궁극적 목표</h2>
<li>매니저님들이 봐도 감탄할만한 결과물 만들기</li>
<li>주니어 개발자가 되기 위한 첫 프로젝트 성공적으로 완성하기</li>
<h2>3. 팀에 대한 약속</h2>
<li>잠수 금지, 코드 리뷰 준비하기, 코드 주석 잘 달기, 상호 존중하기</li>
<h2>4. 팀의 특징</h2>
<li>각 지역 최강의 알파메일들이 모였다</li>
<li>서로를 존중해주며 어느 누구의 의견도 귀를 기울인다</li>
<li>체계적으로 역할 분담하고, 계획적으로 움직인다</li>
<h2>5. 팀원에 대한 설명</h2>
<li>전부 MZ세대이다</li>
<li>다들 술을 잘 마신다</li>
<li>축구를 좋아한다</li>
</div>
<div>
<img style="margin-left: 50px;" src="https://drive.google.com/uc?id=1T6oQ6r0q6YFpUKdwBQXi4q5c6pbt4OFQ">
</div>
</div>
일단 가운데로 정렬하기 위해서
id container로 묶는 div 전체를
css 쪽에서 text-align:center를 통하여 글씨 가운데 정렬을 하였고, 사진과 글문단을 같은 div container로 묶었기 때문에 margin을 사용해서 가운데 정렬을 하였지만 통하지 않았다. 계속 고민하다보니 애초에 글과 사진을 옆으로 정렬하게 한건 flex를 사용하였던 덕분이였고, 그 위치를 정하는건 justify-content의 값이였다
가로축을 기준으로 좌우에 대한 정렬을 정해주는 값인데
flex-start = 요소들을 컨테이너의 왼쪽으로 정렬
flex-end = 요소들을 컨테이너의 우측으로 정렬
center = 요소들을 컨테이너의 중앙으로 정렬
space-between = 요소들 사이에 동일한 간격을 둠
space-around = 요소들 주위에 동일한 간격을 둠
space-evenly = 첫번째로 오는 정렬 대상 전에 두개의 인접한 정렬 대상 사이의 간격과 마지막 정렬 대상 이후의 간격이 같도록 항목이 분산
다 한번씩 적용해보면 더 체감이 되겠지만 일반적으로는 flex-start / flex-end / center / space-between 정도가 잘 사용되지 않을까 생각하게 되었다
결국 center로 값을 주어서 원하는 상태값으로 출력할 수 있게 되었다.
첫 프로젝트의 모든 내용을 이 글 1개로 정리하려 하였으나 내용이 너무 길어져서 기본적으로 해보면서 막혔던 부분 어딜 직접 적용해보았는지는 여기까지 기재하도록 하겠다
