HTML 입력 양식 태그안녕하세요 AimHo 입니다. 이번에는 입력 양식 태그를 다뤄보도록 하겠습니다.입력양식 태그는 로그인, 회원가입 등 사용자에게 데이터를 입력받을 때 사용합니다. 입력 양식 태그입력 양식은 사용자에게 정보를 입력받는 공간을 말하며 입력 양식 태그를 사용해서 만듭니다.입력 양식을 제대로 다루려면 서버와 관련된 기술도 알아야 하지만, 지금은 입력 양식과 관련된 기본 내용만 다루도록 하겠습니다. 입력 양식에 대해 알려면 우선 서버와 클라이언트라는 용어를 알아야 합니다.간략하게 정리하면 아래와 같습니다.서버(제공자): 웹 페이지를 제공해주는 대상클라이언트(고객): 웹 페이지를 받는 대상 일반적으로 서버에서 클라이언트로 데이터가 전달됩니다. 하지만 회원가입과 로그인, 검색과 관련된 버튼을 클..
HTML 멀티미디어 태그: 비디오 태그 오디오 태그 글 확인하기 2018/07/04 - [FrontEnd 글/@HTML강의] - HTML 멀티미디어 태그: 오디오 태그 / by AimHo안녕하세요 AimHo 입니다.지난번에 언급한 HTML 멀티미디어 태그를 이어서 진행하도록 하겠습니다. 오디오 태그 포스팅이 궁금하신 분은 지난번에 작성한 글을 확인하시기 바랍니다 비디오 태그비디오태그는 웹 페이지에서 동영상을 볼 수 있게 만들어 줍니다. HTML5 전에는 오디오와 마찬가지로 비디오도 윈도우 미디어 플레이어 or 플러그인을 사용해야 볼 수 있었습니다. 하지만 HTML5 시대가 오면서 웹 브라우저만으로 동영상을 볼 수 있게 되었습니다. 웹 페이지에 비디오를 삽입할 때는 video 태그를 사용합니다.video ..
초보자들 드루와 서브라임 텍스트 기초 세팅 가이드 (Sublime setting for beginners)안녕하세요 AimHo 입니다.그동안 Notepad++를 사용해서 html 코드를 작성했었는데, 너무 기능이 없는 툴이라 코드를 작성할 때 불편한 점이 많았습니다. 그래서 어떤 툴을 사용해볼까 알아보았는데, 서브라임 텍스트(Sublime Text)가 가장 유명하더군요사용자 입맛에 맞게 플러그인 몇 개 설치하면 사용하기 편할 것 같았습니다.그래서 서브라임 텍스트를 설치 했습니다. 어떤 플러그인이 유용한지 몰라서 유투브의 니꼴라스 TV의 서브라임 기초 세팅 영상을 참고해서 기초 세팅만 적용해보도록 하겠습니다. 자 이제 서브라임 텍스트 설치부터 플러그인 설치까지 차례대로 시작해보도록 하겠습니다! 서브라임 텍..
HTML 멀티미디어 태그 / 오디오 태그안녕하세요 AimHo 입니다. 이번에는 HTML 멀티미디어 태그 - 오디오 태그에 대해 알아보겠습니다. 멀티미디어태그는 웹 브라우저에서 음악 or 동영상을 재생할 때 사용하며 HTML5에서 추가되었습니다. 현대 웹 브라우저에서 흔하게 접해볼 수 있는 기능들이죠 위 태그들을 사용하지 않아도 플러그인을 사용하면 음악 or 동영상을 재생할 수 있습니다. 그치만 기본적인 문법이니 알고넘어가면 좋습니다! 그러면 오디오 태그부터 살펴보도록 하겠습니다. 오디오 태그오디오 태그는 플러그인이 없더라도 웹 브라우저에서 음악을 재생할 수 있게 만들어줍니다. HTML5에 추가된 기능이므로 인터넷 익스플로러8 이하에서는 사용할 수 없습니다. (여기서 다루지는 않지만, JPlayer 같은 ..
HTML 기본태그 / 공간 분할 태그 안녕하세요 AimHo 입니다.이번에는 HTML 기본태그 다섯 번째 공간 분할 태그에 대해 알아보겠습니다. 과거에는 공간 분할 태그를 사용하지 않지만, 현대 웹 페이지는 공간 분할 태그를 사용하여 웹 페이지를 나눕니다.공간을 분할해야 추후 배우게될 CSS로 원하는 레이아웃을 구성할 수 있기 때문입니다.이해를 돕기 위해 네이버 메인 페이지를 통해 어디에 사용되는지 찾아보겠습니다. 공간 분할 태그는 형태로 사용합니다.네이버 메인 페이지는 약 315개의 div태그를 사용합니다.자주 사용되는 태그이니 반드시 기억해야 합니다! 기본 공간 분할 태그 HTML5의 대표적인 공간 분할 태그는 div와 span입니다. div 태그는 공간을 블록(block) 형식으로 분할하고 span ..
HTML 기본태그 / 이미지 태그 안녕하세요 AimHo 입니다.이번에는 HTML 기본태그 네 번째 이미지태그에 대해 알아보겠습니다. 지금까지는 웹 페이지의 글자와 관련된 태그를 알아보았다면, 이번에는 이미지를 넣는 방법에 대해 살펴보겠습니다.위 타이틀도 이미지 태그가 사용된 예시라고 볼 수 있겠네요!이미지 태그는 나중에 알게될 멀티미디어 태그와 비슷하므로 꼭 기억하고 있어야 합니다.이미지 태그 이미지를 삽입할 때는 img 태그를 사용하는데 형태는 다음과 같습니다. 이 형태로 단독으로 사용하는데, 이미지에 필요한 정보(경로, 크기 등)는 이미지 태그의 속성에 입력합니다. 이미지는 직접 등록할 수 있고 아니면 인터넷에 존재하는 이미지의 경로를 넣어주어도 됩니다.직접 등록할 경우에는 HTML 페이지와 같은 폴..
HTML 기본태그 / 테이블 태그안녕하세요 AimHo 입니다.이번에는 HTML 기본태그 세 번째 테이블태그에 대해 알아보겠습니다.테이블태그를 아주 잘 활용한 것이 바로 캘린더 입니다. 테이블태그 여기서 사용되는 태그이름은 조금 많지만 어렵지 않습니다. 차근차근 하나씩 살펴보도록 하겠습니다. 태이블태그는 다음과 같은 계층구조로 작성해야 합니다. thead 태그 내부 thead 태그 내부 tbody 태그 내부 tbody 태그 내부 tbody 태그 내부 tbody 태그 내부 thead 태그 내부 thead 태그 내부 thead 태그 내부 thead 태그 내부 tbody 태그 내부 tbody 태그 내부 tbody 태그 내부 tbody 태그 내부 thead 태그 내부 thead 태그 내부 HTML5에서는 위 예제..
안녕하세요 AimHo 입니다.이번에는 HTML 기본태그 두 번째 목록태그에 대해 알아보겠습니다. 현대 웹 페이지에서 빠지지 않고 등장하는 요소가 바로 네비게이션 목록입니다.이번에 다룰 목록 태그는 이 네비게이션 목록을 만들 때 주로 사용합니다. ※네비게이션 목록이란?아래 그림처럼 웹 사이트의 다른 웹 페이지로 이동 할 수 있는 버튼들을 모아둔 것을 말합니다. 목록태그 목록태그에는 글머리 기호 목록과 순서 번호 목록이 있는데, 글머리 기호 목록 부터 살펴 보도록 하겠습니다. 글머리 기호 목록은 아래표에 제시된 태그를 사용하여 만들 수 있습니다. ul 태그는 unordered list를 의미하고 li 태그는 list item을 의미합니다. 사과 바나나 오렌지 사과 바나나 오렌지 순서가 있는 번호 목록을 생성..
안녕하세요 AimHo 입니다. 이번엔 HTML 기본태그 중 하나인 글자태그에 대한 글을 작성하였습니다. 타이틀 사진에는 글자태그 중심의 웹페이지를 가장 잘표현한 홈페이지인 위키피디아의 사진을 사용하였습니다. 글자태그는 말 그대로 웹에서 보이는 모든 text를 다루는 태그들입니다. 제목 글자 태그부터 본문 글자 태그 하이퍼링크 태그, 글자 모양 태그까지 다뤄보도록 하겠습니다. 원래 이미지까지 포함해서 모든 기본태그를 다루려고 했으나 양이 많아서 따로 나눠서 진행하도록 하겠습니다.제목글자태그 문서의 제목을 표현할 때 사용하며 각 태그에서 h는 Heading을 의미합니다. 본문글자태그 문서의 내용을 표현할 때 사용하며 p 태그를 사용하여 입력합니다. p 태그는 Paragraph를 의미하며 문단 하나를 생성합니..
안녕하세요 AimHo 입니다.블로그를 시작한지 이제 10일째인데, 너무 글을 주제없이 작성하는 것 같아서 조금 걱정되기도 하네요 무튼 이번에는 HTML5의 기본구조와 작성법에 대한 글을 작성하려고 합니다. 기본구조와 태그의 속성만 이해해도 간단한 스킨편집은 쉽게 할 수 있을거라고 생각합니다.HTML5 기본용어 우선 HTML5의 기본용어에 대해 정리해보겠습니다. 1. 태그와 요소요소는 제목, 본문, 이미지 등 HTML 페이지에 존재하는 것을 말하며 태그는 요소를 만들 때 사용하는 기호 입니다.위 이미지 처럼 시작과 끝 태그를 별도로 입력하는 요소도 있지만, 처럼 단독으로 사용하는 태그도 있습니다.태그에 대한 자세한 내용은 추후에 다루도록 하겠습니다. 2. 속성태그에 추가 정보를 부여할 때는 속성을 사용합니..