공부기록용

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

선택자 어떤 요소에 스타일을 적용 할 것인지에 대한 정보 선택자 { 속성명: 속성값; } 종류 기본 선택자/그룹 선택자/특성 선택자/결합 선택자/의사클래스/의사요소 기본 선택자 전체 선택자(*) * { color: blue; } 모든 요소를 선택한다. *(애스터리스크)는 '문서 내의 모든 요소'를 의미하는 기호이다. ---> '문서 내 모든 요소의 글자 색을 파란 색으로 지정한다'는 의미 태그 선택자(유형 선택자) P { color: blue; } 주어진 이름을 가진 요소를 선택한다. 주어진 이름을 가진 요소가 다수일 경우, 해당하는 요소들을 모두 선택한다. ---> '문서 내 모든 p태그 요소의 글자 색을 파란 색으로 지정한다'는 의미 클래스 선택자( . = 나는 class를 고르겠다) .text { ..

CSS(Cascading Style Sheets) 계단식으로 스타일을 정의하는 문서 CSS는 웹문서를 꾸며주기 위해 사용하는 언어이다. CSS코드(문서)는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTML 문서의 스타일을 정의하는것이므로 HTML 문서가 없다면 의미가 없다. (HTML문서와 함께 사용되지 않는 CSS문서는 단순한 텍스트에 불과하며, 웹브라우저를 통해 결과물을 확인하기 위해서는 반드시 HTML 문서 작성이 선행되어야 한다.) CSS코드는 CSS파일에 작성한다 -> .css CSS기본문법 선택자{ ㅣ 속성명: 속성값; } 선택자 : 어떤 요소에 스타일을 적용 할지에 대한 정보 { } / 중괄호 : 선택한 요소에 적용할 스타일을 정의하는 영역 속성명 : 어떤 스타일을 정의하고 싶은지에..