HTML & CSS - [CSS]position속성 (요소의 배치방법)

서론 지난 포스트에서 요소의 크기와 좌표를 제어하는 속성을 알아봤습니다. 원하는 위치에 요소들을 배치하기 위해서는 그것만으로는 한계가 있습니다. HTML에서 태그로 생성되는 요소들(Elements)을 어떻게 사용자에게 보여주는가는 매우 중요합니다. 본문에서는 이 요소들에서는 position속성이 존재합니다. 이 속성을 통해서 요소들을 원하는 방식으로 적절하게 배치할 수 있어야만 좋은 웹페이지를 구성할 수 있습니다. 본문에서는 position속성의 종류들을 이해하고 적용해 보도록 합시다. position 속성의 종류 CSS에서 position 속성은 요소를 어떤 방식으로 어떻게 위치시키는지 정할 수 있습니다. 우선 방식으로 종류를 구분하자면 다음과 같습니다. 종류 설명 static (기본 설정값) 순서대로..

2022.05.26

컴퓨터/HTML&CSS

Commnet

HTML & CSS - [CSS] 요소의 크기와 위치 (width, height, left, top, right, bottom)

서론 HTML을 CSS를 통해 제어하고 디자인하는 데 있어 요소들의 위치와 크기는 중요합니다. 정렬하는 형태, 배치하는 방법, 특정 상황에서의 동작 등을 제어하고 디자인하기 전에 기본적인 위치와 크기를 어떻게 결정하고 사용할 수 있는지 알아보도록 하겠습니다. 요소의 크기 속성 - width 와 height HTML이 웹 브라우저에서 렌더링 되면 각각의 요소들은 width와 height속성을 가지게 됩니다. 각각의 요소마다 폭과 높이의 정보를 가지고 있다는 말입니다. 사용자는 이 width와 height속성의 값을 변경해서 요소의 크기를 결정할 수 있습니다. See the Pen Width & Height by Gon (@gon-91) on CodePen. 요소의 크기보다 내용물이 크다면? - overfl..

2022.05.25

컴퓨터/HTML&CSS

Commnet

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

Javascript - 화면, 웹페이지, 요소의 위치

서론 Javascript로 웹 페이지를 다루다 보면 화면, 웹페이지, 요소들의 위치 값을 구해야 하는 경우가 많이 발생합니다. 본문에서 각각에 대한 위치정보를 어떻게 알아볼 수 있는지 확인해 봅시다. 화면의 폭과 높이 우선 화면 즉, 표시되는 출력장치의 폭과 높이를 알아보도록 하겠습니다. PC로 보고 있다면 보고 있는 여러분의 모니터가 됩니다. console.log(window.screen.height); // 화면의 높이 console.log(window.screen.width); // 화면의 폭 웹 브라우저의 폭과 높이 사용자들은 웹브라우저가 출력되는 화면은 자유롭게 조정할 수 있습니다. 전체 화면 모드를 사용하던가, 창을 최대화를 하거나 사용자 지정의 크기로 사용하는 등 말입니다. 심지어 스크롤바 ..

2022.05.17

컴퓨터/Javascript

Commnet

백준 2750 - 수 정렬하기

2750번: 수 정렬하기 첫째 줄에 수의 개수 N(1 ≤ N ≤ 1,000)이 주어진다. 둘째 줄부터 N개의 줄에는 수 주어진다. 이 수는 절댓값이 1,000보다 작거나 같은 정수이다. 수는 중복되지 않는다. www.acmicpc.net 수 정렬하기 백준 단계별 풀어보기 정렬 편에 있는 가장 첫 번째 문제입니다. 컴퓨터 알고리즘을 배울 때 정렬중에가장 기초 정렬방법은 버블 정렬입니다. 본문은 버블정렬의 개념을 C로 구현하여 풀도록 하겠습니다. 문제를 정리하면 다음과 같습니다. 첫 번째 입력값(N) - 정렬이 필요한 수의 개수 (1

2022.05.16

컴퓨터/문제풀이집

Commnet