본문 바로가기
728x90
반응형

CSS6

CSS 고급 선택자 CSS에는 적용하고자하는 스타일의 범위를 지정하는데 선택자(selector)를 이용한다. 하나하나 범위를 지정하기보다는 CSS에 내장된 고급 선택자들로 더 편하게 작업을 해보자. 해당 예제는 Do IT! HTML + CSS + JS 웹 표준의 정석에서 일부 발췌 & 변형하서 사용하였으며 필자가 전부 만든 것이 아님을 밝힙니다. 1. 하위 선택자 제일 많이 이용할 선택자들 중 하나이다. 어떤 선택자의 하위에 존재하는 모든 요소에 해당 스타일을 적용한다. outside section 아직 온라인 예약 신청이... (p inside section) 가족실... (p inside div inside section) 2. 자식 선택자 부모요소 바로 아래에 있는 자식 요소 에게만 스타일을 적용하는 태그이다. 위의 .. 2023. 7. 28.
CSS Flex 와 레이아웃 구조 쓰는 방법(23.08.30) 수정 요즘 계속 군대에 있는 누군가와 프로젝트를 하고 있다. 근데 생각해보니 내 계정도 아니라서 깃허브에도 기록이 안남는데다가 나중에 가면 내가 이러한 포트폴리오를 했다고 증명할 방법이 안 남는다는 사실을 알았다. 물론 경험은 남는다. 지금도 CSS를 다루는데 기본적인 레이아웃 짜는 방법을 어느정도 알게 되었고, React프로젝트를 할때 밑거름이 되어 줄 것이다. 하지만 역시 명시적으로 내가 뭘해왔는지 남기는 것은 좋다. 마침 오늘 개발하려는 페이지는 쉬운 페이지이다. 카카오톡의 리스트 페이지와 비슷하게, 메시지 방을 세로로 된 리스트에 띄우는 페이지이다. 웹페이지를 만드는데 제일 필요한 것이 단순하게 레이아웃의 가로정렬, 세로정렬 법이다. 지금도 똑같이 작업을 진행하고 있는지는 모르겠지만, Andriod S.. 2023. 5. 31.
728x90
반응형