css
-
[Web] HTML 문서 파싱 & DOM 트리 생성 과정 알아보기프론트엔드 2022. 2. 10. 17:51
문서(HTML, CSS)가 어떻게 파싱되고 어떻게 DOM Tree가 되는가? 문서 파싱과 DOM Tree 구축 컴파일 전 동작 소스코드가 컴파일 과정을 거치기 전에, 소스코드 내용을 파싱하여 컴파일이 가능한 단위로 만드는 과정이 있다. 파싱 문서 파싱 : 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것. 파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데, 파싱 트리 또는 syntax 트리라고 부른다. 일반적인 파싱 과정은 어휘 분석과 구문 분석으로 나뉜다. 어휘 분석 : 의미없는 공백, 줄 바꿈을 제거하고 토큰(의미있는 문자) 단위로 분해하는 과정. 구문 분석 : 언어의 구문 규칙을 적용하는 과정. 어휘 분석기로부터 새 토큰을 받아서, 구문 규칙과 일치하는지 확인함. 파싱 작업은 파서에..
-
[CSS] 화면 클릭 시 생기는 파란 배경색 없애기프론트엔드 2022. 1. 9. 17:46
DOM 요소를 클릭했을 때 드래그한 것처럼 파란 배경색이 생기는 경우가 있다. 클릭했을 때 실제로 드래그가 되면서 생기는 경우도 있고, tab-highlighting 때문에 생기는 경우도 있다. 드래그일 경우 user-select: none; tab-highlighting일 경우 -webkit-tap-highlight-color: transparent; 위와 같이 설정해주면 해결된다. https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color -webkit-tap-highlight-color - CSS: Cascading Style Sheets | MDN -webkit-tap-highlight-color is a non-sta..
-
네이버 회원가입 페이지 따라 만들기(클론코딩) - HTML/CSS프론트엔드 2019. 12. 16. 22:57
HTML, CSS, Javascript 연습용으로 네이버 회원가입 페이지를 따라 만들어봤습니다. 회원가입 페이지 레이아웃을 html과 css로 비슷하게 따라하고, Javascript로 사용자가 데이터를 입력했는지 확인하기 + 사용자가 입력한 데이터가 조건에 맞는지 확인하기(유효성 검사) -> (데이터가 입력되지 않았거나 조건에 맞지 않다면) 에러메세지 출력하기 이렇게 간단한 기능을 구현해봤습니다. 자바스크립트로 기능구현한 부분은 따로 글을 작성할 예정이고 이 글에서는 결과물과 html, css 소스코드를 간단한 설명과 함께 보여드리려고 합니다. 결과물부터 보여드릴게요 결과물 네이버 실제 회원가입 페이지 따라 만든 페이지 (휴대폰 인증, Footer 부분 등은 생략하고 만들었습니다. ) 하필이면 제가 이거..