일반적으로 CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?
렌더링 성능 향상되고, 페이지의 중요한 내용이 먼저 로드되도록 보장되며 웹 성능 최적화될 수 있다.
CSS 파일을 <head> 요소 안에 두면 브라우저는 페이지를 렌더링하기 전에 스타일 정보를 미리 다운로드하고 처리할 수 있으며, 페이지가 빨리 초기 렌더링되고 사용자 경험이 향상된다.
JavaScript 파일을 <body> 끝에 두면 브라우저가 페이지의 나머지 내용을 처리한 후에 스크립트를 실행한다. 렌더링 중에 JavaScript로 인한 지연이 최소화되며, 사용자가 페이지를 더 빠르게 볼 수 있다.
일반적으로 웹 페이지의 주요 내용(텍스트, 이미지 등)은 HTML <body> 안에 있는데, 주요 내용들을 가능한 빨리 로드하여 사용자에게 보여주려면 스크립트가 이 내용을 차단하지 않아야 한다.
브라우저는 웹 페이지의 다운로드와 렌더링을 병렬로 처리하려고 노력하므로, 스타일 시트를 <head>에 두고 스크립트를 <body> 끝에 두면 브라우저가 이 두 가지 작업을 병렬로 처리하기가 더 쉽다.
<li> 요소는 왜 <ul> 요소의 자식 요소여야만 하나요?
HTML의 시맨틱한 의미와 구조를 보다 명확하게 나타낼 수 있으며, 브라우저는 목록 항목을 올바르게 렌더링하고 목록 스타일을 적용하기 쉽다.
<li>요소는 목록 항목을 나타내는 HTML 요소이며, 목록 항목은 순서가 있는 목록<ol> 또는 순서가 없는 목록<ul>내에 포함된다. <li> 요소는 이러한 목록 요소(<ol> 또는 <ul>)의 자식 요소로 사용되면, HTML의 시맨틱한 의미와 구조를 보다 명확하게 나타낼 수 있다.
<li> 요소가 <ul> 또는 <ol> 내에 포함되면 브라우저는 목록 항목을 올바르게 렌더링하고 목록 스타일을 적용하기 쉽다. 순서가 있는 목록(<ol>)에는 번호가 자동으로 할당되며, 순서가 없는 목록(<ul>)에서는 불릿 기호 또는 다른 마커가 표시된다.
CSS box model에 대해서 설명해 주세요.
CSS Box Model(박스 모델)은 웹 페이지의 요소가 렌더링될 때 각 요소를 사각형으로 보며, 웹 페이지의 레이아웃과 스타일을 조절하는 데 중요한 역할을 한다. CSS box model은 Content, Padding, Border, Margin으로 구성되며 요소의 전체 너비 및 높이는 이러한 구성 요소의 합으로 결정된다. CSS Box Model은 웹 디자인에서 레이아웃을 제어하고 각 요소의 간격 및 크기를 조절하는 데 사용되며, Box Model의 속성들을 사용하여 요소의 스타일을 지정하고 레이아웃을 조정할 수 있다. CSS에서는 width, height, padding, border, margin 등의 속성을 사용하여 Box Model을 조작한다.
Content (콘텐츠): 요소의 실제 내용을 포함하며 텍스트, 이미지, 비디오 또는 다른 요소가 포함된다.
Padding (패딩): Content와 Border 사이의 공간으로, 내용과 경계(Border)사이의 여백을 나타낸다.. Padding은 padding-top, padding-right, padding-bottom, padding-left로 설정할 수 있으며, 각 방향별로 다른 값을 가질 수 있다.
Border (경계): 요소의 가장자리를 둘러싸는 선으로 선의 스타일, 두께, 색상을 지정하는데 사용된다.
Margin (마진): 요소와 주변 요소(다른 요소) 사이의 공백을 나타낸다. Margin은 margin-top, margin-right, margin-bottom, margin-left로 설정할 수 있으며, 각 방향별로 다른 값을 가질 수 있다.
요소의 전체 너비는 Content 너비 + Padding 너비 + Border 너비 + Margin 너비로 계산된다.
간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요?
플렉스 박스를 사용한 가운데 정렬
.center-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 뷰포트 높이 만큼 세로 중앙 정렬 */
}CSS 그리드를 사용한 가운데 정렬
.center-container {
display: grid;
place-items: center;
height: 100vh; /* 뷰포트 높이 만큼 세로 중앙 정렬 */
}innerHTML 메서드와 textContent 메서드의 차이에 대해서 설명해 주세요.
innerHTML 메서드와 textContent 메서드는 JavaScript를 사용하여 HTML 요소의 콘텐츠를 다루는 데 사용되는 다른 속성이다. innerHTML은 HTML 요소 내부의 모든 것을 다루며, textContent는 텍스트 데이터에만 집중하며 HTML 태그를 무시한다. 선택은 작업의 성격과 보안 요구 사항에 따라 달라지지만, XSS 공격과 관련된 보안 이슈를 방지하려면 textContent를 사용하는 것이 좋다.
event.preventDefault 메서드는 언제, 왜 사용하는지 설명해 주세요.
주로 웹 페이지에서 발생하는 이벤트의 기본 동작을 취소하거나 중지하는 데 사용한다.
<a>태그를 클릭했을 때 링크를 따라가는 동작을 취소하고 페이지 이동을 막을 수 있다.
그리고<form>요소를 제출할 때 웹 브라우저는 기본적으로 페이지를 다시 로드하거나 새로고침을 하는데<form>요소의 기본 동작을 방지할 수 있다. event.preventDefault()를 사용하는 이유는 주로 사용자 경험을 개선하고 기본 동작이 예상과 일치하지 않을 때를 대비할 수 있다.
- 링크의 기본 클릭 동작 방지
<a>태그를 클릭했을 때 링크를 따라가는 동작을 취소하고 페이지 이동을 막는 것
document.querySelector('a').addEventListener('click', function(event) {
event.preventDefault(); // 링크의 기본 동작을 막음
// 사용자가 지정한 동작 수행
});- 폼 제출의 기본 동작 방지
<form>요소를 제출할 때 웹 브라우저는 기본적으로 페이지를 다시 로드하거나 새로고침하는 것을 방지할 수 있다.
클로저란 무엇인가요?
클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.
어휘적 환경이란 무엇인가요?
함수가 선언된 주변 환경을 의미한다. 주로 외부 함수(outer function)의 변수가 내부 함수(inner function)의 어휘적 환경에 포함된다. 내부 함수가 리턴되어도 나중에 클로저의 어휘적 환경에 접근하여 외부 함수의 변수에 접근할 수 있다.
그래서 클로저를 언제 쓰나요?
클로저는 어떤 함수든 전역 변수에 접근할 수 있어서 사실 자바스크립트의 어떤 함수든 가지고 있습니다. 그래서 언제나 쓰이고 있다.
자바스크립트에서 private 메서드를 구현하기 위해서도 클로저를 활용할 수 있다. 클로저 내에 있는 변수는 외부에서 접근할 수 없으므로, 클로져 내에 있는 변수를 활용할 수 있는 private 메서드만 따로 노출시켜서 인터페이스처럼 사용할 수 있다.
