티스토리

Jonghyun

검색하기

블로그 홈

Jonghyun

jong99.tistory.com/m

'20.12.01

구독자: 2

방명록 방문하기

주요 글 목록

[HTML] 사용자 입력 데이터 유형 (input type, label ) HTML에서는 다양한 타입의 form형태를 통해 input 요소를 이용하여 사용자로부터 입력을 받을 수 있다. input유형은 닫는 태그가 없으며 type, value, name속성이 있다. type : input 태그의 유형 vlaue : 사용자 세팅 초기값 id(name) : 서버에 전송될 input요소의 이름이며 이 요소가 있어야 브라우저가 해당 요소를 인식할 수 있다. input 유형 종류(input-type) 대표적인 HTML input type은 다음과 같다. 1.Text / 텍스트로 입력받을 수 있음 2.Radio / 단일 선택 체크박스 3.Checkbox / 다중 선택 체크박스 4.Submit / 폼 양식을 서버에 전송 5.Button / 버튼 6.Reset / 폼 초기화 7.File / .. 공감수 0 댓글수 0 2021. 1. 19.
[HTML] HTML5 블록 요소, 인라인 요소(Block Element, Inline Element) Inline & Block HTML의 태그는 블록 요소와 인라인 요소로 나눌 수 있다. 둘의 차이는 화면 출력의 성질이다. 블록성질의 태그는 화면의 한줄을 다 차지하는 것 인라인성질의 태그는 내용물의 크기만큼만 차지하는 것 블록 요소(Block Element) , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , 특징 하나의 그룹 컨텐츠는 한줄씩 표시 해당 줄의 전체너비를 채움 인라인 요소 모두 포함 가능(Block, Inline, Text) 대표적인 block 태그 div(division) - 특별한 기능이나 의미는 없으며 태그들을 단순 그룹화함 block tag로 선언한 element는 한줄을 전체 차지하는것을 볼 수 있다. 인라인 요소(Inl.. 공감수 0 댓글수 0 2021. 1. 12.
[HTML] HTML파일 경로(File Paths, 절대파일경로, 상대파일경로) 1.절대 파일 경로(Absolute File Paths) 절대 파일 경로는 전체 URL이다. 특징 어느 위치에서든 접근이 가능하도록 표기하는 경로 방식 주소의 길이가 길다 이전을 하게되면 주소의 업데이트가 반드시 필요 2.상대 파일 경로(Relative File Paths) 상대 파일 경로는 이미지를 삽입할 HTML 문서를 기준으로 경로를 인식함 위 예제에서는 현재 웹 루트에 있는 images 폴더의 파일을 가리킴 (이미지 파일이 HTML 문서와 같은 폴더에 있는지, 상위 폴더에 있는지 등을 따져보고 경로를 지정해줘야함) 만약 문서와 이미지 파일이 같은 경로에 있다면 이미지 파일명만 적어주면 되므로 문제가 되지 않으나 다른 폴더에 있다면 이 다른폴더에 위치를 지정해줘야함 상대 경로 표기 방식 ./ : 현.. 공감수 1 댓글수 0 2021. 1. 12.
[HTML] HTML5의 인코딩(Charset) 인코딩 인코딩이란 우리가 작성한 코드를 컴퓨터가 해석할 수 있도록 번환하는 작업이다. HTML 페이지를 올바르게 표시하기 위해선 웹 브라우저의 인코더 형식을 맞춰주어야 한다. 방법 문서 사이에 위 명령어를 입력하면된다. 오늘날 인터넷에서는 UTF-8 인코딩 방식을 가장 많이 채택하고 있어서 대부분의 charset 속성 값을 utf-8로 지정한다. 역사 과거에는 ASCII, ANSI, EUC-KR, CP949등 다양한 캐릭터셋이 있었고 이런 문자 코드들은 한정된 범위의 문자를 갖고있어서 다른 나라의 문자들을 표시할 수가 없었다. 이 때문에 전 세계의 모든 문자들을 컴퓨터에서 표현하고 다룰 수 있게 설계된 표준 규격이 바로 유니코드(Universal Coded Character Sety)이다. 이 유니코드 .. 공감수 0 댓글수 0 2021. 1. 11.
[HTML] HTML5 시멘틱 태그이란 (Semantic Elements) 시멘틱(Semantic)이란? 사전에 검색하면 '의미의, 의미론적인' 이란 결과를 얻을 수 있다. HTML에서는 웹페이지를 설계할 때 상단, 중단, 하단 등과 같이 구역을 그룹화하여 작업을 하는데 HTML5에서는 구역별 의미를 가진 이름을 고유한 태그로 도입하였다. 그 덕분에 브라우저와 개발자는 태그 안에 들어간 내용의 의미를 유추해가며 작업을 할 수 있다. Semantic Element : 의미적 요소 그룹화 의미를 부여하지 않는 Grouping태그와, 의미를 부여하는 Grouping태그로 나눌 수 있다. div, span : 의미를 부여하지 않고 단순 Grouping header, section : 의미를 부여하면서 Grouping - 특정 영역에 대한 의미를 부여하여 위의 header, sectio.. 공감수 0 댓글수 0 2021. 1. 10.
[HTML] HTML 북마크 만들기 북마크는 긴 웹페이지에서 유용하게 사용될 수 있다. 방법은 문서에서 하이퍼링크를 걸 때와 같다. 코드 내용 내용으로가기 예시 챕터 4 첫번째로, 북마크를 달고자 하는 대상의 태그에 id 속성을 만들어준다. 챕터 4로 가기 그리고 북마크가 필요한 부분에 id속성 값을 좌표로 하이퍼 링크를 달아준다. (id속성 값에 #을 꼭 넣어주어야 한다.) 챕터4로 이동 외부 링크를 통해서도 이동할 수 있다. 공감수 1 댓글수 0 2021. 1. 8.
[HTML] HTML 주석 (단축키) HTML주석 코드를 작성할 때 개발자가 볼 수 있도록 소스의 설명이나 혹은 후에 다시 사용하기 위한코드들을 동작에 반영되지 않게 할 수 있다. 안에 감싸는 것으로 주석처리는 완료된다. 단축키 단축키 : ctrl + / 다른 IDE에서도 통용되는 단축키이므로 기억해두자 위 내용을 주석처리하게되면 이와 같이 출력이 되지 않는다. 공감수 4 댓글수 0 2021. 1. 7.
[HTML] HTML YOUTUBE 동영상 올리기 (iframe 태그, 루프, 자동재생, 뮤트) 유튜브 동영상을 첨부하기 위해서는 iframe태그를 사용하여야 한다. 예시태그 유튜브에서는 이 기능을 제공하고 있어 편하게 퍼갈 수 있다. 영상의 공유버튼을 누르고 퍼가기 버튼을 클릭 위 소스코드를 복사해서 사용하고자 하는 곳에 붙여넣으면 된다. 예시 여기서 직접 수정하여 기능을 추가하고자 한다면 기존 유튜브 링크 주소 맨 뒤에 ?을 붙이고 속성을 추가해주면 된다. 여러 속성을 추가할 때에는 & 기호를 사용하자. https://www.youtube.com/embed/kamsx_g2hnI?mute=1&autoplay=1 iframe의 속성 src : 삽입 할 홈페이지 좌표 name : 프레임 이름 width : 프레임 가로 너비 height : 프레임 세로 길이 srcdoc : 직접 태그소스를 iframe.. 공감수 2 댓글수 0 2021. 1. 7.
[HTML] HTML<audio> 오디오올리기, audio태그와 속성 태그는 소리를 삽입할 수 있는 태그로 source태그와 src속성을 이용하여 좌표를 지정해준다. video 태그를 삽입할 때와 비슷하다. AUDIO태그의 속성 src : 오디오 파일의 주소 controls : 컨트롤러 표시 autoplay : 자동 재생 loop : 반복 재생 width : 가로길이 height : 세로길이 muted : 음소거 type : 타입 지정 (오디오 파일의 맞는 타입을 선언해 두는것을 권장) 예제 예제 코드 공감수 0 댓글수 0 2021. 1. 7.
[HTML] HTML <video> 동영상올리기, video태그와 속성 태그는 동영상을 삽입할 수 있는 태그로 source태그와 src속성을 이용하여 좌표를 지정해준다. 이미지 태그와 같은 방식으로도 표현할 수 있다. 비디오 태그에 사용하는 속성 src : 비디오 파일의 주소 controls : 컨트롤러 표시 autoplay : 자동 재생 loop : 반복 재생 muted : 음소거 poster : 영상의 첫화면 이미지로 표시할 사진 지정 (썸네일 지정) poster 사용법 예제 공감수 1 댓글수 0 2021. 1. 7.
[HTM] HTML <img> 이미지올리기, img태그와 속성 는 이미지를 삽입할 수 있는 태그로 src속성으로 좌표를 지정해준다. 빈속성으로 닫는 태그가 따로 없다. IMG태그 사용법 속성의 종류 src (이미지의 좌표) / source alt (대체 텍스트, 이미지에 대한 설명이며 이미지가 에러로 인해 출력되지 않을 시 alt 값 출력이며 구체적으로 표기해두는것을 권장) /alternative width (이미지의 가로 길이) height (이미지의 세로 길이) 위와 같이 img 태그를 태그로 감싸 이미지 링크를 만들 수 있다. 임의의 사진 출력 실습 코드샘플 공감수 0 댓글수 0 2021. 1. 7.
[HTML] HTML5 콘텐츠 모델 HTML5는 태그를 특성에 따라 Metadata, Flow, Sectioning, Heading, Phrasing, Embedded, Interactive 총 7개의 카테고리로 분류한다. 위의 이미지처럼 서로 겹치는 태그는 서로 간의 특성을 두루 갖고 있는 태그이다. 1. 메타데이터 콘텐츠 (Metadata Content) 메타 데이터는 데이터를 설명하는 데이터이다. 문서의 표현이나 동작을 설정하거나, 다른 문서와의 관계를 설정하고, 다른 문서에 정보를 전달한다. Head 영역 안에서 선언한다. , , , , , , , 2. 플로우 콘텐츠 (Flow Content) 본문(body태그) 안에서 사용되는 콘텐츠, 내용을 뜻하며 대부분의 콘텐츠를 포함하고 있다. Body 영역 안에서 선언한다. 3. 구획/섹션.. 공감수 0 댓글수 0 2021. 1. 7.
[HTML] HTML 엔터티 (Entity, Escape) HTML에서는 이미 문법적인 용도로 사용되고 있어서 특정 문자를 표기하지 못하는 경우가 있다. 예를 들어 텍스트에서 '' 기호를 사용하는 경우 태그로 인식되어 브라우저에서 출력 못하는 것 그래서 그 문자를 Entity 기능을 이용하여 출력을 한다. 자주 사용하는 HTML 엔터티 Result Description Entity Name Entity Number 띄어쓰기 $#160; 크다 > $#62; & 앰퍼샌드(AND) & $#38; " 큰따옴표 " $#34; ' 작은따옴표 ' $#39; ¢ 센트 ¢ $#162; £ 파운드 £ $#163; ¥ 옌 ¥ $#165 € 유로 € $#8364; © copyright(저작권) © $#169 ® Registered trademark symbol 등록된 상표 .. 공감수 0 댓글수 0 2021. 1. 7.
[HTML] HTML 텍스트 익혀보기 (위키백과의 HTML5 문서 만들어보기) 태그의 기능들은 w3schols.com의 HTML Tutorial을 통해 알아보며 codepen.io 사이트를 통해 출력 화면을 보며 실습해본다. 위키백과에 HTML5를 검색해서 윗 부분을 작성해보자. 제목 작성하기 우선 문서의 첫 부분에 HTML5라는 큰 굵은 글씨는 제목(heading) 태그 이다. 제목(heading) 태그 : h 수준(Leve) : 1 ~ 6 h1 ~ h6 : h1(큰제목), h6(작은 제목) -숫자가 커질수록 작은 수준의 제목이 된다. 그리고 제목 밑의 구분선 태그는 단락 태그에서 찾을 수 있다. 구분선 표시 태그 : hr / Horizontal Rules (Empty Elementy) * 구분선 표시 태그는 빈 태그로 종료 태그가 없음 구분선이 잘 추가됨 본문 내용 작성하기 구.. 공감수 0 댓글수 0 2021. 1. 6.
[HTML] HTML 기본 (정의, 요소, 빈요소, 구조, DOCTYPE, 속성) w3schols.com의 Learn html 기반으로 작성 HTML의 정의 HTML : Hyper Text Markup Language 하이퍼 텍스트 : 하이퍼링크를 포함해서 순차적으로 구성되지 않고 링크 연결 중심으로 구성된 문서 마크업 : 콘텐츠 영역을 표시함 HTML의 요소 (Element) HTML은 웹 페이지의 구조를 표현 HTML은 Element로 구성 (Element는 콘텐츠 영역을 표시하는 도구(표식) Element 표식은 브라우저에서 콘텐츠 종류를 알려주는 역할 : "이것은 ~콘텐츠이다" 요소(HTML Element) : 콘텐츠를 시작 태그와 종료 태그로 그루핑 하는 구성 예) 제목 여기서 종료 태그를 쓰지 않아도 일부 태그들은 정상출력이 되나 예기치 않은 오류를 방지하기 위해서는 종료태.. 공감수 0 댓글수 0 2021. 1. 6.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.