[TIL]20210820

박창현·2021년 8월 20일
0

TODAY I LEARNED

목록 보기
33/53

자바

문자형

문자형은 char로 2byte크기. 문자는 작은따옴표를 이용하여 한 글자를 표현할 수 있다.

정수형

long형은 8byte크기를 가진다. int 보다 더 큰 범위의 정수를 표현하고 싶을때 사용. 표현할때 float을 사용할때 f를 붙이는 것 처럼 이또한 l 또는 L을 붙인다. long c = 11323123l;

FE - html 요약

<strong> - 강조, 옛날엔 <b>사용.
<em> -기울임, 옛날엔 <i> 사용.
<ol> - order list 순서가 있는 리스트 <ol type={}> {}안에 a, A, i, I 등을 넣어 순서표기법을 변경가능.
<ul> - unorder list 순서가 없는 리스트, 가로배치로 메뉴에 자주사용.
<dl> - 정의 리스트
<dt> - 정의 term
<dd> - 정의 설명
<div> - 태그들을 묶는 역할
youtube의 소스코드를 복사해서 복붙하면 재생가능한 영상이 만들어짐
<img [width="" height=""] src="" alt=""> - 이미지 불러오기
height는 %로 잡지 못함. width는 %로 잡을 수 있음.
대신 height에는 viewport height(vh)를 사용해서 보여지는 화면에 대비 몇%를 사용할지를 설정할 수 있다. 물론 viewport width(vw)도 있음.
사용예시 width="20vw; height="20vh"
box-sizing - 만약 "box-sizing: border-box"으로 되어있으면 마진 등 박스 모델의 width height 계산할 필요없이 border까지가 박스 사이즈의 기준으로 설정된다.
border-radius - 보더에 굴곡을 넣어준다.

    <style>
       .con {
           width:100px;
           height:100px;
           background-color: green;
           position:absolute;
           top:0;
           bottom:0;
           right:0;
           left:0;
           margin:auto;            
       }

이런식으로 상하좌우를 모두 0으로 만들면 모든 면에서 화면에 보이는 크기 내에서 전부 닿도록 설정되고 이때 마진을 auto로 준다면 중앙 배열이 가능하다.
또한, 이를 응용하면

       .con {
           width:100px;
           background-color: green;
           position:absolute;
           top:0;
           bottom:0;
           right:0;
           left:0;
       }

width, hegiht를 없애고 상하좌우를 0으로 즉, 모든 면이 벽과 닿도록 설정하면 배경화면을 만드는 효과를 낼 수도 있다.

JS

== - 타입은 비교하지않음.
=== - 타입까지 비교함.
ex) x=3, y='3', x==y --> True, x===y -> False
join - 리스트 사이사이(정확히는 각요소 뒷부분)에 삽입됨.

JS에서의 정렬(sort)는 사전식 정렬임으로 파이썬에선 10,20,30,1000으로 정렬될 리스트가 JS에서는 10,1000,20,30으로 정렬된다.
클론코딩중에 알게된 부분.
https://www.youtube.com/watch?v=scjyeC74_4k
영상 참조, 1: 정방향 정렬, -1:역방향 정렬 함.

함수 선언 범위
var - 한 function 내에서만 유효 (지역변수라 생각)
let - block 내에서만 유효. 계층구조에서 한 층 에서만 유효하다 보면 됨.
const - let과 동일.
css에서 background-color: red; 이면
js에서는 backgroundColor = "red"; 대부분 이런식으로 입력하면 된다.

get~와 queryselector의 차이
요약하자면 get이 빠르고 범용성이 좋다. query는 복잡한 페이지를 만들때 이용된다? 정도같다.

getElementById vs querySelector: Performance
I can probably write a book on the performance differences between these two functions. But forr now all you need to know is this, getElementById is faster and better supported than querySelector.
Both of these functions are powerful but you must decide which one better suits your need. I almost always use getElementById instead of querySelector, but don’t let me discourage you from using querySelector. If you have a complicated page and you do not want to add id over all it, then use querySelector.

출처
https://whatabouthtml.com/difference-between-getelementbyid-and-queryselector-180

부트스트랩

반응형 웹페이지를 만드는 것을 도와줌.
기본적으로 가로를 12등분으로 나눠 <p class="col-4"> hello world</p> 이런식으로 정리하면 4/12등분 영역만큼 p태그가 차지하도록 만들어 준다.

클론코딩 - mbti사이트 만들기

판다코딩 Mbti 사이트 클론코딩 진행중....
20일~22일까지 영상보면서 제작.

https://kid-twen.netlify.app/

profile
개강했기에 가끔씩 업로드.

0개의 댓글