DOM 이란? 공식문서에서는 DOM 이란 HTML, XML 프로그래밍을 위한 인터페이스 정도로 묘사하고 있다. HTML 문서는 여러개의 DOM들의 Tree 형태로 구성되고 있다. DOM 에 어떻게 접근할 수 있을까? 일단 DOM은 프로그래밍 언어에 독립적이다. 즉 어떤 언어로도 DOM을 다룰 수 있다. 하지만 주로 Javascript 를 이용한다. DOM의 대표적인 인터페이스는 무엇이 있을까? Node는 여러 가지 DOM 타입들이 상속하는 인터페이스이며 그 다양한 타입들을 비슷하게 처리할 수 있게 한다. DOM들을 트리화하여 관리하기 위해 childNodes(), firstChild, lastChild nextSibling parentNode 같은 속성들과 appendChild(), insertBefor..

1차원 Layout을 위한 Flexbox 언제 Flexbox를 사용하는가? 한 번에 하나의 차원 레이아웃을 다룰 때, 즉 하나의 행이나 열의 배치를 다룰 때 사용한다. 레이아웃 내 아이템의 공간배분, 정렬을 위해 사용한다. 여담: 2차원 레이아웃은 그리드 레이아웃을 사용하는 것이 일반적이다. 주 축(Main axis)과 교차 축(Cross axis) Flex는 Main axis와 Cross axis라는 개념을 갖고 있다. Main axis는 flex-direction 에 의해 조정된다. row 의 경우 주 축은 inline 으로 배치되고, column의 경우 주 축은 block방향으로 상단에서 하단으로 블록 방향을 따른다. Cross axis 의 경우 Main axis에 수직 방향으로 축이 형성된다. F..

링피트 어드벤처란? 닌텐도 스위치의 게임으로, 피트니스라는 특별한 컨셉을 가졌습니다. 이 게임은 주인공이 최종보스 드래고를 운동스킬들로 무찌른다는 내용의 스토리로 진행됩니다. 게임을 하며 운동을 할 수 있다니, 믿기지 않으시죠? 30분만 플레이 해보시면 마음이 바뀌실겁니다. 누구를 위한 게임인가요? - 다이어트를 계획하고 있는 사람에게 적합합니다. - 혼자서는 운동의지가 약한 사람에게 적합합니다. - 운동을 재밌게 하고 싶은 사람에게 적합합니다. 링피트의 장점은 무엇인가요? 1. 정밀한 센서 - 센서가 상당히 정밀하여, 플레이어가 정확한 동작을 하도록 유도합니다. 2. 트레이너적인 요소 - 플레이어가 정확한 자세를 취할 수 있도록 화면에 정확한 동작을 제시해줍니다 - 잘하고있어!, 완벽해! 등의 추임새를..

반디캠이란? 현재 모니터 화면, 게임화면 등을 녹화해주는 쉽게 녹화할 수 있도록 도와주는 프로그램입니다. 녹화를 마치면 재생가능한 mp4 형식으로 녹화된 동영상 파일이 만들어집니다. 기본적인 기능을 무료로 사용할 수 있습니다. https://www.bandicam.co.kr/downloads/ 에서 다운받을 수 있습니다. 반디캠에선 어떻게 녹화를 진행하나요? 방법1. 사각형 영역 녹화 방법 - 프로그램을 실행한 후 사각형 영역 녹화를 클릭합니다. - 원하는 영역을 지정한 후 빨간색 REC 버튼을 클릭합니다. (혹은 단축키 F12) - 녹화를 마쳤다면 다시 한번 빨간색 REC 버튼을 클릭하여 녹화를 종료해줍니다. (혹은 단축키 F12) 방법2. 전체화면 녹화 - 전체화면 녹화를 클릭합니다 - 빨간색 Rec..

GIF 파일이란? 흔히 움짤이라고도 하는 움직이는 이미지를 말합니다. 이 GIF 파일로 이해하기 쉬운 글을 작성하거나 재미있는 댓글 등에 사용할 수 있습니다. 1. 움짤 (GIF) 제작 프로그램 다운로드 우선 GIF 파일을 만들기 위해서는 GIF를 만들어주는 프로그램이 필요하겠죠? 무료로 사용할 수 있는 GIF 제작 프로그램에는 다양한 프로그램들이 있습니다. 저는 많은 프로그램들 중에서도 ScreenToGif 를 추천하는데요. ScreenToGif 는 아래와 같은 장점이 있습니다 Opensource 기반 프로젝트로 무료로 사용 가능합니다 화면 Cropping 을 사용할 수 있어, 원하는 화면만 골라서 녹화할 수 있습니다. 프로그램이 가볍습니다. ScreenToGif 를 다운로드 받기 위한 주소입니다 Si..

이 글에서 무엇을 다루나요? 기본적으로 티스토리에서 지원하는 애드센스는 본문 상하단에 광고를 달도록 지원합니다. 하지만, 광고의 클릭률을 높이기 위해 본문 사이사이 애드센스를 넣고 싶은 분들에게 아래 작업이 필요할 것입니다. 구글 애드센스 광고를 본문의 특정 속성 (이 글에서는 소문단 제목(h2)) 위에 삽입하는 과정을 설명합니다. 사전 조건 이 글을 읽기 전 독자는 구글 애드센스 승인을 받은 상태여야 합니다. 1. 반응형 광고 소스 만들기 우선, 광고를 삽입하기 위해서는 광고코드를 구글 애드센스에서 만들어야합니다. 아래와 같이 삽입하고자 하는 광고코드를 생성해야합니다. 애드센스에서 반응형광고를 3개 만들어주시면 됩니다. 광고를 다 만들어주셨으면, 광고에 해당하는 코드를 만들 수 있습니다. 우리는 만들어..