연습장

브라우저란? 웹 브라우저는 인터넷을 통해 웹 페이지를 검색하고 표시하는 소프트웨어입니다.사용자가 입력한 URL을 기반으로 웹 서버로부터 데이터를 요청하고, 이를 화면에 렌더링하여 사용자가 볼 수 있도록 합니다. ex) 모질라 파이어폭스, 구글 크롬, 인터넷 익스플로러/마이크로소프트 엣지, 오페라, 삼성 인터넷, 사파리, 브레이브  사용자 인터페이스대부분의 웹 브라우저는 주소 표시줄(주소창)과 검색 상자(검색 엔진 사용 시), 뒤로/앞으로 이동하는 버튼, 새로 고침 버튼, 북마크 기능 등의 사용자 인터페이스 요소를 제공합니다.   보안 기능많은 웹 브라우저들은 사용자 개인 정보 보호를 위한 다양한 보안 기능을 제공합니다. 이는 HTTPS 프로토콜 지원, 쿠키 관리, 팝업 차단, 위조 사이트 경고 등을 포함..

https://poiemaweb.com/html5-tag-structure HTML5 Tag - Structure | PoiemaWeb웹페이지의 레이아웃을 구성하기 위해 공간을 분할하는 태그poiemaweb.com   공간을 분할할 수 있는 태그는 div, span, table 등이 있는데, 과거에는 table 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 div를 사용하여 레이아웃을 구성한다. 그런데 div 태그는 의미론적으로 어떠한 의미도 가지고 있지 않기 때문에 아래와 같이 HTML5에서 새롭게 추가된 시맨틱 태그를 사용하는 것이 더 나은 방법이나 IE 8버전 이하에서는 작동하지 않기 때문에 주의가 필요하다. header : 헤더를 의미한다nav : 내비게이션을 의미한다aside..

https://poiemaweb.com/html5-tag-forms HTML5 Tag - Forms | PoiemaWebform 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다.poiemaweb.com form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다. GET과 POST는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며 H..

https://poiemaweb.com/html5-tag-image-multimedia HTML5 Tag - Image & Multimedia | PoiemaWeb이미지의 표현과 동영상, 음악 등 멀티미디어를 지원하는 태그poiemaweb.com  img이미지를 삽입 attribute src : 이미지 파일 경로alt : 이미지 파일이 없을 경우 표시되는 문장width : 이미지의 너비 (CSS에서 지정하는 것이 일반적)height : 이미지의 높이  (CSS에서 지정하는 것이 일반적)    audioHTML5 에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다.src : 음악 파일 경로preload : 재생 전에 음악 파일을 모두 불러올 것인지 지정autoplay : 음악 파일을 자동의 재..

https://poiemaweb.com/html5-tag-list-table HTML5 Tag - List & Table | PoiemaWeb목록(List)와 표(Table) 형식 표현을 위한 태그 순서없는 목록 (Unordered List) 순서있는 목록 (Ordered List) 중첩 목록 테이블poiemaweb.com   ul 순서 없는 목록 ol 순서 있는 목록type 어트리뷰트를 사용하여 순서를 나타내는 문자를 지정가능1 : 숫자A : 대문자 알파벳a : 소문자 알파벳I : 대문자 로마숫자i : 소문자 로마숫자 apple banana orange    start 어트리뷰트로 리스트의 시작값을 지정할 수 있다.reversed 어트리뷰트를 지정하면 리스트의 순서값을 역으로 표현한다. 목록 태그는..

https://poiemaweb.com/html5-tag-link HTML5 Tag - Link | PoiemaWebHyperText의 Hyper는 컴퓨터 용어로서 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다. 이것은 HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존poiemaweb.com   HyperText 의 Hyper 는 컴퓨터 용어로서 텍스트 등의 정보가 동일 선상에 있는게 아니라 다중으로 연결되어 있는 상태를 의미한다.HTML 의 가장 중요한 특징인 link 의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성의 제약에서 벗어나사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다. 한 텍스트에서 다른 텍스트로 건..

제목 태그 headings 시맨틱웹의 의미를 살려 제목 이외에는 사용하지 않는 것이 좋다.h1 > h2 > h3 > h4 > h5 > h6  글자 형태 태그 b bold 체를 지정한다 strongbold 체를 지정한다. semantic 중요성의 의미를 갖는다.b tag 와 같지만 웹 표준에 더 바람직 i Italic 체를 지정한다.  ememphasized (강조, 중요한)  text 를 지정한다. semantic 중요성의 의미를 갖는다.i tag 와 같음 smallsmall text 를 지정한다 markhighlighted text 를 지정한다. (형광펜 효과) deldeleted (removed) text 를 지정한다.del text 효과 ins inserted (added) text 를 지정한다in..

https://poiemaweb.com/html5-tag-basic HTML5 Tag - Basic | PoiemaWeb문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 하며 대소문자를 구별하지 않는다. 문서별 기술 양식은 아래와 같poiemaweb.com  HTML5   HTML 4.01 http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.0http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  개인적으론 주로 HTML 5를 사용했다.    html 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. h..

검색 엔진은 웹사이트 정보를 수집하며 (크롤링) 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인) 를 만들어 둔다 (인덱싱)  인덱스를 생성할때 사용되는 정보는 웹 사이트의 HTML 코드이며즉, 검색 엔진은 HTML코드만으로 그 의미를 인지하여야 하는데, 이때 시멘틱 요소를 해석하게 된다.  HTML 으로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 자연어 문장이 뒤섞여 있다.  hello hello  1행의 요소는 의미론적으론 어떤 의미도 가지고 있지 않다. 의도가 명확하지 않다. 개발자가 의도한 요소의 의미를 명확하게 나타내지 않고 , 폰트 크기와 볼드체를 지정하는 메타데이터만 사용중 그러나 2행의 요소는 header 중 가장 ..

HTML 은 웹페이지를 기술하기 위한 마크업 언어이다. 웹 페이지의 내용(content) 와 구조(structure) 를 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것 HTML5 는 2014년 10월 28일 확정된 차세대 웹 표준으로 기능 추가 1. 멀티미디어 (Multimedia)- 플래시와 같은 플러그인의 도움 없이 비디오 및 오디오 기능을 자체적으로 지원한다 2. 그래픽 - SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL 을 사용한 3차원 그래픽을 지원한다 3. 통신- 지금까지의 HTML 은 단방향 통신만 가능하였으나 HTML5 는 서버와의 소켓 통신을 지원하여 양방향 통신이 가능하다.  4. 디바이스 접근- 카메라, 동작센서 등의 하드웨어 기능을 직접적으로 제어할 수 ..