SOOM_BLOG [숨숨 블로그]

HTML 내 태그 위치에 따른 렌더링 과정을 알아보자! - head내 script를 포함하는 경우 사용자가 웹사이트를 보는데 시간이 많이 소요될 수 있다. - body내 script를 포함하는 경우 사용자가 기본적인 html을 빨리 볼 수 있는 장점은 있지만, 만약 js에 의존적인 웹사이트인 경우 사용자가 정상적인 화면을 보기까지 오래 걸린다. - head + async 를 포함하는 경우 js를 다운로드 받는 시간을 절약할 수 있다. js를 통해 조작하려는 시점에 html이 파싱되지 않으면 에러가 발생할 수 있다. 또한 js를 실행하는 동안 blocked 되기 때문에 여전히 사용자가 웹사이트를 보는데 시간이 꽤 소요될 수 있다. - ⭐️⭐️⭐️ head + defer 를 포함하는 경우 또한, 다수의 스크..

Function fundamental building block in the program subprogram can be used multiple times performs a task or calculates a value Function declation function name (param1, param1) {body ... return;} one function === one thing : 함수 하나는 한 가지 일만 해야한다. naming : doSomething, command, verb function is object in JS Parameters premitive parameters : passed by value object parametser : passed by reference ☆..

let vs var var는 선언 하기 전에 값을 쓸 수 있다. => var 호이스팅 (호이스팅 : 어디에 선언했는지 상관없이 항상 선언을 제일 위로 끌어올려주는 것.) 또한 var는 block scope가 없다. 따라서 변수를 block에 선언해도 어디에서도 호출 할 수 있다. let은 선언하기 전에 값을 넣으면 에러가 뜨고, block scope가 있다. 따라서 var 말고 let을 쓰자! 변수 선언 type - Variable types : mutable 데이터 타입 - constant type : Immutable 데이터 타입 포인터가 잠겨있어 값을 선언함과 동시에 할당한 값을 절대 바꿀 수 없다. constant 데이터 타입으로 코드를 작성하는 것이 더 바람직하고 좋은 습관이다. for sec..

Flex Box 1. container, item 에 적용할 수 있는 속성값들이 존재한다. [ container ] attributes explain example display flex flex-direction 중심축 정하기 - row (default) - row-reverse - column - column-reverse flex-wrap 한 줄에 꽉차면 다음 줄로 넘어가게 할지 말지 - nowrap (default) - wrap flex-flow flex-direction + flex-wrap flex-flow : column nowrap; justify-content 중심축의 item들을 중심축 기준으로 어떻게 배치할 지 결정한다. - flex-start - flex-end - center - ..

Diplay : 각 태그들이 가지고 있는 inline, block 특성을 바꿀 수 있다. inline : tag내 content 자체만을 꾸며준다. tag에 지정해준 width, height는 무시하고 content의 크기에 맞춰 한 줄에 나열한다. inline-block : 한 줄에 block단위로 (content의 크기엔 상관없이) 적용한 스타일에 맞춰 나열한다. block : 한 줄에 하나씩만 나열한다. Position(default : static) static : html에 정의된 순서대로 브라우저 상에 자연스럽게 보여지는 것. relative : item이 원래 있어야 할 위치에서 설정한 (top, left, bottom-left 등) 스타일에 맞춰 보여지는 것. absolute : item이..

cascading 적용 순서 Author style : 우리가 작성하는 스타일 sheet (css 파일) ⌵ User style : 브라우저 상에서 유저 취향에 맞게 바꾼 스타일들 ⌵ Browser : 브라우저 상에서 기본적으로 지정된 스타일 ** cacading의 연결고리를 끊는 것 : !important (가능하면 쓰지 않는 것이 좋다..) 🔍 selectors selector example Universal * * {color : green;} type Tag li {color : blue;} ID #id #special {color:pink;} Class .class .red {background : yellow} State : button:hover{color : red;} Attribute [..