이것저것 관심있는 모든것

목표: Flexbox의 주축/교차축 개념을 정확히 이해하고, 정렬·간격·랩·성장/축소를 자유자재로 다뤄 실무 UI를 빠르게 구성합니다.목차 1. Flex 기본 개념(컨테이너 vs 아이템) 2. 축과 방향: flex-direction 3. 주축 정렬: justify-content 4. 교차축 정렬: align-items / align-content 5. 줄바꿈과 간격: flex-wrap / gap 6. 아이템 크기: flex-basis / grow / shrink (flex) 7. 순서와 개별 정렬: order / align-self 8. 실무 패턴 6가지 9. 흔한 함정 & 디버깅 팁 10. 연습문제1) Flex 기본 개념Flex 컨테이너: display: flex 또는 inline-flex를 적용한 요..

HTML&CSS 2025. 10. 2. 01:27

목표: 웹에서 글꼴을 올바르게 설정하고, 가독성을 확보하며, 로딩 지연을 최소화하는 실무 패턴을 익힙니다.목차 1. 기본 개념과 용어 2. 안전한 시스템 글꼴 스택 3. 글자 크기 단위와 반응형 타입스케일 4. 행간(line-height)·자간(letter-spacing) 5. @font-face와 웹폰트 최적화(font-display, unicode-range) 6. 가변 폰트(Variable Fonts) 기초 7. OpenType 기능: 숫자·합자·커닝 8. 실무 패턴 5가지 9. 연습문제1) 기본 개념과 용어font-family: 사용할 글꼴 패밀리 목록(스택). 앞에서부터 사용 가능한 글꼴을 선택합니다.fallback: 지정 폰트가 없을 때 대체되는 폰트(예: sans-serif).weight &..

HTML&CSS 2025. 9. 30. 01:05

목표: CSS 선택자의 종류와 우선순위(특이성)를 이해하고, 폼·테이블·카드 레이아웃 등 실무에서 바로 쓰는 패턴을 예제로 익힙니다.목차 1. 기본 선택자 2. 결합자(공백, >, +, ~) 3. 속성 선택자 4. 의사 클래스(:hover, :nth-child 등) 5. 의사 요소(::before, ::after 등) 6. 특이성(우선순위) & :is/:where/:not/:has 7. 실무 패턴 5가지 8. 연습문제1) 기본 선택자종류예시설명전체 선택자* { margin:0; }모든 요소에 적용태그(타입)p { ... }특정 태그에 적용클래스.card { ... }재사용 가능한 그룹아이디#main { ... }문서 내 유일(고유) 요소그룹화h1, h2, h3 { ... }여러 선택자에 동일 규칙예제 ..

HTML&CSS 2025. 9. 27. 22:03

1) h1–h6 (제목) 2) p (문단) 3) a (링크) 4) img (이미지) 5) br (줄바꿈) 6) hr (구분선) 7) ul (순서 없는 목록) 8) ol (순서 있는 목록) 9) li (목록 항목) 10) div (블록 컨테이너) 11) span (인라인 컨테이너) 12) strong (강한 강조) 13) em (강조/억양) 14) blockquote (인용) 15) code (인라인 코드) 16) pre (서식 유지 블록) 17) table (표: tr/th/td) 18) figure/figcaption (미디어+캡션) 19) form (입력 폼) 20) input (다양한 입력)1) h1–h6 — 문서 구조를 잡는 제목역할: 문서 골격접근성 ↑문서의 계층 구조를 만듭니다. 한 페이지에 ..

HTML&CSS 2025. 9. 25. 22:38

폼(Form) 태그와 입력 요소웹페이지에서 사용자로부터 정보를 입력받고 서버로 전송할 때 사용하는 것이 입니다. 로그인, 회원가입, 검색창, 설문조사 등이 모두 폼을 이용해서 만들어집니다.(1) 기본 구조 : 폼 전체를 감싸는 태그action : 입력값을 보낼 서버 주소method : 전송 방식 (GET, POST) (2) 주요 입력 태그와 속성 : 한 줄 텍스트 입력 : 비밀번호 입력(●●●) : 여러 옵션 중 하나만 선택 : 여러 개 선택 가능 : 이메일 형식 체크 : 숫자만 입력 : 전송 버튼 : 여러 줄 텍스트 입력 : 드롭다운 목록(3) 예제 코드 이름: 비밀번호: 성별: 남자 여자 취미: 운동 음악 게임 이메일: 나이: 자기소개: 지역: ..

HTML&CSS 2025. 9. 24. 23:48

표() — HTML 테이블표는 “칸에 정보를 가지런히 담는 그리드”예요. 시간표, 성적표, 가격표처럼 행(tr)과 열(td/th)이 만나 정보를 깔끔하게 보여줍니다. 1) 표를 이루는 핵심 태그테이블 구성 요소태그역할(쉽게)꼭 알아둘 점표의 큰 틀(그릇)안에 caption, thead, tbody, tfoot을 넣어 구조를 나눠요.표 제목스크린 리더(접근성)에도 좋아요. 위치는 CSS caption-side로 조절.표의 머리줄(열 제목)보통 여기엔 가 들어가요.표의 본문(실제 데이터)대부분의 행이 여기에 들어가요.표의 바닥(합계, 총합)합계 같은 정리 정보를 넣어요.행(가로줄)칸을 담는 줄이에요.헤더 셀(제목 칸)굵게/가운데 정렬되는 게 기본. scope로 어떤 열/행의 제목인지 알려줘요.데이터 셀(..

HTML&CSS 2025. 9. 24. 00:14

HTML 시멘틱 태그 목차 왜 시멘틱 태그인가 핵심 레이아웃 태그 콘텐츠 구조 태그 미디어와 캡션 텍스트 시멘틱 접근성 & SEO 팁 치트시트 왜 시멘틱 태그인가 의미 전달: 구조의 “의미”가 태그에 녹아 있어 문서 이해가 쉬워집니다. 접근성(ARIA): 스크린리더가 더 정확히 섹션과 내비게이션을 파악합니다. SEO: 검색엔진이 주요 콘텐츠()·내비() 등을 구분합니다. 유지보수: 팀 협업·테마 교체 시에도 구조가 견고합니다. Tip. 시멘틱 태그는 “모양”이 아니라 “의미”입니다. 스타일은 CSS로..

HTML&CSS 2025. 9. 23. 00:45