공부기록용

🔴flex-direction 🔴flex-wrap 🔴flex-flow flex-direction flex container의 주축을 결정하는 속성으로 행은 가로 축을, 열은 세로 축을 주축으로 한다. flex-wrap flex item들이 강제로 한 줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현할 것인지 결정하는 속성이다. ⭐내용실습⭐ 강아지 고양이 비둘기 고라니 호랑이 /*style.css*/ *{ box-sizing: border-box; } body{ margin: 0; } ul{ padding: 0; list-style-type: none; display: flex; height: 200px; } 플렉스 컨테이너는 자식 요소인 플렉스 아이템을 일렬로 배치..

Layout 구성 요소를 공간에 효과적으로 배열하는 일, 또는 그 기술을 의미한다. CSS layout은 웹 요소를 올바른 위치에 배치하는 기술이다. CSS layout 기술은 형제 요소들을 가지런히 정렬할 수 있게 해주며, 요소가 컨테이너 내부에서 어떤 위치에 놓이게 될지 결정할 수 있다. 일반적인 문서 흐름 display 속성 flexbox grid layout float 속성 position 속성 등등 https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Introduction flexbox flexbox는 행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원 layout방식을 만한다. flexbox방식에서 요소의 배치와 정렬은 fl..

🔴의사클래스(가상클래스) 🔻hover : 마우스 포인터가 요소에 올라가 있음 🔻active : 사용자가 요소를 활성화했다(마우스로 누르기 같은) 🔻focus : 요소가 포커스를 받고 있음 🔻disabled : 비활성 상태의 요소 🔻nth-child() : 형제 사이에서의 순서에 따라 요소를 선택 🔴의사요소 🔻after : 자식 요소의 맨앞에 의사 요소를 생성 및 추가 🔻before : 자식 요소의 맨뒤에 의사 요소를 생성 및 추가 🔻first-line : 블록 레벨 요소의 첫 번째 선에 스타일을 적용 🔻first-letter : 블록 레벨 요소의 첫 번째 글자에 스타일을 적용 🔻marker : 목록 기호의 스타일을 적용 🔻placeholder : 입력 요소의 placeholder(자리표시자) 스타일을 적..

🔴박스모델 🔻요소의 여백 지정하기(padding & margin) 🔻박스크기(box-sizing) 🔻박스의 배경(background) 박스모델(Box-Model) 브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다. 이 영역을 '박스'라고 표현하며, CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등등)을 결정할 수 있다. 하나의 박스는 네 개의 영역으로 구성된다 콘텐츠 영역 : width, height 안쪽 여백 : padding 경계선(테두리) : border-width 바깥쪽 여백 : margin +블록요소는 4개의 영역을 모두 가질수 있지만, 인라인 요소는 콘텐츠 영역은 지정할 수 없다. 이를 해결하기 위해서는 display속성의 inline..

🔴position 🔻static: position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용되며 HTML 문서 상에서 원래 있어야하는 위치에 배치된다. 🔻relative(부모요소): 요소를 원래 위치에서 벗어나게 배치할 수 있다. 🔻absolute(자식요소): position속성이static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준이 된다. 🔻fixed 🔻sticky position position은 문서 상에 요소를 배치하는 방법을 정의한다. position이 요소의 배치 방법을 결정하면, top/bottom/right/left를 필요에 따라 사용하므로써 최종 위치를 결정하는 방식이다. (~부터 얼만큼) ※오프셋(보충)이란, 위치를 얼마간 이동시키는 것을 의미 static ..

🔴텍스트 관련 속성 🔴블록&인라인 관련 속성 🔻display 🔻border 🔻float & clear 텍스트 관련 속성 font-family *{ Font-family: Times, monospace, serif } 요소를 구성하는 텍스트의 글꼴을 정의한다. 글꼴명을 속성값으로 지정한다. 여러 개의 글꼴을 연달아 기입하여 우선 순위를 지정할 수 있다. ---> Times를 우선 지정하되, 지원되지 않을 경우 monospace를 지정한다. font-size 수치와 단위를 지정해 글자의 크기를 정의할 수 있다. px : 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기(절대적인 크기이기 때문에 숫자를 딱 지정해서 값을 정해놓으면 어떤 크기로 고정된다) rem : html태그의 font-size에 대응하는..