TIL33: CSS - 1

CSS(Cascading Style Sheets) : 구조적인 웹 문서를 "시각적으로 표현하기 위한 언어" 라고 할 수 있습니다.

CSS Selector(선택자) : CSS에서 태그 요소(Element)를 선택하는 규칙

• HTML에 class=""와 id=""를 적용하여 Semantic Tag로써 적절하게 의미를 부여할 수 있으며 동시에 CSS 속성들을 적용할 수 있습니다.
• class
  • 자유롭게 이름 붙임
  • 동일한 값을 갖는 element가 많음
  • element가 여러 값을 가질 수 있음
  • 스타일의 분류에 사용
• id
  • 자유롭게 이름 붙임
  • 문서내에서 동일한 값은 갖는 element가 단 하나만 있음
  • element는 단 하나의 값을 가짐
  • 특정 element에 이름을 붙이는데 사용

CSS Display

• 각 태그들은 CSS에서 display Property를 이용해 다양하게 설정이 가능하며, 세가지 유형이 있습니다.

display: inline;  // 컨텐츠만큼 공간 차지, 너비와 높이 설정 불가
display: inline-block; // 컨텐츠만큼 공간 차지, 너비와 높이 설정 가능
display: block;  // 한줄 모두 공간 차지, 너비와 길이 설정 가능

• 자주 사용되는 HTML Tag 중에서
  • 대표적인 block Tag : <div></div>
  • 대표적인 inline Tag : <span></span>

자료 출처: 코드스테이츠