반응형
HTML/CSS / 회원가입제작
HTML 명령어 (태그)
HTML은 웹 문서의 구조를 정의하는 태그들로 구성됩니다.
1. 문서 구조
- <!DOCTYPE html>: HTML 문서의 타입을 선언합니다.
- <html>: HTML 문서의 루트 요소.
- <head>: 문서의 메타데이터(예: 제목, 스타일, 스크립트)를 포함하는 부분.
- <title>: 브라우저 탭에 표시될 문서 제목.
- <body>: 문서의 내용이 위치하는 곳.
2. 텍스트 요소
- <h1> ~ <h6>: 제목 태그, 숫자가 작을수록 큰 제목.
- <p>: 단락(문단)을 나타냄.
- <a href="URL">: 하이퍼링크를 생성. href 속성에 URL 지정.
- <strong>: 굵은 텍스트(중요한 내용).
- <em>: 기울임 텍스트(강조).
- <br>: 줄바꿈.
3. 리스트
- <ul>: 순서 없는 리스트(점).
- <ol>: 순서 있는 리스트(숫자).
- <li>: 리스트 항목.
4. 폼 요소
- <form>: 사용자가 데이터를 입력하고 서버에 제출하는 폼.
- <input type="text">: 텍스트 입력 필드.
- <input type="password">: 비밀번호 입력 필드.
- <input type="radio">: 라디오 버튼.
- <input type="checkbox">: 체크박스.
- <input type="submit">: 제출 버튼.
- <textarea>: 여러 줄의 텍스트 입력 필드.
- <select>: 드롭다운 메뉴.
- <option>: 드롭다운 메뉴에서 선택 가능한 항목.
5. 이미지와 미디어
- <img src="URL" alt="텍스트">: 이미지를 삽입. src는 이미지 URL, alt는 대체 텍스트.
- <audio controls>: 오디오 삽입.
- <video controls>: 비디오 삽입.
6. 테이블
- <table>: 테이블 생성.
- <tr>: 테이블 행.
- <th>: 테이블 헤더 셀.
- <td>: 테이블 데이터 셀.
7. 섹션 및 레이아웃
- <div>: 블록 레벨 요소, 레이아웃을 구분할 때 사용.
- <span>: 인라인 요소, 텍스트 일부를 구분할 때 사용.
- <header>: 페이지나 섹션의 머리글.
- <footer>: 페이지나 섹션의 바닥글.
- <nav>: 내비게이션 링크.
- <section>: 문서 내의 섹션 구분.
- <article>: 독립적인 문서 콘텐츠.
- <aside>: 본문과 관련된 보조 콘텐츠.
CSS 명령어
CSS는 HTML 요소의 스타일을 정의하는 언어입니다.
1. 기본 선택자
- *: 모든 요소 선택.
- element: 특정 HTML 요소 선택(예: p, h1).
- .class: 특정 클래스 선택.
- #id: 특정 ID 선택.
2. 텍스트 스타일
- color: 텍스트 색상.
- font-size: 글자 크기.
- font-family: 글꼴 종류.
- font-weight: 글자 굵기.
- text-align: 텍스트 정렬(예: center, left, right).
- text-decoration: 텍스트 장식(예: underline, none).
- line-height: 줄 간격.
3. 배경과 색상
- background-color: 배경 색상.
- background-image: 배경 이미지 삽입.
- background-size: 배경 이미지 크기 조정(예: cover, contain).
- border: 테두리 스타일 정의(예: 1px solid black).
- opacity: 요소의 투명도.
4. 레이아웃
- width: 요소의 너비.
- height: 요소의 높이.
- margin: 외부 여백.
- padding: 내부 여백.
- display: 요소의 표시 방법(예: block, inline, flex, none).
- flex: Flexbox 레이아웃을 사용할 때 정의.
- position: 요소의 위치 지정(예: static, relative, absolute, fixed).
- top, left, right, bottom: 위치 지정할 때 사용.
- z-index: 요소의 쌓임 순서.
5. 테두리와 그림자
- border: 테두리 정의(예: 1px solid #000).
- border-radius: 테두리 둥글기.
- box-shadow: 박스 그림자(예: 2px 2px 5px gray).
6. 배치와 정렬
- float: 요소를 왼쪽 또는 오른쪽으로 띄움.
- clear: float 속성 해제.
- flexbox 속성들:
- justify-content: 주축 정렬(예: center, space-between).
- align-items: 교차축 정렬(예: center, flex-start).
- flex-direction: 축의 방향 설정(예: row, column).
7. 애니메이션
- transition: 상태 변화 시 애니메이션 적용(예: all 0.3s ease).
- transform: 요소 변형(예: rotate, scale, translate).
- animation: CSS 애니메이션 정의.
회원가입 양식 제작하기
회원가입.png
0.05MB
The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
반응형
'문제' 카테고리의 다른 글
| [ 문제 ] React , Redux (6) | 2024.10.03 |
|---|---|
| [ 문제 ] javascript (2) | 2024.09.06 |