Programming/Front-end (js, React, HTML, CSS) 5

[JavaScript] 클래스 제어방법 비교 - jQuery vs JavaScript

jQuery와 JavaScript를 이용해서 클래스를 제어하는 방법을 비교해보자. 1. 클래스 추가 $('#element').addClass('class1'); // 1개 추가 $('#element').addClass('class1 class2'); // 여러개 추가 2. 클래스 제거 $('#element').removeClass('class1'); // 1개 제거 $('#element').removeClass('class1 class2'); // 여러개 제거 3. 클래스 교체: 기존 클래스 제거 후 새로운 클래스 추가 $().switchClass('oldClass', 'newClass'); $('#element').removeClass('oldClass').add('newClass') 4. 클래스 새로..

[HTML/CSS] display 속성 - inline, block, flex

# 블록 요소 vs 인라인 요소 - 포함 : 모든 인라인 요소 포함 가능, 다른 블록 요소도 일부 포함 가능 - 넓이 : ★가로폭 전체★의 넓이를 가지는 직사각형 형태. ★한 줄 다 차지★ - 레이아웃 : width, height, margin, padding 등을 사용해서 크기나 위치 지정 가능 → width/height/margin/padding 등 사용해서 크기나 위치를 지정하려면 블록 요소여야 한다. - 줄바꿈 : (O). 블록요소 다음에는 줄바꿈됨 - inline으로 변경하는 방법 : CSS에서 display : inline; - 블록요소 종류 : , , , , , 등 (1) 영역 잡는 애들 (2) 테이블, 리스트 (3) 데이터 입력 (4) 기타 : description list : descri..

[HTML/CSS] 스타일 우선 적용 순서 - cascading과 specificity

CSS는 'Cascading Style Sheet'라는 이름에서부터 알 수 있듯이, cascading(폭포, 단계적으로 행하다.)이라는 특징을 가지고 있다. 'cascading이 뭐야?'라고 묻는다면 '단계적으로 스타일이 적용된다', 즉, '하나의 대상에 여러 가지의 스타일이 중복 적용된다'는 것을 의미한다. 그렇다면, 하나의 태그에 여러개의 충돌되는 스타일이 지정되어 있다면, 태그는 어떤 스타일을 따르게 될까? (예를 들어 어디에서는 p 태그의 font-size=20px, color: #FFFFFF;(흰색)이고, 다른 곳에서는 font-size: 10px; color: #000000;(검정색) 라고 지정해놓았음) 결론은 첫째, 개별성(specificity)이 높은 스타일을 적용하며, 둘째, 개별성이 같..

[JavaScript] Date 객체/메소드

1. Date 객체 - Date 객체는 날짜 및 시간을 다루는데 사용되는 객체이다. - Date 객체는 1970년 1월 1일 UTC(국제표준시) 00:00으로부터 지난 시간을 밀리초로 나타내는 유닉스 시간(UNIX epoch)을 사용한다. 2. Date() 생성자 - Date() 생성자는 Date객체를 생성한다. - Date() 생성자로 Date객체를 생성하면 Date 메소드들을 사용할 수 있다. - JavaScript Date 객체를 생성하는 법은 new 연산자를 사용하는 것이 유일하다. - Date() 생성자는 기본적으로 현재 날짜/시간 값을 가진다. 만약, 현재 날짜/시간이 아니라 다른 날짜/시간을 다루고 싶은 경우, Date 생성자 함수에 해당 날짜/시간을 인수로 넣어주면 된다. //Date() ..

반응형