본문 바로가기
728x90

전체 글156

[CSS / Javascript] 메뉴 클릭시 화면 스크롤 이동 CSS / Javascript 메뉴 클릭시 화면 스크롤 부드럽게 이동하기 순수 CSS와 순수 자바스크립트만을 사용하여 구현하였다. 버튼은 간단하게 네모 모양으로 구성하였으며, 메뉴 클릭시 화면 스크롤 이동에 대한 로직은 아래 코드에 모두 구현되어있다. 구동 로직 1. 첫 화면에 초록색 동그란 버튼이 생성되는데 클릭시 가장 하단의 태그에 스크롤이 자동으로 이동된다. 2. 스크롤이 일정범위를 지나면 위쪽의 초록색 버튼이 사라지고 하단에서 최상단으로 한번에 이동할수 있는 오렌지색 버튼이 자동으로 생성된다. 3. 오렌지색 동그란 버튼 클릭시 자동으로 화면의 최상단에 있는 태그 위치로 스크롤을 이동시킨다. 샘플 예제 출력 결과 2021. 4. 17.
[Mac] 맥북 M1 프로그램 앱 추가 및 삭제 방법!! 맥 Mac 프로그램 추가 및 삭제 방법!! 배경화면에서 왼쪽 위 애플로고 (사과 모양) 클릭 이 맥에 관하여 클릭 저장공간 탭 클릭 왼쪽에 응용프로그램 탭 클릭 후, 오른쪽에 삭제 원하는 응용프로그램 선택후 삭제 🤞만약 앱스토어를 통해 설치한 응용프로그램인 경우 1. 하단의 Dock에서 Launchpad 클릭! 2. 삭제 원하는 응용프로그램 길게 누르고 x 버튼 생성되면 해당 버튼 클릭! 2021. 4. 17.
[Javascript] 엘리먼트 위치로 스크롤 이동 scrollIntoView() Javascript 엘리먼트 위치로 스크롤 이동 엘리먼트.scrollIntoView() scrollIntoView()는 보통 메뉴바에서 많이 쓰이는데 싱글페이지 앱에서 메뉴 버튼 클릭시 해당되는 위치로 스크롤이 이동되는 기능을 수행한다. 기본 골격 element.scrollIntoView(); //괄호안에 {behavior : 'smooth'} 코드 추가시 //스크롤 이동이 ease-in-out과 같이 부드러워진다 샘플코드 menu1 menu2 menu3 menu4 출력 결과 2021. 4. 15.
[javascript] html 엘리먼트 높이 .offsetHeight [자바스크립트] HTML 엘리먼트 / 태그의 높이 .offsetHeight 기본 구조 //엘리먼트의 높이 = 엘리먼트객체.offsetHeight; const elem_height = HTMLElement.offsetHeight; 샘플 예제 menu1 menu2 menu3 menu4 menu5 출력 결과 2021. 4. 15.
[CSS] CSS Selector 선택자 우선순위 CSS Selector 선택자 우선순위 1. CSS 같은 속성 여러번 설정한 경우 메모를 메모하다 정답 : 메모를 메모하다 소스의 흐름대로 적용 된다. 처음엔 orange였다가 하위 코드로 인해 blue 로 바뀐다. 2-1. 다른 셀렉터를 통한 설정 (* vs 태그명) 메모를 메모하다 정답 : 메모를 메모하다 더 구체적인 셀렉터에서 설정한 값이 우선된다. 2-2. 다른 셀렉터를 통한 설정 (태그명 vs 클래스명) 메모를 메모하다 정답 : 메모를 메모하다 더 구체적인 셀렉터에서 설정한 값이 우선된다. (태그보다는 클래스가 더 구체적) 2-3. 다른 셀렉터를 통한 설정 (태그명.클래스명 vs 클래스명) 메모를 메모하다 정답 : 메모를 메모하다 .test-class 앞에 전체를 의미하는 *가 생략이 되어있는 .. 2021. 4. 15.
[NodeJs] Javascript를 활용한 크롤링 (데이터수집) NodeJs / Javascript 를 활용한 크롤링 (데이터 수집) 1. nodejs와 npm 을 설치하자 nodejs.org/ko/ { keyword = encodeURI(keyword); try { return axios.get(`https://kin.naver.com/search/list.nhn?query=`+keyword); }catch(err){ console.log(err); } } const getData = async(keyword) =>{ const html = await getHTML(keyword); const $ = cheerio.load(html.data); const contentList = $('#container .basic1 li'); let titles = []; con.. 2021. 4. 14.
[NodeJs / Express] 쿠키 삭제 NodeJs / Express 쿠키 삭제 쿠키 삭제 방법은 여러가지가 있다. 대표적인 방법 두가지를 소개한다. 1. 쿠키 보관 기간을 0으로 설정하여 바로 삭제 하도록하는 방법 2. cookie-parser 를 통한 쿠키삭제 maxAge : 0 을 통한 쿠키삭제 app.get('/login', (req,res)=>{ res.cookie('id','아이디값',{maxAge : 저장기간(초)}); res.cookie('pw','비번값',{maxAge : 저장기간(초)}); }); app.get('/logout',(req,res)=>{ res.cookie('id','',{maxAge:0}); res.cookie('pw','',{maxAge:0}); res.redirect('/'); }); Cookie-Pars.. 2021. 4. 12.
[CSS] 폰트 크기 설정 font-size CSS 폰트 크기 설정 Font-size CSS 폰트 사이즈 설정 방법은 여러가지가 있지만 그중 대표적으로 두가지를 소개하고자 한다. 첫번째. HTML 태그에서 style 속성을 이용하여 직접 설정 두번째. CSS 파일에서 CSS Selector를 통해 설정 1. HTML 엘리먼트 직접 설정 기본 골격 This is Sample 샘플 코드 안녕하세요 티스토리 방문을 환영합니다. 출력 결과 2. CSS 파일내 CSS Selector를 통해 폰트 사이즈 설정 기본 골격 /*CSS Selector를 통한 폰트 사이즈 설정*/ CSS Selector { font-size:원하는사이즈; } 샘플 코드 [HTML] 안녕하세요 티스토리 방문을 환영합니다. 샘플 코드 [CSS] /*CSS Selector를 통한 fon.. 2021. 4. 11.
[CSS] border 테두리 속성 설정하기 CSS 테두리 속성 설정하기 border CSS 테두리는 대표적으로 총 세가지로 설정하는데 다음과 같다. 1. 테두리 굵기 (width) 2. 테두리 스타일 (style) 3. 테두리 색상 (color) 이를 설정하는 방법은 세가지 각각의 속성으로 설정하여도 되고 한번에 설정하여도 되는데 아래 기본 형태를 참고하자 기본 형태 //테두리 스타일 세가지 속성 각각 설정하는 경우 CSS Selector { //원하는 테두리 굵기 border-width : 1px; //원하는 테두리 스타일 border-style : solid; //원하는 테두리 색상 border-color : grey; } //테두리 스타일 세가지 속성 한번에 설정하는 경우 CSS Selector { //원하는 테두리 굵기, 스타일, 색상 순.. 2021. 4. 6.
[CSS] 모서리 모양 변경하기 border-radius CSS 모서리 둥글게 변경하기 border-radius 원 (동그라미) 만들기 1. HTML에 style 속성 직접 입력을 통한 변경 방식 기본 형태 //Html 태그 내 style 속성을 이용한 직접 입력 방식 샘플 예제 출력 결과 2. CSS 파일 변경을 통한 모서리 모양 변경 기본 형태 //CSS 파일 변경을 통한 모서리 모양 변경 CSS Selector { border-radius : 둥글기%; } 샘플 예제 : HTML, CSS .box { background:red; margin : 20px; width: 200px; height: 200px; border-radius : 5%; } .box2 { background : blue; margin : 20px; width: 200px; height.. 2021. 4. 3.
728x90

티스토리툴바