반응형

CSS HTML JS 8

[CSS] text-align

text-align 속성의 주요 값값설명left텍스트를 왼쪽 정렬합니다. (기본값, 특히 왼쪽에서 읽는 언어에서)right텍스트를 오른쪽 정렬합니다.center텍스트를 가운데 정렬합니다.justify양쪽 정렬로, 텍스트 양쪽 끝을 맞추기 위해 공백을 자동 조정합니다.start문장의 시작 방향에 따라 정렬합니다. (LTR 언어는 왼쪽, RTL 언어는 오른쪽)end문장의 끝 방향에 따라 정렬합니다. (LTR 언어는 오른쪽, RTL 언어는 왼쪽)✅ 1. 블록 요소 자식 정렬 안 됨❌ 잘못된 코드 나는 가운데 정렬되지 않음 이유: 안쪽 는 블록 요소라 텍스트 정렬 영향 안 받음✅ 수정된 코드 나는 가운데 정렬됨 display: inline-block으로 바꾸면 text-align의 영향을 받아 가운데 정..

CSS HTML JS 2025.05.13

[CSS] 다중 선택자

다중 선택자보통 CSS에서 이렇게 쓰면:h1 { font-family: Georgia;}.menu { font-family: Georgia;} 이렇게 두 번이나 font-family: Georgia;를 반복해야 하지? → 코드가 길고 중복돼서 비효율적이야 😓🎯 그래서 등장한 게 다중 선택자! h1,.menu { font-family: Georgia;} 👉 h1이든, .menu 클래스든 둘 다 Georgia 글꼴로 바꿔줘!✔ 쉼표(,)로 선택자들을 나열하면 돼!💡 더 많은 선택자도 가능해!h1, h2, p, .menu, #title { color: navy;} 이렇게 쓰면 위에 나온 모든 요소에 **color: navy;**가 적용📌 요약개념설명다중 선택자쉼표로 나열해서 여러 요소에 같은 ..

CSS HTML JS 2025.05.13

[CSS] chaining(체이닝) 이란?

체이닝(Chaining)이란? 두 개 이상의 조건을 동시에 만족하는 요소를 선택하기 위해 여러 선택자를 "연결(체인)"하는 것h2.destination { ... } 이건 다음 두 가지 조건을 모두 만족해야 해:태그가 여야 하고클래스가 "destination"이어야 해👉 이렇게 두 조건이 동시에 만족될 때만 스타일이 적용돼. 그래서 이걸 **"선택자 체이닝"**이라고 부르는 거야!💡 체이닝은 이런 것들:선택자설명h1.title인 경우만 선택button.primary.large클래스가 primary이면서 large인 만 선택a[href] 태그이면서 href 속성이 있는 경우만 선택input[type="text"].activetype="text"이고 클래스가 active인 만 선택 📘 체이닝 vs 조합..

CSS HTML JS 2025.05.13

[CSS] CSS에서 클래스(class)와 ID의 차이

CSS에서 클래스(class)와 ID의 차이✅ 핵심 요약개념클래스 (.class)아이디 (#id)사용 횟수여러 요소에 사용 가능한 페이지에서 단 한 번만 사용쓰는 목적공통 스타일을 묶어서 재사용할 때고유한 요소 하나에 특별 스타일 줄 때우선순위낮음높음 (클래스보다 스타일 우선 적용됨)표기법.로 시작 (.title)#로 시작 (#main-title) ✏️ HTML첫 번째 제목두 번째 제목이건 아주 중요한 문장 🎨 CSS.bold { font-weight: bold;}.blue { color: blue;}.green { color: green;}#important-text { font-size: 20px; color: red;} 💡 무슨 말이냐면:.bold, .blue, .green 같은 클래스..

CSS HTML JS 2025.05.13

[CSS] a/p 태그 비교

a / p 태그 비교 ✅ 태그 (Anchor Tag)링크를 만들 때 사용하는 태그야.다른 웹페이지, 파일, 이메일 등으로 연결할 수 있어.href 속성이 필요해 (Hypertext REFerence)html https://www.google.com">구글로 이동 👉 이걸 누르면 구글로 이동해.✅ 태그 (Paragraph Tag)단락을 만들 때 사용해.웹페이지에서 본문 내용을 쓰는 기본 블럭이야.html 이것은 문단입니다. 💡 참고로…는 인라인 요소라서 텍스트 줄 안에 들어갈 수 있어.는 블록 요소라서 항상 새 줄에서 시작해. 링크 위에 마우스 올리면 색깔 변경됨 a:hover { color: darkorange;}

CSS HTML JS 2025.05.13

HTML | 글자 형태 태그

HTML의 텍스트 태그는 웹 페이지의 텍스트를 구조화하거나 스타일링하기 위해 사용됩니다. 이 태그들은 텍스트의 의미와 외형을 정의하는 데 중요한 역할을 합니다.HTML의 텍스트 태그는 헤더, 단락, 인용문, 의미 강조, 스타일링 등 다양한 용도로 나뉩니다. 아래는 HTML에서 자주 사용하는 텍스트 관련 태그와 그에 대한 설명입니다.📘 1. 구조적 텍스트 태그웹 문서의 구조를 정의하는 태그들로, 제목, 단락, 인용문 등을 구성할 때 사용합니다.1.1. ~ (헤더 태그)설명: 제목이나 헤드라인을 정의합니다.범위: 이 가장 크고, 이 가장 작습니다.사용 예시: 문서의 제목, 섹션 제목, 블로그 제목 등 Header 1 Header 1 Header 1 Header 1 Header 1 ..

CSS HTML JS 2024.12.19
반응형