HTML & CSS - [CSS] CSS의 다양한 단위

서론 지난 포스트를 통해 원하는 요소들(Elements)을 선택하는 선택자에 대해 알아봤습니다. CSS를 사용하여 웹페이지를 디자인하는 과정을 조금 더 디테일하게 설명하자면 원하는 요소를 선택하여 크기를 정하고, 위치를 정하고, 색상을 정하는 과정입니다. 일상생활에서 우리가 길이를 표현하기 위해 미터, 마일, 인치 등의 단위가 존재합니다. CSS 또한 요소를 제어하기 위한 여러 가지 단위가 존재합니다. 본문에서는 CSS에서 제공되는 다양한 단위들을 알아보도록 하겠습니다. CSS의 단위와 종류 CSS에는 다양한 단위가 존재한다고 말했습니다. 하나하나 살펴보기 전에, 어떤 종류가 있는지 대략적으로 알아보겠습니다. 우리가 일상생활에서 미터, 인치 등으로 표현하는 것과 같은 절대적인 표현방법과, 특정 기준 대비..

2022.05.23

컴퓨터/HTML&CSS

Commnet

HTML & CSS - [CSS] 선택자(Selectors), 원하는 요소를 선택하자

서론 HTML의 요소들의 스타일을 제어할 수 있는 CSS를 사용하려면 HTML의 원하는 요소와 범위를 정확하게 선택할 수 있어야 합니다. CSS문법에서는 원하는 요소를 선택할 수 있도록 다양한 방법을 제공하고 있습니다. 본문에서는 이런 요소를 선택하는 다양한 방법에 대해서 알아보도록 하겠습니다. 선택자(Selectors)와 종류 선택자는 요소를 선택하는 문법적인 방법을 일컫는 말입니다. 4개의 큰 분류로 나누어 구분할 수 있습니다. 기본 선택자(Basic selectors) - 기본적인 선택자의 표현 그룹 선택자(Grouping selectors) - 다수의 요소를 선택하는 선택자의 표현 결합 선택자(Combinator selectors) - 요소와 인접하는 형제 또는 자식 요소들을 선택하는 선택자의 표..

2022.05.18

컴퓨터/HTML&CSS

Commnet

HTML - iframes(문서안의 문서)

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

2022.02.19

컴퓨터/HTML&CSS

Commnet

HTML - Class 와 Id(태그의 정체성을 부여해 주다)

HTML에서 Class와 Id 속성 HTML 문서는 수많은 태그들로 이루어집니다. 예를 들어 div 태그가 10개가 있다고 가정한다면 그중 특정 div태그를 찾는 것은 쉽지 않습니다. 이때 class와 id 속성을 이용하면 손쉽게 태그를 정의하고 접근하여 사용할 수 있습니다. London London is the capital of England. Paris Paris is the capital of France. Seoul Seoul is the capital of Korea. Class vs Id 속성의 차이점 두 가지 속성 모두 특정 태그들을 정의할 수 있다고 말씀드렸습니다. 이때 가장 큰 차이점이 있습니다. class 속성은 중복해서 여러 태그를 묶어서 정의할 수 있습니다. id 속성은 해당 HT..

2022.01.09

컴퓨터/HTML&CSS

Commnet

HTML - div 와 span

div와 span 태그 여러분들이 HTML을 통하여 웹페이지를 만들 때 자주 사용하는 태그입니다. 이 div와 span 태그의 HTML에서의 역할은 단순이 영역을 지정하여 구분하기 위한 용도로 사용됩니다. 이후 더 나아서 구분된 영역에 CSS를 통해 속성을 지정합니다. 그렇다면 단순히 영역만을 지정해주는 div와 span태그 그 차이에 대해 알아보도록 하겠습니다. div - Block 레벨에서의 사용 HTML에서 bolck단위의 개념의 영역을 지정할 때 주로 div 태그를 사용합니다. 아래와 같이 하나의 큰 영역을 div 태그를 이용하여 표현합니다. 이곳은 헤더 영역입니다. 헤더 내용입니다. 이곳은 본문 영역입니다. 본문 내용입니다. 이처럼 전체의 영역 자체를 div 태그를 이용해 구분할 수 있습니다. ..

2021.10.05

컴퓨터/HTML&CSS

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