코딩정비소 코딩정비소

HTML은 Hyper Text Markup languege로 배웠다. HTML은 마크업 즉 구조를 생성하는 언어이다. 웹페이지 구조를 만들기 위해서 HTML은 여러 가지 Tag들을 제공한다. 그중 아주 기본이 되는 태그 10가지에 대해 알아보자 1. html html tag는 메인 루트 태그로 HTML 문서의 최상단 요소를 나타낸다. 모든 다른 요소는 요소의 하위 요소이다. 전역 속성을 가지고 있으며, 주로 lang 특성을 선언한다. (스크린 리더가 읽을 때 효율적이라나, 뭐라나... ) 👍 은 HTML 태그는 아니다. 다만 HTML버전이 무엇인지 웹 브라우저에 알려주는 역할을 한다. 그도 그럴 것이 수학 문제를 국어 답안지로 체점할 수는 없는 거랑 같은 이치다. 2. head head tag는 메타 데..

이번 포스팅에서는 React를 이용하여 modal을 구현해보는 시간을 가져보겠다. 개발 시간을 단축하고자 개발환경은 codepanio(http://codepen.io)를 사용했다. 처음부터 하나씩 구현해보도록 하자. React-hook React-Dom 을 이용하여 구현 해볼 예정이니, 관련해서 이상한부분 있으면 댓글로 남겨주시면 친절하게 답변해 드릴 예정이니 편하게 댓글 남겨주시면 된다 :) 프로젝트 생성하기 https://codepen.io/ 링크 따라 들어가면 다음과 같은 화면을 볼수 있다 좌측 상단에 Pen 버튼을 클릭하면 프로젝트를 생성할 수 있다. 이제 프로젝트는 생성이 완료되었으니, 모듈들을 설치해주자 우리가 설치해야 할 모듈들은 React, React-dom이다. 설치방법은 다음과 같다 우..

event.preventDefault? event.stoppropagation? 자바스크트립에서 이벤트 바인딩 시에 많이 보이던 함수였다. 저 둘을 이전부터 많이 사용되었고, 앞으로도 많이 사용될 거라 생각되어. 나중에 시간 되면 분석해보기로 했었던 찰나. 오늘 개발하면서 저 둘의 개념을 혼동하여, 30분 동안이나 삽질을 했다. 이참에 다시 정리해보기로 했다. event? 먼저 event가 뭘까? 모든 동작은 event를 받아서 동작한다고 생각하면된다. 이벤트에도 종류가 있는데 tag별로 이벤트가 다르다. form event, click event, 특정 이벤트가 발생하면, 이벤트를 구독(참조)하여 동작을 지시하는 방식으로 되어있다. 쉽게 말해서 발생한 이벤트를 코드에 알려줘서, 동작하는 것을 이벤트라고..

sticky vs fixed는 무엇인가? 스크롤할 때 웹 내부 요소를 유지하도록 도와주는 CSS 속성이다. position: sticky position: fixed 그렇다면 이 두 개의 차이는 무엇일까? position: fixed position: fixed는 viewport에 고정된 고정 위치에 위치하게 된다. 쉽게 말해 개발자가 지정한 위치에 있다. 개발자는 위쪽, 아래쪽, 왼쪽, 오른쪽을 지정할 수 있다. .test { position:fixed; top : 0; } position: stickey position: stickey는 오프셋 (top:10px)을 정의하기 전까지, 저 고정된 위치가 아닌 부모의 위치에 고정되어 동작한다. 부모의 위치가 스크롤에서 떠나가 되면 부모 안에서 유지하게 된..

이번 포스팅에서는 HTML에서 많이 사용되는 셀렉트 박스를 구현해보는 시간을 가져보겠다. Select box(셀렉트 박스)? 셀렉트 박스는 콤보 박스라고도 하며, Pull-Down Menus라고도 한다. 주로 회원가입시에 많이 볼 수 있다. Select box 구현 하기 네이버 회원 가입시 성별 셀렉트 박스를 만들어보자. 성별 성별 남자 여자 선택 안함 ​ https://codesandbox.io/s/festive-tesla-f6jq3?file=/index.html 에서 확인 가능하다 festive-tesla-f6jq3 - CodeSandbox festive-tesla-f6jq3 codesandbox.io 정리 및 느낀 점 Select box를 구현하기 위해서는 Select 안에 option tag들을 ..

React 프로젝트에서 Firebase를 사용하여 로그인 기능을 구현해 볼 것이다. 생각보다 간단하다. 로그인 기능은 민감한 기술이지만, Firebase를 이용하여 인증을 추가하는 것이 매우 간단하다. 이번 포스팅에서는 React, React-hook Typescript 에 대해 알고 있다고 생각하여 자세한 내용은 생략하여 진행할 예정이니 참고바란다. 프로젝트 생성하기 프로젝트를 생성할 원하는 위치에 폴더를 생성하자. 필자는 react-typescript-login으로 진행하겠다. 폴더가 생성되었으면 프로젝트를 생성하자. 앞서 말씀드렸다 시피 react와 typescript로 프로젝트를 생성할 예정이므로 create-react-app을 활용하여 빠르게 프로젝트를 생성해보자. 더보기 npx create-r..

Semantic 프로그래밍에서, 시멘틱(Semantic)은 코드 조각의 의미를 나타낸다. 이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가? 이 JS 라인을 실행하는 것은 어떤 효과가 있는가? HTML Semantic HTML에는 Semantic 요소와 Non-Semantic 요소로 구분된다. Semantic 요소는 목적이나 역할이 존재한다. ( 내용에 대해 알려준다 ) Non-Semantic 요소는 특별한 목적이나 역할이 존재하지 않는다. ( 내용에 대해 아무것도 알려주지 않는다) Semantic 요소에는 100여개 종류가 있다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element HTML elements reference - HTML: Hyper..

HTML Hyper Text Markup language(HTML)은 웹페이지의 구조와 내용을 담당하는 마크업 언어이다. HTML 기본 문법 Hello World HTML은 첫 줄에 문서 형식을 지정해줘야 한다. 브라우저가 받은 파일을 읽을 때 어떤 형식인지 알아야 제대로 읽을 수 있기 때문이다. 중국인한테 프랑스어 읽으라고 주는 거랑 같은 맥락이다. html 요소는 최상위 레벨에 위치하고 있다. doctype은 예외이다. head 요소 안에는 title, meta데이터, 외부파일참조가 있으며, 브라우저에 노출되지 않는다. body 요소는 실질적으로 웹브라우저에 노출된다. html 모든 요소들은 대소문자를 구분하지 않지만, 통상 소문자를 사용한다. 가독성을 위해 소문자를 사용하자 :) HTML 요소 He..