본문 바로가기

Language/HTML

 (12)
<HTML 기초> 12. HTML 문서 구조와 메타데이터 이번 장에서는 가장 기본적이고 중요한 문서 구조에 대해서 알아보자. HTML문서는 기본적으로 가장 처음에 Doctype을 선언해야한다. 을 통해 이 문서가 HTML5로 작성되었다고 선언하는 것이다. 이는 비주얼스튜디오 코드에서 !(느낌표)를 치고 엔터를 치면 간단하게 기본적인 문서구조와 함께 작성된다. 이는 아래와 같다. HTML문서에서 가장 먼저 나와야 하는 태그는 html태그이다. 속성으로 lang을 통해 영어면 “en”을 한국어면 “ko”를 줄 수 있다. 그리고 html태그의 자식으로는 harry 안녕하세요 해리입니다. 먼저 다양한 메타데이터들을 살펴보자. 메타데이터는 타이틀이나 링크, 스타일 등으로 못받는 그야말로 잡다한 데이터들이다. name이라는 속성으로 메타데이터의 종류를 지정한다. 가장 중..
<HTML 기초> 11. 기타 태그 이번 장은 지금까지 다루지않았던 다른 태그들이다. 크게 어렵지 않지만 유용하고 사용자의 편의성을 높이는 데 기여한다. 가장 먼저 abbr태그이다. 이는 abbreviation의 약자로 '약자'를 나타낼 때 쓰인다. ADsP자격증 취득은 해리의 기술 블로그에서 공부합시다 위는 p태그 안에 "ADsP자격증 취득은 해리의 기술 블로그에서 공부합시다"를 넣기위해 작성했다. 그러나 ADsP는 약자이며 이를 모르는 사용자가 존재할 수 있다. 그렇기 때문에 abbr태그를 사용하고 title 속성을 통해 풀네임을 명시해준다. 그러면 아래와 같이 나타난다. 마우스를 ADsP에 가져다대면 위와 같이 title속성에 적은 풀네임이 뜨게 된다. 다음 태그는 address태그이다. 말그대로 어떤 주소를 명시하기위해 사용하는 태..
<HTML 기초> 10. 미디어 삽입 미디어 삽입은 앞서 사진을 삽입할 때 배웠다. 태그를 넣는 방식도 거의 같다. 오디오 태그는 다음과 같이 삽입한다. 보다시피 이미지 태그와 거의 같다. src에는 소스 값으로써 링크나 경로를 입력한다. controls 속성은 재생컨트롤러를 보여주는 속성이다. autoplay속성으로 자동재생을 시킬 수 도 있고 loop 속성으로 반복재생을 설정할 수도 있다. 위는 다음과 같이 작성할 수도 있다. 화면에 보이는 것은 동일하다. 현재 브라우저에서는 해당 오디오파일을 지원하지 않습니다. 위의 코드와 다른점은 소스를 따로 작성했다는 것이다. 소스를 세개나 작성한 이유는 브라우저에서 해당 확장자를 지원하지 않을 때 다른 파일을 보여주기 위함이다. 참고로 type은 확장자 별로 다르므로 구글링을 권장한다. 태그가 삽..
<HTML 기초> 09. 테이블 (표) 이번 시간에는 HTML에서 표를 마크업해보자. 우리가 작성하려는 표는 다음과 같다. 표를 작성하기에 앞서 태그들을 먼저 알아보자. 표를 작성하려면 가장 먼저 태그를 작성해야 한다. 그 아래에 태그를 통해 한 줄 씩 채워나가는 방식이다. 태그 안에는 와 로 내용을 채운다. 위를 마크업 하면 다음과 같다. 윤해리 시간표 월 화 수 목 금 1교시 초등 국어 초등 수학 바른 생활 초등 국어 초등 수학 2교시 과학 3교시 음악 체육 컴퓨터 음악 체육 4교시 초등 수학 초등 국어 안전 생활 초등 수학 초등 국어 점심시간 5교시 초등 수학 초등 국어 초등 국어 초등 수학 초등 국어 매우 길지만 차근차근 알아보자. table 태그의 직계자손으로 thead와 tbody를 선언해주었는데 이는 컴퓨터에게 어디가 본문이고 제..
<HTML 기초> 08. 텍스트창 · 버튼 이번에는 input태그의 마지막으로 텍스트창과 버튼을 알아보자. 성격의 장단점 비교를 위해서 텍스트 타입도 입력해주었다. 구분을 위해서 br태그도 임시로 주었다. textarea태그는 input태그와 다르게 열고 닫음이 있다. textarea는 텍스트타입과는 다르게 여러 줄을 입력받을 수 있는 텍스트 창임을 알 수 있다. 다음은 마지막 폼형식의 태그로써 버튼을 알아보자. 출신 고등학교 서울 부산 기타 검색 수정 제출 버튼에 앞서 select 태그를 입력하였다. 셀렉트태그는 풀다운 메뉴를 보여주는 태그이다. 태그안에 option 태그를 통해 간단하게 메뉴들을 구성할 수 있다. select에 name과 id를 설정하였으므로 자식태그인 option은 자동으로 따라간다. 그러나 value는 개별로 설정하여야한다..
<HTML 기초> 07. 라디오 · 체크 박스 이번 시간에는 저번 글에 이어서 폼형식에서의 라디오박스와 체크박스를 배워보자. 모두 같은 input 태그이다. 즉 사용자에게 정보를 받기위한 목적이라는 것이다. 라디오박스는 하나만 선택하게 받는 박스이다. 주로 우리가 원형의 체크박스로 알고 있는 것이다. 공부하기 놀러가기 태그이며 타입을 radio로 하면 라디오박스가 생긴다. 이전 장에서 배웠듯이 id와 레이블의 for속성을 연결시켜준다. value는 서버에 전송할 값이라고 생각하면된다. 공부하기를 클릭했다고 공부하기라고 전송하는 것이 아니라 1 이라는 값만 전송하는 것이다. 라디오 박스는 하나만 선택되게 하는 것이 목적이다. 그러나 name을 지정하지 않으면 중복선택이 가능하다. 그 이유는 컴퓨터에게 같은 그룹이라고 알려주지 않으면 모르기 때문이다. ..
<HTML 기초> 06. 인풋 · 레이블 이번에 배운 내용은 폼형식에서 인풋과 레이블이다. 인풋은 사용자에게 정보를 받기위해 사용하는 태그라고 이해하면 된다. 레이블은 그러한 인풋을 연결지어 설명해주는 역할이라고 볼 수 있다. 회원가입 이름 제목을 회원가입이라고 하고 살펴보자. 먼저 form을 형성해주었다. form은 사용자에게 정보를 받는 것이 목적이다. 따라서 action속성을 통해 API를 입력해야한다. 그렇게 해야 사용자의 정보를 우리의 서버로 가져올 수 있다. 그러나 여기서는 패스하겠다. 그리고 method 속성은 GET | POST 가 있다. GET과 POST모두 데이터를 전송하는 방식이다. GET은 URL에 정보를 담아서 보내는 방식이다. 길이에 제한이 있을 수 있다. POST는 body에 담겨서 전송되는 방식이다. 따라서 URL에..
<HTML 기초> 05. 태그 : 인용 이번에 살펴볼 태그는 인용태그이다. * 인용 지나온 길을 돌아볼 때 필요한 건 후회가 아닌 평가이고, 앞으로의 길을 내다볼 때 필요한 건 걱정이 아닌 판단이다. 언어의 온도 中 어느 기업에서 글쓰기 강연을 마치고 화장실에 들어 갔다. 이런 문구가 적혀 있었다. 화장실을 깨끗하게 사용해주세요. 이곳을 청소해주시는 분들, 누군가에겐 전부인 사람들입니다. - 먼저 인용은 를 열고 닫으며 사용할 수 있다. - 이 때 속성으로 cite를 주어 출처 링크를 삽입할 수 있다. 예시는 그냥 표시만 해뒀다. - 태그를 통해 출처를 명시할 수 있다. - 태그는 문단 내에서 인용을 표시하는 방법이다. ※ html문서에서 특수문자를 인식시키려면 특수문자의 엔터티이름이나 엔터티번호로 표시해야한다. 위를 웹페이지로 보면..
<HTML 기초> 04. 태그 : 리스트 이번에 알아볼 내용은 리스트 태그이다. 리스트는 크게 ul(Unordered List), ol(Ordered List), dl(Description List)가 있다. * 목록 리스트 먼저 ul태그와 ol 태그를 알아보자. 비식별 기술 비식별 기술 데이터 마스킹 가명 처리 총계 처리 데이터값 삭제 데이터 범주화 - 태그는 열고 닫는 태그이며 자식태그로 오직 태그만 가질 수 있다. - 태그는 각각의 목록을 나타낸다. 따라서 다음과 같이 표현된다. - 순서가 별도로 없는 목록이 보여짐을 알 수 있다. 다음은 태그의 예시이다. 빅데이터 분석 방법론 분석 기획 데이터 준비 데이터 분석 시스템 구현 평가 및 전개 - 태그도 열고 닫으며 반드시 자식태그는 태그만을 가진다. - 위와 같이 태그는 순서가 표시된다. -..
<HTML 기초> 03. 태그 : 링크 · 이미지 이번에 공부해 볼 내용은 링크와 이미지 태그이다. * 앵커태그 Welcome! Hi! I'm Harry. Welcome to my blog. MAIL - 앵커태그 는 링크를 삽입하기 위한 태그이다. - 태그는 속성으로 반드시 href가 주어져야하며 값으로는 4가지가 들어갈 수 있다. 1. 웹 URL 2. 페이지 내 이동 ( #섹션) 3. 메일쓰기 ("mailto : 메일주소") 4. 전화걸기 ("tel : 전화번호") - target 속성으로 _blank를 삽입하면 새탭에서 열리도록 설정할 수 있다. 따라서 위의 코드는 다음과 같이 표현된다. * 이미지태그 - 이미지 태그는 를 사용하며 열고닫음 없이 바로 닫으며 이미지를 보여주는 태그이다. - 반드시 src속성을 주어야 한다. src는 소스이며 상대경로..

티스토리툴바