CSS

CSS(Cascading Style Sheets)는 HTML이나 XML로 작성된 문서의 스타일을 정의하는 언어. CSS의 기본 구조는 선택자, 속성, 값으로 이루어져 있다. 이 요소들이 결합되어 HTML 요소의 스타일을 지정한다.선택자는 스타일을 적용할 HTML 요소를

태그 선택자: 특정 HTML 태그를 선택한다.위 예시는 모든 <p> 태그의 텍스트 색상을 파란색으로 설정한다.클래스 선택자: 특정 클래스가 적용된 요소를 선택한다. 클래스 이름 앞에 점(.)을 사용한다.위 예시는 class="highlight"인 모든 요소에 노란

글꼴을 지정하는 속성이다. 처음에는 글꼴 하나만 지정하면 되는 줄 알았는데, 여러 글꼴을 쉼표로 구분하여 지정하고, 시스템 폰트도 같이 지정해두는 것이 좋다는 것을 배웠다. 예를 들어, "Arial, Helvetica, sans-serif" 이렇게 지정하면 브라우저가

절대 단위로, 화면의 픽셀을 기준으로 한다.예: width: 100px;고정된 크기가 필요할 때 주로 사용한다.상대 단위로, 부모 요소의 크기를 기준으로 한다.예: width: 50%;반응형 디자인에 유용하다.상대 단위로, 현재 요소의 font-size를 기준으로 한다

CSS 박스 모델은 웹 디자인과 레이아웃의 핵심 개념으로, 각 HTML 요소가 사각형 박스로 취급된다는 것을 나타낸다. 박스 모델은 요소의 공간을 이해하고 조작하는 데 매우 중요하다. 박스 모델은 다음과 같은 구성 요소로 이루어져 있다.요소의 실제 내용이 표시되는 영역

HEX 코드: - RGB: rgb(red, green, blue) 형식으로, 각 채널을 0-255 사이의 값으로 표현. 예: rgb(255, 0, 0)RGBA: RGB에 알파 채널(투명도)을 추가한 형식입니다. 예: rgba(255, 0, 0, 0.5)HSL: hsl(

HHTML 태그를 직접 선택합니다. 예: p { color: blue; }가장 기본적이지만 광범위하게 적용되므로 주의해서 사용해야 한다.점(.)으로 시작하며, 같은 클래스를 가진 모든 요소에 적용된다. 예: .highlight { background-color: yel

CSS Emmet을 사용하면 개발 속도가 크게 향상된다. 예를 들어m10 → margin: 10px;p20-30 → padding: 20px 30px;lh1.5 → line-height: 1.5;이런 식으로 짧은 약어로 긴 CSS 코드를 빠르게 작성할 수 있다.Emme