HTML, CSS 정리
-기본적인 문서 구조
-태그
<h1>~<h6>
제목태그
<p>
<pre>
텍스트 서식을 그대로 표현(고정폭)
-빈 태그
<br>
줄 바꿈 태그
<hr>
수평선 태그
-서식 태그
<b>, <strong>, <em>, <i>, <mark>, <del>, <ins>, <sub>, <sup>
-인용구
<q>, <blockquote>
-엔티티
-인라인스타일
1point: 1.3px, 1em: 부모요소 폰트사이즈 기준(1배)으로 하는 상대적 단위
색상 표현법: 색상이름, 16진수코드, RGB값
배경 이미지 스타일 사용시 같은 경로에 사진 파일을 위치시켜야합니다.
-링크
a= 앵커 태그, href= 링크 주소, target= 링크를 열 위치 target 속성값: _blank(새 창에서 열기), _self(현재 창에서 열기), _top(최상위 창에서 열기), _parent(부모 창에서 열기)
href에 들어가있는 ID로 이동
-이미지
width 맞춰주면 height도 자동을 조절
크기에 % 사용: 창 크기에 비례하여 조절
-리스트
ul
ol
dl
-테이블
tr: 테이블행
th: 테이블 헤더
td: 테이블 데이터
colspan: 열 병합
rowspan: 행 병합
-iframe
ifram내부에 있는 문서표시
name: iframe에 대한 이름을 지정
-form
type 속성값:
type="submit"은 폼을 제출하는 버튼
type="text"은 텍스트 입력 필드
type="password"은 비밀번호 입력 필드
type="button"은 단순한 버튼
type="radio"은 라디오 버튼
type="checkbox"은 체크박스(복수선택가능)
type="file"은 파일 선택 필드
type="hidden"은 숨겨진 필드(사용자에게 보이지 않지만 데이터는 전송)중요
input: 사용자로부터 텍스트를 입력받는 필드
value: 기본값
readonly: 사용자가 값을 변경할 수 없도록 함
select box: 드롭다운 목록
multiple: 여러 개 선택가능
size: 표시할 항목 수
required: 선택 필수
selected: 기본적으로 선택된 상태
textarea: 여러 줄의 텍스트 입력 필드
rows: 텍스트 영역의 행 수
cols: 텍스트 영역의 열 수
fieldset: form 태그 안 쪽에서 사용해야하는 태그
구성: <fieldset><legend>필드셋의 제목</legend></fieldset>
위 내용 코드 출처
느낀점
오늘은 지난주에 했던 HTML과 CSS를 정리하는 시간을 가졌다. 강사님이 생각하시는 중요한 부분들만 정리를 했기 때문에 추가적인 정리가 필요한 것 같다. 정리한 것을 토대로 내가 새로운 것을 만들어가며 복습을 해야할 것 같다.
——————————————————————————
본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.
'학습일지' 카테고리의 다른 글
| [스나이퍼팩토리] 한컴AI아카데미(26.04.08) (0) | 2026.04.08 |
|---|---|
| [스나이퍼팩토리] 한컴AI아카데미(26.04.07) (0) | 2026.04.07 |
| [스나이퍼팩토리] 한컴AI아카데미(26.04.01) (0) | 2026.04.04 |
| [스나이퍼팩토리] 한컴AI아카데미(26.03.30) (0) | 2026.04.04 |
| [스나이퍼팩토리] 한컴AI아카데미(26.03.31) (0) | 2026.03.31 |