Daily 1%
article thumbnail
Javascript 연산자 우선순위 순서 및 예제
프론트엔드 2024. 11. 23. 20:00

하나의 연산식에 둘 이상의 연산자가 포함된 경우, 각 연산자의 우선순위에 따라 실행 순서가 정해진다는 사실 알고 계셨나요? 이것이 바로 '연산자 우선순위'입니다. 예를들면 5+3*6에서 곱셈이 먼저 계산되는 것 처럼, 자바스크립트 연산식에 여러 연산자가 포한되면 각각의 우선순위에 따라 먼저 계산됩니다. 오늘도 공부하던 중 나중에도 찾아볼만한 내용이라 적어두게 되었습니다.주요 연산자 우선순위 순서아래의 순서는 모든 연산자를 포함하고 있지는 않습니다. 실무에서 많이 사용된다고 알려진 것 위주로 선별했습니다.그룹 연산자 ( )단항 연산자 !, typeof산술 연산자거듭제곱 **곱셈 *, 나눗셈 /, 나머지 %덧셈 +, 뺄셈 -비교 연산자 , >=동등/일치 연산자 ==, !=, ===, !==논리 AND &&논..

article thumbnail
CSS Flexbox order 속성 기본 개념 및 사용 예제
프론트엔드 2024. 11. 21. 17:00

이전에 배운 내용을 복습하던 중 flexbox를 사용할 때 order사용법에 대해 가물가물했습니다. 잊지 않기 위해 기록해둡니다. 기본적으로 order는 flexbox를 사용한 상태에서 요소의 순서를 조절할 수 있는 편리한 속성입니다.order 속성이란?Flexbox의 order 속성은 flex 컨테이너 내에서 아이템의 순서를 변경할 수 있게 해주는 강력한 CSS 속성입니다. HTML 구조를 변경하지 않고도 요소의 시각적 순서를 쉽게 바꿀 수 있어 반응형 디자인에 매우 유용합니다.핵심 특징기본값: 0음수 사용 가능같은 값일 경우 HTML에 작성된 순서 따름order 속성 기본 사용법위의 예제에서 볼 수 있듯이, order 속성의 기본적인 사용법은 다음과 같습니다:.item { order: 숫자값; /..

article thumbnail
CSS hr 태그 색상 변경하는 3가지 방법 - 초보자를 위한 완벽 가이드
프론트엔드 2024. 11. 18. 21:35

회원가입 홈페이지를 구현하는데, 하단에 hr태그를 활용한 구분선이 들어가는 디자인이었습니다. 그런데 자세히 보니 선 색이 좀 다르더라구요. 급하게 찾아보니 태그는 그냥 color만 지정하면 변하지 않더군요. 잊지 않기 위해 공유해둡니다.그러면 웹 페이지에서 콘텐츠를 구분하는 가로선을 만들 때 사용하는 hr 태그의 색상을 변경하는 방법을 알아보도록 하겠습니다. 기본 검정색 선을 원하는 색상으로 쉽게 바꿀 수 있는 다양한 방법을 초보자도 이해하기 쉽게 설명해드립니다.hr 태그란?hr 태그는 HTML에서 가로선을 그리는데 사용되는 태그입니다. 주로 내용의 주제가 바뀌거나 섹션을 구분할 때 사용됩니다. 기본적으로 검은색 선으로 표시되지만, CSS를 사용하면 이 색상을 원하는 대로 변경할 수 있습니다.1. 기본적..

article thumbnail
CSS 클래스 여러 개 한번에 적용하는 4가지 방법
프론트엔드 2024. 11. 18. 18:39

평소 티스토리 스킨을 가지고 놀았으므로, 프론트엔드 강의 쉽게 들을 줄 알았는데 의외로 고전하고 있습니다. 오늘도 CSS 스타일을 클래스 여러 개에 적용하려는데 어떻게 해야할지 모르겠더라구요. 나중에 잊지 않기 위해 정리해둡시다.CSS로 웹 페이지의 스타일을 지정할 때 여러 요소에 동일한 스타일을 적용해야 하는 경우가 많습니다. CSS 클래스를 여러 개 동시에 적용하는 방법을 알면 코드를 효율적으로 작성할 수 있겠죠?1. 쉼표(,)를 사용한 다중 선택자 방법가장 기본적이고 널리 사용되는 방법은 쉼표(,)를 사용하여 여러 선택자를 연결하는 것입니다. 이 방법을 사용하면 동일한 CSS 스타일을 여러 요소에 한 번에 적용할 수 있습니다..btn1, .btn2, .btn3, .btn4 { font-size..