3차회의
프로젝트에 대해서 3차회의를 진행하였다. 회의를 하면서 자신이 만든 개인 웹페이지 틀을 공유하였다. 공유한 결과 와이어 프레임을 짯음에도 불구하고 조금씩 배치나 틀들이 달라서 통일되는 느낌이 들지 않았다. 그래서 문제를 해결하고 틀을 통일시키기 위해 팀원들끼리 각 부분에 기능들을 담당해서 만들고 그것을 한명에게 보내서 그 사람이 틀을 정리한후에 각 팀원들에게 다시 보내자고 의견을 모았다. 그리고 내가 어제 건의사항으로 생각했던,
빈공간이 생기는 부분에 대해서 의견을 냈다. 그리고 아래부분을 방명록기능을 만들어서 삽입하자고 의견을 모았다.
그중에 내페이지가 배치가 괜찮다는 의견이 나와서 내가 전체적인 기능을 받아서 최종적으로 개인페이지를 정리하는 역할을 맡았다.
상단 메뉴바 제작
상단 메뉴바를 제작하면 보기에 더 좋을 거 같아서 팀원들에게 의견을 물어보았는데 있으면 좋을 것 같다고 하여서 한번 제작해보기로 하였다. 메뉴바에 마우스 포인트를 올리면 아래로 서브메뉴들이 나오도록 하고 싶었다.
상단 메뉴바를 만들었다.
<ul class="menu">
<li>
<a href="#">MENU1</a>
<ul class="submenu">
<li><a href="#">submenu01</a></li>
<li><a href="#">submenu02</a></li>
<li><a href="#">submenu03</a></li>
<li><a href="#">submenu04</a></li>
</ul>
</li>하지만 아래로 메뉴바들이 펼치게 만드는 것을 모르겠다...
li {
list-style: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.menu * {
padding: 0;
margin: 0;
}
.menu {
width: 300px;
overflow: hidden;
margin: 150px auto;
font-family: 'Arial' sans-serif;
position: absolute;
top: -150px;
right: -60px;
}
.menu>li {
width: 80%;
float: left;
text-align: center;
line-height: 40px;
background-color: #000000;
}
.menu a {
color: #fff;
}
.submenu>li {
line-height: 50px;
background-color: #d3d3d3;
}
.submenu {
height: 0;
overflow: hidden;
font-family: 'Arial' sans-serif;
}
.menu>li:hover {
background-color: #000000;
transition-duration: 0.5s;
}
.menu>li:hover .submenu {
height: 200px;
transition-duration: 1s;
}overflow: hidden;이라는 코드를 사용해서 마우스를 갖다대기 전에 숨김으로써 이를 해결했다.
git hub
https://github.com/Sangmin1999/-sparta/blob/f140a2f0d3bb3df984e71ca574d7f6e61115cdad/dsa.html
방문록 넣기
팀원이 방문록 기능을 만든것을 나에게 보내줘서 이것을 내틀에 크기와 배치를 맞추는 과정을 거쳤다.
받으면서 느낀점은 협업에서는 git hub가 중요하다는 점을 몸으로 직접느낀 것 같다. 단순히 코드전체를 복붙해서 주고받다보니 받고나서 또 새롭게 코드를 작성하는 느낌이였다.
처음에는 그냥 넣으면 될줄 알았지만, 넣어보니 방문록과 내가 만든 메뉴바가 합쳐지는 형상이 일어났다.
여기서 <style> 사이에 순서도 바꿔보고 <body> 사이에 메뉴바 코드 부분과 위 아래로 순서도 바꾸어보았지만 결과는 그대로였다.
그래서 구글링한 결과 아래와 같은 답변이 나왔다.
먼저, .container의 position: relative;를 제거하고 top, right, bottom, left 속성을 사용하지 않도록 변경합니다. 그리고 .menu의 position: absolute;를 사용할 때 주의해야 합니다. absolute 위치 지정은 부모 요소인 .container의 위치에 따라 상대적으로 설정됩니다.
absolute 위치 지정은 부모 요소인 .container의 위치에 따라 상대적으로 설정됩니다.
이 부분이 문제였다. 그래서 margin이라는 코드를 사용해서 margin-top margin-left를 이용하여 위치를 조정해 주었다.
최종 틀 완성
이렇게 팀원들에게 최종적으로 보내줄 웹 페이지가 완성되었다.
최종 코드
git hub
https://github.com/Sangmin1999/-sparta/blob/aa345ad3d5b52e6540bdf66194b3b7e5ac6f6970/smaple.html
보내면서
보내면서 문득 든 생각이 내코드가 보기에 많이 드럽다고 느꼈다. 그래서 코드를 간편하게 축약할 자신이 없어서 주석을 사용하여 수정해야 할 부분들을 일일이 써주었다. 이 부분은 지금 상황에서 최선으로 잘한 부분이라고 스스로 느꼈다.
개인페이지 완성
글을 넣고 마무리 하였다. 처음에는 하얀색 글자로 모두 작성할 생각이였지만, 그라데이션 효과를 흰색으로 하여서 아래쪽 글씨가 눈에띄지 않아서 검은색으로 변경하였다.
.bordered-text {
font-size: 20px;
color: black; /* 텍스트 색상 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 검은 그림자 */
}git hub
https://github.com/Sangmin1999/-sparta/blob/b300aa0896edf1515c1a25864be94839431ae67c/smaple.html
이렇게 나의 역할을 모두 수행하였다.
마무리
오늘은 웹 프로젝트 3일차를 진행하였다. 프로젝트 초반에는 먼가 정확히 그려지는 것이 없어서 구두로 어떻게 할지를 많이 정한 것 같은데, 좀 진행되다 보니 확실히 어떤 부분이 부족한지를 파악할 수 있었던 것같다. 그리고 역할도 정확하고 세세하게 정할 수 있었다. 각자의 역할을 정하다 보니 확실히 프로젝트 속도도 빨라지고 효율성도 상승하는 것 같다. 이번에 협업을 하면서 느낀점은 막상 코드를 받아도 내코드에 넣어보니 생각한거와 다른 결과가 발생하여 또 다른 새로운 코딩을 진행한 느낌을 받았다 이래서 git hub를 빨리 익혀야겠다고 느꼈다.
