HTML&CSS - [CSS] Layout (요소배치) 완전 정복 2 - flex(Flexible Box Layout)

서론 지난 글에서 CSS를 통해 요소를 배치하는 방법은 여러 가지가 있다고 말했습니다. 그중 Display속성에서 요소 자체의 내부를 어떻게 보일 것인가를 결정하는 속성 값이 있다고 언급했었죠. 바로 flex와 grid인데요. 오늘은 그중 flex(Flexible Box Layout) 기술에 대해서 알아보도록 하겠습니다. 이 글을 쓰는 시점에서 CSS의 대표적인 레이아웃 기술이면서, 손쉽게 사용할 수 있는 방법 중 하나입니다. 이전 글이 궁금하다면 아래 링크를 눌러주세요. HTML&CSS - [CSS] Layout (요소배치) 완전 정복 1 - 개요 서론 웹 페이지를 만드는 과정에서 요소를 원하는 위치에 배치하는 것은 아주 중요한 일입니다. 그리고 CSS를 통해 요소를 배치하는 방법은 정말 여러 가지 방..

2022.11.17

컴퓨터/HTML&CSS

Commnet

HTML&CSS - [CSS] Layout (요소배치) 완전 정복 1 - 개요

서론 웹 페이지를 만드는 과정에서 요소를 원하는 위치에 배치하는 것은 아주 중요한 일입니다. 그리고 CSS를 통해 요소를 배치하는 방법은 정말 여러 가지 방법이 존재합니다. 처음 공부하는 과정에서는 "요소 가운데 정렬하는 방법", "요소 위치 설정"등으로 검색해서 그대로 따라 하는 식으로 사용하곤 했습니다. 분명히 따라 하면 잘 되긴 하는데... 문제를 해결하는 방법이 너무 많다. "언제 어떤 방법을 왜 쓰는 것이고 무엇이 효과적인가?"라는 의문점이 생겼습니다. 결과적으로 의문을 해소하기 위해 공부를 하다 보니, 이 정도는 알아야겠다는 생각이 들어 포스트를 작성하게 되었습니다. CSS에는 요소 배치를 위한 기술이 꾸준히 발전되고 있다. 다양한 요소 배치 기술이 존재한다. 장단점이 존재한다. 다양한 요소 ..

2022.11.16

컴퓨터/HTML&CSS

Commnet

HTML & CSS - [CSS] img 요소 다루기 1 ( 사이즈 조정 )

서론 웹 페이지를 만드는 과정에서 배경, 사진, 아이콘 등 다양한 이미지를 사용하게 됩니다. 불러오는 이미지 원본에 크기에 따라 생각처럼 배치하기 쉽지 않은 경우가 많습니다. 본문에서는 이미지를 원하는 크기와 방식으로 손쉽게 배치하는 몇 가지 방법에 대해서 알아보도록 하겠습니다. 1. Width & Height 속성 이용하기 1 가장 손쉽게 이미지를 조정하는 방법입니다. 가로, 세로의 크기를 정의하는 것으로 이미지 크기를 조정할 수 있습니다. See the Pen Img(width &height) by Gon (@gon-91) on CodePen. 다만, 사진의 비율에 문제가 생길 수 있습니다. 2. Width & Height 속성 이용하기 2 (상위 요소에 채우는 방법) 이미지를 어딘가 배치할 때 특정..

2022.09.01

컴퓨터/HTML&CSS

Commnet

HTML & CSS - SVG 다루기(삽입 방법)

서론 백터 이미지의 확장자명인 SVG파일을 웹 서비스상에서 많이 볼 수 있다. 실제로 서비스를 개발하는 과정에서도 이 SVG 파일을 이용하는 경우가 많다. 본문에서는 SVG에 대한 간략한 개념을 이해하고, 웹 개발을 사용하는데 어떻게 사용할 수 있는지 알아보자. 백터 이미지? SVG? 비트맵 계열의 이미지들을 각각의 픽셀에 대한 정보를 저장한 이미지 데이터입니다. 하지만, 백터 이미지는 수학적 함수를 이용해 이미지를 표현하는 방식을 말합니다. 수학적으로 표현한 이미지가 백터 이미지는 개념적인 종류를 구분하는 것입니다. 여기에 어떠한 규칙으로, 어떠한 표기법으로 이미지를 수학적인 표현을 할 것인가 또는 백터 이미지를 표현하는 규칙을 정한 형태가 바로 SVG입니다. 정리하자면, 백터 이미지는 개념이고 이를 ..

2022.06.20

컴퓨터/HTML&CSS

Commnet

HTML & CSS - Uicons 사용하기 (손쉽게 아이콘 이미지 삽입)

서론 웹 페이지를 만드는 과정에서 아이콘이나 이미지를 자주 사용하게 됩니다. 이때 아이콘이나 이미지를 구하고 사용하고자 하는 웹페이지에 적용하기에는 상당히 번거로운 과정들이 존재합니다. 본문에서는 flaticon에서 제공하는 Uicons를 사용해서 손쉽게 이미지 또는 아이콘을 추가하는 방법을 알아보겠습니다. Flaticon? unicons? Flaticon은 무료 아이콘을 제공해주는 사이트로 손쉽게 아이콘을 구해서 사용할 수 있습니다. 그중 flaticon에서는 Uicons라는 서비스를 제공해줍니다. unicons는 범용적인 아이콘을 무료로 제공해 줍니다. 물론 , 어느 정도 라이선스 약관에 따른 제약조건과 저작권 표시가 필요하긴 하지만, 공통된 아이콘을 사용하기 위해서 아주 효율적인 서비스입니다. 직접..

2022.06.18

컴퓨터/HTML&CSS

Commnet

HTML & CSS - [CSS] 요소 정렬하기

서론 원하는 레이아웃을 만들고 요소를 배치하는 과정에서 정렬은 필수적인 요소입니다. CSS에서 정렬을 하는 방법은 정말 다양하고 상황에 따라 적절하게 사용할 줄 알아야 합니다. 또한 부모 요소들이 변경되는 과정에서 정렬을 잘못 사용하게 되면 유지보수가 힘들어질 수 있기 때문에 정렬을 하는 다양한 방법에 대해 숙지하고 적절하게 사용하도록 합시다. 요소 수평(가로) 중앙 배치하기 - margin 이용 block요소는 margin속성을 이용해서 손쉽게 중앙으로 정렬이 가능합니다. 사실 중앙으로 정렬한다기보다는 중앙으로 요소를 배치하는 방법입니다. block요소는 자동으로 줄 바뀜이 일어나는 특징이 있습니다. 따라서 좌우의 여백 값이 동일하다면 자연스럽게 요소는 가운데로 옵니다. 자동으로 margin속성을 균일..

2022.06.12

컴퓨터/HTML&CSS

Commnet

HTML & CSS - [CSS] Midia Query(미디어 쿼리 @media)

서론 반응형 웹이라는 말을 많이 들어보셨을 겁니다. 간단하게 반응형 웹이란 웹페이지를 보여주면 화면의 크기, 장비 등에 따라 웹페이지가 다르게 보이는 웹서비스들을 통칭하는 말입니다. 이미 다양한 웹 서비스에서 반응형 웹을 경험해 봤을 것입니다. 앞선 포스트들에서 웹페이지의 레이아웃을 제어하기 위한 여러 가지 요소, 속성, 사용방법 등을 배웠습니다. 이제 이 내용들을 가지고 반응형 웹을 만들려면 화면의 크기, 장비 등을 구분하여 다르게 제어하도록 CSS에서 명령해야 될 것입니다. CSS에서 이러한 것을 가능하게 해주는 것이 Midia Query(미디어 쿼리)입니다. 본문에서는 이 미디어 쿼리에 대해 알아보고 몇 가지 예제들을 살펴보도록 하겠습니다. @meida - 미디어 쿼리 사용하기 CSS에서 화면의 크..

2022.05.30

컴퓨터/HTML&CSS

Commnet

HTML & CSS - [CSS] Boxmodel(박스모델 - 요소의 형태의 이해)

서론 지난 포스트들에서 웹 페이지의 레이아웃을 설정하기 위해서 요소의 크기나, 배치 방법에 관한 속성들을 배웠습니다. 직접 구현을 하는 과정에서 다양한 position 속성, size 속성들을 이용해도 원하지 않는 결과가 나오는 경험이 있을 것입니다. 본문에서는 요소의 형태가 어떻게 구성되어 있고 형태의 종류마다 특성을 살펴보면서 좀 더 효율적으로 웹 페이지의 레이아웃을 구성할 수 있는 능력을 키워보도록 합시다. Boxmodel(박스 모델) CSS에서 Element(요소) 또는 Tag(태그)를 하나의 박스의 형태로 관리합니다. 따라서 CSS에서 부르는 Boxmodel은 요소의 형태를 일컫는 말입니다. 그림처럼 모든 요소는 박스 형태로서 CSS에서 존재합니다. 이 요소의 박스단위를 어떻게 잘 제어하는가가 ..

2022.05.27

컴퓨터/HTML&CSS

Commnet

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