본문 바로가기

Front/HTML

 (15)
[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 / ..
[HTML] HTML5 블록 요소, 인라인 요소(Block Element, Inline Element) Inline & Block HTML의 태그는 블록 요소와 인라인 요소로 나눌 수 있다. 둘의 차이는 화면 출력의 성질이다. 블록성질의 태그는 화면의 한줄을 다 차지하는 것 인라인성질의 태그는 내용물의 크기만큼만 차지하는 것 블록 요소(Block Element) , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , 특징 하나의 그룹 컨텐츠는 한줄씩 표시 해당 줄의 전체너비를 채움 인라인 요소 모두 포함 가능(Block, Inline, Text) 대표적인 block 태그 div(division) - 특별한 기능이나 의미는 없으며 태그들을 단순 그룹화함 block tag로 선언한 element는 한줄을 전체 차지하는것을 볼 수 있다. 인라인 요소(Inl..
[HTML] HTML파일 경로(File Paths, 절대파일경로, 상대파일경로) 1.절대 파일 경로(Absolute File Paths) 절대 파일 경로는 전체 URL이다. 특징 어느 위치에서든 접근이 가능하도록 표기하는 경로 방식 주소의 길이가 길다 이전을 하게되면 주소의 업데이트가 반드시 필요 2.상대 파일 경로(Relative File Paths) 상대 파일 경로는 이미지를 삽입할 HTML 문서를 기준으로 경로를 인식함 위 예제에서는 현재 웹 루트에 있는 images 폴더의 파일을 가리킴 (이미지 파일이 HTML 문서와 같은 폴더에 있는지, 상위 폴더에 있는지 등을 따져보고 경로를 지정해줘야함) 만약 문서와 이미지 파일이 같은 경로에 있다면 이미지 파일명만 적어주면 되므로 문제가 되지 않으나 다른 폴더에 있다면 이 다른폴더에 위치를 지정해줘야함 상대 경로 표기 방식 ./ : 현..
[HTML] HTML5의 인코딩(Charset) 인코딩 인코딩이란 우리가 작성한 코드를 컴퓨터가 해석할 수 있도록 번환하는 작업이다. HTML 페이지를 올바르게 표시하기 위해선 웹 브라우저의 인코더 형식을 맞춰주어야 한다. 방법 문서 사이에 위 명령어를 입력하면된다. 오늘날 인터넷에서는 UTF-8 인코딩 방식을 가장 많이 채택하고 있어서 대부분의 charset 속성 값을 utf-8로 지정한다. 역사 과거에는 ASCII, ANSI, EUC-KR, CP949등 다양한 캐릭터셋이 있었고 이런 문자 코드들은 한정된 범위의 문자를 갖고있어서 다른 나라의 문자들을 표시할 수가 없었다. 이 때문에 전 세계의 모든 문자들을 컴퓨터에서 표현하고 다룰 수 있게 설계된 표준 규격이 바로 유니코드(Universal Coded Character Sety)이다. 이 유니코드 ..
[HTML] HTML5 시멘틱 태그이란 (Semantic Elements) 시멘틱(Semantic)이란? 사전에 검색하면 '의미의, 의미론적인' 이란 결과를 얻을 수 있다. HTML에서는 웹페이지를 설계할 때 상단, 중단, 하단 등과 같이 구역을 그룹화하여 작업을 하는데 HTML5에서는 구역별 의미를 가진 이름을 고유한 태그로 도입하였다. 그 덕분에 브라우저와 개발자는 태그 안에 들어간 내용의 의미를 유추해가며 작업을 할 수 있다. Semantic Element : 의미적 요소 그룹화 의미를 부여하지 않는 Grouping태그와, 의미를 부여하는 Grouping태그로 나눌 수 있다. div, span : 의미를 부여하지 않고 단순 Grouping header, section : 의미를 부여하면서 Grouping - 특정 영역에 대한 의미를 부여하여 위의 header, sectio..
[HTML] HTML 북마크 만들기 북마크는 긴 웹페이지에서 유용하게 사용될 수 있다. 방법은 문서에서 하이퍼링크를 걸 때와 같다. 코드 내용 내용으로가기 예시 챕터 4 첫번째로, 북마크를 달고자 하는 대상의 태그에 id 속성을 만들어준다. 챕터 4로 가기 그리고 북마크가 필요한 부분에 id속성 값을 좌표로 하이퍼 링크를 달아준다. (id속성 값에 #을 꼭 넣어주어야 한다.) 챕터4로 이동 외부 링크를 통해서도 이동할 수 있다.
[HTML] HTML 주석 (단축키) HTML주석 코드를 작성할 때 개발자가 볼 수 있도록 소스의 설명이나 혹은 후에 다시 사용하기 위한코드들을 동작에 반영되지 않게 할 수 있다. 안에 감싸는 것으로 주석처리는 완료된다. 단축키 단축키 : ctrl + / 다른 IDE에서도 통용되는 단축키이므로 기억해두자 위 내용을 주석처리하게되면 이와 같이 출력이 되지 않는다.
[HTML] HTML YOUTUBE 동영상 올리기 (iframe 태그, 루프, 자동재생, 뮤트) 유튜브 동영상을 첨부하기 위해서는 iframe태그를 사용하여야 한다. 예시태그 유튜브에서는 이 기능을 제공하고 있어 편하게 퍼갈 수 있다. 영상의 공유버튼을 누르고 퍼가기 버튼을 클릭 위 소스코드를 복사해서 사용하고자 하는 곳에 붙여넣으면 된다. 예시 여기서 직접 수정하여 기능을 추가하고자 한다면 기존 유튜브 링크 주소 맨 뒤에 ?을 붙이고 속성을 추가해주면 된다. 여러 속성을 추가할 때에는 & 기호를 사용하자. https://www.youtube.com/embed/kamsx_g2hnI?mute=1&autoplay=1 iframe의 속성 src : 삽입 할 홈페이지 좌표 name : 프레임 이름 width : 프레임 가로 너비 height : 프레임 세로 길이 srcdoc : 직접 태그소스를 iframe..

티스토리툴바