CSS

Casacading Style Sheets : 웹페이지에서 HTML콘텐츠의 스타일을 지정하는데 사용하는 언어 색상, 글꼴 유형, 글꼴 크기, 그림자, 이미지, 위치 등.. 인라인 스타일 (style속성은 세미콜론(;)으로 끝맺음!!) -> I'm learning to code! 태그 문법!! : p { col...

글꼴 타입:(font-family) h1 { font-family: Georgia; } - 서체 이름이 긴 경우 "Courier New" 처럼 큰따옴표(" ")쓰기 글꼴 크기:(font-size) p { font-size: 18px; } 글꼴 두께:(font

box

박스 높이와 너비는 고정된 상태로 유지 테두리 두께와 패딩은 박스 내부에 포함되므로 박스 전체 크기 변경x 기본 박스의 치수는 테두리 두께와 패딩의 영향 받음, { box-sizing: border-box; } --> box-sizing 속성은 박스 모델 제어, 기본값은 contetn-box, 새 박스 모델값은 b...

position / display / z-index / float / clear Position

지정된 색상/ RGB-빨강, 녹색 및 파랑의 혼합/ HSL-색조, 채도 및 밝기의 혼합 color : 엘리먼트의 전경색 스타일 지정 // background-color : 엘리먼트의 배경색 16진수로 지정된 색상->16진 색상 (#)로 시작하여 3자 또는 6자 빨

~페이지에 텍스트를 정렬하는 기술~

~엘리먼트의 배치 방법을 단순화하는 도구~ flex container 와 flex item 있다. 컨테이너가 flex 영향을 받는 전체공간, 설정된 속성에 따라 각각 의 아이템들이 어떤 형태로 배치되는 것!

Grid -> 두 방향(가로-세로) 레이아웃 시스템(2차원)

grid-template-areas* 각 영역(Grid Area)에 이름을 붙이고, 그 이름을 이용해 배치하는 방법 각자 차지하는 셀의 개수만큼 해당 위치에 이름 써주기! 각 셀마다 공백 하나씩 넣어서 구분하기.. 빈칸은 마침표 또는 "none" ex) grid-template-areas: "header header...

속성을 서서히 변화시키는 속성transition-property(CSS 속성), transition-duration(지속되는 기간),transition-timing-function(시작되기까지 남은 시간), transition-delay(가속화되는 방법)