[ Front-End ] HTML 관련 면접질문

HTML 관련 면접질문 브라우저 렌더링 브라우저 서버 브라우저 검색 인터페이스에 url입력 ( https://www.naver.com ) DNS ( Domain Name Server )에서 host 서버의 ip 연결 https의 경우 서버와 클라이언트간 ssl 인증 을 위한 ssl handshake 진행 host 서버 디렉토리에서 index.html 파일 과 리소스 등을 전송 렌더링 - html, css 위 과정에서 받은 html파일을 파싱 하여 DOM ( Document Obeject Model ) 트리 구성 link 태그에서 css 파일을 수신시 css 파일을 파싱하여 CSSOM ( Casacading Style Sheet ) 트리 구성 | html 파싱 중지 DOM 트리와 CSSOM 트리를 합쳐서 ..

Canvas Dojo - HTML5 Canvas를 공부하는 가장 쉬운방법

HTML5의 Canvas기능을 이용하면, CSS만으로는 구현하기 힘든 다양한 창작물을 구현할 수 있습니다. 하지만 구현은 생각보다 귀찮고, 쉽지 않죠.. See the Pen 30,000 Particles by Justin Windle (@soulwire) on CodePen. - 30,000 Particles by Justin Windle Vscode에서 Canvas를 공부하는데 좋은 툴을 소개합니다. Canvas Dojo - Arthur Kim Canvas Dojo - Visual Studio Marketplace Extension for Visual Studio Code - snippets and plugins for html5 canvas development marketplace.visualst..

[CSS] 밑줄긋기

See the Pen abJvKRZ by YoungSoo Kim (@znxkznxk1030) on CodePen. 가상 요소(pseudo-element)인 ::after 를 이용해서 밑줄을 그어봅시다. 가상요소(pseudo-element)란? 선택자에 추가하는 키워드로, 선택자의 특정 부분만 스타일 하기위해 사용합니다. 비슷한 요소로 가상클래스(pseudo-classes)는 선택자의 특정 상태에 스타일 하기위해 사용합니다. CSS3부터는 가상클래스는 :로(:hover, :active, 등) 시작하고, 가상요소는 ::로(::after, ::before, 등) 구분해요. * CSS2까지는 :after로 사용했지만 CSS3부터는 ::after로 사용하길 권장합니다. 1. 밑줄 생성 ::before와 ::aft..