2024.01.31 모각코 4회차 결과

계획

이번 4회차에서는 spring 프로젝트를 위한 기본적인 css/javascript 공부 중 몰랐던 내용들에 대해 정리해보았다.

CSS

CSS의 Overflow 속성

CSS의 Overflow 속성은 요소의 내용이 컨테이너 영역을 벗어나는 경우의 처리방법을 지정해준다.

Overflow : visible
- overflow 속성을 별도로 명시하지 않을 때 적용되는 기본속성이다.

<div class="box">
--내용--
</div>

.box {
  width: 200px;
  height: 50px;
  border: 1px solid black;
}

위와같이 overflow 속성을 명시하지 않은 경우 (visible로 적용된 경우) 에는, box라는 컨테이너에 box의 영역을 벗어나는 양의 콘텐츠가 입력되면, 콘텐츠가 box 밖으로 밀려나더라도 그대로 입력된다.

Overflow : hidden;
- hidden 속성을 적용할 경우, 컨테이너를 벗어나는 콘텐츠를 화면에서 숨겨버린다.

.box {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  overflow: hidden;
}

위와같이 overflow: hidden 속성을 적용한 경우, box 컨테이너 영역을 벗어나는 콘텐츠들은 아예 잘린다.

Overflow : scroll;

.box {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  overflow: scroll;
}

overflow: scroll 속성을 적용 시 콘텐츠가 box 영역 밖으로 밀리거나 잘리지 않고, 스크롤바가 생성되어 스크롤링을 통해 모든 콘텐츠를 확인할 수 있다.

Overflow : auto;
- auto 속성은 scroll 속성에서 확장되어, 콘텐츠가 컨테이너 영역을 넘어가는 경우에만 스크롤바가 생성되고, 아닌 경우에는 스크롤바가 생성되지 않도록 자동적으로 설정해준다.

Javascript

<script> 태그의 속성

async VS defer

DOM 이 반드시 순서대로 실행되어야하면 <script>
DOM이나 다른 스크립트에 의존성이 없고, 실행 순서가 중요하지 않은 경우 <script async>
- 일반 스크립트에 async 속성이 존재하면 HTML 구문 분석 중에도 스크립트를 가져오며, 사용 가능해지는 즉시 평가를 수행한다.

DOM이나 다른 스크립트에 의존성이 있고, 실행 순서가 중요한 경우 <script defer>
- 브라우저가 스크립트를 문서 분석 이후에, DOMContentLoaded 발생 이전에 실행해야 함을 나타내는 불리언 속성이다.
- defer 속성을 가진 스크립트는 자신의 평가가 끝나기 전까지 DOMContentLoaded 이벤트의 발생을 막는다.

use strict (strict mode)

실수를 에러로 변환(Converting mistakes into errors)
- 기존에 조용히 무시되던 에러들을 throwing 하여 즉시 수정 가능하게 해준다.
JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡는다. 가끔씩 엄격 모드의 코드는 비 - 엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어진다.
엄격 모드는 ECMAScript의 차기 버전들에서 정의 될 문법을 금지한다.
비상식적인 문법들을 사용할 수 없도록 막아주는 역할을 한다.
- 변수의 중복선언
- 변수의 초기화 없이 사용
- 할당된 property 변경
- ```
'use strict';
 var v = "Hi!  I'm a strict mode script!";
```
- ```
function foo(){
    'use strict';
}
```
- ```
(function(){
    'use strict';
    //....
})();
```

Window 객체

브라우저 안의 모든 요소들이 소속된 객체, 최상위 객체, 전역 객체를 의미한다.

var myName = "wp";
function getMyName(){
    return myName;
}

console.log(window.myName);
console.log(window.getMyName());

일반적으로 브라우저 창을 의미하며, 이 창을 제어하기 위한 다양한 메소드를 제공한다.

console.log("window width : " + window.innerWidth);
console.log("window height : " + window.innerHeight);

window.open();

호이스팅

선언된 함수나 변수의 선언문을 유효 범위의 최상단으로 끌어올리는 행위이다.
컴파일단계에서 동작하며, 할당(assignment)부분은 호이스팅되지 않는다.

변수 호이스팅

console.log(x); // undefined
var x = 5;
console.log(x); // 5

위 코드에서, var x라는 변수는 호이스팅되어 최상단으로 이동하지만, 5라는 할당값은 호이스팅되지 않아

첫 번째 console.log(x)는 undefined를 출력하게 된다.

함수 호이스팅

sayHello(); // "Hello, World!"

function sayHello() {
  console.log("Hello, World!");
}

위 코드에서는, sayHello 함수 선언은 최상단으로 끌어올려져 있기 때문에 함수 호출 전에 함수를 선언해도 함수가 정상적으로 동작한다.

함수 표현식의 호이스팅

sayHi(); // TypeError: sayHi is not a function
var sayHi = function() {
  console.log("Hi!");
};

위 코드에서, 함수 표현식에서는 변수 sayHi가 호이스팅되지만 초기화 부분까지 호이스팅되지는 않는다. 따라서 TypeError가 발생하게 된다. 함수 표현식에서는 변수가 호이스팅되면서 undefined로 초기화되므로 함수 호출이 불가능하다.

호이스팅에 대해 정리하자면, 변수와 함수 선언은 호이스팅되지만, 함수 표현식에서는 변수가 호이스팅되고 초기화되지만 함수가 호이스팅되지 않는다는 것을 특징이라고 할 수 있겠다.

CSS

CSS의 Overflow 속성

CSS의 Overflow 속성은 요소의 내용이 컨테이너 영역을 벗어나는 경우의 처리방법을 지정해준다.

Overflow : visible
- overflow 속성을 별도로 명시하지 않을 때 적용되는 기본속성이다.

<div class="box">
--내용--
</div>

.box {
  width: 200px;
  height: 50px;
  border: 1px solid black;
}

Overflow : hidden;
- hidden 속성을 적용할 경우, 컨테이너를 벗어나는 콘텐츠를 화면에서 숨겨버린다.

.box {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  overflow: hidden;
}

위와같이 overflow: hidden 속성을 적용한 경우, box 컨테이너 영역을 벗어나는 콘텐츠들은 아예 잘린다.

Overflow : scroll;

.box {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  overflow: scroll;
}

overflow: scroll 속성을 적용 시 콘텐츠가 box 영역 밖으로 밀리거나 잘리지 않고, 스크롤바가 생성되어 스크롤링을 통해 모든 콘텐츠를 확인할 수 있다.

Overflow : auto;
- auto 속성은 scroll 속성에서 확장되어, 콘텐츠가 컨테이너 영역을 넘어가는 경우에만 스크롤바가 생성되고, 아닌 경우에는 스크롤바가 생성되지 않도록 자동적으로 설정해준다.

Javascript

<script> 태그의 속성

async VS defer

DOM 이 반드시 순서대로 실행되어야하면 <script>
DOM이나 다른 스크립트에 의존성이 없고, 실행 순서가 중요하지 않은 경우 <script async>
- 일반 스크립트에 async 속성이 존재하면 HTML 구문 분석 중에도 스크립트를 가져오며, 사용 가능해지는 즉시 평가를 수행한다.

DOM이나 다른 스크립트에 의존성이 있고, 실행 순서가 중요한 경우 <script defer>
- 브라우저가 스크립트를 문서 분석 이후에, DOMContentLoaded 발생 이전에 실행해야 함을 나타내는 불리언 속성이다.
- defer 속성을 가진 스크립트는 자신의 평가가 끝나기 전까지 DOMContentLoaded 이벤트의 발생을 막는다.

use strict (strict mode)

실수를 에러로 변환(Converting mistakes into errors)
- 기존에 조용히 무시되던 에러들을 throwing 하여 즉시 수정 가능하게 해준다.
JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡는다. 가끔씩 엄격 모드의 코드는 비 - 엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어진다.
엄격 모드는 ECMAScript의 차기 버전들에서 정의 될 문법을 금지한다.
비상식적인 문법들을 사용할 수 없도록 막아주는 역할을 한다.
- 변수의 중복선언
- 변수의 초기화 없이 사용
- 할당된 property 변경
- ```
'use strict';
 var v = "Hi!  I'm a strict mode script!";
```
- ```
function foo(){
    'use strict';
}
```
- ```
(function(){
    'use strict';
    //....
})();
```

Window 객체

브라우저 안의 모든 요소들이 소속된 객체, 최상위 객체, 전역 객체를 의미한다.

var myName = "wp";
function getMyName(){
    return myName;
}

console.log(window.myName);
console.log(window.getMyName());

일반적으로 브라우저 창을 의미하며, 이 창을 제어하기 위한 다양한 메소드를 제공한다.

console.log("window width : " + window.innerWidth);
console.log("window height : " + window.innerHeight);

window.open();

호이스팅

선언된 함수나 변수의 선언문을 유효 범위의 최상단으로 끌어올리는 행위이다.
컴파일단계에서 동작하며, 할당(assignment)부분은 호이스팅되지 않는다.

변수 호이스팅

console.log(x); // undefined
var x = 5;
console.log(x); // 5

위 코드에서, var x라는 변수는 호이스팅되어 최상단으로 이동하지만, 5라는 할당값은 호이스팅되지 않아

첫 번째 console.log(x)는 undefined를 출력하게 된다.

함수 호이스팅

sayHello(); // "Hello, World!"

function sayHello() {
  console.log("Hello, World!");
}

위 코드에서는, sayHello 함수 선언은 최상단으로 끌어올려져 있기 때문에 함수 호출 전에 함수를 선언해도 함수가 정상적으로 동작한다.

함수 표현식의 호이스팅

sayHi(); // TypeError: sayHi is not a function
var sayHi = function() {
  console.log("Hi!");
};

'2023-24 동계 모각코' 카테고리의 다른 글

2024.02.06 모각코 6회차 결과 (0)	2024.02.07
2024.02.02 모각코 5회차 결과 (2)	2024.02.07
2024.01.05 모각코 3회차 결과 (0)	2024.01.07
2023.12.29 모각코 2회차 결과 (0)	2024.01.02
2023.12.29 모각코 2회차 계획 (2)	2024.01.02

CSS

CSS의 Overflow 속성

Javascript

<script> 태그의 속성

use strict (strict mode)

Window 객체

호이스팅

CSS

CSS의 Overflow 속성

Javascript

<script> 태그의 속성

use strict (strict mode)

Window 객체

호이스팅

'2023-24 동계 모각코' 카테고리의 다른 글

티스토리툴바