전체 글
-
[HTML/CSS] 기존 CSS 파일(속성) 수정하기공부/Html OR CSS 2024. 1. 13. 18:56
기존의 레거시 코드를 수정할 때 원본파일을 건들지 못하는 경우 같은 클래스명 하단에 쓰기 우선순위 높이기 Specificity(특이성) 다음과 같은 방법을 택해서 수정하게된다. (1). 같은 클래스 명 하단에 쓰기 같은 클래스명이라도 하단에 정의한 클래스 명/스타일을 우선 적용한다. 따라서 하단에 명시해서 수정하도록 한다. See the Pen Untitled by 익명계정 (@puwifgaj-the-vuer) on CodePen. (2). 우선 순위 높이기 해당 순으로 왼쪽부터 제일 우선순위가 낮다. tag
-
[HTML/CSS] Flex 속성(align-items,align-content,align-self, justify-content)공부/Html OR CSS 2024. 1. 13. 00:23
Flex : flexbox의 레이아웃을 설정하는데 사용하는 속성 1. flex-drirection : flex-item의 방향을 설정하는 옵션 ( 명시하지 않으면 기본적으로 row 배치다.) .container { flex-direction: row; /* 기본값, 아이템들이 수평으로 배치 */ /* flex-direction: column; */ /* 아이템들이 수직으로 배치 */ } 2. justify-content : flex-item을 정렬시키는 옵션 .container { justify-content: flex-start; /* 기본값, 시작 부분으로 정렬 */ /* justify-content: center : 가운데 정렬 */ /* justify-content: flex-end : 끝 부분으..
-
[HTML/CSS] 색상 그라이데이션 넣기 (linear-gradient)공부/Html OR CSS 2024. 1. 11. 01:50
linear-gradient : 그라데이션 색상을 넣고 싶을 때 사용하는 옵션이다. 1. 예시 background-image: linear-gradient(blue,pupple); 기본적으로 방향을 생략하면 to bottom이 적용된다. 따라서 위에서 부터 아래로 이어지는 형태로 색상이 만들어진다. 예시 2. background-image: linear-gradient(80deg, yellow 20% ,blue 80%); deg : 방향을 오른쪽으로 진행한다. (+인 경우) yellow 20% ,blue 80% : 노랑을 20% 지점까지 표시, 블루를 80% 지점부터 표시 예제3. background-image: linear-gradient(-45deg, green 20%, red 20% 50%, gre..
-
[HTML/CSS] overflow / overlay / opacity 속성공부/Html OR CSS 2024. 1. 9. 16:52
overflow : 요소내의 컨텐츠가 너무 커서 요소(상자)안에서 다 보여주기 힘들 때 그것을 어떻게 웹브라우저에서 보여줄지 지정하는 속성으로 응용하여 아래에서 차오르는 듯한 애니메이션 효과를 만들 수도 있다. 속성 visible : 내용이 박스를 벗어나도 가려지지 않고 전부 표시됨. hidden : 내용이 박스를 벗어나는 부분을 전부 가림 scroll : 내용이 박스를 벗어나면 스크롤 바가 생겨서 나머지 내용을 볼 수 있음 auto : 내용이 박스를 벗어나면 스크롤 바가 나타남 / 벗어나지 않으면 나타나지 않음 #예시 .testdiv { overflow: auto; } overlay : 요소 위에 나타나는 요소, 주로 애니메이션 이벤트에 사용되는 속성 (1번박스 위에 2번박스를 오버레이한다.) over..
-
[CSS] float 속성 (요소를 떠 있게 하는 속성)공부/Html OR CSS 2023. 12. 31. 14:26
float : 해당 요소를 다음 요소 위에 떠 있게하는 속성 기본 구문 .element { float: value; } 속성(value) left : 요소를 왼쪽으로 띄운다. right : 요소를 오른쪽으로 띄운다. none : 띄움을 해제한다. (기본값으로 설정) 예를 들면 text 요소랑 float 요소가 있을때 left 정렬을 하면 다음과 같이 보이게된다. 즉, 요소를 띄워서 왼쪽에 정렬 시키게되니깐 왼쪽 오른쪽 서로 배치된게 아닌 가리는 형태가 된다. 그래서 float 요소를 사용하고 다음 위치에 요소를 배치하고 싶다면 clear 속성을 사용해야한다. clear : float 속성이 적용된 요소의 다음 요소들이 겹치는 현상을 방지하기 위해 사용하는 속성 즉, 이후의 요소가 float 속성에 영향을..
-
[CSS] box-shadow : 박스에 그림자 만드는 속성공부/Html OR CSS 2023. 12. 31. 13:36
box-shadow : 그림자 효과를 만드는 속성 문법 box-shadow : none; /*그림자 효과를 제거 */ box-shadow : red 50px -15px 30px 0px; /* | | | */ box-shadow : 50px -15px 30px 0px red inset; /*inset : 내부그림자 생성* -> initial inherit 도 넣을 수 있음 / 필수 요소 x-position(x 위치) : 가로 위치로 양수면 오른쪽 음수면 왼쪽에 그림자 생성 y-position(y 위치) : 세로 위치로 양수면 아래쪽, 음수면 위쪽에 그림자 생성 기타 요소 color : 그림자 색상 지정 blur : 값이 클 수록 그림자를 흐릿하게 만듬 spread : 양수면 그림자 확장, 음수면 축소 in..
-
[Java Script] preventDefault공부/JavaScript 2023. 12. 29. 16:50
이벤트가 발생할 때 어떤 이벤트를 명시적으로 처리하지 않은 경우 해당 이벤트에 대한 브라우저의 동작을 실행하지 않도록 하는 메서드이다. 즉, 원하지 않은 이벤트가 동작하지 않도록 사전에 지정하여 실행되지 않도록 하는 메서드이다. event.preventDefault(); 다음 형태로 사용하며 예시로 설명하면 드롭이벤트에서 나는 드롭이벤트를 구현하고 싶은데 그렇다면 dragover라는 이벤트도 같이 구현해야한다. 하지만 dragover 라는 이벤트가 일어나지 않게 하고싶은데 이런 경우 사용하게된다. $('.Product').on('dragstart',function(e){ //dragstart : 드래그를 시작하면 발생하는 이벤트 console.log("드래그가 시작됐습니다."); }); $('.cart_..