기로그 기로그

컨테이너 속성에 이어 아이템 속성에 대해 공부한 내용들을 정리했다. 1️⃣flex-basis flex로 설정된 컨테이너 안의 초기 아이템 크기를 설정하는데 사용된다. 길이 값(px,%등)을 사용하여 설정할 수 있다. 기본값은 auto이며 이 값은 컨텐츠 크기에 따라 결정된다. flex-direction에 따라 대상이 변한다. row:너비 column:높이 ⚠️flex-basis와 width의 차이점 원래의 width가100px이 넘지 않는 아이템은 100px이 되었고, 100px이 넘는 아이템은 그대로 크기를 유지한다. 참고로 flex-basis를 사용할 때 ,박스의 컨텐츠가 한글이거나 띄어쓰기가 있다면 자동으로 줄바꿈 된다. (flxe의 동작이 아닌 css의 동작이 그렇다고 한다.) 즉, basis는 ..

화면을 구성할 때 flex 속성을 사용하면 유연하게 아이템을 배치할 수 있다. flex는 기본적으로 컨테이너 속성과 아이템 속성 두 가지로 나눠볼 수 있다. 컨테이너 속성 1️⃣display : flex; display의 값을 flex 로 선언해주면 플렉스 박스로 만들어 줄 수 있다. 컨테이너 안의 아이템들은 화면 해상도에 맞는게 유연하게 동작하게 된다. inline-flex값도 존재하지만 거의 사용되지 않는다. 컨테이너의 아이템들이 반응형으로 동작하지 않기 때문이다. 👉🏻flex : 컨테이너가 블록 속성을 갖는다. 👉🏻inline-flex : inline-block과 같은 속성을 갖는다. flex속성을 지정하면 아이템들은 가로 방향으로 배치되고, 따로 길이를 지정하지 않으면 content만큼만 차지하..

기본적인 CSS의 조작방법을 다룬다. CSS는 Properties(속성)와 Values(값)로 이루어진다. 이것을 선택자를 통해서 속성을 변경 할 수 있으며, 여러개의 선택자를 결합자를 이용하여 더욱 자세히 요소를 선택할 수 있게 할 수 있다. 자주 사용되는 선택자와 결합자 속성의 값에는 어떤 종류가 오는지에 대해정리. 선택자 HTML요소를 선택하고 스타일을 적용하는데 사용되는 패턴이다. 클래스,ID,속성 등을 사용하여 요소를 식별하고 선택한다. 🔎대표적인 선택자 1️⃣요소 선택자 HTML요소 이름을 사용해서 선택한다. div p h1 2️⃣클래스 선택자 HTML요소의 ‘class’속성 값을 사용하여 선택한다. ‘ . ’으로 시작한다. .container .wrap 3️⃣ID 선택자 HTML요소의 ‘ID..