지니리 개발일지

word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성이다. break-all : 글자 기준으로 줄바꿈 keep-all : 단어 기준으로 줄바꿈 .block-hash { word-break: break-all; } 나는 프로젝트에서 hash값이 하나의 긴 단어로 되어있기 때문에 break-all을 사용했다. 덕분에 반응형도 잘 작동한다.

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 | 비밀번호, 체크박스, 숫자 범위 지정, 숫자 지정 태그 | type속성 | checkbox, radio, select | 체크박스, 중복체크, 선택지 date 날짜 선택이 가능한 속성으로 min, max를 지정할 수 있다. Brithday Enter min date Enter max date week Select Week month 월까지만 선택이 가능하다 Birthday(month and year) : time 시간 선택이 가능 Select a time

태그 | 입력 양식, 웹 입력 양식 동작 구조 (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

입력 양식은 입력 양식의 최상위 요소로 다른 입력 양식을 포함해야하는데 태그는 가장 많이 사용하는 입력 양식 태그이며 대부분의 입력 기능을 제공한다. type속성으로 입력 양식의 종류를 나타냄 name속성으로 서버에 전송될 데이터 이름을 지정 value속성은 기본 입력 값을 지정할 때 사용 placeholer는 입력 항목에 대한 설명문을 넣을 때 사용 html5에서는 이외에 특정 데이터 타입에 따라 좀 더 편하게 입력할 수 있는 type들이 제공된다. 예를 들어 color색상 선택을 위해 별도의 색상 선택 박스가 나오게 되고 date의 경우 날짜 입력을 위해 달력이 나오는 형식이다. 이들 유형들은 브라우저에 따라 지원이 안되는 경우도 있고 모양이 다르므로 참고해야한다. text, password, sub..

입력 양식 태그는 사용자 입력을 처리한다. 회원가입이나 게시글 포스팅 등 무언가를 입력해서 서버로 전송하거나 상품 주문시 옵션을 선택하고 주소를 입력하고 주문 버튼을 누르는 등의 모든 화면들이 입력 양식에 해당한다. 은 입력 양식의 최상위 요소로 다른 입력 양식을 포함. 입력 양식은 웹에서 사용자에게 정보를 입력 받을 때 사용하는 사용자 인터페이스(UI)를 말함. 기본적으로 태그가 사용되면 태그 내부에 다양한 형식의 입력 양식 태그들을 사용해 화면을 구상 기본적으로 텍스트 입력, 선택, 버튼, 파일첨부 등이 가능 버튼의 경우 이벤트 처리를 위해 자바스크립트와 연동 파일 청부의 경우 서버에서 파일 업로드를 위한 별도 구현이 되어 있어야함 ... 웹 입력 양식 동작 구조 태그를 통해 작성된 입력 양식은 최종..

표를 만들기 위해서는 태그를 사용한다. 태그는 행(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. 형식태그 형식 지정 태그들은 텍스트에 의마와 함께 효과를 부여한다. 텍스트를 굵게 출력하는 , , 텍스트를 기울여 보여주는 , , 하이라이트 표시를 위한 , 문장의 취소 선을 표시하는 등이 있다. 는 텍스트가 중요하지 않..