맨 땅에 프론트엔드 개발자 되기

VS Code로 코드 작성시에 코드 작성을 편하게 도와주는 Extension 몇 개를 소개해볼까한다. 1. Indent-rainbow indent는 들여쓰기라는 뜻으로 코드를 작성할 때 들여쓰기 단계에 따라 4가지 색상으로 구분해서 코드 작성을 도와주는 기능이다. 코드의 길이가 짧을 때는 별 유용함을 느끼지 못하지만, 코드가 길어지면 포함관계를 구분해서 작성해야할 때 위치를 잘 찾을 수 있도록 도와준다. 2. Auto Close Tag / Auto Rename Tag HTML/XML 태그의 닫힘 태그를 자동으로 완성해주는 기능이다. 태그 명을 수정할 때에도 닫힘 태그를 자동으로 수정해준다. 꼭 필요하고 없어서는 안 되는 기능이라고 생각한다. 정말정말!!! 3. Color Highlight 색을 많이 다루..

웹페이지를 만들 때 폰트는 웹 디자인에 있어서 중요한 한 부분이다. 인터넷이 발전하면서 많은 디자이너 분들이 웹폰트를 만들어오셨고, 우리는 그 중 무료로 배포된 웹폰트를 가져다 써보려고 한다. 물론, 유료 웹폰트도 구매하면 사용가능하지만... 가난한 학생은 무료로 배포된 웹폰트를 감사한 마음으로 사용하렵니다... 무료 웹폰트를 구글에 검색하면 수많은 페이지들이 나온다. 나는 그 중에서도 가장 널리 쓰이고 유명한 구글 웹폰트를 사용해볼 것이다. 구글 웹폰트는 개인 작업용 뿐만 아니라 상업용으로도 사용이 가능하고 영어와 한글 둘 다 있다는 장점이 있다. 저작권에서 자유로울 수 있다는 점! 감사합니다 구글~~~ https://fonts.google.com/?subset=korean Google Fonts Ma..

// 반복문을 활용한 구구단 출력하기 오늘은 버튼을 눌렀을 때 해당 숫자의 구구단을 출력해주는 초간단 구구단 출력기를 구현해보려고 한다. for문 사용과 증감 연산자 사용을 연습해볼 수 있는 예제다. 구현된 최종화면에는 아래와 같이 구구단이 출력된다. #HTML 구구단 출력 2 3 4 5 6 7 8 9 All #JAVASCRIPT const elBtn = document.querySelectorAll('.ex-gugu > div > button'); const elResult = document.querySelector('.result'); let result = ''; let gugu = function(n){ for(i=1; i

// 바닐라 자바스크립트로 무한 루프 슬라이드 구현하기 우리에겐 Swiper라는 아주 좋은 플러그인 툴이 있지만 초급자 입장에서 Swiper는 아직 익숙치 않고 변형하고 싶을 때 조정하기가 어려워서 슬라이드의 기본 원리를 깨우치기 위해 바닐라 자바스크립트로 무한 루프 슬라이드를 구현해보았다. 기본 원리는 슬라이드 리스트 중 맨 앞에 맨 끝 슬라이드를 복제하고, 맨 뒤에 맨 처음 슬라이드를 복제해서 먼저 복제된 슬라이드로 이동을 시키고 setTimeout을 이용해서 원래 가야할 슬라이드로 순식간에 이동시키는 방식이다. 슬라이드의 구조를 보자면 10 / 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 / 1 이렇게 되어있는 것이다. 슬라이드를 움직이기 위해서 슬라이드를 감싸고 있는 부모..

CSS 공부를 하면서 아마 가장 재미있었던 부분이 transition과 transform을 공부했을 때 였던 것 같다. 시각적으로 가장 눈에 띄고 재밌는 효과를 줄 수 있는 부분이 많아서 였던 것 같다. transform 은 대상자의 모양을 변형시키는 속성이고, transition은 그 대상자의 모양이 변형되는 지속시간을 설정하는 속성이다. Transform의 속성들과 예제들 transform의 속성 transform의 속성에는 아래와 같은 것들이 있다. translate : translate은 한국어로 하면 '번역하다' 라는 뜻이지만, 기본 의미 원형에는 '옮기다'라는 뜻이 있다. 그래서 말 그대로 옮기는 속성이다. scale : 대상의 크기를 배수로 확대/축소하는 속성이다. rotate : 대상을 회..

지난 게시물에서 Flex에 대해 공부했는데, 오늘은 Flexbox들의 정렬 방법인 justify-contet와 align-items에 대해 공부해볼 예정이다. https://babycoder05.tistory.com/entry/%EC%BD%94%EB%94%A9%EB%8F%85%ED%95%99-CSS-display-position-flex 코딩독학) CSS display, position, flex 박스 사이즈를 조절하는 방법에 이어서 박스를 배치하는 방법에는 display와 position 이라는 개념을 알아야 한다. Position 포지션의 속성값에는 아래와 같은 속성들이 있다. static: 디폴트 값이며, 아 babycoder05.tistory.com Flex의 속성값에는 box들을 감싸고 있는 c..