일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- CSS
- 프로그래머스코테
- html
- 코딩테스트
- 코테스터디
- 정보처리기사
- 프로그래머스
- 1일1코테
- 코딩
- 프로그래머스 알고리즘
- 개발자
- 프로그래머스 레벨0
- mysql
- 프로그래머스 코딩테스트
- 프로그래머스 Lv.0
- 프로그래머스알고리즘
- 알고리즘공부
- 프로그래밍
- next.js 에러
- Redux-Toolkit
- 프로그래머스 코테
- 알고리즘스터디
- 알고리즘문제
- next.js
- 정처기기출
- 프로그래머스코딩테스트
- 자바스크립트
- 코테공부
- js
- 코테준비
- Today
- Total
목록전체 글 (186)
계발하는 개발자
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dQGVQR/btrYsAhIIGX/SIzxrUit9gnoNFqO1wI1kK/img.jpg)
반응형 웹페이지 제작에 많이 쓰는 사이즈 단위인 rem, em에 대해 알아보겠습니다. 보통의 정적인 요소들에 폰트사이즈를 고정크기인 px(픽셀) 단위로 설정하는 게 일반적이지만, 화면 크기 배율에 따라 상대적인 폰트값을 적용하려는 경우가 생기기 마련입니다. 이때 사용하는 것이 rem, em 되겠습니다. 여기서 1.5em, 1.5rem은 각각 1.5배 해주는 것이라 보시면 됩니다. 앞서 '화면 크기 배율'에 따라 상대적인 크기값을 준다고 정의했는데요, 어떤 것이 배율의 기준이 될까요? 어떤 요소의 1.5배를 말하는 걸까요? 이에 대해 rem과 em은 서로 다른 특징을 지닙니다. rem은 문서의 최상위 부모인 html을 기준으로 배율값을 지정해주는 크기 단위입니다. rem의 뜻은 최상위를 뜻하는 root의 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/clsJbP/btrYjCtGwpH/dWVFo1Sf01G5WAXWd1E00K/img.png)
이벤트 메소드는 현재 문서에서 특정 이벤트가 발생하면 지정한 이벤트 처리자를 호출하여 실행시키는 역할을 합니다. 일반적으로 A라는 이벤트가 발생했을 때 이벤트를 처리하는 처리자에는 addEventListener와 onEvent 가 있습니다. 1) addEventListener(이벤트리스너, 이벤트핸들러라고도 함) 메서드 사용 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹브라우저는 그 요소에 등록된 이벤트리스너를 실행 - 위 방법은 여러 개의 이벤트 핸들러를 동시에 등록할 수 있어 가장 권장되는 방식입니다. - removeEventListener (이벤트 제거 메소드)를 이용해 필요없는 이벤트를 지울 수 있습니다. - 형식 : 이벤트 대상 객체 .addEventListener("이벤트명",함수명); ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bZ6teg/btrX41f9t55/jN0yM4zL8o5idf7OEOvoC0/img.png)
함수를 실행하고 결과값을 출력할 때 보통 console.log 명령을 하여 결과값을 출력하게 됩니다. 오늘은 흔히 사용하는 명령인 console.log 와 return 명령의 차이를 알아보는 시간을 가져보겠습니다! (먼저 위 차이에 대해 상세하게 설명해준 니꼬쌤 땡큐) 다음 player2라는 객체에 각각 plus, minus함수를 실행하기 위해 할당해줍니다. 비교를 위해 plus함수는 console.log 를 이용해 해당 매개변수의 값을 출력하도록 하고 minus함수는 return 키워드를 이용해 값을 출력하도록 명령했습니다. // plus, minus함수를 player2변수에 할당 const player2 = { name: "SJ", points: 100, plus: function (a,b) { co..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/npfxD/btrWZWAb4oJ/0YGxQn8Cf1aylP0nDk5hF0/img.png)
코딩 관련해서 구글링하다보면, 개발코드들을 코드펜이라는 프로그램과 연동해놓은 것을 종종 볼 수 있는데요. 오늘은 개발자들 대다수가 이용하고 있는 코드펜(code pen)을 티스토리와 연동하는 방법을 정리해보겠습니다 !! https://codepen.io/ 먼저 코드펜 개발자모드를 이용하기 위해선 가입이 필수적입니다. 깃허브와의 연동가입도 가능하니 손쉽게 가입 gogo 가입 및 로그인하면 다음과 같은 메인화면이 나타나는데 개발자모드를 이용하기 위해서는 좌측 pen 탭 또는 우측 상단 아이콘 클릭> New Pen 을 클릭합니다. 그러면 위와 같은 개발자코드 창이 뜹니다. 이것을 이제 티스토리와 연동하기 앞서 간략하게 내용을 작성해줍니다. 시작태그와 끝태그까지 작성해주고 나면 바로 아래에 있는 미리보기 화면창..