HTML
<form> 태그
: 사용자가 입력한 정보를 서버에 전송할 때 사용한다. : 사용자가 정보를 입력하기 위해 사용하는 태그이다. 태그의 속성 action : 사용자가 입력한 정보를 받는 서버 쪽 스크립트 파일을 설정한다. method : HTTP Method(Get or Post 방식)을 정의한다. ※ HTTP Method에서 Get방식과 Post방식의 차이? Get과 Post는 브라우저에서 입력 데이터를 서버로 보내는 기능을 수행하지만 그 방식에 차이가 있다. Get Post 데이터를 전송할 때 URL 끝에 데이터를 붙여서 보내는 방식이다. 정보가 외부에 노출되기 때문에 보안에 취약하다. Get은 지정된 리소스에서 데이터를 요청하는 데 사용된다. (데이터를 요청하는 것만 할 수 있다. 수정X, 삭제X, 읽기O) Get 요..
<table> 태그
: table data의 약자이다. 이외에 테이블 셀 안에 데이터를 나타내기 위한 것으로 태그도 있다. 태그만 사용할 경우, [그림 1]처럼 테이블 표로 완성되진 않는다. Header cells - contains header information (created with the element) Stardard cells - contains data (created with the element) The text in elements are bold and centered by default. The text in elements are regular and left-aligned by default. [그림 2]에서 , , 태그를 사용했다. 태그는 table row의 약자이다. 테이블 표를 만들기 위해..
<img> 태그 (이미지)
태그를 설명하기 앞서, 필요한 이미지를 얻기 위해 pixabay를 이용하면 좋다. pixabay에서 저작권 없는 이미지를 쉽게 다운받을 수 있다. 링크 : https://pixabay.com/ko/ 태그는 다음과 같이 사용된다. 간단하게 태그에서 사용되는 속성 몇가지에 대해서 알아보자. alt : 이미지가 나타나지 않을 때, "풍차 이미지"라는 text로 대체한다. title : 이미지 위에 마우스 커서를 가져다 놓으면, "풍차 이미지"라는 text가 나타난다. height : 이미지의 높이를 설정한다. width : 이미지의 너비를 설정한다. 만일 height 혹은 width중 하나만 선택해서 사용한다면, 나머지 부분은 원래 이미지 비율에 맞춰서 자동적으로 크기가 조절된다.
<p>, <br> 태그
: 단락 : 줄바꿈 단락을 구분짓고 싶다면 를 사용한다. 의 경우 단순 줄바꿈을 의미하기 때문에, 따로 시작점과 끝 지점을 구분 지을 필요가 없다. 따라서 줄바꿈 하고 싶은 위치에 을 넣어주면 된다.
Html의 문서 구조
Html의 기본적인 구조 에는 와 부분이 있다. 한글 깨짐을 방지해주기 위해서 부분에 를 넣어준다. 실질적으로 웹페이지의 본문에 해당하는 내용들은 에 작성된다. Document type declaration(문서 타입 선언) 자신이 작성한 HTML 코드가 어떤 방식의 HTML 코드로 작성되었는지를 브라우저에게 알려주는 것이다. "어떠한 표준을 따르고 있는 태그들을 사용하고 있다."라는 것을 브라우저에게 알려주는 것이라고 이해하면 될 것 같다. HTML5로 접어들면서 로 단일화 되었다. 따라서, html의 시작부분에 을 넣어주면 된다.
<ul>, <ol>, <li> 태그 활용법
태그는 list의 약자로, 목록을 만들때 쓰는 태그이다. 태그는 unordered list의 약자이다. 태그는 ordered list의 약자이다. 과 은 들을 grouping하는 역할로 보면 된다. 다만, 의 경우 순서를 반영하지 않게 해주고, 의 경우 순서를 반영해서 보여준다. 처럼 나타내고 싶다면, 다음과 같이 쓰면 된다. 1번 주제에 대한 소개 2번 주제에 대한 소개 3번 주제에 대한 소개 4번 주제에 대한 소개 1번 주제에 대한 소개 2번 주제에 대한 소개 3번 주제에 대한 소개 4번 주제에 대한 소개
Html 공부에 도움이 되는 사이트
생활코딩의 html 기초 무료 강의 출처 : https://opentutorials.org/module/1892 HTML 수업 수업의 목적 본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다. 선행학습 본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. 웹애플리케이션 만들기 위의 수업에서는 웹을 구성하고 있는 여러기술을 얕고 넓게 배웁니다. 각각의 기술들이 어떻게 관계하고 있는지를 알려드리는 것이 opentutorials.org html의 변천사를 볼 수 있는 사이트 (tag history) 출처 : http://www.ma..
Atom(아톰 에디터)에서 사용하는 emmet 패키지
Atom 에디터의 단축키는 이곳을 참고하면 된다. 출처 : https://atom.io/packages/emmet emmet Emmet – the essential tool for web developers atom.io html을 처음 공부할 때 Atom 에디터에서 emmet 패키지를 이용하면 훨씬 수월해진다. emmet에서 사용하기 좋은 문법들에 대한 소개를 아래 링크로 올려놓았다. 출처 : https://docs.emmet.io/abbreviations/syntax/ Abbreviations Syntax Abbreviations Syntax Emmet uses syntax similar to CSS selectors for describing elements’ positions inside gene..