지니리 개발일지

HTML5에 새롭게 추가된 태그는 주로 자바스크립트와 같은 스크립트를 이용하여 그래픽 콘텐츠를 그릴 때 사용한다. 그래픽 콘텐츠를 위한 컨테이너일 뿐 실제로 그림을 그리는 동작은 스크립트를 사용하여 구현한다. 해당 브라우저가 요소를 지원하지 않을 경우 내부에 존재하는 텍스트는 브라우저 화면에 대신 나타나게 된다. canvas.html index.js const canvas = document.getElementById('myCanvas'); const context = canvas.getContext('2d'); function drawCanvas() { context.beginPath();// 그리기 시작 context.rect(0, 0, canvas.width, canvas.height); conte..

태그 | 입력 양식, 웹 입력 양식 동작 구조 (get, post) 태그 | type속성 | text, password, submit, button, number | 비밀번호, 체크박스, 숫자 범위 지정, 숫자 지정 checkbox, radio, select checkbox: 복수 선택 가능한 체크 박스 radio: 복수 선택 불가능한 라디오 버튼 생성 select: 선택지 I have a bike I have a car I have a boat HTML CSS Javascript Volvo Tesla Audi Benz Hyundai

표를 만들기 위해서는 태그를 사용한다. 태그는 행(row)을 정의 태그는 각 행에서 칸(열 column)을 나누는 기능 태그는 제목에 해당하는 열을 정의 테이블 태그에는 테두리 두께를 지정하는 border등 다양한 속성이 있으나 가급적이면 기본 태그로 컬럼과 로우 구조를 만드는 정도만 사용하고 CSS를 사용해 디자인 요소를 지정하는 것이 올바른 방법이다. colspan을 사용하여 열을 확장하며 rowspan을 사용하여 행을 확장 테이블의 경계선 두께 지정을 위해 border속석을 사용 레이아웃을 목적으로 테이블을 사용하는 것은 권장 안함. 일반적으로 테이블은 다음과 같이 구성이 된다. title1title2title3 description1description2description3 description..

이미지 태그 웹 화면에 이미지를 넣기 위해서는 태그를 사용한다. src속성으로 이미지 경로를 지정한다. alt속성은 그림이 렌더링되지 못할 때 나타낼 문자열을 지정하기 위한 값이다. 텍스트가 아닌 이미지로 하이퍼링크 기능을 구현할 수 있고 이 경우 형식으로 사용되면 된다. width와 height로 이미지의 가로, 세로 길이의 픽셀(pixel) 단위 지정. % 단위 사용시 브라우저 크기에 따라 이미지 크기가 조절 됨. 이미지의 경로 이미지 경로는 태그와 마찬가지로 상대 경로 및 절대 경로를 사용한다 src는 필수 속성으로 이미지의 경로를 지정한다. 상대경로 현재 html 파일을 기준으로 한 경로. 현재 파일과 같은 위치에 img라는 폴더가 있고 그 안에 hello.jpg라는 파일이 있을 때는 ./hell..

하이퍼링크는 웹의 대표적인 특징으로 (Anchor)태그를 사용해 만들 수 있다. href속성을 사용해 이동할 콘텐츠의 주소를 기술하면 된다. 이동할 콘텐츠는 html 파일이나 이미지 혹은 .hwp, .pdf 등 모든 파일이 될 수 있으며 url을 이용해 서버의 콘텐츠를 지정하거나 프로그램을 호출하는것도 가능하다. 다른 서버 컨텐츠로 이동하는 것이라면 href에 https:// 로 시작하는 url이 들어가야 한다. href에 들어가는 이동할 콘텐츠의 위치는 상대 경로와 절대 경로로 표현할 수 있다. 내 컴퓨터가 아니라 html을 서비스하고 있는 웹서버 컴퓨터에서 콘텐츠간의 위치 이므로 개념을 잘 이해해야 한다. 링크 텍스트 다음 홈페이지로 이동 target 속성은 브라우저 윈도우 옵션 값을 정하는 속성이다..

인라인 태그는 구성요소들이 나란히 배치될 수 있는 태그를 말합니다. , , 등의 태그가 대표 적임. 예를 들어 사진1: 과 같이 했을 때 텍스트와 사진이 나란히 배치됨. This is an inline span Hello Worldelement inside a paragraph. The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary. 형식태그 형식 지정 태그들은 텍스트에 의마와 함께 효과를 부여한다. 텍스트를 굵게 출력하는 , , 텍스트를 기울여 보여주는 , , 하이라이트 표시를 위한 , 문장의 취소 선을 표시하는 등이 있다. 는 텍스트가 중요하지 않..

목록 태그는 최신 HTML5 문서 작성에 있어 매우 중요한 태그 중 하나 이다. 카페나 블로그의 포스트 목록, 쇼핑몰의 목상품 목록, 뉴스기사 목록 등 많은 웹 콘텐츠가 목록의 형태를 취하고 있기 때문에 이들을 표현하기 위한 목록 태그는 레이아웃 지정을 위해 사용하는 와 함께 가장 많이 사용되는 태그 중 하나 이다. 목록을 만들기 위해서는 기본적으로 또는 태그를 사용하며 각각의 목록 아이템을 태그를 사용한다. 단순한 리스트 나열 뿐 아니라 메뉴를 만들 때에도 사용한다. Ordered List 로 번호를 메기는 순서가 있는 목록을 만든다. Unordered List로 순서없이 모양으로 목록을 만든다. An Unordered HTML List Apple Microsoft Amazon An Ordered HT..

블럭은 태그 구성 요소들이 라인 전체를 차지해서 한 줄에 여러 요소가 위치하지 못하는 태그를 말한다. , , , , ~ 등의 태그가 대표적이다. 예를 들어 Helloworld 라고 작성 했을 때 world는 다음 줄에 표시된다. 1. 제목 태그 콘텐츠의 제목들을 표시할 때 사용할 수 있는 태그로 문서내 콘텐츠들의 대>중>소 제목으로 이루어진 문서 구조를 표현하기 위한 용도로 사용된다. 태그는 heading 이라고 하며 ~까지 있는데, 숫자들은 제목의 레벨을 나타낸다. 이 가장 높은 레벨로 크기가 가장 크며 이 가장 낮은 레벨로 크기가 가장 작다. 그러나 CSS font-size 속성을 사용하여 style 속성으로 제목의 크기를 지정할 수 있다. 2. 문단 태그 태그는 pragraph 로 문단을 구문하기 ..

첫 과제겸 실습은 교수님께서 보여주신 화면을 똑같이 만드는 것이었다. HTML 의 기본 태그인 블럭(block) 태그와 인라인(inline) 태그를 이해하면 풀 수 있는 것이었고, 바로 아래 화면이 나의 결과물이다. 과제를 해보면서 느낀 '내가 알아야 할 것' 블럭(block) 태그를 이해했는가: 제목 태그~, 문단 태그태그와 태그의 차이 인라인(inline) 태그를 이해했는가: 를 통한 하이퍼링크, 의 상대경로와 절대경로 사용법 등, 형식태그 태그 사용, 입력 양식 태그태그 중 태그 사용 과제를 해보면서 어려웠던 점과 느낀점 처음 과제를 하면서 못하거나 막히는 부분은 없었다. 다만 과제 화면을 띄어주셨을 땐 좀 당황했었다. 나는 분명 수업 때 강의를 이해하고, 수업을 따라 같이 연습도 해봤는데 막상 나..