연습장

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. 디바이스 접근- 카메라, 동작센서 등의 하드웨어 기능을 직접적으로 제어할 수 ..

프론트엔드 개발자가 하는일 1.  애플리케이션을 사용하는 사람, 유저가 애플리케이션과 소통하기 위한 창구( User Interface )를 사용하기 좋게 구현한다. 2. UI 는 상태정보를 서버로 전송하기도 하고 서버의 데이터를 가져와서 UI 에 표시하기도 한다. -> 서버와 연동하여 데이터를 주고받도록 함 3. 디자이너, 백엔드 개발자와의 협업 HTML : tags & attributes, Semantic web CSS : Layout (float, flex, grid) , transition/ animation, 반응형 웹, Preprocessor ( Sass, PostCSS) ,CSS 방법론, CSS 프레임워크 크로스 브라우징 JavaScript : ES5, ES6, ES Next, DOM/Even..