페이지 레이아웃(Flexbox)/flex 정렬/flex 너비 CSS로 레이아웃을 깔끔하게 정렬해줄 수 있는 요소가 있다. 🎃 레이아웃 잡기 화면의 레이아웃을 위해 flex 속성을 이용해준다. 복잡한 정렬 작업이 꽤나 간편해지는 좋은 속성이다. 부모 요소에 display: "flex" 속성을 부여해주고, 자식 요소를 열심히 정렬해줄 수 있다. 아래는 관련 속성의 기본적인 정리이다. 이제부터 빨간 테두리를 가진 box들을 정렬해보려고 한다. flex 요소 네 가지 box 1, 2, 3을 둘러싼 부모요소에 flex 속성을 걸어준 뒤 (display: flex;) 부모요소에 걸어주는 네 가지 속성들을 모아 정리했다. 1. flex-direction (정렬 축) 2. flex-wrap (줄바꿈) 3. justify-content (간격 정렬) 4. align-items (.. CSS 선택자 (Selector) / 선택자 찾기 / id vs class 🍳선택자란 요소에 스타일링을 적용하기 위해 필요하다. 유닛 회고에서 사용했던 사진을 가져왔다. 🍳body의 텍스트가 빨간색, 30px의 크기를 갖도록 작성됐다. 공포스러운 디자인이 성공적으로 적용되었다. 🍳그런데, 빨간색은 "문서의 Headline입니다" 만 적용하고 싶다. 이럴 때, h1 태그에 id를 부여해주면 좋다. id는 하나의 문서에서 한 요소에만 적용해야 한다. h1 태그는 유일하게 headline을 맡고 있으니 id를 붙여서 적용해보았다. 의도한 대로 빨간색을 적용할 수 있었다! id 속성으로 요소에 접근하기 위해서는, "#"을 앞에 붙여준다. 🍳다음, 30px은 "Q. div와 span의 차이는!?" 에만 적용하고 싶다. 공통된 속성을 적용할 건데, 한 줄 한 줄을 이루고 있는 div에 각.. 이전 1 다음
