2주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트2

Hyeon_E 2023. 1. 1. 02:29

박스모델: HTML 요소의 기본적인 모양을 만들어내는 기본적인 속성

글꼴, 문자: 글꼴은 폰트라고 말하는 서체를 의미 또한 모든 문자를 제어

배경: 요소의 배경으로 색상을 집어넣거나 혹은 이미지 삽입

배치: 어떤 특정한 요소를 원하는 위치에다가 가져다 놓음

플렉스(정렬): 일반적으로 HTML에 요소는 수직(위에서 아래로)으로 쌓이는 개념을 가지고 있는데 여러요소를 수평으로 순서대로 수평정렬을 하는 것. 옛날에는 띄움을 이용했지만 현재는 플렉스를 이용

전환: 요소의 전상태와 후상태 중간과정을 자연스럽게 애니메이션 처리 해주는 것(전환효과). 즉 전환은 요소의 전후상태를 애니메이션 처리하는 개념

변환: 요소를 회전하거나 이동시키거나 크기를 조절해주는 요소의 변화를 주는 CSS 특성. 2D변환과 3D변환이 있음. 위에 이미지 예시처럼 요소의 약간의 원근법을 주면서 회전을 시키는 것은 기본적인 3D변환을 사용한 것

띄움: 요소를 공중으로 띄우는 것. 띄어진 요소 주변으로 문자가 흐를 수 있는 구조(Ex.신문기사)

애니메이션: 훨씬 더 복잡한 구조의 애니메이션들을 만들어 낼 수 있음

그리드: 행과 열의 구조를 가지고 있는 2차원의 레이아웃을 만들기 위해 제공되는 기술

다단: 글자들이 많은 컨텐츠에서 많이 보임. 하나의 페이지에서 단을 여러개로 나누는 것(다단). CSS 텍스트를 여러가지 단으로 구별해지는 기능 제공

필터: 여러가지 필터 제공

width, height

요소의 가로/세로 너비

<span></span>:대표적인 인라인요소(본질적으로 가로&세로 사이즈를 화면에 구현X. 레이아웃을 제어X. 글자제어O). 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도. 가로&세로 모두 포함한 콘텐츠 크기만큼 자동으로 줄어듬

<div></div>: 대표적인 블록요소. 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도. 가로는 부모 요소의 크기만큼 자동으로 늘어남 하지만 세로는 포함한 콘텐츠 크기만큼 자동으로 줄어듬

max-width, max-height

요소가 커질 수 있는 최대 가로/세로 너비

max-width, max-height

요소가 작아질 수 있는 최소 가로/세로 너비

margin

요소의 외부여백(공간)을 지정하는 단축속성(음수를 사용할 수 있음)

전체 여백뿐만 아니라 상하좌우 각각 지정 가능(상하좌우, 상하 좌우, 상 좌우 하, 상 우 하 좌)

margin-방향

요소의 외부여백(공간)을 지정하는 기타 개별 속성들

padding

요소의 내부여백(공간)을 지정하는 단축속성(요소의 크기가 커짐)

전체 여백뿐만 아니라 상하좌우 각각 지정 가능(상하좌우, 상하 좌우, 상 좌우 하, 상 우 하 좌)

padding-방향

요소의 내부여백(공간)을 지정하는 기타 개별 속성들

표현단위