HTML - iframes(문서안의 문서)

문서 안의 문서 HTML에서의 문법 중 iframe이라는 태그를 제공합니다. 이 태그를 이용하면 문서 안에 스페셜 한 공간을 만들어서 다른 문서와 함께 보는 듯한 효과를 사용할 수 있습니다. 기본 예제 기본 영역 예제처럼 외부의 html문서를 가져올수 있습니다. 기본적으로 iframe태그는 다른 문서를 문서 안으로 불러오는 역할을 합니다. 사이즈 조절 width / height 당연히 iframe의 크기또한 CSS 속성을 통해 수정 가능합니다. 기본 영역 테두리 설정 테두리 또한 변경 가능합니다. 기본 영역

2022.02.19

컴퓨터/HTML&CSS

Commnet

WEB - 원시적인 웹 서비스 구조

원시적인 웹 서비스의 구조 가장 기본적인 웹서비스의 구조가 뭘까요? 서버와 클라이언트에 대해서 다시 한번 정리하자면 아래와 같습니다. 서버 : 클라이언트의 요청에 응답한다. 클라이언트 : 서버에게 원하는 정보를 요청한다. 이렇게 서버와 클라이언트의 응답과 요청을 통해 웹서비스가 동작하게 됩니다. 이게 바로 웹서비스의 가장 기초적이고 핵심이 되는 구조입니다. 순수하게 HTML언어만을 전달하는 형태의 웹 서비스는 아래와 같이 동작합니다. 서버에서는 HTML 언어로 된 문서들을 보관하고 있습니다. 클라이언트는 서버에게 필요한 HTML 문서를 요청합니다. 서버는 요청받은 HTML 문서를 클라이언트에게 제공해 줍니다. 클라이언트가 가지고 있는 웹 브라우저를 통해 HTML 문서를 번역하여 형식에 맞게 출력하여 보여..

2021.08.16

컴퓨터/WEB

Commnet

HTML-Block and Inline 1

※ 주의 ! 이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 문제가 있다면 말씀 부탁 드리겠습니다. 안녕하세요 Gon 입니다. HTML에는 요소를 화면에 표시하는 두가지 방법이 있습니다. 바로 Block 와 Inline 입니다. 그리고 모든 요소들은 모두 Block 과 Inline 둘중의 하나의 속성을 가지고 화면에 표시하게 됩니다. Block 속성을 가진 요소 Inline 속성을 가진 요소 차이점이 느껴지시나요? 정리하자면 다음과 같습니다. Block 항상 줄넘김을 합니다 항상 사용가능한 전체 폭만큼의 공간을 가집니다 Block의 요소는 '여백'을 설정할 수 있습니다. Inline 줄넘김을 하지 않습니다. 항상 필요한 너비많큼만의 공간을 가집니다. 모든 요소들은 각각 Block 속성과 In..

2021.02.17

컴퓨터/HTML&CSS

Commnet

HTML-List(목록)

※ 주의 ! 이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 문제가 있다면 말씀 부탁 드리겠습니다. 안녕하세요 Gon입니다. 사실상 거의 모든 웹페이지들에는 목록이 존재합니다. 웹페이지들을 이동하기 쉽게 하기 위해서 말이죠. 이번글에서는 HTML에서 목록을 만든는 방법에 대하여 알아보도록 하겠습니다. 이 목록을 설정하는 방법은 크게 2가지로 구성이 되어있습니다. 목록의 타입, 목록의 내용으로 말이죠. Unordered List (숫자가 없는 목록) - ul 태그를 이용하여 우리는 숫자가 없는 목록을 만들수 있습니다. HTML 컴퓨터상식 기타 위 예시처럼 표현하여 목록을 만들수 있습니다. 안에 목록의 내용물은 li태그를 이용하여 만듭니다. Ordered List(숫자로 표기하는 목록) - ol..

2021.02.03

컴퓨터/HTML&CSS

Commnet

HTML-tables(행과열의 구성 또는 표)

※ 주의 ! 이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 문제가 있다면 말씀 부탁 드리겠습니다. 안녕하세요 Gon입니다. 이번글에서는 HTML에서 문서의 행과열을 구성하여 어떠한 자료들을 구조화 시킬수 있는 방법에 대하여 알아보도록 하겠습니다. ||| - 표를 만들기 위한 태그들 - HTML에서 표의 영역을 정의해 주는 태그 입니다. -row in a table 표의 행을 정의 해 줍니다. -header cell in a table 표의 행의 이름을 정의해 줍니다. -cell in a table 표의 행의 데이터를 정의해 줍니다. 가장 기본적인 예시는 다음과 같습니다. 이름 나이 성별 Gon 늙음 남자 Gon2 비밀 비밀 이..

2021.01.20

컴퓨터/HTML&CSS

Commnet

HTML-Image(이미지)

※ 주의 ! 이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 문제가 있다면 말씀 부탁 드리겠습니다. 안녕하세요 Gon입니다. 이번 글에서는 다양한 문서들을 조금더 시각적으로 향상을 시켜주고 도움을 줄 이미지에를 구현하는 방법에 대하여 알아보록 하겠습니다. HTML Images Syntax - 이미지 문법 HTML 에서는 태그를 이용하여 웹페이지에 이미지를 구현할 수 있습니다. 조금 더 정확이 표현하자면 HTML에서 태그를 이용하여 해당 이미지에 대한 공간을 확보하는 것입니다. 그리고 이 확보한 공간에 어떠한 경로를 지정하여 지정된 경로의 이미지를 구현하는 것입니다. 태그의 특징 앞서 대부분 다른 tag들은 시작태그와 종료태그로 구성되어있습니다. 하지만 태그는 태그처럼 empty태그라 불리며,..

2021.01.19

컴퓨터/HTML&CSS

Commnet

HTML-Links(링크태그)

※ 주의 ! 이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 문제가 있다면 말씀 부탁 드리겠습니다. 안녕하세요 Gon입니다. 이번 글에서는 우리가 작성하는 HTML 문서에서 다른 웹페이지 또는 어딘가로 이동을 할수 있게 해주는 하이퍼링크를 알아보도록 하겠습니다. HTML Links - Hyperlinks 하이퍼링크를 만들어 주고 그 하이퍼링크를 클릭하면 다른 문서로 이동할수 있게 해주는 기능입니다. Syntax(문법) HTML에서는 하이퍼링크를 정의하는 태그는 입니다. a 태그 안에는 크게 3가지 속성 값이 있습니다. href : 이 속성값은 다른 문서로 이동할 경로를 지정해 주는 속성입니다. target : 이 속성값은 다른 문서를 어떤 형식으로 이동할 것인가에 대한 속성입니다. title..

2021.01.11

컴퓨터/HTML&CSS

Commnet

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