[CSS] px 와 rem

지금까지 폰트 사이즈를 항상 px로 지정했는데 앞으로는 rem을 사용해보아야 할 것 같아서 방금 배운 것을 적어놓는다. px: 고정된 크기 단위. 사용자가 글자 크기를 변경하지 못 함. 사용자의 환경에 따라 다르게 보일 수 있음. 스마트폰같은 크기가 작고 고해상도인 디바이스에서는 모니터의 한 점과 1px의 크기 차이 때문에 흐릿하게 보일 수 있음. rem: root(기준)크기 = 1rem. root크기를 기준으로 크거나 작게 설정할 수 있음 (ex 2rem, 0.4rem...). 사용자가 지정한 폰트사이즈를 기준으로 디바이스마다 다른 크기로 적용됨. em: 부모 요소를 기준으로 폰트사이즈가 정해지므로 다루기 어려움

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

[JQuery] 값을 실시간으로 가져오는 함수

$("#id").on("propertychange change keyup paste input", function() {}

• format_list_bulleted SW공부/JavaScript
• · 2023. 2. 12.
• textsms

[Toy Projects] 팁 계산기

Frontend Mentor - tip calculator app 동작설명 bill(가격), select tip%(팁 퍼센테이지), Number of people(사람 수)을 입력/선택하면 팁값(가격/사람수*(팁퍼센트/100))과 본인이 내야하는 전체 금액(음식값(가격/사람수)+팁값)을 입력과 동시에 실시간으로 계산해준다. 팁 값과 전체 금액은 소수점 이하 2자리로 표시. Number of people(사람 수)의 경우 입력하지 않으면 한 명(1)으로 계산되지만 0을 입력하면 입력창의 테두리가 붉게 변하며 can't be zero라는 안내문구가 뜬다. RESET버튼을 누르면 모든 입력값이 초기화된다. bill을 제외한 select tip%과 number of people 은 입력하지 않아도 작동한다 (b..

• format_list_bulleted ToyProject/Frontend Mentor
• · 2023. 2. 12.
• textsms

[JavaScript] 공백 체크하는 정규식

var blankCheck = /^\s+|\s+$/g; // 공백 체크

• format_list_bulleted SW공부/JavaScript
• · 2023. 2. 12.
• textsms

[JavaScript] 숫자 체크하는 정규식

let check = /^[0-9]+$/; //정수 let check = /^[0-9.]+$/; //실수 가능 let check = /^[0-9]+(.[0-9]+)?$/; //실수 가능

• format_list_bulleted SW공부/JavaScript
• · 2023. 2. 12.
• textsms

[CSS] :focus 적용시 테두리 검은 선 문제

크롬브라우저에서 실행시 입력박스(text, number 등)를 클릭하면 default값으로 검은 테두리가 생긴다고 한다. 이를 제거해주어야 :focus가 적용된다. 제거는 outline: none; 을 이용하면 된다. /*css 예시*/ #billNum:focus{ outline: none; border: 2px solid blue; } 참조: https://myhappyman.tistory.com/144

• format_list_bulleted SW공부/HTML&CSS
• · 2023. 2. 6.
• textsms