당일날 코딩 일지를 남기지 못하여 프로젝트 마지막날 이렇게 글을 두 개 남기네요...
한창 프로젝트 막바지일 때라 도저히 글을 남길 시간이 없었습니다...ㅠㅠ(프로젝트를 어느정도 끝내고 나니
너무 피곤했던 게 크지만요...)
어쨋든 바로 본론으로 넘어가도록 하겠습니다!
저번에도 말씀드렸다시피 저는 프로젝트에서 html, css를 이용한 반응형 웹사이트 구축을 맡았는데요,
오늘은 기존에 작업되어 있던 메인 페이지를 조금 손봤답니다
이유는 제가 작업한 서브 페이지와 메인 페이지의 느낌을 하나로 통합시키자는 취지 때문이었구요,
메인페이지에 들어왔을 때 우리가 러너웨이 팀이라는 것을 한 번에 알아볼 수 있도록 커다랗게 타이틀을 적어놨답니다!
그 외에도 팀원들의 프로필과 그것에 대한 한 줄 타이틀도 같이 수정을 진행하였습니다
그런데 아무래도 여러 명이 동시에 작업을 하다보니 한 가지 문제가 발생할 수밖에 없었습니다
클래스와 아이디를 html, css, javascript, python에서 서로 공유하고 있어 섣불리 클래스나 아이디를 추가할 수 없다는
것이 최대의 문제였습니다. 그래서 클래스와 아이디를 추가하지 않고 최대한 css만 수정하여 외관을 변경하려 하였습니다
여기서, 다시 한 번 깨달은 꿀팁이 있다면 display : flex;를 이용하여 손쉽게 위치를 조절할 수 있다는 것입니다
그리고 반대로 반응형 작업을 하면서 어려웠던 것을 말해보자면, 직사각형의 비율을 유지한 채로 크기를 줄이는게
쉽지 않다는 것입니다...! 열심히 시행착오를 거친 결과, vw와 vh를 사용하면 이를 한 번에 해결할 수 있다는 것을
알게 되었습니다. vw와 vh는 현재 실행된 디스플레이 스크린에 맞춰 상대적인 크기를 반환하여 보여줍니다. 뷰포트를 기준으로 높이와 너비에 비례하기 때문에 반응형 웹을 구성하는데 유용한 단위입니다
vh : 화면(screen) 기준으로 높이를 뜻합니다
vw : 화면(screen) 기준으로 너비를 뜻합니다
<section class='content'>
<div id='a'>
50vw, 50vh
</div>
<div id='b'>
50%, 50vh
</div>
<div id='c'>
100%, 100%
</div>
</section>
* {
box-sizing: border-box;
}
body {
padding: 2%;
margin: 0;
}
.content{
width: 50vw;
margin: 0 auto;
}
div{
font-size: 5vw;
text-align: center;
vertical-align: middle;
margin-top: 3%;
padding: 5%;
}
#a{
background: orange;
width: 50vw;
height: 50vh;
}
#b{
background: blue;
width: 50%;
height: 50vh;
}
#c{
background: green;
width: 100%;
height: 100%
}
div {
color:white;
text-align: center;
}
%와 차이점 : %와 vw, vh는 비슷해 보이지만 명확한 차이점이 존재합니다.
vw,vh는 화면의 전체 길이를 상대적으로 반환하기 때문에 스크롤바를 포함한 길이를 반환합니다
반면 %는 %를 쓰는 요소의 부모 요소를 기준으로 길이를 반환합니다
너무 헷갈렸던 부분인데 이번 프로젝트를 통하여 한 번 더 짚고 넘어갈 수 있었습니다:)
이렇게 html, css 작업을 끝마친 후, 간단한 javascript 작업까지 한 번 해보았습니다!
var timeOut;
function scrollToTop() {
if (document.body.scrollTop != 0 || document.documentElement.scrollTop != 0) {
window.scrollBy(0, -50);
timeOut = setTimeout('scrollToTop()', 10);
} else clearTimeout(timeOut);
}
Top 버튼을 클릭했을 때 웹페이지의 최상단으로 끌어올리는 이벤트인데요,
기존에는 animate({ scrollTop : 0},1000);을 주로 사용하지만 저는 다른 방식으로 코드를 한 번 짜보았습니다
천천히 스크롤되는 것처럼 보이게 하기 위해서 scrollToTop 함수가 실행될 때마다 50px씩 위로 올라가고,
그 후 timeout 변수가 실행되면서 10초에 한 번 씩 scrollToTop 함수가 반복 실행되도록 하였습니다
function scrollToDown() {
$("body").animate({
scrollTop : 0
},1000);
return false;
}
var scrollHeight = $(document).height();
function scrollToDown() {
$("body").animate({
scrollTop : scrollHeight
},1400);
return false;
}
아래로 내리는 것은 animate( scrollTop : scrollHeight ), 1400);
즉, 웹사이트의 높잇갚을 할당하여 scrollTop 이벤트를 적용시켰습니다
그리고 여기서 하나 더,
top과 down 버튼이 스크롤을 내림에 따라 같이 따라붙도록 작업을 하였습니다
이 부분은 제가 전부 이해를 하진 못해서 앞으로 javascript 공부를 하면서 익혀야 할 것 같습니다 ㅠ.ㅠ
var currentPosition = parseInt($("#direction_button").css("top"));
$(window).scroll(function () {
var position = $(window).scrollTop();
$("#direction_button").stop().animate({"top": $(window).scrollTop() + currentPosition + "px"}, 600);
});
'1일1 스터디 후기' 카테고리의 다른 글
[ 2022-11-06 ] 코딩 WIL 일지 (일주일을 돌아보면서 쓰는 일지 (0) | 2022.11.07 |
---|---|
[ 2022-11-04 ] 코딩 일지 (프로젝트 마무리 (0) | 2022.11.05 |
[ 2022-11-02 ] 코딩 일지 (프로젝트 3일차 (0) | 2022.11.03 |
[ 2022-11-01 ] 코딩 일지 (프로젝트 2일차 (0) | 2022.11.01 |
[ 2022-10-31 ] 코딩 일지 ( 프로젝트 1일차 (0) | 2022.10.31 |
github : https://github.com/dnjfht
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!