Web/HTML, CSS(78)
-
Web/HTML, CSS
2025.06.04
6
[CSS] CSS 클래스 네이밍의 정석, BEM 방식이란? (CSS 방법론)
CSS 방법론(CSS Architecture / Methodologies)에 대해서 아시나요? CSS 방법론은 CSS를 체계적으로 관리하고 유지보수를 쉽게 하기 위한 설계 철학이나 규칙의 모음이라고 할 수 있습니다. 단순히 예쁘게 보이는 걸 넘어서, 정해진 규칙이 대규모 프로젝트에서도 깨지지 않고, 확장 가능하게 만드는 것을 목표로 합니다. 오늘은 여러 가지 CSS 방법론 중에서 BEM 방식에 대해 알아보도록 하겠습니다. BEM 방식이란? BEM은 Block, Element, Modifier의 줄임말로, CSS 클래스명을 구조적이고 일관성 있게 짓기 위한 네이밍 방법론입니다. 특히 유지보수와 협업이 중요한 대규모 프로젝트에서 특히 빛을 발하는 CSS를 더욱 체계적으로 관리할 수 있도록 도와줍니다. 구성..
-
Web/HTML, CSS
2024.01.31
1
[HTML] p 태그 줄바꿈(개행) 적용 안될 때 해결법
태그는 HTML에서 텍스트를 표현하는데 사용되는 기본적인 태그로 여기서 p는 문단을 뜻하는 paragraph의 약자입니다. 하지만 이 태그는 기본적으로는 개행을 처리하지 못해 텍스트들이 기본적으로 일렬로 쭉 나열되는 형태로 표현이 되는데요. 이러면 문단의 가독성이 떨어지겠죠. 이번 포스팅에서 해결방법에 대해 알아보겠습니다. 문제) 태그에서 개행이 표현이 안됨 See the Pen P Tage1 by wjdxo513 (@wjdxo513) on CodePen. 위의 예제를 보시면 태그 안에서 애국가의 1절의 가사가 줄바꿈이 4번 이루어졌음에도 불구하고 줄바꿈이 표현되지 않고 일렬로 쭉 나열된 것을 보실 수 있습니다. 태그는 기본적으로 white-space 속성값이 normal으로 되어 있어 개행이 무시되기에..
-
Web/HTML, CSS
2023.07.15
1
[CSS] position : sticky 속성 - 요소를 스크롤에 따라오게 만들기
sticky는 영어로 '끈적끈적하다'라는 형용사입니다. position : sticky로 설정하면 끈적끈적하다는 말처럼 스크롤을 계속해서 따라오는 html요소를 생성할 수 있는데요. sticy position으로 설정되어 있는 요소는 스크롤하지 않을 때는 static position처럼 동작하다가 스크롤할 때는 이전 포스팅에서 배웠던 fixed position처럼 작동합니다. 아래 예시를 보시면 이해가 빠르실 겁니다. position : sticky 사용법 See the Pen position : sticky by wjdxo513 (@wjdxo513) on CodePen. top : 상단에서 픽셀만큼 요소를 아래에 고정시킵니다. right : 우측에서 픽셀만큼 요소를 왼쪽에 고정시킵니다. left : 좌..
-
Web/HTML, CSS
2023.07.12
[CSS] position : fixed 속성 - 특정 위치에 요소 고정시키기
position : fixed는 문서의 흐름과 상관없이 위치로 좌표로 결정합니다. 브라우저 창(뷰포트)이 기준이 되며 브라우저 창의 왼쪽 위 꼭짓점을 원점으로 두고 좌표가 계산됩니다. 이 position : fixed 속성을 사용하면 이름처럼 브라우저 창을 스크롤하더라도 한 곳에 계속 고정되어 표시됩니다. 이를 활용하여 헤더, 사이드바, 모달 창 등을 구현할 수 있습니다. position : fixed 사용법 See the Pen position : fixed by wjdxo513 (@wjdxo513) on CodePen. top : 상단에서 픽셀만큼 요소를 아래에 고정시킵니다. right : 우측에서 픽셀만큼 요소를 왼쪽에 고정시킵니다. left : 좌측에서 픽셀만큼 요소를 오른쪽에 고정시킵니다. bo..
-
Web/HTML, CSS
2023.07.11
[CSS] position 속성 - HTML 요소 위치 제어하기
CSS의 position 속성은 요소의 위치를 배치하는데 사용되는 속성입니다. position 속성을 이용하면 텍스트나 이미지와 같은 특정 html 요소를 나란히 배치할 수도 있고 가로나 세로로 원하는 위치에 배치할 수도 있으며 경우에 따라서는 스크롤을 따라다니거나 화면 한 곳에 고정도 시킬 수 있습니다. CSS position 속성 사용법 CSS position 속성값 static : 기본적으로 설정되는 값으로, 요소를 문서의 흐름에 맞추어 배치합니다. 다른 위치 속성들과 달리 추가 속성을 사용하지 않습니다. relative : 이전 요소에 자연스럽게 연결하여 배치하되 상대적인 위치를 지정할 수 있습니다. top, right, bottom, left 속성을 사용하여 요소를 이동시킬 수 있습니다. abs..
-
Web/HTML, CSS
2023.07.10
[CSS] display : table 속성을 활용한 테이블 레이아웃
일반적으로 웹에서 테이블을 만드려면 태그를 사용하지만 display : table 속성을 사용해서 HTML 요소를 테이블 형태로 표시할 수도 있습니다. 이번 포스팅에서는 display: table을 사용하여 테이블 형태의 레이아웃을 만드는 방법에 대해 알아보겠습니다. display : table 사용법 See the Pen css display:table by wjdxo513 (@wjdxo513) on CodePen. display: table = 해당 요소를 테이블 컨테이너로 만듭니다. display: table-row = 해당 요소를 테이블 행으로 만듭니다. display: table-cell = 해당 요소를 테이블 열로 만듭니다. 위와 같이 display:table을 사용하여 요소를 테이블 컨테이너..
-
Web/HTML, CSS
2023.07.09
[CSS] display : none에 대하여 (visibility : hidden)과의 차이
※ "display: none"은 요소를 화면에서 숨기고 레이아웃에 공간을 차지하지 않게 만드는 데 사용됩니다. 화면에서 특정 요소를 감추고 싶다면 어떻게 해야 할까요? 이럴 때는 주로 CSS의 display속성을 none로 바꿔주면서 요소를 화면에서 감추게 됩니다. "display:none"을 적용한 요소는 브라우저에서 렌더링 되지 않으며, 화면에도 표시되지도 공간을 차지하지도 않습니다. 접근성, 동적 상태 관리, 성능 개선, 애니메이션 등 다양한 목적으로 사용될 수 있으나, 남용에 주의해야 하며, 접근성과 검색 엔진 최적화를 고려해야 합니다. display : none를 사용하는 이유 웹 접근성: 일부 웹 요소는 시각적으로는 표시되지 않지만 스크린 리더와 같은 보조 기술을 사용하는 사용자에게는 필요할..
-
Web/HTML, CSS
2023.06.27
[CSS] display : grid에 대하여(CSS Grid) - 그리드 레이아웃
그리드(grid)는 이전 포스팅에서 배웠던 플렉스(flex)와 같이 모던 CSS에서 레이아웃을 다루기 위해 사용되는 기능으로 반응형 웹 페이지 레이아웃을 효과적으로 만들기 위한 레이아웃 시스템입니다. 플렉스(flex)가 가로 또는 새로 단일 방향 레이아웃을 배치하는 데 적합하다면 그리드는 마치 표처럼 행과 열로 구성된 레이아웃을 배치하는데 더 적합한 기능이라고 할 수 있습니다. CSS 그리드는 행(row)과 열(column)로 구성된 2차원 그리드로 웹 요소를 배치하는 방법을 제공하며 그리드 아이템의 위치와 크기를 유연하게 조정할 수 있습니다. 이를 통해 반응형 레이아웃을 구현하는데 매우 유용합니다. ※ CSS Flexbox에 궁금하시다면 아래 글을 참고해 주세요. [CSS] display : flex에..
-
Web/HTML, CSS
2023.06.21
[CSS] display : flex에 대하여(Flexible Box) - 플렉스 박스 레이아웃
반응형 웹을 구현하는 가장 대중적인 방법은 flex box를 활용한 플렉스 박스 레이아웃으로 화면을 구성하는 것입니다. 플렉스 박스 레이아웃이란? 플렉스 박스(Flexbox) 레이아웃은 CSS의 display 속성 중 하나인 display: flex를 사용하여 요소들을 가로 또는 세로축을 따라 정렬하고 유연하게 배치하는 레이아웃 모델입니다. 이 플렉스 박스를 사용하면 여유 공간에 따라 너비나 높이, 위치 등을 자유롭게 변형할 수 있고 손쉽게 화면을 분할하여 필요한 HTML요소들을 배치할 수 있기 때문에 웹 페이지의 레이아웃을 쉽게 조정하고 정렬할 수 있습니다. 플렉스 박스의 구성요소 flex container : 웹 문서에 텍스트나 이미지, 표 등 웹 요소들을 플렉스 하게 사용하려면 플렉스 컨테이너로 묶..
-
Web/HTML, CSS
2023.06.18
2
[CSS] display : block, inline, inline-block 속성(블록 레벨, 인라인 레벨 요소)
블록 레벨 요소와 인라인 레벨 요소 HTML 태그들은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라집니다. 위의 이미지를 보시면 블록 레벨 요소는 세로로 하나씩 배치되어 있는 반면 인라인 레벨 요소는 가로로 하나씩 배치되어 있는 모습을 보실 수 있습니다. 블록 레벨 요소에 대하여 태그를 사용하여 요소를 삽입했을 경우 혼자서 한 줄을 차지하는 요소입니다. 해당 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다. 먼저 블록 레벨 요소는 좌측의 사진처럼 요소를 삽입 했을 때 혼자 한 줄을 차지합니다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미입니다. 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소들이 올 수 없습니다. 대표적인 블록 레벨 HTML 태그들 , , , , ..
-
Web/HTML, CSS 2025.06.04 6[CSS] CSS 클래스 네이밍의 정석, BEM 방식이란? (CSS 방법론) CSS 방법론(CSS Architecture / Methodologies)에 대해서 아시나요? CSS 방법론은 CSS를 체계적으로 관리하고 유지보수를 쉽게 하기 위한 설계 철학이나 규칙의 모음이라고 할 수 있습니다. 단순히 예쁘게 보이는 걸 넘어서, 정해진 규칙이 대규모 프로젝트에서도 깨지지 않고, 확장 가능하게 만드는 것을 목표로 합니다. 오늘은 여러 가지 CSS 방법론 중에서 BEM 방식에 대해 알아보도록 하겠습니다. BEM 방식이란? BEM은 Block, Element, Modifier의 줄임말로, CSS 클래스명을 구조적이고 일관성 있게 짓기 위한 네이밍 방법론입니다. 특히 유지보수와 협업이 중요한 대규모 프로젝트에서 특히 빛을 발하는 CSS를 더욱 체계적으로 관리할 수 있도록 도와줍니다. 구성..
-
Web/HTML, CSS 2024.01.31 1[HTML] p 태그 줄바꿈(개행) 적용 안될 때 해결법 태그는 HTML에서 텍스트를 표현하는데 사용되는 기본적인 태그로 여기서 p는 문단을 뜻하는 paragraph의 약자입니다. 하지만 이 태그는 기본적으로는 개행을 처리하지 못해 텍스트들이 기본적으로 일렬로 쭉 나열되는 형태로 표현이 되는데요. 이러면 문단의 가독성이 떨어지겠죠. 이번 포스팅에서 해결방법에 대해 알아보겠습니다. 문제) 태그에서 개행이 표현이 안됨 See the Pen P Tage1 by wjdxo513 (@wjdxo513) on CodePen. 위의 예제를 보시면 태그 안에서 애국가의 1절의 가사가 줄바꿈이 4번 이루어졌음에도 불구하고 줄바꿈이 표현되지 않고 일렬로 쭉 나열된 것을 보실 수 있습니다. 태그는 기본적으로 white-space 속성값이 normal으로 되어 있어 개행이 무시되기에..
-
Web/HTML, CSS 2023.07.15 1[CSS] position : sticky 속성 - 요소를 스크롤에 따라오게 만들기 sticky는 영어로 '끈적끈적하다'라는 형용사입니다. position : sticky로 설정하면 끈적끈적하다는 말처럼 스크롤을 계속해서 따라오는 html요소를 생성할 수 있는데요. sticy position으로 설정되어 있는 요소는 스크롤하지 않을 때는 static position처럼 동작하다가 스크롤할 때는 이전 포스팅에서 배웠던 fixed position처럼 작동합니다. 아래 예시를 보시면 이해가 빠르실 겁니다. position : sticky 사용법 See the Pen position : sticky by wjdxo513 (@wjdxo513) on CodePen. top : 상단에서 픽셀만큼 요소를 아래에 고정시킵니다. right : 우측에서 픽셀만큼 요소를 왼쪽에 고정시킵니다. left : 좌..
-
Web/HTML, CSS 2023.07.12[CSS] position : fixed 속성 - 특정 위치에 요소 고정시키기 position : fixed는 문서의 흐름과 상관없이 위치로 좌표로 결정합니다. 브라우저 창(뷰포트)이 기준이 되며 브라우저 창의 왼쪽 위 꼭짓점을 원점으로 두고 좌표가 계산됩니다. 이 position : fixed 속성을 사용하면 이름처럼 브라우저 창을 스크롤하더라도 한 곳에 계속 고정되어 표시됩니다. 이를 활용하여 헤더, 사이드바, 모달 창 등을 구현할 수 있습니다. position : fixed 사용법 See the Pen position : fixed by wjdxo513 (@wjdxo513) on CodePen. top : 상단에서 픽셀만큼 요소를 아래에 고정시킵니다. right : 우측에서 픽셀만큼 요소를 왼쪽에 고정시킵니다. left : 좌측에서 픽셀만큼 요소를 오른쪽에 고정시킵니다. bo..
-
Web/HTML, CSS 2023.07.11[CSS] position 속성 - HTML 요소 위치 제어하기 CSS의 position 속성은 요소의 위치를 배치하는데 사용되는 속성입니다. position 속성을 이용하면 텍스트나 이미지와 같은 특정 html 요소를 나란히 배치할 수도 있고 가로나 세로로 원하는 위치에 배치할 수도 있으며 경우에 따라서는 스크롤을 따라다니거나 화면 한 곳에 고정도 시킬 수 있습니다. CSS position 속성 사용법 CSS position 속성값 static : 기본적으로 설정되는 값으로, 요소를 문서의 흐름에 맞추어 배치합니다. 다른 위치 속성들과 달리 추가 속성을 사용하지 않습니다. relative : 이전 요소에 자연스럽게 연결하여 배치하되 상대적인 위치를 지정할 수 있습니다. top, right, bottom, left 속성을 사용하여 요소를 이동시킬 수 있습니다. abs..
-
Web/HTML, CSS 2023.07.10[CSS] display : table 속성을 활용한 테이블 레이아웃 일반적으로 웹에서 테이블을 만드려면 태그를 사용하지만 display : table 속성을 사용해서 HTML 요소를 테이블 형태로 표시할 수도 있습니다. 이번 포스팅에서는 display: table을 사용하여 테이블 형태의 레이아웃을 만드는 방법에 대해 알아보겠습니다. display : table 사용법 See the Pen css display:table by wjdxo513 (@wjdxo513) on CodePen. display: table = 해당 요소를 테이블 컨테이너로 만듭니다. display: table-row = 해당 요소를 테이블 행으로 만듭니다. display: table-cell = 해당 요소를 테이블 열로 만듭니다. 위와 같이 display:table을 사용하여 요소를 테이블 컨테이너..
-
Web/HTML, CSS 2023.07.09[CSS] display : none에 대하여 (visibility : hidden)과의 차이 ※ "display: none"은 요소를 화면에서 숨기고 레이아웃에 공간을 차지하지 않게 만드는 데 사용됩니다. 화면에서 특정 요소를 감추고 싶다면 어떻게 해야 할까요? 이럴 때는 주로 CSS의 display속성을 none로 바꿔주면서 요소를 화면에서 감추게 됩니다. "display:none"을 적용한 요소는 브라우저에서 렌더링 되지 않으며, 화면에도 표시되지도 공간을 차지하지도 않습니다. 접근성, 동적 상태 관리, 성능 개선, 애니메이션 등 다양한 목적으로 사용될 수 있으나, 남용에 주의해야 하며, 접근성과 검색 엔진 최적화를 고려해야 합니다. display : none를 사용하는 이유 웹 접근성: 일부 웹 요소는 시각적으로는 표시되지 않지만 스크린 리더와 같은 보조 기술을 사용하는 사용자에게는 필요할..
-
Web/HTML, CSS 2023.06.27[CSS] display : grid에 대하여(CSS Grid) - 그리드 레이아웃 그리드(grid)는 이전 포스팅에서 배웠던 플렉스(flex)와 같이 모던 CSS에서 레이아웃을 다루기 위해 사용되는 기능으로 반응형 웹 페이지 레이아웃을 효과적으로 만들기 위한 레이아웃 시스템입니다. 플렉스(flex)가 가로 또는 새로 단일 방향 레이아웃을 배치하는 데 적합하다면 그리드는 마치 표처럼 행과 열로 구성된 레이아웃을 배치하는데 더 적합한 기능이라고 할 수 있습니다. CSS 그리드는 행(row)과 열(column)로 구성된 2차원 그리드로 웹 요소를 배치하는 방법을 제공하며 그리드 아이템의 위치와 크기를 유연하게 조정할 수 있습니다. 이를 통해 반응형 레이아웃을 구현하는데 매우 유용합니다. ※ CSS Flexbox에 궁금하시다면 아래 글을 참고해 주세요. [CSS] display : flex에..
-
Web/HTML, CSS 2023.06.21[CSS] display : flex에 대하여(Flexible Box) - 플렉스 박스 레이아웃 반응형 웹을 구현하는 가장 대중적인 방법은 flex box를 활용한 플렉스 박스 레이아웃으로 화면을 구성하는 것입니다. 플렉스 박스 레이아웃이란? 플렉스 박스(Flexbox) 레이아웃은 CSS의 display 속성 중 하나인 display: flex를 사용하여 요소들을 가로 또는 세로축을 따라 정렬하고 유연하게 배치하는 레이아웃 모델입니다. 이 플렉스 박스를 사용하면 여유 공간에 따라 너비나 높이, 위치 등을 자유롭게 변형할 수 있고 손쉽게 화면을 분할하여 필요한 HTML요소들을 배치할 수 있기 때문에 웹 페이지의 레이아웃을 쉽게 조정하고 정렬할 수 있습니다. 플렉스 박스의 구성요소 flex container : 웹 문서에 텍스트나 이미지, 표 등 웹 요소들을 플렉스 하게 사용하려면 플렉스 컨테이너로 묶..
-
Web/HTML, CSS 2023.06.18 2[CSS] display : block, inline, inline-block 속성(블록 레벨, 인라인 레벨 요소) 블록 레벨 요소와 인라인 레벨 요소 HTML 태그들은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라집니다. 위의 이미지를 보시면 블록 레벨 요소는 세로로 하나씩 배치되어 있는 반면 인라인 레벨 요소는 가로로 하나씩 배치되어 있는 모습을 보실 수 있습니다. 블록 레벨 요소에 대하여 태그를 사용하여 요소를 삽입했을 경우 혼자서 한 줄을 차지하는 요소입니다. 해당 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다. 먼저 블록 레벨 요소는 좌측의 사진처럼 요소를 삽입 했을 때 혼자 한 줄을 차지합니다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미입니다. 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소들이 올 수 없습니다. 대표적인 블록 레벨 HTML 태그들 , , , , ..