본문 바로가기
크롬개발자도구를 알아보자 구글에서 만든 웹 브라우져인 크롬에는 개발을 도와주는 다양한 도구가 기본적으로 제공됩니다. 이를 개발자 도구라고 합니다. html, css, javascript의 개발을 위한 생산성 극대화가 가능합니다. 개발자를 위한 도구처럼 보이지만 html 스타일을 위한 크기, 간격, 색깔 등 정확한 값을 다루는 도구이므로 디자이너에게도 중요합니다. (1) 크롬 개발자 모드 변경 방법 크롬 개발자모드로 진입하는 방법을 몇가지 제공합니다. 웹사이트에서 F12를 누른다 웹사이트에서 오른쪽 버튼 클릭하여 검사 메뉴를 선택한다. 단축키를 사용 (윈도우: ctrl+shift+i , 맥: command+option+i) (2) 크롬 개발자 모드 메뉴 (3) 크롬 개발자 모드 설명 Elements # HTML 코드를 분석하고 실.. 2022. 1. 31.
html 시멘틱(semantic) 태그란? 시멘틱(semantic)의 뜻은 “의미론적인, 의미의” 입니다. html5에 도입된 시멘틱 태그는 개발자와 브라우져에게 의미있는 태그를 제공하게 됩니다. html4에서 자주 사용되는 태그는 non-semantic 태그 라고 합니다. html5에서 사용되는 , 등은 semantic 태그 입니다. 태그 만으로는 이 태그 안에 들어간 내용의 의미를 알 수 없음 그러나 ,등의 태그는 대략 태그 내용의 의미를 유추가능 시멘틱태그를 사용하는 이유 - SEO(검색엔진)이 html파일을 분석할 때 시멘틱태그를 통해 정확하게 컨텐츠 식별이 가능해 진다. - 웹 접근성을 강화시켜 장애를 가진 사람도 웹사이트를 쉽게 이용 가능 html4 에서는 header 나 footer를 표현하기 위해 태그를 사용하여 자유롭게 class.. 2022. 1. 28.
html 폼(form)태그의 GET방식과 POST방식 폼태그는 웹페이지에서의 입력 양식을 의미합니다. 웹 프론트단 개발시 로그인이나 등록화면에서 자주 사용하는데요 폼태그를 배울 때 중요한 것 중 하나는 폼태그의 method 속성을 이해하는 것입니다. Method방식에는 get방식과 post방식이 존재합니다. (1) GET 방식 parameter를 헤드에 붙여서 보내기 로서 URL에 노출되는 방법, 보안 취약 (예시) http://localhost/login.php?id=turtlecoding&pswd=turtlecoding (2) POST 방식 parameter를 바디에 붙여서 보내기 로서 URL에 안보임 (예시) http://localhost/login.php 일반적인 태그 예시 아이디 비밀번호 (3) 입력(input) 태그 개요 입력태그인 태그 다양하게.. 2022. 1. 28.
html 테이블(table)태그와 리스트(list)태그를 알아보자 html의 기본태그 중 하나인 테이블(table)태그를 알아봅니다. table태그는 표를 그리는 태그입니다. 간단합니다. 먼저 용어를 살펴보자면 아래와 같은 내용입니다. 이 중에서 가장 중요한 것은 태그입니다. 왜냐하면 tr은 행(table row)을 나태내며 이해하는 기준이 되기 때문입니다. 뭐든지 줄(라인)이 기준이죠? 거기서 출발하시면 됩니다. 샘플을 보시겠습니다. First name Last name Score Jill Smith 50 Eve Jackson 94 John Doe 80 (결과) 여기서 우리는 테이블에 대한 스타일(style)을 사용할 때 직접 테이블에 속성을 이용하지 말것을 html5 표준은 이야기합니다. html5 에서는 태그의 align, bgcolor, border, cellp.. 2022. 1. 28.
스크립트 선언방법 과 HTML파싱작업 ( ft.페이지로드가 느려지는 경우) html을 동적으로 만드는 방법은 바로 자바스크립트를 사용하는 것입니다. 그래서 자바스크립트 사용하기 위한 선언을 하는데요 이 선언 방법에 따라 전체적인 페이지 로드 속도가 좌우될 수 있는 부분이 존재합니다. 그래서 이번시간은 스크립트 선언방법과 스크립트 속성인 async 와 defer 에 대해서도 알아보겠습니다. 우선 브라우져에서 페이지 로드되는 순서를 알아보도록 하겠습니다. 1. 클라이언트 웹 페이지 접속 시 서버로 요청을 보낸다. (클라이언트는 웹 브라우저) 2. 서버에서 html파일을 응답하고 클라이언트는 html파일을 파싱한다. 3-1. DOM(Document Object Model)트리를 생성한다. 3-2. html 파싱에서 의 css파일 요청이 있다면 서버에 css 파일을 요청합니다. (스크.. 2022. 1. 26.
html에서 블록(block) 태그와 인라인(inline) 태그의 차이점 여기서는 html에서 블록태그와 인라인태그의 차이점에 대해서 간단히 알아보겠습니다. 이러한 블록과 인라인의 개념을 잡는 것이 나중에 css와 html을 잘 사용하는 좋은 방법이 됩니다 (1) html 블록(block) 태그 블록(block)형태의 속성을 가진 태그들이 블록(block)모양을 가집니다. 항상 새로운 줄에서 시작하며, 해당 줄의 모든 너비를 차지 (실습) p요소는 display 속성값이 블록형태입니다. (화면) (2) html 인라인(inline) 태그 인라인(inline)형태의 속성을 가진 태그들이 새로운 줄에서 시작하지 않음 해당 줄의 길이는 전체 중에 일부 내용만 가집니다. (실습) span태그는 display 속성값이 인라인형태 태그임 (화면) 자세한 것은 아래 영상을 참고하세요 2022. 1. 26.
HTML doctype tag 선언 방법 (html 4.01, xhtml 1.0, html 5) html 4.01 : 안정된 표준의 HTML의 버전이다. 이 버전에서는 CSS(Cascading Style Sheet)로 디자인적인 요소를 구분하게 되고, HTML로는 웹페이지의 전반적인 구조만을 명시하는 것을 원칙 추천 doctype 은 xhtml 1.0 : XML과 HTML을 합성하여 더 확장된 태그를 사용할 수 있으며, 문법은 정확히 지켜지지 않는다면 표현되지 않도록 문법 검사를 엄격하게 적용하였다. 이 새로운 웹의 표준이 XHTML이다. 추천 doctype 은 html 5 : W3C가 XHTML을 표준에서 탈락시키게 되고, WHATWG에서 정의한 표준을 따르기로 한다. 결론적으로 HTML5와 CSS3가 표준으로 확정되게 되고, 지금의 HTML5 표준이 완성 관련 영상 내용은 아래를 참조하세요 2022. 1. 25.
html5와 웹표준 SGML(Standard Generalized Markup Language) - HTML의 근본 먼저 처음에 HTML이 생겨나게 된 목적은 하나이다. 웹페이지의 컨텐츠들을 다양한 환경(브라우저)에서 열람을 해도 동일하게 볼 수 있도록 하나의 표현 언어를 생성할 필요성이 생겨난 것이다. 그 약속된 언어의 표현을 정의하려다 보니 이미 존재하는 SGML이라는 것이 눈에 띄었다. SGML(Standard Generalized Markup Language)이라는 것은 문서용 마크업 언어를 정의하기 위한 메타언어이다. 즉 웹페이지가 아니라 전반적인 모든 문서들을 표현하기에 알맞는 언어이다. 당시 웹페이지는 지금의 화려한 웹 페이지와는 달리 텍스트정보와 간단한 이미지가 결합된 형태로 정보를 제공하는 것이 그 목적이었.. 2022. 1. 25.
아마존의 면접 프로세스 와 STAR 답변 1. (아마존에선) 이력서 풀에서 지원자들을 선별했다면, 채용 관리자는 각 지원자와 '1시간짜리 전화 인터뷰'를 한다. 2. 전화 인터뷰를 하는 동안, 채용 관리자는 지원자에게 해당 직무를 상세히 설명하고, 지원자는 자신의 배경과 아마존에 지원한 이유를 이야기하면서 어느 정도 '유대감'을 형성한다. 3. 1시간 중 45분은 관리자가 지원자에게 질문을 하고 또 후속 질문은 던지며, 마지막 15분은 보통 지원자에게 질문할 기회를 주는 시간으로 쓰인다. 4. 이렇게 상세한 전화 인터뷰가 끝나면, 채용 관리자는 지금까지 수집한 데이터에 기반하여 지원자를 뽑고 싶은지 그렇지 않은지를 결정한다. 뽑고 싶은 후보자라면 대면 인터뷰에 임하라는 요청을 받을 것이다. 5. 더러 기업들 중에서는 지원자에게 확신이 들지 않을.. 2022. 1. 21.

티스토리툴바