공부기록용

🔴박스모델 🔻요소의 여백 지정하기(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에 대응하는..