Alex Han: Coding Explorer

0. 먼저 읽어보기 CSS Layout Method [CSS] CSS 레이아웃(Layout) 기법 정리이전 글 [HTML] HTML 레이아웃(Layout) 개념과 구조 + flexbox, grid, 미디어 쿼리웹 페이지의 레이아웃(Layout)은 HTML 요소들을 배치하는 방식을 의미한다.HTML과 CSS를 이용하여 다양한 레이아웃을 구성할jyhan0625.tistory.com HTML Layout Structure [HTML] HTML 레이아웃(Layout) 개념과 구조 + flexbox, grid, 미디어 쿼리웹 페이지의 레이아웃(Layout)은 HTML 요소들을 배치하는 방식을 의미한다.HTML과 CSS를 이용하여 다양한 레이아웃을 구성할 수 있으며, 웹사이트의 가독성과 사용자 경험(UX)에 큰 영..

a 태그의 링크 상태에 따라 다른 스타일을 적용할 수 있는 의사 클래스(pseudo-class)이다. 1. 각 상태의 의미의사 클래스설명a:link한 번도 방문하지 않은 링크에 적용a:visited이미 방문한 링크에 적용a:hover마우스를 올렸을 때 적용a:active클릭했을 때(마우스를 눌렀을 때) 적용 2. 정확한 적용 순서 (LVHA 법칙)CSS의 우선순위 때문에 적용 순서가 중요하다.올바른 순서는 LVHA(Link → Visited → Hover → Active)이다. ✅ 순서 (무조건 이 순서로 써야 함)a:link { color: blue; } /* 방문 전 기본 링크 색 */a:visited { color: purple; } /* 방문한 링크 색 */a:hover { color..

HTML .site-header .site-main .widget-area .site-footer CSSspan { display:inline-block; margin-top:6px;}.site-header, .site-main, .widget-area, .site-footer { float: left; }.site-main, .widget-area, .site-footer { width: 69%;}.site-footer { height: 50px; background-color: deepskyblue; margin-top: 5px; }.site-header { width: 30%; background-color:skyblue; margin-right:1%; height..

HTML .site-header .site-main .widget-area .site-footer CSSspan { display:inline-block; margin-top:6px;}.site-header, .site-main, .widget-area, .site-footer { float: left; height: 500px; }.site-footer { width: 58%; height: 50px; margin-left: 20%; background-color: deepskyblue; position: absolute; left: 1%; top: 459px;}.site-header { width: 19%; background-color:skyblue; margin-..

이전 글 [HTML] HTML 레이아웃(Layout) 개념과 구조 + flexbox, grid, 미디어 쿼리웹 페이지의 레이아웃(Layout)은 HTML 요소들을 배치하는 방식을 의미한다.HTML과 CSS를 이용하여 다양한 레이아웃을 구성할 수 있으며, 웹사이트의 가독성과 사용자 경험(UX)에 큰 영향을 미친다.  jyhan0625.tistory.com레이아웃을 구성하는 방법에 더욱 초점을 맞춘 글입니다. 레이아웃 개념 자체에 대해서는 이전 글을 참고바랍니다.   웹 페이지의 레이아웃을 구성하는 방법에는 여러 가지가 있다. 대표적인 방법으로는 Normal Flow(기본 흐름), Float, Flexbox, Grid, Positioning 등이 있으며, 각각의 특징과 사용법을 정리한다.   1. Norma..

이전 글 CSS 선택자(Selector) 정리CSS 선택자는 특정 HTML 요소를 선택하여 스타일을 적용할 수 있도록 도와준다.선택자는 단순한 태그 선택부터 복잡한 관계 설정까지 가능하며, 우선순위에 따라 스타일이 결정된다. 1. 기본 선jyhan0625.tistory.com 0. 먼저 풀어보기해당 CSS 코드의 적용 결과는? 안녕하세요 1 2 3 4 2가 빨강색으로 적용될까? 아니다, 1이 빨강색으로 적용되었다. 1. 1에 적용된 이유코드에서 #div-p > p:nth-child(2) 선택자가 원하는 2가 아니라 1에 적용된 이유는 :nth-child(n)이 요소의 유형과 관계없이 부모의 모든 자식 요소를 기준으로 순서를 세기 때문이다. #div-p > p:nt..

CSS 선택자는 특정 HTML 요소를 선택하여 스타일을 적용할 수 있도록 도와준다.선택자는 단순한 태그 선택부터 복잡한 관계 설정까지 가능하며, 우선순위에 따라 스타일이 결정된다.  1. 기본 선택자 (Simple Selectors) 🔹 1) 전체 선택자 (*) • 문서 내 모든 요소를 선택한다.* { margin: 0; padding: 0;} 🔹 2) 태그(요소) 선택자 (tagname) • 특정 태그의 모든 요소를 선택한다.p { color: blue;} ✅ 모든 태그의 텍스트를 파란색으로 변경. 🔹 3) 클래스 선택자 (.classname) • 특정 클래스명을 가진 요소를 선택한다..red-text { color: red;}이 문장은 빨간색입니다. ✅ 여러 개의 요소에 ..

CSS에서 상속(Inheritance)은 부모 요소의 스타일이 자식 요소에도 자동으로 적용되는 성질을 의미한다.하지만 모든 CSS 속성이 상속되는 것은 아니며, 일부 속성은 명시적으로 설정해야 적용된다.  1. CSS 속성의 상속 여부 🔹 1) 상속되는 속성 (주로 텍스트 관련)다음과 같은 텍스트 스타일 속성은 기본적으로 자식 요소에게 상속된다.속성설명color글자 색상font-family글꼴 종류font-size글자 크기font-style기울임(italic)font-variant작은 대문자(small-caps) 등font-weight글자 굵기letter-spacing글자 간격line-height줄 간격visibility요소 가시성 (hidden 시 자식도 숨겨짐)cursor커서 모양 🔹 2) 상속되..

CSS는 Cascading Style Sheets(종속 스타일 시트)라는 이름처럼 여러 스타일이 동시에 적용될 수 있으며, 우선순위에 따라 최종적으로 적용될 스타일이 결정된다. CSS 우선순위는 “더 구체적인 것”과 “나중에 작성된 것”이 우선 적용됨이라는 원칙을 따른다.  1. CSS 적용 방식별 우선순위CSS는 다음 3가지 방식으로 적용할 수 있으며, 우선순위는 다음과 같다. 🔹 1) Inline 스타일 (style="") - 최우선이 문장은 빨간색입니다.  • HTML 요소에 직접 적용하는 방식 • 가장 높은 우선순위를 가짐 • 유지보수하기 어려워 잘 사용하지 않음 🔹 2) Internal 스타일 ( • HTML 문서 내부   • 외부 파일에 저장된 CSS를 가져와서 적용 • 여러 HTML 파일..