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

Python - 파이썬과 아나콘다 그리고 가상환경

서론 파이썬을 공부하기 시작하면 가장 먼저 파이썬을 설치하고 사용하는 방법에 대해서 배우게 됩니다. 이때 파이썬을 설치하는 과정을 웹에서 검색해보면 정말 다양한 방법으로 설명을 해주어 오히려 혼동을 가지게 되는 경우가 있기도 합니다. 본문에서는 무작정 웹에서 검색한 파이썬을 따라 하기 전에 또는 따라한 후에 조금 더 깊이 파이썬을 다루기 전에 알아두면 좋은 상식을 넓히는 시간이 되었으면 좋겠습니다. 파이썬 - 파이썬은 프로그램이다. 이게 무슨 소리야? '파이썬은 프로그래밍 언어 아니야?'라고 반문하는 사람들 또한 많을 것이다. 특히 프로그래밍 세계에 입문하는 사람일수록 뭔 X소리냐고 물어볼 수 있다. 하지만 필자의 생각은 파이썬을 프로그램이 맞다. 가령 한 가지 예를 들어보도록 하자. C언어를 설치한다는..

2022.11.09

컴퓨터/Python

Commnet

내맘대로 티스토리 스킨 4 - 검색 및 댓글 구현 추가

서론 및 GitHub 역시나 오늘도.. 하기 싫은 스킨 꾸미기 왜 시작했을까 깊은 반성가 후회가 밀려옵니다. 다른 관심있는 공부 거리가 아주 많은데... 여하튼.. 비록 용두사미가 될지언정 어느 정도 쓸만한 결과물이 나오기 전까지는 계속 진행해 봐야겠습니다. 지난번에 검색 구현을 하려고 하는 과정에서 누군가 댓글을 달았는데... 제 블로그에는 댓글을 달수 있는 방법이 존재하지 않았습니다?! 어떻게 등록했는지 모르겠지만... 필요성을 느끼고 일단 구현했습니다. 계속해서 이것저것 업로드를 하고 있는데 우선은 디테일보다는 구도를 잡아서 전체적인 뼈대를 만든 후 꾸미는 것이 좋을 것 같아서 디테일은 나중으로 미루고 중요한 부분들에 대한 구도를 확립하는 방식으로 진행하려고 합니다. 여러 소스코드의 변화는 아래 G..

2022.11.07

컴퓨터/Projects

Commnet

내맘대로 티스토리 스킨 3 - Bata Ver 업로드

서론 및 GitHub 조금조금씩 수정해가면서 하려는 계획을 세우고 하다 보니.. 글 쓰는 것도 쉽지 않고 미적 감각과 글 감각이 현저하게 떨어지는 나에게는 너무 버거운 일이었습니다. 그래서 장기간 포스트를 중단하고 사실 못하는 영역이다 보니 하기 싫어서 빈둥거린 게 가장 큼.. 열심히 했으면 3일이면 하지 않았을까..? 3개월이라는 긴 시간 동안 부족한 감각을 총동원해서 어느 정도 구조를 만들어서 적용해 보았습니다. 물론 GitHub에도 올려두었으니.. 참고하시면 도움이 될 듯합니다. GitHub - Gon-91/TISTORY-SKIN Contribute to Gon-91/TISTORY-SKIN development by creating an account on GitHub. github.com Bata..

2022.10.31

컴퓨터/Projects

Commnet 1

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