본문 바로가기
728x90

css15

[jQuery] css() 메서드 jQuery에서 css() 메서드는 선택 요소의 css 속성 값을 가져오거나 변경합니다. 다음은 css() 메서드의 사용 구문입니다. .css(propName) .css(propName, value) 다음의 코드 예시를 통해 메서드의 주요 사용 방법을 알아보겠습니다. Title of Page 12행 : css() 메서드를 통해 가져온 h1 태그의 "color" 속성 값을 prev_color 변수에 저장합니다. 13행 : css() 메서드를 통해 기존 h1 태그의 "color" 속성 값을 변경합니다. css() 메서드가 선택할 수 있는 요소가 여러 개라면, 웹페이지에서 가장 먼저 찾은 요소에 동작하게 됩니다. css() 메서드 다수의 속성 값을 선택하거나 변경할 수도 있습니다. 이 때는 속성들로 구성된 배.. 2023. 9. 13.
[HTML, CSS] CSS 방법론 - BEM 방식 웹페이지를 개발할 때, 일관성 있고 구조화된 네이밍 방식은 다른 사람들과의 협업이나 유지 보수를 용이하게 만듭니다. 이번 글에서는 대표적으로 사용되는 네이밍 방식 중 하나인 BEM 방식에 대해서 소개하겠습니다.  블럭, 엘리먼트, 모디파이어(Block, Element, Modifier)의 축약어인 BEM은 세 가지 부분을 각각 더블 언더바(__)와 더블 하이픈(--)으로 구분합니다. 사용 예시는 다음과 같습니다..block__element--modifier { ...}  * BEM 방식은 아이디보다는 클래스의 명칭을 사용합니다.** 만약 여러 단어를 사용해야 될 때는 싱글 하이픈(-)으로 연결합니다.  ① 블럭 블럭은 독립적으로 기능할 수 있어서 분리가 가능한 부분을 의미합니다. 보통 웹페이지 안.. 2023. 8. 6.
[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.
반응형

티스토리툴바