HTML, CSS 속성 정리

HTML 속성

HTML 속성은 HTML 요소에 추가 정보를 제공하며, 요소의 시작 태그 내에 정의됩니다.

글로벌 속성 (모든 HTML 요소에서 사용 가능)

속성	설명	예시
id	요소의 고유 식별자	<div id="header">
class	요소의 클래스명 (CSS, JS에서 사용)	<p class="intro">
style	인라인 CSS 스타일	<h1 style="color:blue;">
title	요소에 대한 추가 정보 (툴팁)	<span title="도움말">
hidden	요소를 화면에 표시하지 않음	<div hidden>
data-*	사용자 지정 데이터 속성	<div data-user="김철수">
lang	요소의 언어 지정	<p lang="ko">
dir	텍스트 방향 설정	<p dir="rtl">
tabindex	탭 키로 초점 이동 순서	<button tabindex="1">
contenteditable	요소를 편집 가능하게 함	<div contenteditable="true">

주요 HTML 요소별 속성

링크 (<a>)

<a href="https://example.com" target="_blank" rel="noopener">링크</a>

• href: 링크 대상 URL
• target: 링크를 여는 방식 (_blank, _self, _parent, _top)
• rel: 현재 문서와 링크된 문서의 관계
• download: 링크를 다운로드로 처리

이미지 (<img>)

<img src="image.jpg" alt="설명" width="300" height="200" loading="lazy">

• src: 이미지 파일 경로
• alt: 대체 텍스트
• width, height: 이미지 크기
• loading: 이미지 로딩 방식 (lazy, eager)

폼 요소

<input type="text" name="username" placeholder="사용자 이름" required>
<textarea rows="4" cols="50" maxlength="200"></textarea>
<select multiple>
  <option value="1" selected>옵션 1</option>
</select>

• type: 입력 필드 유형 (text, password, email, number 등)
• name: 폼 데이터의 이름
• placeholder: 입력 필드의 힌트
• required: 필수 입력 필드
• disabled: 비활성화
• readonly: 읽기 전용
• min, max: 숫자 제한
• maxlength: 최대 문자 수
• multiple: 다중 선택 가능
• selected: 기본 선택된 옵션

CSS 속성

레이아웃 및 박스 모델

크기 속성

.box {
  width: 200px;
  height: 100px;
  min-width: 100px;
  max-width: 300px;
  box-sizing: border-box;
}

여백과 패딩

.container {
  margin: 10px 20px 30px 40px; /* 상 우 하 좌 */
  padding: 10px; /* 모든 방향 */
  padding-top: 20px; /* 특정 방향 */
}

테두리

.element {
  border: 1px solid black;
  border-radius: 5px;
  border-width: 2px;
  border-style: dashed;
  border-color: red;
}

위치 지정

.positioned {
  position: relative; /* static, absolute, fixed, sticky */
  top: 10px;
  left: 20px;
  z-index: 100;
}

디스플레이

.element {
  display: flex; /* block, inline, none, grid, inline-block */
  visibility: visible; /* hidden */
  overflow: auto; /* visible, hidden, scroll */
}

텍스트 및 폰트

.text {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: bold; /* normal, 100~900 */
  font-style: italic;
  color: #333;
  text-align: center; /* left, right, justify */
  text-decoration: underline; /* none, line-through, overline */
  text-transform: uppercase; /* lowercase, capitalize */
  line-height: 1.5;
  letter-spacing: 1px;
  word-spacing: 2px;
  white-space: nowrap; /* normal, pre, pre-wrap */
  text-shadow: 1px 1px 2px gray;
}

배경

.background {
  background-color: #f5f5f5;
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; /* contain, auto, 100% 100% */
  background-attachment: fixed; /* scroll, local */
  /* 단축 속성 */
  background: #f5f5f5 url('image.jpg') no-repeat center/cover;
}

트랜지션 및 애니메이션

.transition {
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  transition-delay: 0.1s;
  /* 단축 속성 */
  transition: all 0.3s ease-in-out 0.1s;
}

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

.animation {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  /* 단축 속성 */
  animation: slide 2s ease 0s infinite alternate forwards;
}

Flexbox

.flex-container {
  display: flex;
  flex-direction: row; /* column, row-reverse, column-reverse */
  flex-wrap: wrap; /* nowrap, wrap-reverse */
  justify-content: space-between; /* flex-start, flex-end, center, space-around */
  align-items: center; /* flex-start, flex-end, stretch, baseline */
  align-content: space-between; /* flex-start, flex-end, center, space-around, stretch */
  gap: 10px;
}

.flex-item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto; /* 기본 크기 */
  align-self: flex-start; /* flex-end, center, stretch */
  /* 단축 속성 */
  flex: 1 0 auto; /* grow shrink basis */
  order: 2; /* 요소의 순서 */
}

Grid

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px auto;
  grid-template-areas: 
    "header header header"
    "sidebar content content";
  grid-column-gap: 10px;
  grid-row-gap: 15px;
  /* 단축 속성 */
  grid-gap: 15px 10px; /* row column */
  justify-items: center; /* start, end, stretch */
  align-items: center;
  justify-content: space-between;
  align-content: space-around;
}

.grid-item {
  grid-column: 1 / 3; /* start / end */
  grid-row: 1 / 2;
  grid-area: header; /* 템플릿 영역 이름 */
  justify-self: center;
  align-self: center;
}

미디어 쿼리

@media screen and (max-width: 768px) {
  .responsive {
    flex-direction: column;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: white;
  }
}