Recent Posts

여러 스타일 규칙 중 최종 색상이 선택되는 과정을 겹친 카드로 보여 주는 일러스트

CSS Tutorial / CSS Inheritance, Specificity, and the Cascade

Work through inheritance and conflicting rules, compare specificity and source order, and understand the limits of !important in a simplified example.

웹 요소의 앞과 뒤에 작은 장식 영역이 덧붙는 모습을 보여 주는 CSS 가상 요소 일러스트

CSS Tutorial / Pseudo-Elements: ::before and ::after

Add decorative pseudo-elements, compare them with the original page, and keep essential information in HTML while checking keyboard access.

중첩된 웹 요소와 형제 요소 중 선택된 대상이 강조된 CSS 선택자 일러스트

CSS Tutorial / CSS Combinators and Pseudo-Classes

Compare descendant, child, and sibling selectors, then test hover, focus, and child-position conditions in a complete example.

HTML 요소들 가운데 클래스, ID, 속성에 따라 서로 다른 요소가 강조된 일러스트

CSS Tutorial / Basic CSS Selectors: Type, Class, ID, and Attributes

Choose basic selectors for a small page, combine conditions correctly, and inspect whether each rule matches the intended elements.

웹페이지의 한 요소를 선택해 스타일 규칙과 계산된 값을 살펴보는 개발자 도구 일러스트

CSS Tutorial / Inspect CSS with DevTools: Styles and Computed

Use Styles, Computed, and the box model display to diagnose CSS, compare temporary edits, and transfer a confirmed change to the correct source file.

선택한 웹 요소에 색과 여백을 지정해 화면 결과가 바뀌는 CSS 문법 일러스트

CSS Tutorial / CSS Syntax: Selectors, Declarations, Comments, and Errors

Read and write CSS rules, use comments, and distinguish syntax errors from selectors that do not match and declarations overridden by other rules.

외부 스타일시트, 내부 스타일시트, 인라인 스타일의 세 적용 경로를 나타낸 일러스트

CSS Tutorial / Apply CSS with Inline, Internal, and External Styles

Compare three ways to apply CSS, create a working external stylesheet, and diagnose common file-path and loading problems.

같은 웹페이지의 구조만 있는 모습과 CSS로 스타일을 적용한 모습을 나란히 보여 주는 일러스트

CSS Tutorial / What CSS Does and How It Differs from HTML

Learn the roles of HTML and CSS through a complete page example, and see how styling changes presentation without replacing meaningful HTML.

jquery reference prependto 01

jQuery .prependTo(): Insert Content as the First Child

Start with the content to insert it at a destination’s beginning, and inspect returned nodes and multiple-target behavior.

jquery reference insertafter 01

jQuery .insertAfter(): Insert Content as the Next Sibling

Start with the content to place it after a target sibling, and handle returned nodes, cloning, and safe text insertion.