- HTML요소를 익힌다
- CSS 익히기
- 간추려 개인 블로그에 글을 올린다
1. 필수 강의 정리
비전공자를 위한 HTML/CSS
부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다.
m.boostcourse.org
스스로 기억하고 싶은 것만 기록
HTML
Hyper Text Markup Language
기본구조
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>Hello, HTML</h1> </body> </html>
- 글로벌 속성 : 모든 태그에 사용가능한 속성(id, class)
- <a> 앵커태그의 내부링크
- <a>를 통해 페이지 내부의 특정 요소로 초점을 이동 가능
- 내부 링크를 사용할 때는 href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자하는 요소의 id 속성값 작성
- 컨테이너 태그
<div> : block-level tag. 레이아웃(전체적인 틀)을 만들때.
<span> : inline-level tag. 라인 내의 요소를 묶을 때.
- 리스트 태그
<dl> : description list, 용어를 설명하는 리스트
<dt> : definition term, 용어 구분
<dd> : definition description, 용어 정의
콘텐츠 모델
HTML 요소들의 성격 종류를 정의하는 규칙들을 그룹화시켜 놓은 것
1. Metadata Model
콘텐츠의 Style 및 Script 설정, 다른 문서와의 관계 등 정보를 포함하는 요소
:base, link, meta, noscript, script, style, title
대부분 <head> 태그에 사용
2. Flow Model
문서에 사용되는 대부분의 요소
: a, abbr, address,map>area, article, aside,audio, b, bdo, blockquote,br, button, canvas, cite, code, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1 ~ h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong, style[scoped], sub, sup, svg, table, textarea, time, ul, var, video, wbr
일부 메타데이터 태그들을 제외한 모든 태그들이 포함됨
3. Sectioning Model
Heading, Footing과 같은 문서 구조, 아웃라인 관련 요소
: article, aside, nav, section
4. Heading Model
섹션의 헤더를 정의하는 요소
: h1, h2, h3, h4, h5, h6
5. Phrasing Model
문서의 텍스트를 꾸며주는 문단 내부 레벨 요소
: a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr
6. Embedded Model
이미지, 비디오 등 외부 콘텐츠를 표현하는 요소
: audio, canvas, embed, iframe, img, math, object, svg, video
Phrasing Model 안에 포함되어 있음
7. Interactive Model
사용자와 상호작용하는 요소
: a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu, object[usemap], select, textarea, video[controls]
시멘틱 마크업
의미론적 HTML
의미 전달이 잘 되는 코드는 웹 접근성을 높힌다.
같은 모습으로 보여도 태그에 따라 의미가 달라진다.
<b>굵은</b> vs <strong>중요한</strong> <i>기울어진</i> vs <em>강조하는</em> <u>밑줄친</u> vs <ins>새롭게 추가된</ins> <s>중간선이 있는</s> vs <del>삭제된</del>
- HTML5에서 새로 생긴 시멘틱 요소들
<article> : 사이트 내 독립적 구분 게시판, 블로그 본문, 매거진, 뉴스 기사 등
<section> : 사이트 내 독립적 구분, 더 적합한 의미를 가진 요소가 없을 때 사용, 보통은 헤딩 태그를 포함함
<aside> : 문서 주요 내용과 간접적으로 연관된 부분 표현(사이드바, 콜아웃 박스 등)
<main> : Body 태그의 주요 콘텐츠가 담김
<header> : 제목, 로고, 검색, 작성자 이름 등을 표현
<nav> : 현재 페이지 내, 다른 페이지 이동 링크 표현 메뉴, 목차, 색인 등
<footer> : 작성자, 저작권 정보, 관련 문서 내용 등을 표현
<figure> : 독립적인 콘텐츠 표현 Ex) 이미지, 삽화, 도표, 코드 등
<figcaption> : Figure 콘텐츠에 대한 설명을 나타냄
<mark> : 중요 표시, 하이라이트 부분 처리
<time> : 시간의 특정 지점 또는 구간 표현
CSS
선택자
자손선택자
자식선택자>
인접형제 선택자+
- content : 가상 요소에 내용을 넣기 위해 사용되는 속성명
구체성
선택자에 우선으로 적용되어야 하는지에 대해 정해진 규칙
구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로, 구체성의 값이 클수록 우선으로 적용
0, 0, 0, 0 : 4개의 숫자 값으로 이루어진 구체성
비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성
0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
0, 0, 0, 0 : 전체 선택자
조합자(>, + 등)는 구체성에 영향을 주지 않는다.
h1 { ... } /* 0,0,0,1 */ body h1 { ... } /* 0,0,0,2 */ .grape { ... } /* 0,0,1,0 */ *.bright { ... } /* 0,0,1,0 */ p.bright em.dark { ... } /* 0,0,2,2 */ #page { ... } /* 0,1,0,0 */ div#page { ... } /* 0,1,0,1 */
'SOJU 2기' 카테고리의 다른 글
| [SOJU] JavaScript (2) (0) | 2023.05.10 |
|---|---|
| [SOJU] JavaScript (1) (0) | 2023.04.25 |
| [SOJU] GIT (0) | 2023.03.23 |
| [SOJU] 웹개발 개념들 (0) | 2023.03.23 |