#html
- 강조태그
<body>
<p>문장중 <i>일부</i>를 <b>강조</b>할 때 사용하는 태그</p>
<p>문장중 <em>일부</em>를 <strong>강조</strong>할 때 사용하는 태그</p>
</body>서로 다른 태그들을 썻더라도 웹브라우저에서 보여지는 결과는 같다. 무엇이 차이냐면 <em>태그나 <strong>태그는 검색엔진에서 사이트의 정보를 수집할 때 중요하다고 인식을 할 수 있게 해준다.
- 약어태그
- abbr태그를 사용하고 속성은 title을 사용한다.
- 전문용어태그
- dfn태그를 사용하고 속성은 title을 사용한다.
- 인용문태그
- 통채로 인용할때는 blockquote태그를 사용하고 주소를 남길때 cite속성을 사용한다.
- 인용문 중 단어만 인용할때는 q태그를 사용하고 cite속성은 마찬가지
- 섹셔닝(div태그)
- html5에 접근성을 좀 더 높히려고 div태그에 role속성을 사용하는것은 틀린 것이다. 역할이 포함된 태그들이 있다. header, main, section, footer, address 등.
- 리스트태그
- 동일한 내용들을 나열할 때 리스트태그를 쓴다. ul태그안에 리스트태그들을 쓴다면 ul태그 하나안에 리스트들을 나열해야지 ul을 여러개 쓰면 안된다.
- ul태그안에 자식요소로 리스트태그(li)를 제외하고 다른 요소들이 올 수 없다. 다만 리스트태그의 자식요소로 다른 태그들은 쓸 수 있다.
- dt하나에 dd하나 또는 dd여러개는 가능. dt여러개에 dd하나는 안됨.(오류는 아니지만 바람직하지 않다.)
- 서브메뉴를 만들고 싶으면 ul안에 li안에 다시 ul과 li를 만들면된다.
#js
-
객체 참조할 때 주의사항
- 코드참조
const obj = { bc: "hello", "2ca": "hello1", "c a": "hello2", "c-a": "hello3", }; console.log(obj.bc); // hello console.log(obj["bc"]); // hello // console.log(obj.2ca); // error console.log(obj["2ca"]); // hello1 -
객체속성(프로퍼티) 제거하는 법
- 앞에 delete연산자를 사용하면 된다.
-
객체 메서드의 예
- 코드참조
const debug = { log: function(value) { console.log(value); }, }; debug.log('Hello, Method');
#끝말잇기 게임만들기(js)
-
prompt함수
- 브라우저가 사용자로부터 입력을 받는 한가지의 수단.
- prompt함수로 입력창을 띄울 때 취소를 누르면 그 변수값은 NaN이다.
-
parseint(string, radix);
- prompt함수로 입력받으면 문자열로 입력을 받는다. 이 문자열을 숫자로 바꾸고 싶다면 parseint함수를 사용한다. 예를 들어 prompt로 3을 입력받으면 문자 3이 저장된다. 10진수 3으로 바꾸어주려면 parseint를 사용하여 매개변수 string자리에 '3'을, radix자리에 10을 넣으면 된다.
-
alert
- alert은 경고창을 띄운다.
-
confirm
- confirm은 예 아니요(확인, 취소) 창을 띄운다.
-
querySelector
#선택자(css,js)
- 인자로 태그, 클래스, id등이 들어간다.
- ex) div 태그는 ('div'), 클래스는 ('.class값'), id는 ('#id값')
- 만약 인자에 ('div span') 공백이 있다면 div 자손 span을 의미한다. (자식만 의미하는게 아님)
- 자식만을 표현하고 싶으면 ('div>span') 이렇게 해준다.
- 코드참조
document.querySelector('input'); // input태그를 선택하겠다. -
이벤트 리스너, 콜백함수
- 코드참조
document.querySelector('input').addEventListener('input', function() { console.log('글자 입력'); }); // addEventList 메서드에 첫 인자는 어떤 이벤트가 발생할 지를 입력한다. // 두번째 인자에는 이벤트가 발생했을때 실행시키고 싶은것을 입력한다. const onClick = function() { console.log('버튼 클릭'); }; document.querySelector('button').addEventListener('click', onClick); // 위의 코드를 예를들면 클릭을 했을 때 onclick을 실행시키고 싶다! // 실행시킬 함수를 따로 빼주어도 된다.- 이벤트 리스너에 넣는 함수에는 매개변수로 이벤트에 관한 정보가 제공된다. event.target.value로 이벤트가 실행 되었을 때 값을 알 수 있다.
- textContent는 값을 화면에 보여주는 메서드이다.
https://yeopto.github.io로 이동했습니다.