Project

리소프트 의 홈페이지화면을 클론페이지를 부분별로 나누어서 진행하게 되었고.나의 경우지도부분과 footer 부분을 맡게되었다.지도 부분은 카카오 지도로 들어가서 API 키를 만들어낸후해당 스크립트를 제일 위에 넣은 후해당 부분을 작성하고해당 스크립트를 넣는것으로 작동을

이전에 만든 뼈대에서 미디어쿼리를 추가하는 작업을 하게되었다.지도 부분에 미디어쿼리를 적용하여가로의 넓이에 따라서 지도의 크기가 변하고.가로 길이가 640px 이하가 되면 문단이 위, 지도가 아래로 이동하며, 문단이 2줄로 바뀌는 미디어쿼리를 적용하였다.가로길이 129

팀원들이 작성한 파일들 취합 후 오류 확인 및 수정각자 작성한 코드들을 연결하여 문제가 생기는 부분, 오류가 생기는 부분을 확인해보았다.연결을 하는 과정에서각자 이미지파일의 경로, css,js파일의 이름이 다른것으로 인해서 이미지가 안나오거나 css가 적용이 되지 않던

중간중간에 자리를 차지하던 스크립트 파일들을 js파일로 이동을 하였다.이때 이를 불러온느 스크립트는 body태그가 끝나는 직전에 추가를 했다.외부에서 불러오는 cdn과 링크방식은 작동을 위해 head부분에 남겨두었다.카드 부분의 경우 미디어 쿼리를 이용하여 가로 길이에

1.학습한 내용 1)스크립트 위치 이동 이전에 스크립트들을 파일로 옮긴 것을 가독성을 위하여 작동하는 순서대로 배치하였다. 2)파일명 변경 이전 한글이 경로에 들어갈경우 오류가 나는것을 해결하기 위하여, 한글로 되어있던 파일명들을 임의의 영어로 된 이름으로 변경하였

기존의 베이스가 되는 reset.css 를 적용하게되었다.해당코드를 style.css 에 입력한뒤홈페이지의 변화를 확인하게되었다.과제에서 주어진 폰트를 적용하게 되었다.실제로 적용되는것을 확인하였다.reset.css 를 적용하게 되자 기존과 달라지는 부분들을 발견하여

팀원들이 작업하는 것을 공유하기 위해서 깃허브를 사용하게되었다.이 과정에서 folk와 pull, merge에 대해서 알게되었다.한명의 깃허브 프로젝트에서 대상들을 초대하는것으로 초대받은 사람이 수정을 할수있는 권한을 가지게된다.html checker 에서 생기는 오류중

이전날 확인했었던 오류중 ul과 li 사이에 div가 있어서 발생한 오류는ul, li 부분을 모두 div로 변경하는것으로 해결이 되었다.이를 통하여 html checker 에서 에러들이 모두 해결되었다.또한 웹페이지에서 FAX부분에 마우스를 올렸을때 커서가 text로

지금까지 작업한 웹페이지를 바탕으로 어색한부분, 작동이 되지 않는 부분을 수정하였다.미디어쿼리 430px을 기준으로box_wrap 부분의 경우에 배경의 파란구간이 넓은것으로 인하여.box_wrap{height:50%}를 적용하는것으로 해결이 되었다.또한 430px을 기

이전까지 작성한 웹페이지를 멘토님에게 보여주는것으로수정할 부분을 피드백받게되었다.우선 웹페이지의 로드시간이 너무 길게 나타나는 문제를 발견하였다.이러한 것을 해결하기 위해서 이유를 찾아보았을때,이미지 파일의 경우 jpg의 용량이 5mb, 9mb, 13mb등 용량이 크기

이전까지 작성하였던 Resoft 웹페이지를 작성한 다른 팀들의 발표를 듣고 비교를 하는 시간을 가지게 되었다.1팀- 단순히 페이드인, 페이드인라이트 와 같이 wow 라이브러리를 사용한것을 이용한것이 아닌 animatation css 를 사용하여 구현을 하였다, 이때,

우선 프로젝트를 작업하기 이전에, 깃허브에서 프로젝트를 작성하게 되었다.이때 이전과는 다르게 미리 폴더를 만들고, 진행도는 각자 commit를 진행할때 날짜, 담당 파트, 이름, 진행률을 적기로 하였다.또한 각자의 폴더에서 readme.md 파일을 작성하는것으로사진과

공통 부분의 작성이 마무리 되어서각자 담당한 파트를 작업하게되었다.기존에 6개의 이미지를 배치했던것에서더보기 버튼을 통하여 추가로 4개의 이미지가 나타나도록 했으며,마우스를 가까이 댔을 때, 이미지의 크기가 확대가 되며, 흐려지도록 설정하였다.더보기를 작동을 시켰을때,

정보마당을 계속 작업하게 되었다.우선은 이전날 작업한 페이지에서 레이아웃을 지정하기 위해서margin 과 font-weight, 등을 추가하게 되었다.또한 이전에 작업했을때는 opacity 를 주는것으로 하얗게 흐리게 표현되었던 부분을filter:brightness(5

이전에 작업한 페이지에서 추가로 작업을 하게되었다.기본적으로 폰트를 설정하지 않았던 것을Noto Sans KR 폰트를 적용하게되었다.헤더 부분와 푸터부분이 박스가 이상하게 나타나는 부분을 수정하게되었다.이미지 구간의 높이를 지정하고, 이미지간의 간격들을 수정하였다.이전

이전에 작업한 페이지에서 추가적으로 작업을 하게 되었다.내비바기존에는 마우스를 올리면 글씨색이 파랗게 변하고, 파란 밑줄이 생기던것을마우스를 올리지 않았을때도 기본적으로 표시가 되도록 수정하였다.더보기 버튼기존의 더보기 버튼에 마우스오버를 했을때 배경색이 파란색, 글씨

기존에 html파일에 있던 style 과 script를style.css, script.js 파일로 분리를 하게되었다.이때 style.css를 불러오는 링크는 head에,script.js 를 불러오는 링크는 /body 위에 작성하게되었다.이전날 Yard 파트의 공개된 분

이전에 작업한 yard-news 페이지의 버튼 부분을 수정하게 되었다.마우스를 올렸을때 배경색, 글자색, 그리고 이미지의 색깔이 변하는것을 추가하게되었다.html파일을 작업하면서 추가한 css의 경우에는 색깔을 변경하는것이 쉬웠지만, 이미 색이 정해져있는 이미지의 색깔

이전에 작업한 푸터부분에서미디어쿼리를 적용했을때 좌측의 여백이 필요하다고 하여세부수정으로 마진과 패딩을 부여하게되었다.시안에서 미디어쿼리가 추가되는것을 기다렸지만, 해당 부분은 추가적인 요구사항이 없다는 답변을 듣게되어서,임의로 작업을 진행하게 되었다.다른 페이지를 보

정보마당의 이미지 부분의 겉부분에 margin 부분에 또한 이 과정에서 이미지를 img태그를 통하여서 html에 코드로 불러왔었던것으로 인해 마우스오버를 했을때 이미지에 버벅이는 문제가 있어서, 해당 부분을 css를 통하여 background-image를 통하여 불러오

기존의 이미지는 이미지 태그를 사용하여서 불러왔던것이었으며, 그에 대해서는 마우스오버를 했을때 어색한점이 있어서css를 통하여 background 로써 불러오게 되었다.이후 가로폭은 화면의 너비에 맞춰서 줄어들지만, 세로의 길이의 경우에는 지정한 값으로 고정되는 문제가

이전에 작업했을때 고민을 했던,화면의 너비에 따라서 가로로 넓게 표현되도록할지세로로 넓게 표현되도록 할지를 고민하여, 멘토님에게 조언을 구하였을때시안에 원본 이미지의 비율이 있을텐데, 그것에 맞게 작성을 하는것이 좋다는 조언을 받게 되었다.이를통하여 680:360 의

화면의 크기에 따라서 표현되는 이미지의 갯수를 조절하는것이 어떻냐는 제안을 받게 되어서 작업을 하게 되었다.해당 코드를 입력하는것으로, 화면의 너비가 768이하면 4개, 1024이하면 6개, 1920 이하면 8개가 표시가 되도록 하고.기존에 더보기 버튼에 firstCl

팀원들이 작업한 웹사이트를 확인하던 도중일반적으로는 사진과 같이 정상적으로 작동이 되는 반면아이패드, 아이폰을 사용하는 사람들이 사파리를 통하여 동작을 시켰을때는 사진과같이 오류가 나는것을 발견할수있었다.해당 부분은 크로스 브라우징 이슈라는 것으로.브라우저 엔진 차이에

이전에 작업했을때 버튼 두개가 위치가 차이가 나는것이 보기에 좋지 않아서 Bootstrap 프레임워크를 사용하기로함.위와 같이 나왔던 버튼들을사진과 같이 합쳐지도록 작업을 하게되었다.이때, 접기,펼치기 버튼의 경우 보기에 좋지않아서, 팀원이 작성한 이미지를 사용하게되었

이전에는 화면을 줄였을때 더보기 버튼의 이미지가 보더를 넘어가는 상태가 나타났다.이를 해결하기 위해서 인터넷을 찾아본 결과img를 싸고있는 label 태그에 arrow-box 클래스를 추가한후해당 css를 적용시키는 것으로화면을 줄여도 보더의 크기에 맞게 이미지가 조절

이전에 작업 하였던 부분에서같은 내용을 사용하게된 다른 팀원과의 상의를 통하여반응형 미디어쿼리가 동작을 하게 되었을 때.line-height, font-weight, font-size 의 변화값을 정하여 지정하게 되었다.웹표준 markup 체크 사이트를 통하여웹표준에

이전에는 이미지에 justify-content : center 를 준 상태로.각 img-wrap 에 margin 과 padding 을 주는것으로 배열을 조정하였다.하지만 이러한 방법을 하면서 img-wrap 사이의 간격은 조절이 되지만 img 사이의 간격이 조절되지 않

이미지가 추가되고 사라지는 버튼이기때문에, 화살표로는 표현이 어색한것 같아서 플러스,마이너스 버튼으로 수정하게 되었다.작업된 네비바와 푸터를 적용하는 과정에서 오류가 발생한 부분들을 수정하게 되었다.이전에는 모든 변수들을 $를 통하여 불러왔는데.사용을 할때마다 불러오는

공통 부분의 작업인 네비바와 푸터부분을 적용하게 되었다.이전에 작업하였던것들을 팀원들과 회의를 통하여, 마무리를 하면서 사항들을 점검하는 시간을 가지게 되었다.네비바를 적용하는 과정에서, 다른 팀원과는 배치하는 방식이 달랐던 탓에 헤더부분이 ex)(position:ab

이전에 받은 부분중 적용해야하는 피드백은반응형 - 상단 네비의 양옆 여백에 맞게 전체적인 레이아웃 배치와더보기 아이콘 디자인 시안과 동일하게더보기 이후 게시물이 없을시, 더보기 아이콘 미노출이렇게 두가지 였다.후자의 경우에는 +와 - 기능이 있던 버튼을 기존의 더보기

이전에 작업한 페이지들의 피드백 작업을 마무리하고 제출을 하게 되었다.이전에 웹표준을 검사하는 사이트 에서는 html파일의 형식만을 체크를 할수있었지만, 팀원중 한분이 알려주신 이 사이트(https://validator.w3.org/unicorn/?ucn_la

이 후에 프로젝트 발표를 진행하게 되었다.해당 부분은 팀별로 합쳐서 5분, 팀원 전원이 발표해야 하기 때문에, 우리팀의 경우에는 5분간 6명이서 발표를 진행하게되었다.따라서 명당 1분도 안되는 시간을 가지게 되었기 때문에, 작업한 내용 모두를 발표를 하는것은 어렵다고

원페이지를 진행할 때는 팀장이 대표로 전체적인 발표를 진행하였으나, 이번 발표는 본인이 맡은 부분은 본인이 발표하는 방식이 되었다.이에 대하여 해당 부분을 다시금 확인하게되었다.이때, 발표자료를 제출하는 항목이 추가가 되어서, 해당 부분에 대해서는 팀원들과 상의를 해보