본문 바로가기
728x90

프론트엔드111

[Javascript] 자바스크립트 엘리먼트 선택자 querySelector, querySelectorAll, getElementById, getElementsByClassName, getElementsByTagName [Javascript] 자바스크립트 엘리먼트의 선택 1. 아이디로 찾기 : document.getElementById 2. 클래스명으로 찾기 : document.getElementsByClassName 3. 태그명으로 찾기 : document.getElementsByTagName 4. CSS Selector로 찾기 : document.querySelector, document.querySelectorAll 기본 형태 //아이디로 찾기 document.getElementById('아이디'); //클래스명으로 찾기 document.getElementsByClassName('클래스명'); //태그이름으로 찾기 document.getElementsByTagName('태그이름'); //CSS Selector로 찾.. 2021. 4. 27.
[CSS] 마우스 클릭 금지, 안되게 막기 및 해제 🤞 CSS 마우스 클릭 금지, 안되게 막기 pointer-events : none; 기본 형태 CSS Selector { //포인터 안되게 막기 : none pointer-events : none; } CSS Selector { //포인터 다시 동작 : auto pointer-events : auto; } 샘플 예제 클릭 영역 클릭 금지 영역 출력 결과 2021. 4. 17.
[CSS / Javascript] 메뉴 클릭시 화면 스크롤 이동 CSS / Javascript 메뉴 클릭시 화면 스크롤 부드럽게 이동하기 순수 CSS와 순수 자바스크립트만을 사용하여 구현하였다. 버튼은 간단하게 네모 모양으로 구성하였으며, 메뉴 클릭시 화면 스크롤 이동에 대한 로직은 아래 코드에 모두 구현되어있다. 구동 로직 1. 첫 화면에 초록색 동그란 버튼이 생성되는데 클릭시 가장 하단의 태그에 스크롤이 자동으로 이동된다. 2. 스크롤이 일정범위를 지나면 위쪽의 초록색 버튼이 사라지고 하단에서 최상단으로 한번에 이동할수 있는 오렌지색 버튼이 자동으로 생성된다. 3. 오렌지색 동그란 버튼 클릭시 자동으로 화면의 최상단에 있는 태그 위치로 스크롤을 이동시킨다. 샘플 예제 출력 결과 2021. 4. 17.
[Javascript] 엘리먼트 위치로 스크롤 이동 scrollIntoView() Javascript 엘리먼트 위치로 스크롤 이동 엘리먼트.scrollIntoView() scrollIntoView()는 보통 메뉴바에서 많이 쓰이는데 싱글페이지 앱에서 메뉴 버튼 클릭시 해당되는 위치로 스크롤이 이동되는 기능을 수행한다. 기본 골격 element.scrollIntoView(); //괄호안에 {behavior : 'smooth'} 코드 추가시 //스크롤 이동이 ease-in-out과 같이 부드러워진다 샘플코드 menu1 menu2 menu3 menu4 출력 결과 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.
[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.
[CSS] 배경 색상 변경하기 background color CSS 배경 색상 변경하기 배경 색상의 변경 방법은 여러가지가 있지만 쉽게 적용할수 있는 대표적인 방법으로 두가지가있다. 첫번째는 HTML상에서 태그에 style속성을 이용하여 배경색상을 입히는 방식과 두번째는 CSS 파일에서 CSS Selector를 통해 배경색상을 입히는 방식이 있다. 1. HTML 상에서 태그 직접 입력 기본형태 //HTML 태그 내 Style 속성을 이용한 배경 색상의 변경 샘플코드 출력 결과 2. CSS 파일을 통한 배경 색상 변경 기본형태 //CSS 파일 내 CSS Selector를 통한 배경색상 변경 방식 CSS Selector { background-color:#ffffff; } 샘플코드 : HTML, CSS .red{ background-color:#d44000; widt.. 2021. 4. 3.
[CSS] 폰트 (문자) 색상 설정 하기 font color set CSS 폰트 문자 색상 설정하기 1. style 속성을 활용한 HTML 태그 직접 변경 기본 형태 //태그내 style속성을 통한 폰트 색상 설정 이것은 폰트입니다. 샘플 예제 빨강색 주황색 노랑색 초록색 파랑색 출력 결과 2. css 파일을 통한 폰트 색상 변경 기본 형태 적용원하는 태그/클래스/아이디 명 { color : #ffffff; } 샘플예제 : HTML 파일 빨강색 주황색 노랑색 초록색 파랑색 CSS 파일 .red { color : #be0000; } .orange { color : #e2703a; } .yellow { color : #f7ea00; } .green { color : #3a6351; } .blue { color : #046582; } 출력결과 2021. 4. 2.
728x90

티스토리툴바