HTML-CSS

※ 주의 ! 이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 문제가 있다면 말씀 부탁 드리겠습니다. 안녕하세요 Gon입니다. 이글에서는 HTML을 이용하여 전자문서를 만드는 과정에서 계속해서 언급된 CSS에 대하여 알아 보겠습니다. CSS를 알게 되면서 조금 더 유용하고 가독성이 좋은 전자 문서를 만들 수 있게 될 것입니다. CSS는 무엇일까요? CSS - Cascading Style Sheet의 약자로 HTML을 통해 만드는 전자문서의 계단식 레이아웃을 만들수 있게 도와줍니다. CSS를 사용하면 단순히 글로 이루어진 전자문서들의 요소들의 크기 형태 색 위치 배경 등을 자유롭게 변경하여 조금 더 효율적인 전자문서가 될 수 있게 도와줍니다. * 계단식 레이아웃의 의미는 상위 요소에서 설정된 C..

2021.01.04

컴퓨터/HTML&CSS

Commnet

HTML-Colors

※ 주의 ! 이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 문제가 있다면 말씀 부탁 드리겠습니다. 안녕하세요 Gon입니다. 이번 글에서는 HTML 에서 Color 들에 대하여 알아보도록 하겠습니다. HTML에서 글과 배경의 색상을 지정하는 태그들이 존재합니다. Colors 요소. HTML에서 색을 입힌다는 의미는 여러가지 종류가 있습니다. 요소의 배경 색 = background-color 요소의 글씨 색 = color 요소의 태두리 색 =boreder 등등 여러가지 요소들을 이전 글들에서 언급한 CSS와 color 속성을 통하여 다양하게 변화를 줄 수 있습니다. 배경색 변경 글씨 색 변경 배경색 변경 글씨 색 변경 태두리 변경 위에 코드처럼 스타일 속성을 이용하여 CSS언어를 불러오고 co..

2020.12.30

컴퓨터/HTML&CSS

Commnet

HTML Comments(주석)

※ 주의 ! 이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 문제가 있다면 말씀 부탁 드리겠습니다. 안녕하세요 Gon입니다. 이번글에서는 모든 언어들에서 사용하는 주석 즉 Comments에 대하여 적어보록 하겠습니다. 이 주석들은 아주아주 중요하다고 생각됩니다. 많은 양에 코드 또는 다른 사람이 작성한 코드를 보기 위해서는 설명이 필요하기 때문입니다. HTML Comment Tags HTML에서는 주석을 사용할수 있습니다. 다음과 같은 방법으로요. 해당글을 설명하는 역할을 도와줍니다. Gon 의 블로그입니다. Error를 제거할수 있는 기능 또한 이 주석을 잘 활용한다면 우리가 코드중에서 특정 코드들을 잠시동안 사용을 하지 않기를 원할 때 또는 어떤 문제가 있을 것으로 예상되는 곳들은 지우고..

2020.12.29

컴퓨터/HTML&CSS

Commnet

HTML - Quotation Elements(인용 표현의 태그)

※ 주의 ! 이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 문제가 있다면 말씀 부탁 드리겠습니다 안녕하세요 Gon입니다. 이번글에서는 HTML에서 태그로 제공되는 기본 인용구에 대하여 알아보도록 하겠습니다. - 들여쓰기 대부분 글을 쓸 때 들여쓰기를 많이 사용하시지 않나요 ?? 가독성도 좋고 소제목과 세부내용을 보기에도 간편하게 되기 때문이라고 생각합니다. 이때에 태그를 이용하면 다음과 같이 들여쓰기가 가능해 집니다. blockquote 태그 사용법 이렇게 들여쓰기가 간편하게 된답니다. blockquote 태그 사용법 이렇게 들여쓰기가 간편하게 된답니다. 따옴표표시 HTML에서 요소,속성의 값들을 정의할때 따옴표""를 사용하게 됩니다. 이러한 내용들을 방지하기 위해 태그가 제공됩니다. Go..

2020.12.23

컴퓨터/HTML&CSS

Commnet

HTML - Text Formatting

※ 주의 ! 이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 문제가 있다면 말씀 부탁 드리겠습니다 안녕하세요 Gon입니다. 이번글에서는 HTML의 문자들 즉 텍스트들의 형식을 어떻게 지정하는지에 대하여 알아보도록 하겠습니다. HTML에서는 텍스트들을 정의하기 위한 여러 태그들이 있습니다. 대표적인 태그들은 다음과 같습니다. HTML - 문자 형식 지정 태그 Bold text 단순하게 해당 문자를 굵은 글씨로 표현 하게 할수 있는 태그 입니다. 이것이 b 태그 입니다. 이것이 b 태그 입니다. Important text 사실 표현은 태그와 동일하지만 이 안의 텍스트는 중요하다가 HTML에서 인식하게 됩니다. 이것이 strong 태그 입니다. 이것이 strong 태그 입니다. Italick te..

2020.12.22

컴퓨터/HTML&CSS

Commnet

HTML-Paragraphs(단락)

※ 주의 ! 이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 문제가 있다면 말씀 부탁 드리겠습니다 안녕하세요 Gon입니다. 이전 글에서는 제목을 지정해주는 태그들에 대해서 알아보았습니다. 이제 본문의 내용들을 구성하는 단락들에 대하여 알아보도록 하겠습니다. HTML Paragraphs(단락) tag 태그는 브라우저의 크기에 맞추어 내용을 맞추어 단락을 구성해 주는 역할을 합니다. 항상 새로운 줄에서 시작되며 종료 태그에서 자동으로 줄바꿈을 하게 해줍니다. 이것이 p태그 입니다. 이 안에 쓴 글은 여러 공백들을 무시합니다. 무슨 의미냐하면 아래와 같은 경우 동일하게 표시가 됩니다. 이 문단은 계속해서 이어지게 됩니다. 많은 여백을 표시해도 브라우저에서는 이를 무시하고 하나의 글로 표현합니다. ..

2020.12.16

컴퓨터/HTML&CSS

Commnet

HTML-Headings(제목)

※ 주의 ! 이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 문제가 있다면 말씀 부탁 드리겠습니다 안녕하세요 Gon입니다. 오늘은HTML headings(제목)에 관한내용을 다루도록하겠습니다. HTML heading은 제목 또는 표제를 웹페이지에서 보여주는 것입니다. 그러면 HTML에서 제목을 정해주는 Headings tag들에 대하여 알아보록 할까요? HTML - headings(h tag) HTML 제목은 에서 tag로 정의 됩니다. 부터 까지의 tag로 제목을 정의하도록 구성되어있으며, 중요도는 h1 부터 시작하여 h6로 됩니다. h tag의 중요성 검색 엔진들은 단순이 포함된 글을 찾는 것이아니라 그 웹페이지의 제목을 먼저 찾습니다. 때문에 h 태그는 중요합니다. 혼자만 보려는 것이 ..

2020.12.15

컴퓨터/HTML&CSS

Commnet

HTML-Attributes(속성)

※ 주의 ! 이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 문제가 있다면 말씀 부탁 드리겠습니다 안녕하세요. Gon입니다. 이번 글에서는 HTML-Attributes 흔히 속성이라 불리는 녀석에 대하여 알아보겠습니다. HTML - Attributes(속성) 지난번 글에서 elements(요소)에 대하여 알아보았습니다. 이번글에서 알아볼 Attributes(속성)은 elements(요소)에 대하여 추가적인 정보를 전달해 주는 역할을 하는 녀석 입니다. Attributes(속성)의 특징은 다음과 같습니다. 밑에부터는 영문표기는 생략 하도록 하겠습니다. 모든 요소는 속성을 가질수 있습니다. 속성은 요소에 추가적인 정보를 제공해 줍니다. 속성은 항상 시작태그에 명시됩니다. 속성은 보통 속성의 이름..

2020.12.14

컴퓨터/HTML&CSS

Commnet

HTML-Elements(요소)

전체가 elements ※ 주의 ! 이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 문제가 있다면 말씀 부탁 드리겠습니다 안녕하세요. Gon입니다. 공부를하면서 한글로 번역을 하지만 주요 Key word는 영어로 알아야된다는 필요성을 느끼게 되어 w3school을 참조하며 글을 올릴 예정입니다. 읽으실때 참조 바랍니다. Elements - 요소 HTML 에서 Elements(요소)는 시작tag 와 내용 종료tag로 구성이 됩니다. 이것이 Element(요소)의 정의 위 코드 블럭처럼 HTML에서 어떤 tag안에 감싸진 내용물 전체를 Element(요소)라고 정의 할수 있습니다. 또한 이 Element는 중첩이 될수 있습니다. 즉, Element를 감싸는 Element가 가능하다는 말 입니다...

2020.12.09

컴퓨터/HTML&CSS

Commnet

HTML - <h1> to <h6> Tags

※ 주의 ! 이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 문제가 있다면 말씀 부탁 드리겠습니다 안녕하세요 Gon입니다. 이글에서는 역시나 상위 랭크에 올라와있는 h tag에 관하여 알아보도록 하겠습니다. 부터 tag들은 해당 HTML 문서의 제목을 정의하는 tag입니다. 숫자가 낮을수록 중요한 제목을 설정한다고 생각하시면 이해가 쉬울 것 입니다. 코드로 작성하면 다음과 같습니다. Gon의 블로그 HTML - h Tag의 의미 중요순위의 설정 참고사항 메모사항 글을 마치며​ 실제 웹페이지에서 구동되면 아래와 같습니다. ​위 처럼 우리는 HTML에서 에서 를 통하여 해당 HTML 문서의 제목을 정할 수 있습니다. *주의사항 -사용시 h1 Tag는 page에서 하나만 사용하기 ! HTML을 읽..

2020.12.02

컴퓨터/HTML&CSS

Commnet