※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.25.에 작성된 글입니다. VIEW 요즘 모질라랑 프론트엔드 개발자를 위한 머시기 노란 책으로 Javascript를 공부하다가 어느 정도 사용 가능한지 알아보려고 한 번 만들어 봤다. (누가 모질라 번역좀 해줘..ㅠㅠ 프로그래밍 공부를 하면 영어가 자동으로 따라오는 느낌..?) Link Color Change jeongwoo903.github.io

※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.18.에 작성된 글입니다. VIEW %단위와 top, left, bottom, right 그리고 축(axis) 요것들이 쉬워 보이지만 은근 짜증나게 한다. 그리고 container를 viewport의 중앙에 내릴때는 align-items: center;로 왜 안되는 걸까?.. 의문이다. 거의 항상 position: absolute한다음 top과 transform: translateX로 중앙 배열하는 것 같다. 이번엔 margin-top으로 했다. Link CSS 3D jeongwoo903.github.io 의문점 정리 1. margin-top: 50vh가 아니고 25vh써야 중앙에 정렬되는가? Viewport Height (vh)는 viewport의 높..

※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.17.에 작성된 글입니다. VIEW Flexobox, Grid의 명확한 사용법을 알고 싶어 연습삼아 만들어 봄. 여전히 개념 정리가 필요하긴 함. 사실 태그 element에 border을 부여하려 했었는데 왠지 잘 안됨. Link Photo View jeongwoo903.github.io

※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.17.에 작성된 글입니다. VIEW Interactive Web강의와 Flexobox, Grid를 배우고 만들어 봄. 확실히 이론과 사용은 다르다는 것을 느겼다. 내가 짰지만 어떻게 작동하는지 잘 모르겠다. 개념을 확실히 하자. Link Hot Tofic jeongwoo903.github.io

※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.15.에 작성된 글입니다. VIEW 알게 된 것 ​ 만약 라인 그라데이션을 쓸거면 이 색이 이쁘니 참고 하자. background: linear-gradient(90deg, #ff8806 0%, #fb07f3 100%); Flex 가운데 정렬을 하고 싶다면 다음 코드를 이용해보자. display: flex; justify-content: center; align-items: center; 다음 코드는 element들을 신축성있게 움직이게 해 준다. (뒤의 숫자는 남은 여백을 각각을 어느 비율로 나누어 설정할 것인가.) flex-grow: 1; 진짜 비율을 보이는 대로 나누고 싶다면 이 코드를 써라. flex: 1; Grid 비율대로 가르기 display..

※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.15.에 작성된 글입니다. VIEW 인스타그램 프로필을 한번 베껴봤다. 이걸 만들어 봄으로써 이때까지 공부했던 지식들이 정리된 것 같다. 내가 상상하는 이미지를 CSS로 표현하는 법이라던지 적절한 HTML 태그를 사용하는 법을 꾸준히 익혀 나가야겠다. 알게 된 것 line-height: px;를 사용하면 행간(줄간)을 설정할 수 있다.

※ 이 글은 예전 블로그에서 퍼온 글입니다. 가독성이 나쁘다면 예전 블로그에서 읽어주세요.※ 이 글은 프론트엔드 개발자를 위한 자바스크립트 프로그래밍의 글을 참고한 것입니다.문서 객체 모델 (DOM, Document Object Model)텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링 하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱 하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는 데 이를 DOM이라 한다.https://poiemaweb.com/js-dom· DOM API는 DOM에 접근하고 변경할 수 있는 프로퍼티와 메서드가 집합된 자바스크립트 객체입니다.· 정적인 웹페이지에 접근하여 ..

※ 이 글은 예전 블로그에서 퍼온 글입니다. 가독성이 나쁘다면 예전 블로그에서 읽어주세요. ※ 이 글은 프론트엔드 개발자를 위한 자바스크립트 프로그래밍의 글을 참고한 것입니다. 브라우저 객체 모델 (BOM, Browser Object Model) - BOM은 웹 브라우저와 관련된 객체의 집합을 의미합니다. - BOM은 웹 페이지 콘텐츠와 무관하게 브라우저 기능을 노출하는 객체입니다. - 간단하게 문서 객체 모델 (DOM, Document Object Model)이라 통합해서 부르기도 합니다. BOM에 대한 명확한 명세(내용)가 없는 기간이 길었다 보니, 브라우저 제조사들은 자신들이 원하는 대로 BOM을 확장했고 이에 따른 좋은 점도 있었지만 문제점들도 많이 생기게 되었습니다. window 객체 - win..