미니프로젝트(3) - 프론트엔드, 프로젝트 마무리
프론트엔드 CSS,JS 꿀팁
색상값(RGB)
웹이나 여러 툴에서 사용하는 색상들이 다 같은RGB를 기반으로 두고 있음
RGB는 16진법으로 '#000000' 표현가능
color: white; color: #ffffff; //동일한 흰색으로 표현됨 16진법으로 표현할 경우 더 세세하게 설정가능해보임
'#(id)'와 '.(class)'차이
id와 class는 우선순위의 차이가 있음 // id > class > 태그 순으로 우선순위가 매겨짐
<head> <style type="text/css"> div{background: red;} .green{background: green;} #blue{background: blue;} </style> <head> <body> <div class="green" id="blue">id>class>태그</div> </body>
위의 값을 출력하면 백그라운드가 블루가 나오고 id를 지우면 그린 둘다 지우면 태그값인 레드가 나옴
_id는 하나의 고유한 값을 매겨 여러개의 id가 실행되지 않고 class는 여러개의 class가 실행 된다고 하는데 조금 더 알아봐야하는 내용
tip.
.wow {} #wow {}
각자의 값으로만 인식!!
예를들면 '하이' 라는 말이 미국에선 '안녕' 이지만 일본에선 '예' 라고 인식하는 것과 같음
태그변경
style 탭에서 태그도 설정 가능
a { '입힐 것 입력' // body의 a 안에 있는 모든 것을 '입힐 것 입력' 으로 변경 } body { background-color: #--------; // 바탕색을 변경 }
웹 검사 활용
백엔드의 경우 IDE의 print()외에도 웹 콘솔창을 이용해 값의 저장과 출력이 잘 이루어 지는지 확인가능하며 프론트엔드의 경우에도 IDE를 통하지않고 웹에서 바로 수정및 확인 작업이 가능(최종 변경은 IDE에서 해야함!)
웹에서 우클릭후 검사하기(단축키 Ctr + Shift + C)를 눌러서 각 이미지와 기능들의 값들을 확인가능하며 바로 수정하여 나타나는 결과까지 봄
값의 크기를 마우스 드레그를 통해 연속적으로 변하는 크기를 보며 원하는 사이즈를 선택하기 용이
ETC 소득
<br/> 한 줄 띄우기(엔터 역할)
style에서 태그안의 태그를 겨냥할 때 '>' 를 통해 선언된 함수, 태그들을 타고 들어가서 그 부분만 변경가능
.box > btn > div > p {ㅇㅇ} (이런 식으로 원하는 범위만 수정 가능)
프로젝트 마무리
미니프로젝트의 작업은 다 끝나고 발표만 남은 가운데 정말 얻은 것이 많다.
먼저는 협업하는 방식에 대해서 알게됐다.
물론 협업의 가장 중요한 부분은 소통과 시너지, 케미 등 팀워크라고 생각한다.
하지만 처음 작업하며 걱정했던 부분은,
각자가 맡은 파트를 작업하고 하나로 합치는 일에 있어서 오류가 많이 날 것 같다고 생각했다.
하지만 손쉽게 처리 가능한 오타를 제외하곤 오류가 없었다
미니프로젝트라 그럴수도 있다고 생각하며 큰 프로젝트를 할 땐 어떨지는 아직은 잘 모르겠다
아직은 실수가 잦았고(깃허브에 같은 이름을 올려 상대의 파일이 지워지는 일도 발생함),
그만큼 더 소통하고 서로가 도움을 줬다.
여기서 큰 경험을 한 것이 있는데, 잘하는 사람이 빠르게 잘 이끌어나가는 것이 당연하지만 때로는 초보자가 해결책을 제시할 때도 있었다.(복잡하게 생각한 방식을 단편적으로 생각해 제시하는 경우가 있었음)물론 잘하는 사람도 그 안에서 잘하는 편...?
그러니 프로젝트는 모두가 하나가 되서 함께 해 나가는 것도 정말 중요하다는 것을 다시 한번 느꼇다.
