riverlee1132의 공책

연산자어떤 값에 특정 작업을 수행하라는 기호(ex: typeof, +, -) 알아두기true는 false보다 큰 값이다거듭제곱, 곱하기, 나누기, 나머지 연산자가 더하기, 빼기보다 높다소괄호가 없다면 ! 연산자는 연산자의 우선순위1) +와 -+ 연산자를 사용할 때는 숫자보다 문자열이 우선> '1' + 0; - 연산자를 사용할 때는 자료형이 숫자로 형 변환된 후 빼기됨> '5' - 1; 2) 더하기보다 곱하기의 우선 순위가 높다 → 더하기를 먼저 하고 싶다면 소괄호()로 감싼다 3) 부동소수점 문제> 0.1 + 0.2; 실수를 정수로 바꿔 계산한 다음 마지막에 다시 실수로 바꿔 해결한다> (0.1 * 10 - 0.2 * 10) / 10; 4) 비교 연산자 == 양쪽 값이 같은지=== 양쪽 값이 같은지, ..

공통언어에서 문자를 표현하는 기본적인 방법은 '' 또는 "" 안에 문자를 작성하는 것정수(음수와 양수)는 integer, 산술 연산자(+, -, *, /)는 Arithmetic operator라고 한다따옴표를 문자로 사용하고 싶다면 백슬래시(\)로 감싼다모든 프로그램은 시간의 순서대로 실행된다 1. 수업의 목적PHP를 사용하면 사용자에게는 똑같은 화면이지만, 코드는 훨씬 효율적으로 변한다. http://111.1.1.1/index.php?id=HTMLhttp://111.1.1.1/index.php?id=CSShttp://111.1.1.1/index.php?id=JavaScript index.php라는 하나의 파일로 3개의 웹페이지를 표시한다?id가 HTML인지, CSS인지, JS인지에 따라서 index..

* JS : Vanilla Java Script를 사용합니다 컴퓨터는 유저가 버튼을 클릭했다는 것을 인지해야 다음 행동을 연결할 수 있다. 대표적인 HTML의 '클릭'은 input 태그와 button 태그 1. HTML 일반적으로 input 태그가 쓰이는 모양은 아래와 같다 텍스트 버튼 2. HTML 태그를 JS로 불러오기 HTML 작성 후에는 form 태그 안에 있는 input과 button을 JS로 불러온다. const loginForm = document.getElementByID("login-form"); const loginInput = loginInform.querySelector("input"); const loginButton = loginForm.querySelector("button")..

css transition들은 시작 - 종료까지 특정 속성의 변화만 보여준다. 이 루프(반복)을 시각화하기 위해서는 css animation을 참고 transition-propertycss 속성 이름 명시 transition-duration트랜지션이 일어나는 지속 시간 0.5s ~ trasition-timing-function중간값을 계산하는 방법을 정의하는 함수 명시cubic bezier의 4개 꼭짓점으로 정의ease, linear, step-end, steps(4, end) 트랜지션을 완료 후에 발생하는 이벤트 감지하기 transitionedpropertyName트랜지션이 완료된 속성의 이름을 나타내는 문자열 이벤트는 자바스크립트에서 element.addEventListener() 메소드로 모니터..

이전에 글자를 바꾸는 실습에 이어, 이번에는 컬러 바꾸는거 도전 글자가 black이었다가 blue로 바뀐다 See the Pen Untitled by riverlee1132 (@riverlee1132) on CodePen.

네이버블로그는 꾸미는 기능이 티스토리에 비해 굉장히 제한적이다. 예전보다는 좋아지긴 했는데 여전히 레이아웃에 제한이 많다. 그나마 사용자가 선택할 수 있는 옵션 중에서는 위젯을 붙이는 것 정도 ... 관리 > 꾸미기 설정 > 레이아웃 위젯 설정 레이아웃 위젯 설정 가장 아래에 버튼이 있다. 클릭하면 팝업창 하나가 뜨는데 그 곳에 작성한 코드를 붙여넣으면 된다. HTML과 CSS를 입력하면 되는데, CSS를 별도로 입력하는 구조가 아니라서 인라인 구조로 작성한다. 위젯 코드 ↓ See the Pen 네이버 블로그 링크 위젯 by riverlee1132 (@riverlee1132) on CodePen. //

HTML 안녕하세요 클릭! CSS section{ text-align:center; margin-top: 7%; } span{ font-size: 60px; display:block; } button{ width: 60px; height: 34px; margin-top: 30px; } JS const text = document.querySelector("#part span"); const btn = document.querySelector("#go"); function change(){ text.innerText = '피카츄입니다' } btn.addEventListener("click", function(change){ if(text.innerText === '안녕하세요'){ text.innerText..

픽셀 단순히 화면의 크기에 영향을 받는게 아니라 화면의 밀도에 영향을 받는다. 같은 크기의 화면이더라도 화면의 밀도가 높은 화면에서는 오브젝트가 작게, 밀도가 낮은 화면에서는 오브젝트가 크게 보인다. ppi 1인치당 표시되는 픽셀의 수. 화면 1인치당 픽셀의 수가 높을 수록 밀도가 높고, 픽셀의 수가 적을 수록 밀도가 낮다. 가로 픽셀 수, 세로 픽셀 수를 곱한 '면'이 '해상도'가 된다. ex: FHD 크기인 1920 x 1080 해상도는 가로 1920픽셀, 세로 1080 픽셀이므로 약 210만 픽셀을 가지고 있다. 즉, 모니터의 해상도가 높아질 수록 내가 디자인한 100px이 작게 보이는 것이다. 우리가 흔히 '고화질 이미지'라고 하는 파일들의 해상도를 보면 가로 2560 이상인 것이 많은데 그만큼 ..

머티리얼 디자인3 스크린 페이지 내용 읽으면서 요약 0. Design for large screens landscape(가로)와 portrait(세로) 방향의 디바이스를 위한 설계. 레이아웃 그리드를 조정할 때 내용과 요소들을 디바이스의 크기에 맞춰 유동적으로 사용할 수 있는 컬럼으로 나눈다. 1.반응형 레이아웃 그리드 1.1. 컬럼, 거터 그리고 마진 반응형 컬럼 그리드는 body 영역 안에 있는 요소들의 편리한 레이아웃 구조를 위해 컬럼, 거터 그리고 마진으로 만들어졌다. 스크린 크기와 방향에 따른 논리적이고 일관된(logical and consistent) 레이아웃 경험을 만들기 위해 컬럼 그리드에 컴포넌트, 이미지 그리고 텍스트가 정렬된다. body 영역의 크기가 커지거나 줄어들면(grows or..

HTML 확인 HTML에 있는 input과 button을 JS로 가져오는 방법 바닐라JS 방법1 const getEle = document.getElementById("box1"); const getInput = getEle.querySelector("input"); const getBtn = getEle.querySelector("button"); 바닐라JS 방법2 const getInput = document.querySelector("#box1 input"); const getBtn = document.querySelector("#box1 button");