프론트엔드
-
레이아웃 따라 만들기 - HTML/CSS프론트엔드 2019. 12. 18. 20:34
※ 자바스크립트 프론트엔드 스터디에서 발표했던 내용을 정리한 글이기 때문에 스터디원이 아니시라면 조금 이해가 어려우실 수 있습니다 위 이미지와 같은 레이아웃을 제작하는 과정입니다.(desktop_components_02) Figma 링크 : https://www.figma.com/file/viEujZmbqeYG4FHhsi0H7o/responsive_web_components_mobikdesign_v1.0-(Copy)?node-id=0%3A1 Figma Created with Figma www.figma.com 먼저 HTML에서 반응형 웹 설정을 해주세요. viewport : viewport란 웹페이지의 전체 영역 중 사용자의 기기 화면에 보여지는 영역을 말합니다. 위의 태그는 '웹페이지가 사용자의 화면에..
-
네이버 회원가입 페이지 따라 만들기(클론코딩) - Javascript프론트엔드 2019. 12. 17. 00:29
https://skm1104.tistory.com/4 네이버 회원가입 페이지 따라 만들기(클론코딩) - HTML/CSS HTML, CSS, Javascript 연습용으로 네이버 회원가입 페이지를 따라 만들어봤습니다. 회원가입 페이지 레이아웃을 html과 css로 비슷하게 따라하고, Javascript로 사용자가 데이터를 입력했는지 확인하기 + 사용자.. skm1104.tistory.com HTML, CSS에 이어서 Javascript로 기능구현하는 과정까지 보여드릴게요. 저는 간단한 유효성검사 기능까지만 구현했습니다. 사용자가 데이터를 입력하지 않았거나, 잘못된 데이터를 입력했을 때(조건/형식에 맞지 않는 데이터를 입력했을 때) 입력폼 아래에 "필수 정보입니다", "8~16자 영문 대 소문자, 숫자, 특..
-
네이버 회원가입 페이지 따라 만들기(클론코딩) - HTML/CSS프론트엔드 2019. 12. 16. 22:57
HTML, CSS, Javascript 연습용으로 네이버 회원가입 페이지를 따라 만들어봤습니다. 회원가입 페이지 레이아웃을 html과 css로 비슷하게 따라하고, Javascript로 사용자가 데이터를 입력했는지 확인하기 + 사용자가 입력한 데이터가 조건에 맞는지 확인하기(유효성 검사) -> (데이터가 입력되지 않았거나 조건에 맞지 않다면) 에러메세지 출력하기 이렇게 간단한 기능을 구현해봤습니다. 자바스크립트로 기능구현한 부분은 따로 글을 작성할 예정이고 이 글에서는 결과물과 html, css 소스코드를 간단한 설명과 함께 보여드리려고 합니다. 결과물부터 보여드릴게요 결과물 네이버 실제 회원가입 페이지 따라 만든 페이지 (휴대폰 인증, Footer 부분 등은 생략하고 만들었습니다. ) 하필이면 제가 이거..
-
자바스크립트 클로저(Closure) _속 깊은 Javascript 2장프론트엔드 2019. 12. 15. 00:45
※ 책 2장. 자바스크립트의 스코프와 클로저 단원에서 '클로저'부분을 보고 작성한 글입니다. 글에 사용된 예제는 책에 있는 예제를 살짝 변형해서 만들었습니다. 공부하려고 쓴 글이라 부정확한 부분이 있을 수 있습니다. 클로저에 대해 설명하기 전에, 반드시 알고 넘어가야할 '스코프 체인'에 대해 먼저 알아보자. 스코프 체인 자바스크립트는 중괄호( {} )를 기준으로 스코프가 생성되는 다른 언어들과 달리, '함수 단위'로 스코프가 생성된다. 스코프는 함수가 호출될 때마다 새로 생성된다. 이 코드는 다음과 같은 스코프 체인을 생성한다. 스코프 체인에서 변수를 탐색할 때는 다음과 같은 과정을 거친다. inner함수에서 어떤 변수를 사용하려고 하면, inner 함수의 스코프에서 먼저 그 변수를 찾아보고 -> 없으면..