choco's story

박스 모델 (Box-Model) 이란?브라우저가 요소를 렌더링할 때, 각각의 요소는 보통 사각형 형태로 영역을 차지합니다. 이 영역을 "박스"라고 합니다.CSS는 이러한 박스들의 크기, 위치, 속성(색, 배경, 테두리 등)을 결정합니다.아래는 박스가 가지는 영역 4가지와, 해당 영역의 크기를 정의하는 속성입니다.콘텐츠 영역 : width, height안쪽 여백 : padding경계선 (테두리) : border-width바깥쪽 여백 : margin이미지로 정리하면 다음과 같습니다.box-model 요소 확인 예시 요소의 콘텐츠 - box 하나씩 살펴보도록 하겠습니다.우선 border입니다. 저번 글에서 배웠던 것인데, 5px 두께의 실선 테두리를 추가하였습니다.이 border를 기준으로 안쪽..

블록 레벨 요소 vs 인라인 요소블록 레벨 요소 : 자신이 속한 영역의 너비를 모두 차지하여 블록 형성ex) div, p, h1 등...인라인 요소 : 자신에게 필요한 만큼의 공간만 차지ex) span, a 등...블록 레벨 요소 vs 인라인 요소 비교 예시 블록 레벨 요소 영역 인라인 요소 영역 블록 레벨 요소인 h1은 텍스트가 끝나도 해당 영역 전체를 차지합니다.인라인 요소인 span은 h2 중 일부를 나타내고, 직접 확인해보면 해당 span이 차지하는 "인라인" 텍스트 영역만 차지합니다.display 속성display 속성이란?: 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의하는 속성✔️ 블록 레벨 요소인 div를 인라인으로 처리할 때 (블록 -> 인라인)div{ di..

텍스트 속성 정리font-familyfont-family란?: 요소를 구성하는 텍스트의 글꼴을 정의하는 속성 (글꼴명 = 속성값)font-family는 여러 글꼴을 정의할 수 있는데, 이는 글꼴 사이의 우선순위를 지정하여 정의하는 것입니다.ex)*{ font-family: Times, monospace, serif;} => Times 글꼴이 1순위, 만약 이 글꼴이 없다면 후순위로 monospace 글꼴 사용font-family 사용 예시 h1 제목 테스트 기본 p 태그 영역 테스트 monospace 글꼴인 경우serif 글꼴인 경우font-sizecss에서는 수치와 단위를 지정해 텍스트 크기를 정의할 수 있습니다.&nbsp&nbsp=> font-size아래 표는 css의 font..

선택자 기본 개념선택자란?: 어떤 요소에 스타일을 적용할 것인지에 대한 정보를 나타내는 요소선택자{ 속성명: 속성값;}선택자에는 아래와 같은 종류들이 있습니다.기본 선택자그룹 선택자특성 선택자결합 선택자의사 클래스의사 요소이번 글에서는 위 종류들 중에서 가장 기초라고 할 수 있는 기본 선택자와 그룹 선택자부터 공부해보려고 합니다!기본 선택자전체 선택자전체 선택자란, 문서 내 모든 요소를 선택할 때 사용하는 선택자입니다.ex)*{ color: blue;}*(애스타리스크)란, '문서 내의 모든 요소'를 의미하는 기호입니다.즉 위 예시 코드는, 문서 내 모든 요소의 텍스트 색을 파란 색으로 지정한다는 뜻입니다.태그 선택자태그 선택자란, 해당 이름을 가진 요소만 선택할 때 사용하는 선택자입니다. (= 유형 ..