Doctype은 HTML 문서의 유형을 명시하는 선언입니다. 브라우저에게 문서가 어떤 버전의 HTML을 사용하는지를 알려줍니다. HTML5에서는 <!DOCTYPE html>
을 사용하며, 이 선언을 통해 브라우저가 문서를 표준 모드로 렌더링하게 됩니다.
Doctype을 명시하지 않으면 브라우저는 문서를 쿼크 모드(Quirks mode)로 렌더링할 수 있습니다. 이 모드에서는 표준과 다른 방식으로 HTML과 CSS를 해석하여, 특히 구형 브라우저와의 호환성을 유지하려고 합니다. 결과적으로 디자인이 예상과 다르게 표시될 수 있습니다.
시멘틱 태그(Semantic Tag)는 HTML5에서 추가된 의미론적인 태그입니다. 예를 들어, <header>
, <footer>
, <article>
, <section>
과 같은 태그들이 있습니다. 이러한 태그를 사용하면 코드의 가독성이 높아지고, 검색 엔진 최적화(SEO) 및 접근성 향상에 도움이 됩니다.
SEO(Search Engine Optimization)는 검색 엔진 최적화를 의미하며, 웹 페이지가 검색 엔진 결과에서 상위에 표시되도록 하는 다양한 기법을 말합니다. 키워드 사용, 메타 태그 최적화, 시멘틱 마크업 사용 등이 SEO의 중요한 요소입니다.
UI(User Interface)는 사용자가 웹 사이트나 애플리케이션과 상호작용하는 인터페이스를 의미합니다. UI는 버튼, 메뉴, 폼과 같은 요소로 구성되며, 사용자가 직관적이고 효율적으로 시스템을 사용할 수 있도록 설계되어야 합니다.
인터페이스(Interface)는 두 개체 간의 경계를 의미하며, 컴퓨터 시스템에서는 사용자와 시스템, 혹은 시스템 간의 상호작용을 가능하게 하는 매개체를 의미합니다. 사용자 인터페이스(UI)와 애플리케이션 프로그래밍 인터페이스(API) 등이 있습니다.
Application Programming Interface의 약자로 응용프로그램들이 서로 통신하여 데이터를 교환할 수 있도록 하는 일종의 규칙입니다.
Clearfix 사용: 부모 요소에 clearfix 클래스를 추가하여 CSS로 ::after 가상 요소를 사용해 플로팅 요소를 클리어합니다.
.clearfix::after {
content: "";
display: table;
clear: both;
}
CSS overflow 속성 사용: 부모 요소에 overflow: auto 또는 overflow: hidden을 설정하여 내부의 플로팅 요소를 감쌉니다.
.clearfix {
overflow: auto;
}
<ul>
(Unordered List): 순서가 없는 목록을 만듭니다. 보통 점(bullet)으로 표시됩니다.<ol>
(Ordered List): 순서가 있는 목록을 만듭니다. 숫자나 알파벳 등으로 항목을 표시합니다.<dl>
(Definition List): 정의 목록을 나타내는 태그로, 용어와 정의 쌍을 포함합니다.<dt>
(Definition Term): 정의할 용어를 나타냅니다.<dd>
(Definition Description): 용어의 정의를 나타냅니다.<strong>
: 중요성을 나타내는 태그로, 스크린 리더는 강조하여 읽습니다.<em>
: 강조를 나타내는 태그로, 스크린 리더는 이탤릭체로 읽습니다.<b>
: 단순한 굵은 글씨를 만듭니다. 의미론적 강조가 없습니다.<figure>
태그는 독립적인 콘텐츠, 예를 들어 사진, 다이어그램, 일러스트레이션 등을 감싸는 컨테이너 역할을 합니다. <figcaption>
태그와 함께 사용하여 설명을 제공할 수 있습니다.CSS 전처리기는 CSS 코드를 더 효율적으로 작성할 수 있도록 도와주는 도구입니다. SASS, LESS, Stylus가 대표적이며, 변수, 중첩, 믹스인 등의 기능을 제공합니다.
MDN(Mozilla Developer Network)은 웹 개발자들이 참고할 수 있는 웹 기술에 대한 종합적인 문서화 사이트입니다. HTML, CSS, JavaScript뿐만 아니라 최신 웹 API와 같은 다양한 웹 기술에 대한 자료를 제공합니다.
<button>
태그의 기본 타입은 "submit"입니다. 폼 안에서 이 버튼을 클릭하면 폼이 제출됩니다.
<input type="button">
과의 차이점은?<button>
은 기본적으로 type="submit"이며, 폼 제출 기능을 가집니다.
<input type="button">
은 기본적으로 버튼 기능만 가지며, 폼 제출과는 무관합니다.
<s>
또는 <del>
태그를 사용하여 취소선을 표시할 수 있습니다.
<u>
태그를 사용하여 밑줄을 넣을 수 있습니다.
<section>
: 웹 페이지의 여러 부분(예: 소개, 서비스, 연락처)을 나누는 큰 그룹으로 여러 주제로 나누기 위해 사용합니다.<article>
: 독립적으로 존재할 수 있는 하나의 콘텐츠 덩어리로 블로그 글, 뉴스 기사 등 독립적인 내용을 나타낼 때 사용합니다.CDN(Content Delivery Network)은 웹 콘텐츠를 전달하기 위해 전 세계 여러 서버에 콘텐츠를 분산 저장하고, 사용자에게 가장 가까운 서버에서 콘텐츠를 제공하는 네트워크 시스템입니다.
일반적으로 CDN 방식이 빠릅니다. CDN 서버가 사용자와 지리적으로 더 가깝고, 여러 사용자가 콘텐츠를 공유하기 때문에 캐싱 효과가 있습니다. 하지만 상황에 따라 다를 수 있으며, 특정 경우에는 직접 로드가 더 빠를 수도 있습니다.
:는 가상 클래스, ::는 가상 요소를 의미합니다. HTML5 표준에서는 가상 요소에 대해 ::을 권장합니다.
CSS 우선순위는 다음과 같습니다:
바닐라JS(Vanilla JS)는 순수한 자바스크립트를 의미합니다. 라이브러리나 프레임워크 없이 작성된 자바스크립트 코드입니다.
JQuery는 자바스크립트 라이브러리로, DOM 조작, 이벤트 처리, 애니메이션, AJAX 요청 등을 간편하게 수행할 수 있게 해줍니다.
플러그인은 특정 기능을 쉽게 추가할 수 있도록 만들어진 작은 코드 모듈입니다. 예를 들어 JQuery 플러그인은 슬라이더, 모달 등 다양한 기능을 손쉽게 구현할 수 있습니다.
크로스 브라우징(Cross-Browsing)은 웹 페이지가 다양한 브라우저에서 동일하게 작동하고 표시되도록 하는 기법입니다.
<script>
태그에 defer 속성이 적용된 모든 스크립트는 순서대로 실행됩니다. 즉, HTML 문서에 나열된 순서대로 실행됩니다.비동기 통신은 요청이 완료될 때까지 기다리지 않고, 다음 작업을 진행하며, 응답이 도착하면 콜백 함수가 실행되는 방식의 통신입니다.
AJAX (Asynchronous JavaScript and XML)는 웹 페이지를 새로고침하지 않고도 서버와 비동기적으로 데이터를 주고받을 수 있는 기술입니다. AJAX를 사용하면 웹 페이지의 일부분만을 업데이트할 수 있어, 사용자 경험을 개선하고, 웹 애플리케이션의 응답성을 높일 수 있습니다. AJAX는 비동기적으로 서버와 통신할 수 있기 때문에, 사용자 인터페이스(UI)를 보다 매끄럽고 빠르게 반응하도록 할 수 있습니다.
슬라이드 구현 코드는 여러 방식이 있으며, 간단한 JQuery 또는 JavaScript로 구현할 수 있습니다.
// JavaScript로 간단한 슬라이드 구현
let slides = document.querySelectorAll('.slide');
let currentSlide = 0;
function showSlide(index) {
slides[currentSlide].classList.remove('active');
currentSlide = (index + slides.length) % slides.length;
slides[currentSlide].classList.add('active');
}
document.querySelector('.next').addEventListener('click', function() {
showSlide(currentSlide + 1);
});
document.querySelector('.prev').addEventListener('click', function() {
showSlide(currentSlide - 1);
});
체크박스를 숨기고, 레이블을 사용하여 스타일을 커스텀할 수 있습니다.
<input type="checkbox" id="customCheckbox" style="display:none;">
<label for="customCheckbox" class="custom-checkbox"></label>
.custom-checkbox {
width: 20px;
height: 20px;
background: #ddd;
display: inline-block;
cursor: pointer;
}
#customCheckbox:checked + .custom-checkbox {
background: #333;
}
.siblings() 메서드를 사용하여 형제 노드를 탐색할 수 있습니다.
$('selector').siblings();
.parent() 메서드를 사용하여 부모 노드를 선택할 수 있습니다.
$('selector').parent();
.children() 메서드를 사용하여 자식 노드를 선택할 수 있습니다.
$('selector').children();
.offset() 메서드를 사용하여 선택된 요소의 위치를 얻을 수 있습니다.
$('selector').offset();
e.preventDefault()는 이벤트의 기본 동작을 막습니다. 예를 들어, 폼 제출을 막거나 링크 클릭 시 페이지 이동을 방지할 수 있습니다.
@keyframes moveUpDown {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
.shape {
animation: moveUpDown 2s infinite;
}
CSS에서 border 속성을 사용하여 삼각형을 만들 수 있습니다.
.triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid black;
}
자바스크립트에서 변수 선언과 함수 선언이 해당 범위의 최상단으로 끌어올려지는 동작을 말합니다.
Babel과 같은 트랜스파일러를 사용하여 ES6 코드를 ES5로 변환하여 브라우저 호환성을 확보할 수 있습니다.
CSS Flexbox는 컨테이너 내의 아이템들을 배치하고 정렬하기 위한 1차원 레이아웃 모델입니다. 주로 수평 또는 수직 방향으로 아이템들을 쉽게 정렬할 수 있게 합니다.
반응형 웹 디자인에서 중요한 것은 유연한 그리드 레이아웃, 유동적인 이미지 및 미디어, 그리고 적절한 미디어 쿼리 사용입니다.
<meta>
태그는 HTML 문서의 메타데이터를 정의합니다. 예를 들어, 문서의 설명, 키워드, 작성자, 문자 인코딩 등을 지정할 수 있습니다.
오픈그래프(Open Graph, OG)는 웹 페이지의 메타 정보를 제공하기 위한 프로토콜로, 웹 페이지를 소셜 미디어 플랫폼에서 공유할 때 어떻게 표시될지를 제어하는데 사용됩니다.
오픈그래프 메타 태그는 HTML 문서의 <head>
섹션에 추가되며, 소셜 미디어가 페이지를 공유할 때 다음과 같은 정보를 제공합니다:
<head>
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="이미지 URL">
<meta property="og:url" content="페이지 URL">
<meta property="og:type" content="website">
</head>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
</head>
태그를 사용하여 확대를 제한할 수 있습니다.
팝업 창은 HTML과 CSS로 기본 구조와 스타일을 만들고, JavaScript 또는 JQuery를 사용하여 버튼 클릭 이벤트를 통해 팝업 창을 보여주거나 숨길 수 있도록 구현합니다.