본문 바로가기

전체 글190

[css] step06. pseudo class step06. - 01~02. pseudo class 버튼 버튼 프세우도 아니다. '수도' 라고 읽는다. '가상의' 라는 의미를 가진다. .box:hover의 경우 문서 객체에 class를 설정하지 않아도 마우스를 올렸을 때 hober class가 들어가고 떼면 사라진다. 이 가상의 이름을 불러오는 것이 ':' 이다. 특정 상황에 css를 변화시킬 수 있다. pseudo class 또한 hover, focus, active와 같이 정해진 약속들이 있다. study daum naver 이렇게는 잘 안쓰인다고 한다. 원래 link는 밑줄이 있는 것이 default이다. 이런 것이 있다는 것만 알아두자. 2021. 12. 13.
[css] step03~05. margin / padding / border step03. margin 앞으로 step05. border 까지 이 두 가지 그림을 기억하면 된다. 이 css들은 margin, padding, border를 앞에 쓰고, - (dash)와 함께 top, bottom, left, right를 뒤에 써서 작성한다. (ex - margin-top) 버튼 버튼1 버튼2 버튼3 버튼4 버튼5 버튼6 버튼7 버튼8 margin은 content를 둘러싸는 boundary의 외곽을 말한다. 'margin-위치' 의 방식으로 사용한다. top, bottom, left, right를 모두 작성하는 것은 번거로운 일이다. 때문에 한 줄에 나열할 수도 있다. 이때 순서는 top, right, bottom, left 순서이다. (clockwise or 판굿 반대 방향) 한 .. 2021. 12. 13.
[css] step02. selector (선택자) step02. - 01~06 selector (선택자) div1 div2 div3 div4 div5 어떤 항목의 css를 작성할지, 그것을 결정하는 위치가 바로 selector(선택자)이다. element(요소)가 될 수도 있고, id가 될 수도 있고, class가 될 수도 있다. 요소의 경우는 그대로 작성하면 된다. 작성한 요소에 해당하는 모든 곳의 css에 적용된다. id의 경우 앞에 #을 붙여서 작성한다. id는 유일하기때문에 해당하는 곳에만 css가 적용된다. class의 경우 앞에 .을 붙여서 작성한다. class는 일종의 group이기 때문에, 해당 class의 모든 곳에서 css가 적용된다. Dog Lorem ipsum dolor sit amet, consectetur adipisicing .. 2021. 12. 13.
[css] step01. css란? step01. apply css [외부 css] @charset "utf-8"; /* 한글을 이상한 문자열로 인식하지 않도록 방지 */ /* html 페이지에서 요소 안에 작성하는 문법과 같다 */ p{ border: 1px solid red; } Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, consequuntur, consectetur doloribus qui ea perferendis alias. Dolorem aliquam optio mollitia commodi nostrum voluptas neque ut voluptatem enim aspernatur, aut eligendi. css에는 세 종류가 있다. Lorem ipsu.. 2021. 12. 13.
[javascript] step07. innerHTML step07. innerHTML .innerHTML 사용하기 innerText는 해당하는 문자열을 내용 그대로 출력하지만, innerHTML은 html 해석에 맞게 해석해서 출력해준다. step07. example 추가 문자열이 담긴 변수를 더해서 해당 요소를 추가할 수도 있다. 문자열 대신 back tick ` ` 을 이용해서 해당 요소를 추가할 수도 있다. 이런 방식으로 요소를 만드는 것보다 createElement 함수를 이용해서 만드는 것이 더 나아보인다고 말했으나, 가끔씩은 사용한다고 말했다. 참고 debug를 할 때, web browser 검사 sources tab에서 break point를 걸어서 확인할 수 있다. 활용 가치가 높다. 여기까지 html의 기초와 javascript의 기초가 끝.. 2021. 12. 13.
[javascript] Dragon Flight 만들기 (21.04.14 ~ 21.04.16) Dragon Flight 만들기 (21.04.14 ~ 21.04.16에 걸쳐 진행) 파일이 길어서 작성했던 필기를 기반으로 몇 가지만 기록하도록 한다. // context를 이용해서 그림이 그려지는 빈공간 let canvas = document.querySelector("#myCanvas"); // canvas에 그림이 그려지기위한 도구 let context = canvas.getContext("2d"); // 배경 이미지 loading let backImg = new Image(); backImg.src = "images/backbg.png"; canvas 위에 context로 그림을 그리는 방식으로 게임을 만든다. 초당 몇 번씩 반복해서 그림을 그려주려고 한다. new의 의미는 heap 영역에 obj.. 2021. 12. 11.

티스토리툴바