본문 바로가기
반응형

Front-end23

[CSS] 여백(margin, padding) 여백 안쪽여백 - padding, 테두리 안쪽 요소 콘텐츠 바깥쪽의 공간 바깥쪽여백 - margin, 테두리 바깥쪽 부모요소의 안쪽 공간 ★ padding : 요소의 각 면에 안쪽여백을 설정 - padding-top, padding-right, padding-bottom, padding-left - padding: 50px 30px 50px 80px - top > right > bottom > left - top > right/left > bottom - top/bottom > right/left ★ margin : 요소의 각 면에 바깥쪽여뱍을 설정 - padding과 동일하게 각 면의 바깥쪽여백을 설정할 수 있음. ​ ※ 핵심 속성값 : auto. 브라우저가 여백을 계산하여 요소를 배치. 좌우만 적용... 2023. 7. 6.
[CSS] 테투리(경계선) 테두리(Border) 요소의 테두리 선을 표현하는 스타일 설정 ★ border-style : 테두리 종류(선의 모양) ★ border-width : 테두리 두께 - 단위 : px(pixel) = 1인치의 1/96 - pt(point) = 1인치의 1/72 - cm = 센티미터 - em = 출판에서 사용하는 문자의 가로 길이(M 문자) - 고정값 : thin(얇은), medium(중간), thick(두꺼운) ★ border-color : 테두리 색상 ★ border-radius : 둥근모서리 설정 ★ border : 위의 개별 속성을 하나로 처리하기 위한 단축 속성 - 두께, 종류, 색상을 하나로 같이 표현 - 순서) 두께 > 종류(필수) > 색상 - 한 방향에 같은 두께, 종류, 색상을 지정할 경우 bo.. 2023. 7. 6.
[CSS] 배경 배경(Background) 요소의 배경 효과를 주기위한 스타일 설정 ★ background-color : 배경색상을 지정하는 속성 ★ background-image : 배경 이미지를 지정하는 속성 ★ background-repeat : 배경 이미지의 반복 여부 지정 속성 ★ background-attachment : 배경 이미지의 스크롤 및 고정 여부 지정 ★ background-position : 배경 이미지의 위치 지정 ※ 9곳의 위치 지정 - left : 왼쪽 세로 중앙. - right : 오른쪽 세로 중앙. - top : 위쪽 가로 중앙. - bottom : 아래쪽 가로 중앙. - center : 공간의 정 중앙 - left top : 왼쪽 상단. - left bottom : 왼쪽 하단. - ri.. 2023. 7. 6.
[CSS] 색상표현 색상 처리 RGB : rgb(red, green, blue) 함수 각 색상별로 0~255 사이의 수치로 조합 rgba(red, green, blue alpha) 함수 세가지 색상과 알파(투명도) 수치로 색상 표현 알파 채널의 값 범위 : 0.0 ~ 1.0 HEX : 16진수로 색상 지정 예) #ff00ff : purple #abc -> #aabbcc의 단축 표현 HSL : Hue(색조), Saturation(채도), Lightness(밝기/명암) H : 0~360까지의 색상환의 각도로 표현 S : 0~100%의 백분률 값. 0-회색음영, 100-색조의 색 L : 0~100%의 백분률 값. 0-검은색, 100-흰색 예) hsl(0, 100%, 50%) - red colors.html RGB로 색상 지정 H.. 2023. 7. 6.
[Javascript] 열거형 Enum Enum이란? Enum은 enumerated type의 줄임말이다. 즉, 열거하는 타입이라는 의미이다. 상수 값 중에서 비슷한 종류들을 묵어두기 위한 용도로 자주 사용된다. 상수란? 간단한 상수란 변수의 반댓말로 항상 상(常)자를 사용하여 변하지 않고 고정된 값을 담는 변수를 의미한다. 변하지 않는 값을 사용하고 싶을 때 사용한다. Javascript에서 enum 타입은 고유한 타입은 아니다.(java에서는 enum타입 제공) 2023. 6. 30.
[Javacript ] 변수 선언 방식 Javascript 변수 종류 1. var 2. let 3. const 1. var 기존의 많이 사용 됐던 변수이고 단점이 존재한다. var name = 'bathingape' console.log(name) //출력값: bathingape var name = 'javascript' console.log(name) //출력값: javascript 위의 코드를 보면 같은 이름의 변수를 한 번 더 선언했음에도 에러가 나오지 않고 각기 다른 값으로 출력된다. 이는 코드량이 많아질 수록 변수가 어떻게 사용 되고 있는 지 파악하기 힘들며 값이 바뀔 우려가 있다. 그래서 ES6 이후, 이를 보완한 변수 선언 방식인 let, const가 등장했다. 2. let, const 위의 코드를 let 변수 선언 방식으로 바꿔.. 2023. 6. 30.
[vue3] Vue.Draggable 정리 관련 정리 해야함 참고 사이트 https://sortablejs.github.io/Vue.Draggable/#/handle vuedraggable sortablejs.github.io https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/nested-with-vmodel.vue GitHub - SortableJS/Vue.Draggable: Vue drag-and-drop component based on Sortable.js Vue drag-and-drop component based on Sortable.js. Contribute to SortableJS/Vue.Draggable development by creating .. 2023. 6. 23.
[vue3] SCSS사용 방법(정말 쉬움.) SCSS란? CSS pre-processor로서 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주며 유지보수에 용이하다. SCSS 설치 npm install -D sass 프로젝트에서 sass파일 만들기 project - src - assets - scss main.scss assets 안에 scss라는 폴더를 생성하고 main.scss 파일을 생성하자. 생성했으면 main.js에 import해서 사용하도록 한다. import { createApp } from "vue"; import App from "./App.vue"; import "./assets/scss/main.scss"; //이부분이 scss import한 부분 createApp(App).mount("#app"); 2023. 6. 23.
CSS 가상 선택자4(::first-line, ::first-letter, ::before, ::after) ● 의사 요소 선택자(pseudo-element) ★ 요소의 지정된 부분을 스타일 설정하기 위한 선택자. ※ 종류 ☆ ::first-line - 요소의 첫줄에 스타일을 설정 ☆ ::first-letter - 요소의 첫 글자에 스타일을 설정 ☆ ::before - 요소의 앞에 어떤 내용을 삽입하기 위한 선택자. ☆ ::after - 요소의 뒤에 어떤 내용을 삽입하기 위한 선택자. ★ pesudo_element_selector.html ★ Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu tincidunt lectus. Duis augue quam, tincidunt vel ante faucibus, vest.. 2023. 5. 16.
반응형