이것저것 관심있는 모든것

목표: 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를 적용한 요..

목표: 웹에서 글꼴을 올바르게 설정하고, 가독성을 확보하며, 로딩 지연을 최소화하는 실무 패턴을 익힙니다.목차 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 &..

목표: 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 { ... }여러 선택자에 동일 규칙예제 ..

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 — 문서 구조를 잡는 제목역할: 문서 골격접근성 ↑문서의 계층 구조를 만듭니다. 한 페이지에 ..

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

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

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

화면에 보이는 내용 HTML5 문서임을 알리는 표지판입니다.문서의 언어를 한국어로 명시합니다. 스크린리더 등 접근성에 중요합니다.화면에 직접 보이지 않는 “설정/설명” 공간입니다. 문자 인코딩, 제목, 메타 정보를 둡니다.사용자가 보는 본문 영역입니다.TIP: 모바일 대응을 위해 는 반드시 포함하세요.2) 제목 h1~h6표시형태: 블록 용도: 문서 제목/구조가장 중요한 제목큰 섹션 제목하위 섹션 제목가장 중요한 제목큰 섹션 제목하위 섹션 제목자주 쓰는 속성설명id해시 링크(내부 이동)를 위한 고유 식별자class여러 요소를 묶어 스타일/스크립트 적용권장: 문서당 h1은 1개만 두고, 제목 계층을 순서대로 내려가며 사용하세요(h2→h3...).지양: 글자를 키우려고 제목 태그를 남용하지 않기(스타일은 C..