CSS를 글로 배워보자

css 기본 문법 css selector(선택자) >css selector에는 class와 id가 있다. class는 여러요소에 중복사용가능, id는 한 요소에만 사용한다. class는 반복적으로 사용되는 스타일에서 많이 정의하고 id는 그 내부의 세부 스타일(로고,

contents를 한줄에 하나만 놓을래? 한줄에 여러개 놓을래? 박스로 놓을래? 물건으로 놓을래? "그니깐 어떻게 놓을래???"contents를 "어디다 놓을래??"

기본적으로 display: flex;를 설정하면 contents들을 가로로 정렬하는 속성을 가지고 있다.<a href="https://flexboxfroggy.com/가로정렬 변경하기세로정렬 변경하기컨테이너 안에서 요소들이 정렬해야 할 방향을 지정.row

이미지 옆에 글이 자연스럽게 흘러가는 형태로 만들기 위해 고안된 속성.float 특성상 float된 요소보다 밑에 있던 요소가 작으면 그 다음 요소들 또한 float의 영향을 받게 된다.다음 요소들이 그 영향을 받지 않게 만들고 싶다면 clear: both;를 통해 f

특성 선택자는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택한다.기호를 추가하여 요소를 선택하는 방식을 다양화할 수 있다.결합 선택자(결합자)는 두 개 이상의 선택자를 결합시켜 결합된 조건을 만족하는 요소를 선택한다.다음 두 가지로 구분할 수 있다.

모바일이나 테블릿이 없던 시절에는 데스크탑용으로만 웹사이트를 만드는 것이 너무나도 당연한 일이었지만 모바일과 테블릿 등 다양한 기기로 웹사이트를 접속하는 현재로서는 반응형으로 웹사이트를 만드는 것이 굉장히 중요해졌다.반응형이 아닌 웹사이트들은 사이즈를 줄이게 되면 컨텐

Web Concepts CSS Framework: Set of prewritten CSS rules designed to help you build webpages faster. Bootstrap Grid: 12 equal-sized columns which can

Flex는 1차원 레이아웃 시스템 => 가로, 세로 중 하나의 방향으로만 레이아웃을 나눌 수 있다.Grid는 2차원 레이아웃 시스템 => 가로, 세로를 동시에 레이아웃을 나눌 수 있다.display : grid; grid-template-columns : 100px 1

Tailwind를 사용하면 기본적으로 모든 HTML태그의 스타일을 리셋시켜준다.h1, button과 같은 태그를 사용했음에도 불구하고 아무런 변화를 볼 수 없는 이유이다.일반 태그의 경우 우리가 className을 부여하여 스타일을 관리할 수 있지만 Markdown과