CSS
강의를 들으면서 새로 알게된 내용을 정리해보자!
-
HTML
<pre>태크
html 안에서는 띄어쓰기를 해도 적용되지 않는다. 하지만<pre>태크 내의 텍스트는 고정폭 글꼴을 사용하며 표현되며, 사용된 띄어쓰기와 줄바꿈이 모두 그대로 브라우저 화면에 적용된다. -
list 태그들
-
<ol>순서가 있는 list를 만들때 사용, 태그 안의type = ""속성을 활용하여 리스트 순서를 다양하게 활용할 수 있다. -
<ul>순서가 없는 list를 만들때 사용, 기본은 원으로 list가 표시되지만type='square'를 쓰면 정사각형 list도 가능 -
<dl>들여쓰기가 가능한 태그, 설명할 때 유용하다.
<ol type="1">
<li>하나</li>
</ol>
<ol type="A">
<li>둘</li>
</ol>
<ul>
<li>셋</li>
</ul>
<ul type="square">
<li>넷</li>
</ul>
<dl>
<dt>Chelsea</dt>
<dd>Pride of London</dd>
</dl>- 인용
<blockquote>를 사용하면 들여쓰기로 인용 효과 가능<q>태그 안에 인용글 넣으면 따옴표로 표시
css 는 인라인 스타일, 내부 스타일, 외부 스타일 세 가지를 사용할 수 있는데 내부 스타일은 html 파일 안에 <style> 태그 활용, 외부 스타일은 파일 외부에 확장자 .css 파일을 만들어 쓰는 내가 계속 쓰던 방식이다. 인라인 스타일은 이번에 구체적으로 알게 되었는데, html 요소 내부에 <style> 속성을 사용하는 것이다. 내부와 차이점은 내부는 <head> 안쪽에 인라인은 <body> 안쪽에 사용한다.
JS
- 논리 연산자
- AND 연산자 : 말 그대로 and 다. 모든 피연산자가
true가 되었을 때, 해당 피연산자의 집합은true가 된다. 만약 하나만true이면false값이 나온다. 여기까지는 알고 있던 내용이지만 이번에 새로 알게 된 것은0은false라는 사실 그리고 문자열은true라는 사실이다. 따라서
console.log('A' && '') // 모두가 ture 이기에 빈 문자열이 나온다
console.log(1 && 0) // 1은 true 0은 false 이므로 0 이 나온다- nullish 병합 연산자
nullish병합 연산자는??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 확정되어있는 변수를 찾을 수 있다.
a ?? b는a가null도 아니고undefined도 아니면a, 그 외의 경우는b이다.
?? 와 || 의 차이를 비교해보자
||는 첫 번째 true 값을 반환한다??는 첫 번째 정의된 값을 반환한다
이 차이를 통해 숫자 0을 구분 지을 수 있다. 또한, null 과 undefined 를 구분 지을 수 있다.
let height = 0
console.log(height || 100) // 100
console.log(height ?? 100) // 0- 선택적 체이닝
이 부분은 기억은 잘 안나지만 했던 것 같다....
말은 어렵지만 해석해보면 굉장히 쉬운 내용이다. 없는 정보를 가져올때 에러가 발생할 수 있는데, 이를 방지하기 위해 ?. 앞의 평가 대상이undefined 이나 null 이면 평가를 멈추고 undefined 를 반환한다
let user = {name : 'John', age : 24, address :}
// 주소가 없는 user 정보
console.log(user.address) // TypeError: Cannot read property 'street' of undefined
console.log(user && user.address) // undefined
console.log(user?.address) // 선택적 체이닝, undefined
글이 잘 정리되어 있네요. 감사합니다.