블로그 이사🏡 했습니다. 👉🏻 둘러보기
본문 바로가기
  • What Get's You Here, Won't Get You There

SW/CSS2

CSS 기본 선택자 아래 예시는 HTML p element의 글자색을 red로 설정하라는 CSS 문법이다. 이처럼 CSS에서는 선택자를 설정하고, 선언문을 통해 속성과 속성값을 선언함으로써 특정 HTML element에 스타일을 적용할 수 있다. p { color: red; } // 선택자 { 속성: 속성값; } 선택자를 설정하는 것은 곧, 많은 HTML element 중에서 어떤 element에 스타일을 적용할지 결정하는 것이다. 선택자는 한 HTML 문서의 전체 element를 선택하는 전체 선택자부터, 특정 ID를 속성값으로 가진 element만을 선택하는 ID 선택자까지, 스타일을 적용하고자 하는 조건에 따라 추상적으로 선택하는 방법과 구체적으로 선택하는 방법이 그 정도에 따라 다양하게 존재한다. 또, '버튼이 클릭.. 2022. 7. 6.
CSS Box Model과 box-sizing 문서의 레이아웃을 계산할 때 브라우저의 렌더링 엔진은 CSS Box Model에 따라 각각의 HTML element를 box 형태로 표현하며, CSS를 통해 각 element의 box 크기, 위치, 속성을 설정할 수 있다. CSS Box Model CSS Box Model은 크게 네 가지 영역으로 구분되고, 안쪽부터 Content Padding Border Margin 영역이 있다. Content 영역은 content edge가 감싼 영역으로 텍스트, 이미지 등 실제 content가 위치하는 영역이디. Padding 영역은 padding edge가 감싼 영역으로 border 영역과 content 영역 사이에 위치한 안쪽 여백이다. Border 영역은 border edge가 감싼 영역으로 box의 테두리다.. 2022. 7. 4.