본문 바로가기
728x90

전체 글89

[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.
[JavaScript] toUpperCase(), toLowerCase() 메서드 JavaScript에는 문자열(string)을 모두 대문자로 변경하거나, 모두 소문자로 변경할 수 있는 메서드가 있습니다. - toUpperCase() : 문자열을 대문자로 변환하는 메서드 - toLowerCase() : 문자열을 소문자로 변환하는 메서드 let ex_str = "Hello World!" console.log(ex_str.toUpperCase()); // HELLO WORLD! console.log(ex_str.toLowerCase()); // hello world! 단 JavaScript에서 문자열은 불변하기 때문에, 두 메서드를 사용해도 원본 문자열에는 영향이 가지 않습니다. 2023. 6. 27.
[JavaScript] \을 사용한 이스케이프 시퀀스 JavaScript에서도 역슬래시(\) 문자를 통해서 특수문자나 입력 불가능한 문자들을 표현합니다. 이러한 표현 방법을 이스케이프 시퀀스(Escape Sequence)라고 합니다. 다음은 유형별로 정리한 이스케이프 시퀀스의 예시들입니다.     1) 화이트 스페이스코드\n\t\v\f출력개행(줄바꿈)수평 탭수직 탭폼 피드(페이지 나누기)     2) 특수문자특수문자들은 단순히 역슬래시를 앞에 붙이게 되면 해당 특수문자를 표현하게 됩니다. [예시] \^, \$, \\,  \', \", \|, \/※ JavaScript에서는 작은따옴표 문자열과 큰따옴표 문자열을 구분하지 않습니다. 따라서 모든 이스케이프 문자는 작은따옴표나 큰따옴표 상관없이 작동합니다.     3) 유니코드 문자이스케이프 시퀀스를 통해서 16.. 2023. 6. 26.
[JavaScript] 불변성(Immutability)을 유지하는 방법 객체 타입(Object Type)의 데이터는 변경될 수 있어서 예상치 못한 오류가 발생할 수 있습니다. 다음과 같은 코드를 보면, y의 속성 값을 변경했는데 x의 속성 값도 같이 변경되는 것을 확인할 수 있습니다. let x = { size: 21 }; let y = x; y.size = 25; console.log(x.size); // 25 만약 코드가 더욱 복잡해진다면, 코드의 결과를 예측하기가 어려워집니다. 이러한 문제점을 해결하기 위해서 크게 2가지의 방법이 존재합니다. 객체 타입의 데이터를 복사할 때 깊은 복사를 하는 방법과, 객체 자체를 불변하게 만드는 것입니다. ① 깊은 복사하기 얕은 복사는 해당 객체만 복사하여 새로운 객체가 같은 메모리 주소를 참조하고 있게 합니다. 반대로 깊은 복사는 해.. 2023. 6. 25.
반응형

티스토리툴바