본문 바로가기

강좌/HTML 기초12

[HTML 강좌] 13. HTML 색깔(Color) : background-color, color, border color [HTML 강좌] 13. HTML 색깔(Color) : background-color, color, border color 이번 포스팅에서는 HTML 문서에서 색(color)을 표현하는 방식인 background color, text color, border color에 대하여 알아봅니다. 색(Color) 표현 방식 HTML에서 색을 표현할때는 style 속성(attribute)의 property로 표현합니다. 색상을 표현할때는 미리 정의된 이름으로 색상을 표현하는 Color Names를 활용하는 방법과 RGB, HEX, HSL 세가지 색을 구성하는 방식으로 활용합니다. Color Names 미리 정의된 색상의 이름을 Style에서 적용하여 표현합니다. 색상표는 아래 링크를 클릭하면 정의된 색상표를 확인.. 2020. 12. 9.

[HTML 강좌] 12. HTML 주석(comment) :  [HTML 강좌] 12. HTML 주석(comment) : 이번 포스팅에서는 HTML의 코드에 대한 설명을 표현하는 HTML 주석(Comment)에 대하여 알아본다. HTML 주석(comment)의 표현 : HTML 주석(comment)는 브라우져의 화면에는 표현이 되지 않는 요소이며, 블럭으로 구성된 태그이다. 주석 기술 주석(comment)는 HTML 코드뿐만 아니라 모든 언어에서 제공하고 있으며, 프로그램 코드에 대한 설명을 제공하는 아주 중요한 요소이다. 그러나, 주석(comment)는 적정하게 표준화하여 기술하여야 하며, 너무 남용할때는 프로그램의 가독성이 현저하게 저하하게되는 이유가 되기도 한다. 일반적으로 페이지에 대한 설명, 수정한 일자, 수정한 사유등을 페이지의 첫 머리부분에 기술하기도 .. 2020. 12. 9.

[HTML 강좌] 10. HTML formatting(서식): <b>, <em>,<i>,<mark><del><ins><small><sub><sup><strong> [HTML 강좌]10. HTML 서식지정: , ,, 이번 포스팅에서는 HTML text 에 대한 서식(formatting)를 지정하는 요소(element)인 , , ,,, ,,, ,의 활용법을 알아봅니다. HTML text 강조 : , 와 태그는 text를 강조할때 사용합니다. 두 태그는 웹브라우져에 표현될때 둘 태그 모두 굵은 글씨체로 표현됩니다. 오늘은 문자에 대한 서식(Formatting)에 대해서 알아봅니다. italic 으로 표시합니다. italic 으로 표시합니다. 태그와 태그의 차이점 태그와 태그와 동일하게 는 표현상으로, 은 웹접근성(음성지원)을 지원합니다. 따라서 화면상으로 강조할때는 를 사용해도 되나, 웹접근성(음성)등에서 강조가 될 경우는 태그를 사용해야 합니다. 가능하면 태그를 사용.. 2020. 11. 25.

[HTML 강좌] 9. HTML Styles : Background Color, Fonts, Text Color/Size/Alignment [HTML 강좌] HTML Styles : Background Color, Fonts, TextColor/Size/Alignment HTML Element(요소)의 모양을 꾸미는 Styles Attribute(속성)과 Attribute의 값을 의미하는 properity를 지정하고 활용하는 방법을 습득합니다. HTML Styles의 정의 HTML의 Styles Attribute는 element(요소)의 글자의 색, 배경색, 글자 크기와 폰트등 HTML Element(요소)의 서식을 지정하는데 사용됩니다. HTML Element(요소)에 Style 속성 문법 Style의 문법은 properity와 value로 이루어진다. prperity는 Style 안에서 사용되는 값을 가리키는 명칭입니다. 전문적인 용어로.. 2020. 11. 23.

[HTML 강좌] 8. HTML 기본 태그 : 단락, 구분선, 줄바꿈, 공백 8. HTML 기본 태그 [HTML 강좌] 8. HTML 기본 태그 단락, 줄바꿈 , 구분선, 공백 이번 포스팅에서는 , , , 의 정의와 활용법의 습득하여 기본적인 HTML 컨텐츠를 작성합니다. 태그 태그는 단락 또는 문단을 의미하며 영문으로 Paragraphs 로 표기합니다. 태그는 사용되는 첫번째 라인을 띠우고 표기됩니다. 태그가 사용되면 태그의 시작과 끝에 공백(space)를 자동으로 추가되며, 이는 수정할 수 없습니다. 여기는 첫번째 단락을 표시하고 있습니다. 여기는 두번째 단락을 표시하고 있습니다. HTML와 워드 또는 에디터를 통한 문서의 표현의 차이 HTML 문서는 워드나 텍스트 에디터에서 작성된 것처럼 웹브라우져에서 표현되지 않습니다. 이유는 HTML 문서를 표현하는 웹브라우저와 사용하는.. 2020. 11. 16.

[HTML 강좌] 7. HTML 문서 제목(Headings) - <h1></h1> [HTML 강좌] 7. HTML 문서 제목(Headings) - 이번 포스팅부터는 HTML을 구성하고 있는 Tag의 종류와 사용방법을 알아보도록 하겠습니다. 이전 포스팅까지는 아주 기초적이고, 예제등도 별 내용이 없어서 재미가 많이 떨어질것으로 생각됩니다. 지금부터 시작하는 포스팅은 이전 포스팅보다는 조금 예제가 들어가 있어서 하는 맛이 조금 날것입니다. 첫번쩨로 사용할 Tag는 로 표시되는 HTML 문서의 제목을 표시하는 Tag에 대해서 알아보겠습니다. 학습 목표 Headings 의 사용법을 숙지하고, 왜 Headings Tag가 중요한지를 파악한다. SEO 의 기본 개념을 이해한다. HTML 을 설명하는 일부의 강좌에서 Headings Tag에 대해서 HTML 문서의 제목이라고만 간단히 언급하고, 단.. 2020. 11. 11.

[HTML 강좌] 6. HTML 문서의 구조 [HTML 강좌] 6. HTML 문서의 구조 이전 포스팅에서는 HTML을 구성하고 있는 Element(요소)에 대해서 알아보았습니다. 이제 Element(요소)를 결합해서 HTML 문서를 만드는 구성을 실전 예제와 같이 알아보도록 하겠습니다. 학습 목표 HTML의 간단하지만 완전한 문서형식을 갖춘 구조를 파악하고 HTML 문서를 구성할 수 있도록 한다. 여기는 막새바람의 연습 페이지입니다. 내가 만든 첫번째 페이지입니다. 실행 결과 1. 문서 형식을 나타냅니다. HTML 초창기에 (1991~2년) doctype은 HTML 페이지가 자동 오류 검사나 다른 문법적인 설명을 기술하는 용도로 사용되었으며, doctype의 구성은 아래와 같이 기술되어졌습니다. 그러나, 현재는 해당 기능은 사장되었으며,.. 2020. 11. 10.

[HTML 강좌] 4. HTML의 기본 구조 - Element(요소)의 표현 Tag [HTML 강좌] 4. HTML은 웹사이트를 구성하는 웹 페이지를 만들때 가장 기본적으로 사용되는 기술입니다. HTML은 "웹 페이지의 구조를 정의하는 기술" 건물을 지을때 건축물의 기둥과 벽을 웹 페이지의 기둥과 벽을 정의하는 기술이 HTML 이다. HTML은 작성하고자하는 웹 페이지가 문단으로 구성되는지, 리스트로 구성되는지, 링크가 있는지를 기술하고, 이를 웹 브라우져나 검색엔진에서 명확히 인지할 수 있도록 하는데 사용이 됩니다. 학습 목표 HTML을 이루고 있는 Tag의 종류와 사용하는 방법을 인지함으로써 HTML의 기본 구성을 이해합니다. 또한 간단한 예제를 Visual Studio Code를 사용하여 작성하며, HTML을 Visual Studio Code에서 어떻게 작성하고 작성된 HTML.. 2020. 11. 10.

[HTML 강좌] 5. HTML의 기본 구조 - Element(요소)의 속성(Attributes) [HTML 강좌] 5. HTML의 기본 구조 - Element(요소)의 속성(Attributes) Element(요소)는 속성(Attributes)를 통하여 추가적인 내용을 표현합니다. 특히 문서를 꾸미거나 부가적인 정보를 표현할때 사용됩니다. 학습 목표 HTML의 문장을 이루는 Element(요소)에 대하여 속성(Attributes)을 통하여 추가적인 정보를 표현하는 방법을 습득합니다. Attribute(속성)의 표현 대표사진 삭제 사진 설명을 입력하세요. 위의 예시는 class 라는 속성을 표현한 것으로 스타일 및 기타 내용을 위해 Element(요소)에 구분하는 명칭을 부가하는데 사용하는 속성입니다. Attribute(속성)를 사용은 아래 내용을 지켜서 작성되어야 합니다. 1. 요소 이름 다음에 바.. 2020. 10. 14.

[HTML 강좌] 3. WebSite를 만들기 위한 기본적인 도구 [HTML 강좌] 3. WebSite를 만들기 위한 기본적인 도구 HTML을 공부하는 목적은 사용자마다 틀리겠지만, 최종적으로 본인의 홈페이지를 만들고, 운영하는데 있다고 생각됩니다. 기본적인 소프트웨어 설치하기 홈페이지를 만드는 도구는 매우 많은 코드 편집기, 이미지 편집기, 테스트 도구에서 시작하여 심지어는 홈페이지를 워드처럼 작성만 해도 만들어지는 도구들이 제공됩니다. 그럼 전문가들이 사용하는 도구는 어떻게 분류하고 어떤 것이 있을까요? -. 시스템: 당연한 얘기이지만 웹 개발을 위해서는 윈도우, 맥, 또는 리눅스라는 운영체제를 가지고 있는 컴퓨터를 가지고 있어야 합니다. -. 코드 작성 코드 작성을 위한 편집도구는 코드를 직접 입력하여 작성하는 텍스트 편집기(Sublime,Brackets,Atom.. 2020. 9. 22.

이전 1 2 다음

티스토리툴바