본문 바로가기

html5

[프론트엔드 개발자 면접 문제 02] 인라인 요소와 블록 요소 HTML의 태그에는 인라인 요소와 블록 요소로 이루어져 있습니다. 이것에 대해 제대로 숙지하지 않으면 CSS가 제대로 먹히지 않습니다. 하지만 이것보다 더 큰 문제는 각 요소를 제대로 파악하지 않으면 HTML의 문서 흐름을 방해하고... 만약 면접관이 직접 만들어보라고 했을 때 인라인 요소 안애 블록 요소를 넣는다? 당신의 면접에 아주 악영향을 줄 것입니다... 블록요소와 인라인 요소를 구분하자면 다음과 같습니다. 블록요소 1. 줄 바꿈이 일어남. 2. 블록 요소 안에는 텍스트와 인라인 요소를 포함할 수 있음 3. 블록 요소 안에 또 다른 블록 요소를 포함할 수 있음 블록요소의 종류 address,article,aside,audio,blockquote,canvas,dd,div,dl, fieldset,fi.. 2020. 6. 28.
[html] form 태그에 대해 알아보자 / POST와 GET 차이 태그는 웹 페이지에서의입력 양식을 말한다. 로그인 창이나, 회원가입 폼 등이 바로 태그를 사용하고 있습니다. 이 태그는 입력된 데이터를 한 번에 서버로 전송합니다. 백엔드를 공부하시는 분들도 이 태그에 대해서는 자세히 알아두는 것이 좋습니다. 폼 태그의 기본적인 구성은 다음과 같습니다. First name: Last name: 여기서 을 구성하는 요소들을 하나씩 살펴보도록 하겠습니다. action : 폼을 전송할 서버 쪽 스크립트 파일을 지정 name : 폼을 식별하기 위한 이름 method : 서버에 전송할 http 메소드 (GET 또는 POST) input의 type : 입력받을 요소의 종류를 정한다. number, text, password 등. 반드시 맞는 것으로 입력해 둘 것! label : 폼.. 2020. 2. 15.
[html/javascript] CANVAS 알아보기 / 기본 사용법 & svg와 성능 비교 HTML5 : Canvas canvas 는 페이지에 그래픽적인 요소를 그릴 때 사용되는 html5 의 새로운 태그이다. 먼저 html 문서에 다음과 같이 를 삽입한다. 위의 요소를 js를 통해 찾아 제어하는 것이 canvas 의 기본적인 동작이다. const canvas = document.querySelector("canvas"); const context = canvas.getContext("2d"); 캔버스에 어떤 요소를 그리기 위해서 가장 처음으로 getContext()를 사용하여 위치를 정의할 필요가 있다. 기본적으로 2d로 정의되며, 위 요소를 사용하면 canvas에 2d 좌표로 위치를 지정할 수 있게 된다. beginPath(); 도형을 그리기 전에 지정해줌 closePath() : 도형의 .. 2020. 1. 23.
[html] form 태그 공부 FORM Tag HTML에서의 입력 양식 action 폼을 전송할 서버 쪽 스크립트 파일 저장 name 폼을 식별하기 위한 이름 지정 accept-charset 폼 전송에 사용할 문자 인코딩 지정 target action에서 지정한 스크립트 파일을 다른 위치에서 열도록 지정 ex)_blank method 폼을 서버에 전송할 메소드를 정함 get 이나 post get과 post 방식의 차이 폼을 구성하는 엘리먼트 fieldset : 폼 태그 안에 관련있는 폼 엘리먼트를 그룹화 할 때 사용. legend 태그를 하위에 사용하여 그룹화 한 폼을 목적에 맞게 이름을 지정할 수 있다. 개인 정보 입력 이름 : 나이 : 개인 정보 입력 이름 : 나이 : tag 속성 type : 태그 모양을 다양하게 변경할 수 있습.. 2019. 8. 18.
프론트엔드 개발자 면접 질문 모음 HTML window 객체란 무엇입니까? window 객체 : 실행 시 가장 상위에 존재하는 객체. 변수 또는 함수 선언 시 이 window 객체 안에 선언된다. 이 window 객체의 프로퍼티를 탐색하는 방법에는 여러가지가 있다. window.location : 현재 브라우저의 주소 window.location.href : 창에 입력된 주소 window.navigator : 브라우저 자체에 대한 정보 window.document : 문서의 html/css등에 접근가능 자세한 설명 [프론트앤드 개발자 면접질문 모음] 01. window 객체란 무엇일까? 안녕하세요. 제가 블로그 포스팅을 하는 것 중에 프론트앤드 개발자 면접질문 모음이라는 포스팅이 언제나 가장 많은 조회수를 차지하고 있더라고요. 🤔그런데 .. 2019. 8. 15.