전체 글
HTML Images(이미지)
HTML Images(이미지)
2020.07.20html에서 이미지는 태그를 사용하여 정의된다. 태그는 이전에 언급했던 빈 태그(Empty Tag)로서 속성만을 가지고 종료태그가 존재하지 않는다. 이미지는 기술적으로 웹페이지에 직접 삽입되지 않는다. 이미지는 웹페이지에 연결되는 방식으로 들어간다. 위에서 언급한 태그는 참조된 이미지를 저장할 수 있는 공간을 만들어주는 역할을 한다. img 태그에는 다음 두 가지 필수속성이 존재한다. src - 이미지의 경로를 지정한다. alt - 이미지의 대체 텍스트를 지정한다. 이미지의 경로 : 실제로 이미지가 저장되어 있는 공간(보통 url이 들어간다.) 대체 텍스트 : 이미지를 설명해주는 글이나 문구 그래서 html로 이미지를 나타내기 위해서는 다음의 구조를 사용하여 표현한다. 웹페이지가 로드될 때 웹브라우져는 ..
HTML Quotation & Comments (인용구 & 주석)
HTML Quotation & Comments (인용구 & 주석)
2020.07.20인용과 관련된 html 요소 태그(Tag) 내용 다른 소스에서 인용되는 부분을 정의 짧은 인용문의 정의 약어(abbreviation) 및 머리글자(acronym)를 정의 문서의 작성자 / 소유자에 대한 연락처 정보를 정의 제목을 정의 텍스트의 방향을 정의 인용이란, 남의 말이나 글을 빌려 사용하는 것으로서 html은 위의 태그들을 이용하여 해당 텍스트가 인용, 인용문임을 표시할 수 있습니다. 인용을 표현하지 않은 경우 잘못하면 타인의 말이나 글을 가로채는 것이 될 수 있기 때문에 인용에 대한 언급은 대단히 중요합니다. 여러줄의 인용문을 표시하는 용도로 사용합니다. 해당 태그를 사용해서 기입한 내용들을 실제 웹 페이지 상에서 모두 들여쓰기(indent) 처리되어 일반적인 내용들과 구분되게 됩니다. 주어진 ..
HTML Formatting(서식)
HTML Formatting(서식)
2020.07.20HTML Text Formatting 요소의 종류 태그(tag) 내용 굵은 텍스트(Bold Text) 중요한 텍스트(Important Text) 기울임 텍스트(Italic Text) 강조 텍스트(Emphasized Text) 표시된 텍스트(Marked Text) 작은 텍스트(Small Text) 삭제된 텍스트(Deleted Text) 삽입된 텍스트(Inserted Text) 아래첨자(Subscripts) 위첨자(Superscripts) 각 태그들을 적용하고자 하는 내용을 감싸는 형식으로(시작태그와 종료태그로) 작성하여 사용한다. & 텍스트를 굵게 표시하고자 할 때 사용한다. 즉, 특정 텍스트를 강조하고 싶은 경우에 사용한다. 우선 를 이용하여 코드를 작성해보고 실행결과를 확인해보면 그 결과는 다음과 같다..
HTML Styles
HTML Styles
2020.07.20html style 속성은 색상, 글꼴, 크기 등과 같은 스타일 요소를 추가하는 데 사용된다. 해당 속성은 다음의 문법적 구조를 통해서 사용할 수 있다 주석에서 언급한 것처럼 property는 CSS property, value는 CSS value를 의미한다. CSS에 대해서는 나중에 자세히 알아볼테니 일단은 이정도로만 알고 넘어가도록 하자 배경색상(Background Color) 배경색상을 설정하기 위해서는 "background-color" 속성을 정의하면 된다. 배경색상은 페이지 전체를 대상으로 적용할 수도 있고 각 요소들에 대해서 따로 적용할 수도 있다. 페이지 전체의 배경색상을 변경하고 싶다면 다음과 같이 태그에 style 속성을 추가해주면 된다. 그리고 각 요소의 배경화면을 변경하고 싶다면 다음..
Heading(제목) & Paragraphs(단락)
Heading(제목) & Paragraphs(단락)
2020.07.20이번 글에서는 html 문서에서 제목을 표현하는 계열 태그와 단락을 표시할 때 사용하는 태그에 대해서 알아보도록 하겠습니다. ~ 태그 html 상에서 제목은 다음과 같이 ~ 태그를 사용해서 표현합니다. This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 태그의 번호는 1부터 6까지 있으며 숫자가 올라갈수록 크기가 작아지는 것을 확인할 수 있습니다. 계열의 태그에 7 이상의 번호를 할당하는 경우 더 이상 heading에 대한 효과가 적용되지 않는 것을 확인할 수 있습니다. 그렇기 때문에 h 계열 태그를 사용할 때에는 1 ~ 6 사이의 번호만을 사용할 수 있음을 기억하..
HTML 기초
HTML 기초
2020.07.20우선, 여러가지 html 태그들에 대해서 공부하기 전에 html에 대해서 기본적으로 기억하고 있어야할 것들을 정리해보도록 하겠습니다. 기본적으로 기억할 것 My First Heading My first paragraph. 1. 모든 html 문서는 반드시 문서형식(타입)에 대한 선언으로 시작해야 한다.( 부분해당) 2. html 문서는 태그로 시작해서 태그로 끝난다. 3. html 문서에서 사이의 내용이 실제 시각적으로 나타나는 부분이다. 선언 html은 버전별로 지원하는 태그가 조금씩 다릅니다. html이 버전업을 지속해오면서 각 버전별로 추가되는 태그, 삭제되는 태그들이 존재하다보니 주어진 html 문서를 올바르게 해석하기 위해서는 해당 문서가 어떤 버전의 html로 작성됬는 지를 알아야할 필요성이 ..
HTML 개요
HTML 개요
2020.07.20HTML 이란? 아마 웹에 대해서 조금이라고 관심을 가지고 계신 분들이라면 html을 적어도 한 번 이상을 들어보셨을 것이라고 생각합니다. 그만큼 html은 웹개발에 있어서 아주 중요하고 핵심적인 언어입니다. 지금도 아주 많은 곳에서 활발하게 사용되고 있고 계속해서 새롭게 업그레이드 되고 있는 언어 중 하나입니다. HTML(HyperText Markup Language) 웹페이지 제작의 가장 기초적인 뼈대가 되는 마크업언어(Markup Language)로서 웹페이지의 내용과 레이아웃을 담당하는 언어 html은 웹페이지 제작의 가장 기초적인 뼈대가 됩니다. 아무리 멋진 디자인, 좋은 내용을 가지고 있다고 하더라도 html을 사용하지 않으면 제대로된 웹페이지를 제작할 수 없습니다. 좋은 정보, 내용들을 멋진..