본문 바로가기
728x90

전체 글89

[HTML, CSS] display 속성 CSS에서 display 속성은 HTML 요소가 화면에서 어떻게 표시되는지를 정의하는 속성입니다. HTML의 모든 요소는 display 속성에 디폴트값을 가지고 있는데, 다른 값을 가지도록 지정할 수도 있습니다. display 속성에 가장 자주 사용되는 4가지 값 inline, block, inline-block, none을 알아보도록 하겠습니다.  ① display: inline;display 속성이 inline으로 지정된 요소는 줄바꿈 없이 다른 요소들과 같은 줄에 배치됩니다. inline 요소의 크기는 내용의 크기만큼이기 때문에 width와 height과 같은 속성은 반영되지 않습니다. margin과 padding은 좌우로는 반영되지만, 같은 줄에 배치되기 때문에 상하로는 반영되지 않습니다. (, .. 2023. 5. 31.
[HTML, CSS] 그리드(Grid) 레이아웃 - 아이템 편 그리드(Grid) 레이아웃은 행과 열을 지원하는 격자식 구조입니다. 이번 글에서는 그리드 레이아웃에서 그리드 아이템에 대해서 설명하겠습니다. 플렉스 구조와 플렉스 컨테이너에 대한 이야기는 다음 글을 참고하시길 바랍니다. [HTML, CSS] 그리드(Grid) 레이아웃 - 컨테이너 편그리드(Grid) 레이아웃은 행과 열을 지원하는 격자식 구조입니다. 2차원 상에서 요소들을 배치하기가 직관적이기 때문에 웹페이지를 디자인하는 것이 쉽다는 장점이 있습니다. 1차원 상에서 요소hyeok1235.tistory.com 그리드 레이아웃에서 한 칸을 의미하는 그리드 셀은 그리드 라인이라는 가상의 선으로 구분됩니다. 그리드 셀은 그리드 아이템을 담을 수 있는 하나의 틀과 같은 역할을 합니다. 그리드 라인에서 가로선과 세로.. 2023. 5. 9.
[HTML, CSS] 그리드(Grid) 레이아웃 - 컨테이너 편 그리드(Grid) 레이아웃은 행과 열을 지원하는 격자식 구조입니다. 2차원 상에서 요소들을 배치하기가 직관적이기 때문에 웹페이지를 디자인하는 것이 쉽다는 장점이 있습니다.  1차원 상에서 요소들을 배치하는 플렉스 레이아웃에 대해서는 각각 컨테이너 편과 아이템 편으로 나누어서 설명했으니 참고하시길 바랍니다.→ [HTML, CSS] 플렉스(Flex) 레이아웃 - 컨테이너 편→ [HTML, CSS] 플렉스(Flex) 레이아웃 - 아이템 편 그리드 레이아웃을 시작하는 방법은 가장 먼저 display 속성을 grid 또는 inline-grid로 설정해줘야 합니다..container { display: grid; /* display: inline-grid; */} 그리드 레이아웃은 플렉스 레이아웃과 마찬가지로 .. 2023. 5. 7.
[HTML, CSS] 플렉스(Flex) 레이아웃 - 아이템 편 Flexbox, Flexible Box로도 불리는 플렉스(Flex)는 이름 그대로 더 유연한(Flexible)한 반응형 디자인을 지원합니다. 이번 글에서는 플렉스 구조에서 플렉스 아이템에 대해서 설명하겠습니다.플렉스 구조와 플렉스 컨테이너에 대한 이야기는 다음 글을 참고하시길 바랍니다. [HTML, CSS] 플렉스(Flex) 레이아웃 - 컨테이너Flexbox, Flexible Box로도 불리는 플렉스(Flex)는 이름 그대로 더 유연한(Flexible)한 반응형 디자인을 지원한다. 여러 요소들이 있으면 1차원에 한해서 요소들의 방향, 크기, 정렬과 같은 다양한 속성들hyeok1235.tistory.com 플렉스 아이템은 ① order, ②  flex-basis, ③ flex-shrink, ④ flex-g.. 2023. 2. 9.
[Python] Pandas 라이브러리 기초 2 Pandas 라이브러리에 대해 처음이라면 기초적인 부분을 설명한 이 글을 참고하시길 바랍니다. [Python] Pandas 라이브러리 기초 1 Pandas는 데이터 분석을 위해 만들어진 파이썬 라이브러리이다. 배열 계산에 특화된 NumPy를 기반으로 하는 Pandas는 구조화된 데이터를 빠르고 효율적으로 처리할 수 있다는 장점이 있다. Pandas가 다 hyeok1235.tistory.com 이전 글에서는 Pandas 라이브러리의 가장 기초적인 부분을 알아보았다면, 이번에는 좀 더 자주 사용할 수 있는 내용들을 다루려고 합니다. ① DataFrame 정렬 1-1) 인덱스 기준 sort_index 메소드는 행과 열에 지정된 인덱스를 기준으로 데이터를 정렬합니다. 인자로는 drop 메소드에 사용된 axis와.. 2023. 2. 3.
[Python] Pandas 라이브러리 기초 1 Pandas는 데이터 분석을 위해 만들어진 파이썬 라이브러리입니다. 배열 계산에 특화된 NumPy를 기반으로 하는 Pandas는 구조화된 데이터를 빠르고 효율적으로 처리할 수 있다는 장점이 있습니다. ① Pandas 호출하기 >>> import pandas as pd # Pandas 라이브러리를 pd라는 별칭으로 불러오기 ② Series와 DataFrame Pandas가 다루는 데이터 형태에는 Series와 DataFrame이 있습니다. 먼저 각각의 데이터들을 생성하는 방법을 알아본 뒤, 데이터들을 조작하는 방법에 대해서 알아봅시다. 1) Series Series 데이터는 NumPy의 배열에서 조금 더 보강된 형태입니다. Series의 인덱스는 기본값이 0부터 시작하는 정수값인데, 인덱싱 방법을 다른 숫.. 2023. 1. 24.
반응형