본문 바로가기
728x90

Frontend/HTML, CSS16

[HTML, CSS] CSS 방법론 - BEM 방식 웹페이지를 개발할 때, 일관성 있고 구조화된 네이밍 방식은 다른 사람들과의 협업이나 유지 보수를 용이하게 만듭니다. 이번 글에서는 대표적으로 사용되는 네이밍 방식 중 하나인 BEM 방식에 대해서 소개하겠습니다.  블럭, 엘리먼트, 모디파이어(Block, Element, Modifier)의 축약어인 BEM은 세 가지 부분을 각각 더블 언더바(__)와 더블 하이픈(--)으로 구분합니다. 사용 예시는 다음과 같습니다..block__element--modifier { ...}  * BEM 방식은 아이디보다는 클래스의 명칭을 사용합니다.** 만약 여러 단어를 사용해야 될 때는 싱글 하이픈(-)으로 연결합니다.  ① 블럭 블럭은 독립적으로 기능할 수 있어서 분리가 가능한 부분을 의미합니다. 보통 웹페이지 안.. 2023. 8. 6.
[HTML, CSS] 그리드와 플렉스에서의 정렬 (justify & align) 이번 글에서는 블로그 내에서 간단하게 언급된 적이 있는 그리드/플렉스에서의 정렬과 관련된 속성을 정리하겠습니다. 가장 먼저 확인해야 할 것은 메인 축이 설정되어 있는 방향입니다. 메인 축(ex: flex-direction) 속성은 가로축(row)가 디폴트 값이지만 세로축(column)으로도 설정할 수 있습니다.  메인 축이 설정되면 ① 메인 축과 평행한 방향에서의 정렬과 ② 메인축과 수직인 방향에서의 정렬로 나뉘어집니다. 전자는 justify-_______ 속성에 해당하고, 후자는 align-_______ 속성에 해당하게 됩니다. (빈칸에는 content, items, self가 들어갈 수 있습니다.)* 플렉스 구조에서는 justify-items와 justify-self는 작동하지 않습니다. 1) jus.. 2023. 7. 24.
[HTML, CSS] 여러가지 정렬 방법 이번 글에서는 CSS에서 사용할 수 있는 여러가지 정렬 방법에 대해서 설명하겠습니다.  먼저 가로축을 기준으로 정렬하는 방법들입니다. 1-1) 요소 자체를 가운데 정렬display 속성이 block인 요소들은 margin: auto;를 사용하여 가로축에서 가운데 정렬을 할 수 있습니다. 요소의 너비를 제외한 공간이 좌우로 나뉘어지기 때문에, width 속성이 설정되지 않거나 100% 이상일 경우에는 적용되지 않습니다.   margin:auto;로 요소를 가운데 정렬 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 1-2) 요소 내부의 텍스트 가운데 정렬요소 안에 있는 텍스트를 가운데 정렬하기 위해서는 text-align: center;를 사용하면 됩니다.   .. 2023. 7. 18.
[HTML, CSS] z-index 속성 z-index 속성은 요소들의 상대적 깊이를 조정할 수 있게 합니다. 웹페이지 안에서 상하좌우를 조정하는 x축과 y축에 z축을 추가하는 것입니다. 이를 통해서 요소들이 겹치게 되었을 때, 어떤 요소가 앞으로 나오는지가 정해집니다. z축과 관련해서는, 보통 코드 안에서 뒤에 위치한 요소가 앞으로 나오게 됩니다. 하지만 z-index 속성을 사용하면 이런 규칙에 영향을 받지 않고 새롭게 배치 순서를 정의할 수 있습니다.  z-index 속성값은 auto나 정수 값을 가질 수 있습니다. 만약 auto로 설정되면, z-index 속성이 설정되지 않은 것과 동일한 효과를 가지게 됩니다. 정수 값으로 설정되어 있을 때는, 값이 클수록 앞으로 나오게 됩니다. 같은 정수 값으로 설정된 경우에는 더 나중에 작성된 HTM.. 2023. 7. 9.
[HTML, CSS] position 속성 이번 글에서는 요소를 배치되는 방식을 정의하는 position 속성에 대해서 설명하겠습니다. position 속성 값은 총 5가지로, ① static, ② relative, ③ absolute, ④ fixed, ⑤ sticky가 있습니다. position 속성 값이 정해지면 top, bottom, left, right 속성을 통해서 위치를 구체적으로 지정할 수 있습니다.  ① static (기본값)요소의 position 속성이 static으로 설정되면, 일반적인 문서의 흐름에 따라 배치됩니다. top, bottom, left, right 속성도 아무런 영향을 주지 못합니다.  position: static;인 div 요소 [1]position: static;인 div 요소 [2]" data-ke-type.. 2023. 7. 3.
[HTML, CSS] 줄바꿈 관련 속성 (word-break, word-wrap) 이번 글에서는 줄바꿈과 관련된 속성인 ① word-wrap, ② word-break에 대해서 설명하도록 하겠습니다.줄바꿈은 글이 쓰여진 언어에 따라서 차이가 발생하게 됩니다. 크게 중국어/일본어/한국어인 CJK(Chinese, Japanese, Korean)과 그 외 언어인 non-CJK(숫자, 영어, 베트남어 ), 두 가지로 구분해서 설명드리겠습니다. ① word-wrap 속성word-wrap 속성은 주어진 공간을 넘친 긴 단어들이 분리될 수 있도록 허용해주는 속성입니다. 동일한 효과를 내는 속성으로는 overflow-wrap 속성이 있습니다. overflow-wrap 속성은 word-wrap 속성의 확장판의 목적으로 만들어졌는데, 많은 브라우저들이 도입하게 되면서 서로 동일한 속성이 되었습니다. ov.. 2023. 6. 28.
반응형

티스토리툴바