테크노트/html15 크롬개발자도구를 알아보자 구글에서 만든 웹 브라우져인 크롬에는 개발을 도와주는 다양한 도구가 기본적으로 제공됩니다. 이를 개발자 도구라고 합니다. html, css, javascript의 개발을 위한 생산성 극대화가 가능합니다. 개발자를 위한 도구처럼 보이지만 html 스타일을 위한 크기, 간격, 색깔 등 정확한 값을 다루는 도구이므로 디자이너에게도 중요합니다. (1) 크롬 개발자 모드 변경 방법 크롬 개발자모드로 진입하는 방법을 몇가지 제공합니다. 웹사이트에서 F12를 누른다 웹사이트에서 오른쪽 버튼 클릭하여 검사 메뉴를 선택한다. 단축키를 사용 (윈도우: ctrl+shift+i , 맥: command+option+i) (2) 크롬 개발자 모드 메뉴 (3) 크롬 개발자 모드 설명 Elements # HTML 코드를 분석하고 실.. 2022. 1. 31. 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. 초보개발자가 알아야 하는 HTML 기초 HTML은 웹페이지를 만드는 언어입니다. 웹페이지에서 서로간에 이해할 수 있는 문서 표준이 HTML 입니다. HTML은 Hypertext Markup Language 의 약자입니다. Hypertext : 문서와 문서가 링크로 연결되어 있다는 의미 Markup : 태크(Tag)를 사용해 구성 Language : 언어라는 의미 우리가 알아야 할 것은 바로 HTML 문법이며 사용법입니다. 태크(tag)는 에서 시작하여 로 마무리 되겠습니다. 마찬가지로 다른 대다수의 태그(tag)들도 이와 같이 시작태그에서 마침태그로 완성 되겠습니다. 그렇다면 기본적인 HTML의 작성 예시를 보겠습니다. HELLO, HTML 이번시간 html 요약 시간으로 html은 크게 헤드와 바디로 구성된다는 것만 알아두면 됩니다. 헤드 .. 2022. 1. 7. 웹(Web)의 이해 이번시간에는 웹개발을 하기 전에 알아야할 기본적인 웹의 이해와 웹의 동작등에 대해 이야기하겠습니다. 웹을 이해하기 전에 우선 클라이언트와 서버에 대해서 알아야합니다. 클라이언트(client)는 요청자, 손님, 고객, 엔드유저 등이라고 말할 수 있고 서버(server)는 봉사자, 정보제공자, 백엔드 등이라고 표현합니다. 이들의 관계는 요청과 응답으로 이루어져 있습니다. 즉, 클라이언트가 요청하면 서버는 해당 정보를 응답해 주는 구조입니다. 우리가 인터넷을 하기 위해 웹브라우져를 열고 특정 URL (www.google.com)을 호출하면 자신은 클라이언트로서 요청한 것이고 해당 서버는 요청한 내용에 대해 응답을 해주어야 합니다. 모든 서버는 자신의 주소인 IP주소를 가지고 있습니다. 그런데 IP주소는 외우기.. 2022. 1. 6. 이전 1 2 다음
