1.HTML과 CSS의 차이점은 무엇인가요?
HTML(하이퍼텍스트 마크업 언어)는 웹 페이지의 구조를 정의하는 언어입니다. HTML은 콘텐츠를 웹 브라우저에 표시하기 위해 텍스트, 이미지, 링크 등 다양한 요소들을 정의하며, 웹 페이지의 기본적인 뼈대를 형성합니다. 예를 들어, 제목은 태그로, 단락은 태그로 정의하게 됩니다. 시맨틱 요소들을 사용하면 검색엔진 최적화(SEO)와 접근성을 높이는 데도 도움이 됩니다.
반면, CSS(캐스케이딩 스타일 시트)는 HTML로 구성된 웹 페이지의 스타일을 정의하는 언어입니다. CSS를 사용하여 레이아웃, 색상, 폰트, 여백 등 시각적인 요소를 제어할 수 있습니다. 예를 들어, 텍스트의 색상을 파란색으로 바꾸거나, 특정 요소에 여백을 추가하는 등의 작업을 CSS에서 처리하게 됩니다.
정리하자면, HTML은 웹 페이지의 콘텐츠와 구조를 담당하는 반면, CSS는 그 콘텐츠의 스타일과 레이아웃을 담당한다고 할 수 있습니다. 둘은 함께 사용되어 웹 페이지를 완성하는 데 중요한 역할을 합니다.
2.CSS 박스 모델(Box Model)에 대해 설명해주세요.
css 박스 모델은 웹 페이지의 각 요소를 하나의 박스로 생각하는 것으로
박스는 콘텐츠(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 구성있습니다. 콘텐츠는 말 그대로 박스에 들어가는 내용을 의미하고 그 내용 바깥으로 테두리가 있으면 그 테두리와 콘텐츠간의 안쪽의 여백을 패딩이라고 하며, 테두리 바깥쪽의 여백을 마진이라고 합니다.
3.Flexbox와 Grid 레이아웃의 차이점은 무엇인가요?
flex는 1차원, grid는 2차원 레이아웃 시스템으로
flex의 경우 주로 한 줄(row) 또는 한 열(col)로 정렬할때 사용합니다.
grid의 경우 flex와 비슷하게 요소들을 행과 열로 나누어 배치하고, 더 복잡한 레이아웃을 쉽게 구성할 수 있습니다.
4.JavaScript의 클로저(Closure)란 무엇인가요?
클로저는 함수가 생성될 때 그 함수가 접근할 수 있는 변수들을 기억합니다.
그래서 함수가 외부 스코프(범위)에서 호출되더라도 그 변수들에 접근할 수 있습니다.
클로저는 데이터 은닉과 같은 중요한 프로그래밍 패턴을 구현하는데 사용된다.
예를 들어, 클로저를 사용하면 외부에서 직접 접근할 수 없는 변수를 만들 수 있다.
클로저의 예시는 아래와 같습니다.
function outerFunction() {
let outerVariable = 'I am outside!';
function innerFunction() {
console.log(outerVariable); // outerVariable에 접근 가능
}
return innerFunction;
}
const closureExample = outerFunction();
closureExample(); // 'I am outside!' 출력5.이벤트 버블링(Event Bubbling)과 이벤트 캡처링(Event Capturing)의 차이점은 무엇인가요?
쉽게 말해 자식에서 부모로 이벤트가 전파되는 것을 버블링
부모에서 자식으로 이벤트가 전파되는 것을 캡처링이라고 합니다.
이러한 버블링 및 캡처링을 방지는 하는 방법으로는
1.event.preventDefault()
2.return false
3.event.defaultPrevented()
가 있습니다.
자세한 예시는 아래 링크를 참고할 수 있다.
참조: https://velog.io/@proshy/JS-브라우저-기본-이벤트와-버블링-방지
