[JavaScript] JavaScript로 CSS 수정 예시

var error = document.getElementById('error-mark'); //데이터를 id로 가져와 변수에 저장 if (실행내용){ //if문 실행 시 error.style.opacity = '1'; //css poacity요소(투명도)의 값을 1(불투명)로 변경 } else { //반대의 경우 error.style.opacity = '0'; //css poacity요소의 값을 0(투명)으로 변경 }

• format_list_bulleted SW공부/JavaScript
• · 2023. 1. 15.
• textsms

[CSS] 요소 배치, 겹치기 : position

position 속성 static (기본) relative (자신 기준) absolute (상위 요소 기준) fixed (뷰포트 기준) stickey (스크롤링 기준) top, bottom, right, left : 위치 지정 대부분의 경우 postion과 top, bottom, right, left가 같이 사용됨. 여기에서는 relative와 absolute만 다루도록 하겠다. 나머지는 차차 내가 필요할 때 업데이트. -relative position: relative; 부모 요소와 상관 없이 요소 이동 가능. 위치는 요소의 원래 기본 위치에서 top, bottom, right, left의 방향으로 얼마나 벗어났는지 지정. -abrolute position: absolute; position 속성이 '..

• format_list_bulleted SW공부/HTML&CSS
• · 2023. 1. 15.
• textsms

[CSS] 요소의 투명도 조절 : opacity

opacity: 0; //투명 opacity: 1; //불투명 범위 : 0.0 ~ 1.0

• format_list_bulleted SW공부/HTML&CSS
• · 2023. 1. 15.
• textsms

[CSS] background-color 투명하게

background-color: transparent;

• format_list_bulleted SW공부/HTML&CSS
• · 2023. 1. 15.
• textsms

[html] label for

input id를 넣으면 input과 결합되어 같은 기능을 함 ... 위의 예제에서 svg파일 또한 submit 버튼과 똑같은 버튼 역할을 한다.

• format_list_bulleted SW공부/HTML&CSS
• · 2023. 1. 15.
• textsms

[Toy Projects] email을 검증하는 coming soon 화면

Frontend Mentor - base apparel coming soon master 이번 챌린지에선 저번 챌린지때 공부한 것들을 사용한 부분도 있고 새롭게 고민한 부분도 있어 복습과 진도빼기를 다 한 것 같아 만족감이 높았다. 동작설명 이메일 입력창에 이메일을 입력하고 제출 버튼을 누르면 javascript에서 이메일 유효성 검사를 실시한 후 유효하지 않을 경우 경고 문구와 에러 마크를 띄운다. 목표 버튼에 마우스를 올렸을 때(마우스 오버) 상태 변화 이메일 유효성 검사 유효하지 않을 경우에만 경고 문구와 에러 마크(svg파일) 출력 (프론트엔드에서 제시한 수행요건을 참고해 만든 개인적인 목표이다) 사용스택 html, css, javascript 결과물 메인 페이지. 입력창과 제출 버튼 겹치기, 그..

• format_list_bulleted ToyProject/Frontend Mentor
• · 2023. 1. 14.
• textsms