티스토리

Ju

검색하기

블로그 홈

Ju

heejoong.tistory.com/m

공부 노트

구독자: 0

방명록 방문하기

주요 글 목록

CSS scroll-snap 속성 정리 자바스크립트 없이 scroll 이벤트와 같은 효과를 나타내는 scoll-snap css 예제.html scroll-snap-type - 부모 요소에 적용 - 축 설정과 스크롤 넘어가는 스타일 지정 - mandatory = 스크롤을 조금만 내려도 다음 자식요소로 넘어감. - proximity = 스크롤을 조금씩 넘겨도 그대로 유지되지만, 스크롤이 다음 요소에 근접하면 다음 자식요소로 넘어감. - both = 가로 세로 축 모두 /* 부모 요소에 적용 */ .scroll-snap-box { scroll-snap-type: y mandatory; /* [축] [넘어가는방식] */ scroll-snap-type: y proximity; scroll-snap-type: x mandatory; scroll-snap.. 공감수 0 댓글수 0 2024. 3. 12.
CSS 커스텀 라디오 버튼 javascript 없이 css로만 커스텀 라디오 버튼 만들기 custom radio html custom radio css (효과 O) [type="radio"]:checked, [type="radio"]:not(:checked) { /* input 태그 숨기기 */ position: absolute; left: -9999px; } [type="radio"]:checked + label, [type="radio"]:not(:checked) + label { position: relative; padding-left: 28px; /* padding은 label 영역 */ cursor: pointer; line-height: 20px; } [type="radio"]:checked + label:before.. 공감수 1 댓글수 2 2022. 9. 30.
CSS 커스텀 체크박스 javascript 없이 css로만 커스텀 체크박스 custom checkbox html custom checkbox css [type="checkbox"], [type="checkbox"]:not(:checked) { /* input 태그 none 처리 */ display: none; } [type="checkbox"] + label { position: relative; display: inline-block; width: 24px; height: 24px; margin: 0 2px; background-color: #fff; border: 2px solid steelblue; border-radius: 4px; box-sizing: border-box; vertical-align: middle; }.. 공감수 1 댓글수 0 2022. 9. 30.
Javascript localStorage, sessionStorage 정리 웹 스토리지 객체(localStorage, sessionStorage) 브라우저에서 쿠키를 사용하는 것보다 직관적으로 key, value 데이터를 안전하게 저장할 수 있음 두 객체의 다른점 localStorage는 브라우저를 다시 실행해도 저장되어 있다 sessionStorage는 브라우저를 다시 실행하면 저장되어 있지 않다 (세션이 유지되는 동안만 데이터 저장) 특징 (참고문서) - 쿠키보다 더 많은 자료 보관 가능 - http 헤더를 통해 스토리지 객체를 조작할 수 없음 (모두 자바스크립트 내에서 수행) - 도메인·프로토콜포트로 정의되는 오리진에 묶여있어서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없음 - Map과 유사. 스토리지는 인덱스를 사용해 키에 접근할 수 있다는 점이 다름 - ke.. 공감수 0 댓글수 0 2022. 9. 27.
CSS 도형 만들기(체크, 삼각형, 사다리꼴, 달) 1. 체크 html css .check-icon { display: inline-block; width: 20px; height: 34px; border-bottom: 10px solid rgb(65, 100, 255); border-right: 10px solid rgb(65, 100, 255); transform: rotate(45deg); } 결과 2. 삼각형 html css .arrow-icon { display: inline-block; border-top: 20px solid transparent; border-left: 40px solid gray; border-bottom: 20px solid transparent; } 결과 3. 사다리꼴 html css .trapezoid-icon { d.. 공감수 2 댓글수 2 2022. 9. 20.
CSS filter 속성 정리 filter 전체 속성 (이미지에 그래픽 효과 적용) filter : none; (효과 없음) filter : blur(); (블러 효과) filter : brightness(); (밝고 어두움 정도) filter : contrast(); (대비) filter : drop-shadow(); (그림자) filter : grayscale(); (그레이스케일) filter : hue-rotate( deg); (색조) filter : invert(); (반전) filter : opacity(); (투명도) filter : saturate(); (채도) filter : sepia(); (세피아 효과) filter : url(); (이미지 경로) · 다중 효과 가능 (filter: grayscale(0.5) blu.. 공감수 0 댓글수 0 2022. 9. 16.
HTML meta 태그 정리 언어 설정 디바이스에서 사이트가 잘 보이도록 뷰포트 설정 검색 키워드 설정(키워드 여러개 가능) 검색 시 나오는 제목 밑 설명 문서의 저자 정의 n초 뒤 다른 페이지로 리다이렉트 링크 공유 시 뜨는 썸네일과 텍스트 박스 커스텀 // 링크 클릭시 이동되는 실제 주소 공감수 0 댓글수 0 2022. 9. 2.
CSS flex 속성 정리 Flex Container(부모 요소) flex container 지정 display: flex; => 기본 가로방향 배치. 자신이 가진 내용의 width 만큼 차지. height는 컨테이너의 높이만큼 display: inline-flex; => block과 inline-block의 관계와 동일. inline-block처럼 동작(컨테이너가 요소만큼만 차지) flex-direction - flex container의 자식 요소 방향 설정 flex-direction: row; => 가로방향(기본값) flex-direction: column; => 세로방향 flex-direction: row-reverse; => 역순으로 가로방향 flex-direction: column-reverse; => 역순으로 세로방향.. 공감수 0 댓글수 0 2022. 9. 1.
scss 정리 (css 전처리기) 변수 - 중괄호 안에서 선언 되었으면 내부에서만 사용 가능 - 중괄호 안에서 선언 되었어도 전역변수로 설정 시 !global 속성 추가 // 변수 선언 $변수이름: blue; // 사용 시 .text { color: $변수이름; } .box1 { $color: #111 !global; // 내부에서 선언 했지만 전역변수 background: $color; } .box2 { background: $color; // 전역변수기에 에러 안남 } 부모 선택자 (&) // & 사용하여 부모 선택 .fs { &-small { font-size: 12px; } &-medium { font-size: 14px; } &-large { font-size: 16px; } } // 컴파일 시 .fs-small { font-s.. 공감수 0 댓글수 0 2022. 8. 31.
React 끝말잇기 게임 만들기 [create-react-app 없이] class로 작성 시 // WordRelay.jsx const React = require('react'); const { Component } = React; class WordRelay extends Component { state = { word: '리엑트', // 끝말잇기 첫 단어 value: '', // 사용자 입력 값 result: '', // 정답/오답 텍스트 } onSubmitForm = (e) => { e.preventDefault(); // submit 기본 이벤트 방지 if( this.state.word[this.state.word.length -1] === this.state.value[0] ) { // word의 마지막 글자와 value의 첫글자가 같다면 this.setState(.. 공감수 0 댓글수 0 2022. 8. 30.
React 끝말잇기 게임 세팅 [create-react-app 없이] webpack과 babel 사용 webpack 사용하기 - 사용할 폴더에 접근 (cd ./폴더이름) - npm init (package.json 생성) - npm i react react-dom (react 설치. i = install) - npm i -D webpack webpack-cli (-D = 개발에서만 사용) - 폴더에 webpack.config.js 파일 생성 (중요한 메인 옵션은 entry, module, output) // webpack.config.js const path = require('path'); const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); module.exports = { name:.. 공감수 0 댓글수 0 2022. 8. 29.
Vue 디렉티브 [v-접두사] v-bind: => html의 속성에 vue에 선언된 값을 사용하고 싶을때 (v-bind: 또는 앞에 : 만 붙여주어 사용) v-once => html코드로 출력이 된 이후에 어떤 후처리가 있더라도 처음에 출력한 값을 유지 v-html="" => html태그를 data에 작성하여 태그 삽입할때 (v-html="태그들어있는데이터") v-model="" => input의 value v-model.lazy.trim="label" html 요소에 함수 쓰기 (앞에 v-가 붙으면 뷰가 통제해 data, methods에 접근하여 사용가능. 따옴표 안에는 스크립트 코드) v-on:click="함수이름 또는 함수코드" v-on:click="" === @click=" v-for="" => html요소 반복해서 여러개 사.. 공감수 0 댓글수 0 2022. 8. 26.
Typescript 타입 지정 typescript 설치 npm install -g typescript tsconfig.json 생성 (아래와 같이 설정) { "compilerOptions": { "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능 "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext' "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 "checkJs": true, // 일반 js 파일에서도 에러체크 여부 "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'pres.. 공감수 0 댓글수 0 2022. 8. 25.
React 구구단 게임 만들기 [class 컴포넌트] 'use strict'; class Gugudan extends React.Component { // constructor(props) { // super(props); state = { // constructor 쓸땐 this.state로 사용 first: Math.ceil(Math.random() * 9), second: Math.ceil(Math.random() * 9), value: '', result: '', } // } onSubmitForm = (e) => { // 여기선 무조건 화살표 함수(this가 달라지기 때문에) e.preventDefault(); if ( parseInt(this.state.value) === this.state.first * this.state.second ) { .. 공감수 0 댓글수 0 2022. 8. 17.
React 구구단 게임 만들기 [함수형 컴포넌트] const Gugudan = () => { const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9)); const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9)); const [value, setValue] = React.useState(''); const [result, setResult] = React.useState(''); const inputRef = React.useRef(null); const onSubmitForm = (e) => { e.preventDefault(); if(parseInt(value) === first * second) { setRes.. 공감수 0 댓글수 0 2022. 8. 17.
CSS 변수 사용하기 html 어디에서나 쓸 수 있는 전역변수를 선언할 땐, :root { --변수이름: 값; } :root 안에 지정하여 주면 됩니다. 변수이름을 직접 설정하여 사용하고, 변수 앞에 '--'를 붙여 사용해줍니다. 값은 css에서 사용하는 모든 값을 넣을 수 있습니다. 선언한 변수를 사용할 때, p { color: var(--변수이름); } 지정한 변수이름을 var() 안에 넣어주면 됩니다. 예를 들어 메인 컬러를 지정하여 모든 곳에서 사용하고 싶을 때, :root { --main-color: #eee; } .text { color: var(--main-color); } :root 의사 클래스에 전역변수를 지정하여 사용합니다. css 변수는 대소문자를 구분하기 때문에 주의하셔야 합니다. :root { --ma.. 공감수 0 댓글수 0 2021. 12. 14.
HTML 텍스트 관련 태그 중요한 내용을 강조하고 싶을때 사용하는 태그, HTML과 같이 약어로 된 단어를 쓸 때 어떤 약자인지를 설명할 수 있는 태그, 전문용어를 사용할때 사용하는 태그, 다른 사이트에서 복사해와서 사용할 때 주소 출처를 남길 수 있는 태그 , 이탤릭체로 표기되는 태그 이탤릭체로 표기되는 태그 결과를 보자면, i태그와 em태그 둘 다 똑같이 이탤릭체로 나타나는데요. 강조하는 의미를 담고 있는 이탤릭체가 있다면 em태그를, 시각적으로만 이탤릭체로 나타내고 싶을 때는 i태그를 사용해야 합니다. (i태그와 em태그 모두 인라인 요소) 볼드체로 표기되는 태그 볼드체로 표기되는 태그 i, em태그를 썼을 때와 마찬가지로 p태그 안에 b태그와 strong태그를 넣어줬는데요. 결과를 보시면, b태그와 strong 태그 모두 .. 공감수 0 댓글수 0 2021. 8. 14.
Javascript for문 [반복문] let color = ["red", "orange", "yellow", "green", "blue", "indigo", "purple"] for(i = 0; i < color.length; i++) { console.log(color[i]); } color라는 변수 안에 배열을 선언하여 7가지 색을 넣고, for문을 통해 배열의 첫번째 색부터 마지막 색까지 콘솔 창에 띄우게 하는 것입니다. for문의 첫번째 식 " i = 0; "은 " let i = 0; " 과 같은데요. for문의 초기문으로 쓸 때는 let 또는 var를 생략하여 쓸 수 있습니다. for문의 두번째 식 " i < color.length "는 i가 color변수의 길이보다 작으면 계속 실행하라는 식입니다. 예제에서 선언된 변수의 길이는 .. 공감수 0 댓글수 0 2021. 8. 4.
Javascript switch문 [조건문] if의 복수 조건을 걸 때 else if를 거는 것과 비슷하게 switch에서는 case를 통해서 비교하도록 해줍니다 switch는 switch옆 괄호에 비교할 대상(변수)를 명시해주고, case를 통해 비교를 하는데요 case는 여러번 사용할 수 있습니다. let number = prompt("3 + 2 ?"); switch(number) { case "5": console.log("답은 5, 정답입니다!"); break; case "4": console.log("4, 값보다 작습니다."); break; case "6": console.log("6, 값보다 큽니다."); } 위와 같이 number라는 변수에 식을 넣어주고, 그 식이 3개의 case를 통해 비교를 하게 되는데요. 여기서 break문이 없.. 공감수 0 댓글수 0 2021. 8. 4.
Javascript if-else문 [조건문] if문이란? 조건이 참인 경우 입력한 명령을 실행하게 되는데요. 조건이 거짓이라면 다음 조건으로 넘어가게 됩니다. let number = prompt("입력되어 있는 숫자는 몇일까요?", ""); if(number == 15) { alert("15를 입력하셨네요! 정답입니다!"); } 위와 같이 코드를 작성한 후 html 파일을 열어 결과를 살펴보겠습니다. 사용자에게 입력되어 있는 숫자는 몇인지 prompt를 이용해 질문합니다. 사용자가 입력한 숫자가 number 변수에 저장되고, number가 15와 같다면 정답이라고 메세지창을 띄워줍니다. 15를 입력했을 때의 결과 화면을 보겠습니다. else if let number = prompt("입력되어 있는 숫자는 몇일까요?", ""); if(number =.. 공감수 0 댓글수 0 2021. 7. 20.
Javascript while문 [반복문] while문의 조건 while문은 조건이 참일 경우 거짓일 때까지 실행하는 반복문인데요. 반복문이 실행하기 전, 조건이 참인지 거짓인지 판단한 후에 실행을 하게 됩니다. 만약 조건이 거짓이라면 while문 후로 건너가게 됩니다. 간단한 예제로 살펴볼게요 number의 초기값으로 0을 입력해준 후, number가 5보다 작을경우 조건문을 실행(number가 0으로 되어 있으니 참이므로 실행) number가 1씩 증가 이렇게 코드를 작성했을 시 number에 1씩 추가되며 5가 됐을 시엔 종료가 됩니다. console.log()를 추가해주어 콘솔창을 열어보면 1부터 5까지 숫자가 입력되어 있는걸 볼 수 있습니다. >> while문 안에서 number가 증가한 후에 콘솔을 찍었기에 1부터 5까지가 나왔는데요... 공감수 0 댓글수 0 2021. 7. 16.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.