프로그래밍 공부하기

HTML+CSS+Javascript로 계산기 만들기 프로젝트를 수행했으므로 어떻게 만들었는지 주요 내용들을 정리해보려 한다. CSS 1. 버튼에 마우스를 올리면 색상 바꾸기 .button__row > button:hover { background-color: #FFB2F5; } .button__row > button:active { background-color: #ef7993; } 2. 버튼 정중앙 정렬(ex. AC, Enter 버튼) .clear__and__enter { display: flex; flex-direction: row; justify-content: center; align-items: center; } .clear__and__enter > button { border-radius: 1..

오늘 배운 것) querySelector, github -오늘은 페어와 함께 계산기를 만드는 과제를 했다. css를 꾸며보고 입력(Click/숫자,Enter,Reset,operator)이 왔을 때 이를 처리하고 계산하여 Display하는 것까지 했다. -미적감각이 없어서 계산기를 어찌할 바를 모르고 막 꾸몄는데 다른 사람들의 과제를 보니 우리의 과제가 너무 대충 꾸민 것 같았다ㅠㅠ -페어와의 과제가 끝난 후 추가적인 과제를 했다. '.'입력처리를 추가하여 소수계산처리, 연속된 operator들이 왔을 때 처리, 아무것도 입력되지 않은 상태에서 '.'을 입력했을 때 소수처리, Enter를 여러번 눌렀을 때 직전 연산을 반복하기, 다항식 처리, css hover/isPressed, 키보드로 입력하기 등을 구..

🔨NHN 개발블로그 https://d2.naver.com/helloworld 🔨당근마켓 개발블로그 https://medium.com/daangn 🎨NHN 프론트엔드 가이드 https://ui.toast.com/fe-guide/ko 💗Velog MarkDown 작성하기 https://velog.io/@gillog/MarkDown-%EC%9E%91%EC%84%B1%EB%B2%95 📚MDN https://developer.mozilla.org/ko/ 📝TCP School: 기초자료가 많고 이를 연습하기 좋다. http://www.tcpschool.com/ 📝백준 코딩테스트 https://www.acmicpc.net/ 📝C++ 컴파일러 http://cpp.sh/

*{ box-sizing: content-box; /*box-sizing: border-box;*/ } #box1{ border:10px solid red; width: 100px; } #box2{ border:30px solid blue; width: 100px; }​ Box_Test Box_Test [결과] box-sizing: content-box (기본 값)일 때 결과 box-sizing: border-box일 때 결과

UI를 만들 때 고민되는 것 중 하나는 크기 단위를 어떻게 잡을 것인가 이다. 페이지의 타겟이 모바일인지 PC인지에 따라서, 같은 페이지여도 메뉴 등 크기를 고정시키고 싶은 요소는 화면 크기 상관 없이 고정값으로, 그 외 요소는 화면 사이즈에 따라 변하게 만드는 등 용도에 따라 다른 단위를 써야할 수 있다. 1. 절대적인 크기: px -사용자 디바이스 기본 크기 설정과 상관없이 크기 설정 -강조하기 위해 큰 크기(px)로 지정했는데 사용자에 따라 지정하지 않은 글꼴보다 작은 크기가 될 수도 있다. -모바일 처럼 작은데 고해상도인 환경의 경우 1px이 모니터의 한 점보다 크게 업스케일되므로 문제가 생길 수 있다. 2. 보통의 경우: rem -사용자 디바이스 기본 크기 설정을 기준으로(1rem) 크기를 지정..

div: 단순히 영역을 묶어주는 역할(의미X) article: 독립적으로 존재하는 내용 블록 article 부분만 독립적으로 봤을 때 이해 가능하며 이 부분만 떼서 다른 페이지에 끼워 넣을 수 있다. ex. 블로그 포스팅 section: 다른 블록들과 관련이 있는 요소일 때 사용. 큰 묶음(단위)인데 다른 블록과 관련이 있을 때.. ex. 연속된 정보 그룹 section의 깊이에 따라 같은 h1태그여도 크기가 다르다. See the Pen section_tag by ImHyeLim1209 (@imhyelim1209) on CodePen. 하지만 결과가 이렇게 나온다고해서 section태그 깊이에 상관없이 h1태그만을 사용하는 것은 좋지 않다. 같은 크기의 텍스트여도 접근성 검사기능으로 확인했을 때 sec..

오늘 배운 것) -HTML과 CSS -HTML은 구조를 표현하는 MarkUp 언어이다. -시맨틱 태그란 구조를 쉽게 이해할 수 있도록 정의된 태그이다. ex) header, section, nav... -관심사 분리 측면에서 html 내에 css 속성이나 center, font 태그를 넣는 것은 지양하자 -* {box-sizing: border-box;} 을 사용하자

오늘 배운 것) -Javascript 문자열 처리 -반복문 기타) -javascript의 경우 문자열과 숫자열이 비교가 가능하다. 그러나 이는 오류 가능성이 높으므로 반드시 형변환을 한 후 비교를 해야한다. -javascript는 크롬 개발자 도구를 통해 쉽게 디버깅이 가능하다. -문제풀 때 제발 꼼꼼히 읽자!!ㅠㅠ

오늘 배운것) -javascript 조건문 -javascript 문자열 처리 *false로 처리되는 것들: false, null, undefined, 0, NaN, '' *Javascript의 string 특징 1) index로 접근 가능하다: str[0] 2) index로 접근 후 write 할 수 없다: str[0]='a' //X

오늘 공부한 것) -변수와 타입 -함수 -질문하는 방법 기타) -예전에는 javascirpt 선언할 때 var 라고 선언했는데 오늘 배운 내용에서는 let이라고 선언했다. let과 var가 다른 점이 뭘까 찾아보니 let은 새로 추가된 문법으로 var와 달리 재선언이 불가능하여 오류 위험이 적다고 한다. -질문할 때는 보는 사람들이 알아보기 쉽도록 정리하여 질문하고 답변을 참고하여 이를 해결했다면 해결을 했다고 말해주자. -Javascript 질문은 MDN에서 먼저 찾아보자.