[Project] Porfolio Page - (2) HTML, CSS

Index

1. HTML: 뼈대 잡기

2. HTML 예제

3. CSS: 꾸미기

4. CSS Layout

5. CSS Flex Box

6. CSS Grid

7. CSS 예제

8. CSS 새기능(2022)

Reference

---

1. HTML: 뼈대 잡기

HTML

- HTML은 웹 페이지 표시를 위해 개발된 마크업 언어

- 마크업 업어: 태그를 이용한 구조적 언어

- HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타냄

- 링크, 인용, 그외의 항목으로 구조적 문서를 만들 수 있는 방법을 제공

- 웹을 이루는 가장 기본적인 구조

- 웹의 구조와 의미를 표현

- W3C에서 표준화

- 브라우저 호환성에 따라 사용 가능한 tag가 다름.

 

(HTML 구성 요소)

- !DOCTYPE: 지원되는 파일 포맷

- head: 타이틀, 검색시 사용되는 내용 등 메타데이터

- body: 사용자에게 보여지는 부분

 

(주요 tag) 

- element는 tag, attribute, content로 구성됨

- box tag: section으로 나누는 tag(header / nav / aside/ main / section / article / footer / div / span / form)

- item tag: 사용자에게 보여지는 tag(h1 / a / button / input / label / img / video / audio / map / canvas / table)

- tag는 block(p, div)과 inline(b, span, label, input)으로 구분

- 주요 태크: header / aside / main / section / article / footer / h1 / button / a / p / span / div / b / ul / ol / li / label(for) / input(type, id)

 

2. HTML 예제

HTML 예제 1

 

 

3.  CSS: 꾸미기

CSS

- CSS(Cascading Style Sheet)는  HTML을 꾸며주는 역할

- 3가지 스타일링: Author Style / User Style / Browser 순서로 우선적으로 적용(!imporant 사용시 무시됨)

 

selector {
 property: value;
}

 

(selector)

- html의 태그를 선택하는 문법

- *(모든 태그), tag(태그 선택), #id(id 선택), .class(클래스 선택), selector:hover(상태입력), [attr^="value"](attribute 지정)

- 태그에 가까울수록 우선 순위가 높아짐

+) 연습 사이트: CSS Diner

 

(attribute)

- color(글자색) / width / height / background(배경색)

- padding(content 내) / margin(content 밖) / border-width / border-style / border-color

 

 

 

 

 

 

4. CSS Layout

CSS Layout

- display: inline(컨텐츠 크기에 맞게 변경) / block(1줄에 하나) / inline-block(한줄에 여러개) 으로 설정

- position: static이 기본값, relative(본래 위치 기준), absolute(가까운 상위 박스 기준), fixed(윈도우 페이지 기준), sticky(스크롤시 원래 위치 고정)

- left, top, right, bottom으로 position 조정 가능 

+) 속성 사용 가능 여부 확인: can i use

 

 

5. CSS Flex Box

CSS Flex Box

- 1차원(row, column)으로 처리

- position, float, table로 Layout 처리가 어려웠지만 Flex Box로 편리해짐

- float은 left, center, right으로 이미지와 텍스트의 위치를 지정하는데 사용

- container와 item으로 나누어 속성이 구분됨

- container: display / flex-direction / flex-wrap / flex-flow / justify-content / align-items/ align-content

- item: order / flex-grow / flex-shrink / flex / align-self

- 기본값으로 main-axis(수평)와 cross-axis(수직)로 나누어짐

- %는 부모 container기준으로 처리, vh 사용시 보이는 페이지 기준으로 처리

 

(container 속성)

- display: flex로 container를 flex box로 지정

- felx-direction: row / row-reverse / column / column-reverse

- flex-wrap: nowrap / wrap(크기가 줄어들면 다음 줄로 넘어감) / wrap-reverse / 

- justify-content(중심축): flex-start / flex-end / center / space-around / space-evenly / space- between

- align-items(중심축 item): baseline(텍스트 기준 정렬)/ 

- align-content(반대축 item): space-between / center 

+) 색의 적용 상태 확인: color tool

+) 참고 사이트: Flexbox

 

(item 속성)

- order(순서지정): 0

- flex-grow(container에 커지는 경우 다른 item과 비교한 비율): 0 

- flex-shrink(continer가 작아지는 경우 다른 item과 비교한 비율): 0

- flex-basis(비율로 지정): auto / 60% 표기

- align-self(item별로 위치 지정): center 

+) 게임 사이트: flexbox froggy

 

6. CSS Grid

CSS Grid

- 2차원으로 처리(row, column)

- 

 

7. CSS 예제

CSS 예제1(기본)

 

CSS 예제2(layout)

 

CSS 예제3(flex box)

 

CSS 예제4(grid)

 

8. CSS 새기능 (2022)

CSS 새기능

 

 

---

Reference

[Video: 드림코딩(HTML 기초)] https://www.youtube.com/watch?v=i0FN-OwJ7QI

[Video: 드림코딩(HTML 태그) https://www.youtube.com/watch?v=OoA70D2TE0A

[Video: 드림코딩(CSS 셀렉터)] https://www.youtube.com/watch?v=gGebK7lWnCk

[Video: 드림코딩(CSS 레이아웃)] https://www.youtube.com/watch?v=jWh3IbgMUPI

[Video: 드림코딩(CSS Flexbox)] https://www.youtube.com/watch?v=7neASrWEFEM

[Video: 드림코딩(CSS Grid) https://www.youtube.com/watch?v=nxi1EXmPHRs&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=34

[Video: 드림코딩(새롭게 출시되는 CSS 새기능)] https://www.youtube.com/watch?v=jr9imvgVRJM&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=33

[Docs: W3C] https://www.w3.org/

[Site: W3C(Markup Validation Service)] https://validator.w3.org/

[Docs: MDN(Documentation)] https://developer.mozilla.org/en-US/docs/Web