이벤트 객체에 대해서 공부했다.
라만차의 개발공부로그
function buttonClick(event) { //함수 이름은 임의로 정한다.
console.log(event.target.textContent + " 를 클릭하셨습니다!"); //target의 textContent를 가져온다.
}
let buttons = document.querySelectorAll('button'); //모든버튼을 배열로 지정해준다.
for(let i=0; i<buttons.length; i++) { //배열을 for문으로 돌린다.
buttons[i].onclick = buttonClick; //onclick메소드로 버튼을 클릭하면 이벤트함수가 실행된다.
}
DOM을 이용해서 동적인 웹 화면을 만들어보았다.
엄청 재미있었다. 이제좀 querySelector 개념을 이해했다.
메인페이지 width를 200%(화면에 넘치게)로 만든다
body 를 overflow: hidden 을 하면 스크롤이 없어진다.
보여지는 곳 width를 50%로 만든다.
메인페이지에 클래스 지정을 page1로 해놓고
아메리카노 버튼을 눌렀을 때 page1이 지워지고 page2로 바뀌게 한다.(js에서작성)
.page1 {
transform: translateX(0); // 화면의 시작이 x축 0에서 시작한다.
}
.page2 {
transform: translateX(-50%); // 화면의 시작이 x축 -50으로 시작한다.(왼쪽으로 화면이 당겨진다)
}
#container {
transition .5s; //넘어갈때 스무쓰하게 넘어간다.
}
body {
overflow: hidden; //스크롤을 없애준다.
}
document.querySelector(".menu-item").onclick = function() {
document.querySelector("#container").classList.remove("page1");
document.querySelector("#container").classList.add("page2");
}
document.querySelector(".back").onclick = function() {
document.querySelector("#container").classList.remove("page2");
document.querySelector("#container").classList.add("page1");
}
이번 연습의 핵심은 transform, transition, overflow, querySelector 에 있다.
오늘은 코드스테이츠 Pre Course 7주차 CSS 강의를 들으며 실습했다.
아주 간단한 코드들을 실습할수 있는 좋은 웹사이트이다.
이곳에서 간단한것들을 실습해볼수도있고 저장할수도 있다.
주목해서 보아야할 CSS문법
* {
box-sizing: border-box;
}
#container {
height: 600px;
position: relative;
}
.col {
border: 1px dotted red;
float: left;
position: relative;
height: 100% //이 문법이 여기서는 핵심이다.
}
.row {
border: 1px dotted blue;
position: relative;
}
.w30 { width: 30%; }
.w70 { width: 70%; }
.h20 { height: 20%; }
.h40 { height: 40%; }
.h80 { height: 80%; }
.col {
height: 100%;
}
//이코드가 레이아웃을 만드는데 핵심이었다. 저것을 안넣어주면 레이아웃 모양이 안나온다.
저렴이 노트북을 쓰고있다. 게임을 하지 않기위해 영상정도만 볼수있는 노트북으로 바꾸어서 사용하던중 개발이라는것을 하게 되었고 이 보급형 노트북으로 1년가량 써오다보니 노트북이 많이 느려졌다. 포맷을 하기로 마음을 먹었다 산뜻하게 싹 지우고 다시 시작하자는 의미였다.
이영상보고 부팅usb만드는것부터 차근히 해라 끝난다.
많은것들이 있지만 이정도만해도 충분할것같다. 영상보고 한땀한땀 따라해라.
https://empier.tistory.com/340
지인 개발자 분께서 ““개발자를 꿈꾼다면 깃허브이지!”” 라고 하신 말씀에… 무작정 깃허브에 글을 쓰기로 마음을먹었다.
깃허브를 쓰면 좋은 이유
잔디가 자동으로 심긴다. 깃허브메인 프로필에는 잔디라는것이 있다. 이것이 얼마나 자주 심기느냐에 따라 이 사람의 꾸준함을 말이아닌 잔디로 증명해 보일수있다. 이력서에 저는”꾸준한사람입니다” “성실합니다” “열심히 합니다” 라는 말은 통하지 않는다. 나의 꾸준함과 성실함 열심을 잔디로 증명할 수있다.
위링크 유튜브 동영상의 순서를 차분히 따라해보자 결국 될것이다. 나의 개발환경은 Window10 이라 macOS 를 쓰는이분과 뭔가 조금씩 달랐다. 결국엔 마지막에 가니까 안되더라. 그러나 이분것을 한 5번 처음부터 끝까지 따라했더니 개념을 아주 잘 머리에 새기게 되었다.
https://recoveryman.tistory.com/321?category=635733
내가 해답을 찾은 블로그 글은 이곳이다. 위 링크의 글을 천천히 따라하니까 되더라. 그래서 이렇게 글을 쓰고있다.
위에 말했듯이 나의 개발환경은 window10 이다. 마크다운 에디터 선택의 폭이 아주 좁다. 그와중에 찾은것은 Typora 마크다운 에디터 이다.
이제 모든 준비가 끝이났다. 매일 잔디를 심어서 나의 꾸준함과 성실함 열정을 증명하자. Window10에서 지킬로 블로그를 한다는건 참 장벽이 높았다. 그러나 이것 또한 개발자가 뚫고 나가야할 아주 낮은 장벽에 불과함을 느끼며 재미있게 블로그를 시작해보자!!