CSS FLEX

개발 및 관리/HTML, CSS, Javascript, DOM 2024. 4. 29. 17:04 posted by HighLighter
반응형

CSS 레이아웃 - flex & grid #1 강의 소개
https://youtu.be/DxwBN7vdr-A?list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9

CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript
https://youtu.be/7neASrWEFEM

CSS Flexbox와 CSS Grid, 한번에 정리!
https://youtu.be/eprXmC_j9A4

CSS 수업 - flex 1 : intro
https://youtu.be/BS9T0ZMqT58

플렉스(Flex) 유형별 UI 응용 예제 : [웹사이트 레이아웃 예제] 플렉스(Flex) 레이아웃 설계(1)
https://youtu.be/LkKMlbb0dIQ

CSS - Flexbox : 레이아웃을 마음대로!
https://youtu.be/2htMvJdW9O0

반응형
반응형


*** CSS 선택자
태그 선택자 / h1 / 태그로 요소 선택
전체 선택자 / *, / 모든 요소 선택
                / div * / 특정 요소의 자식요소 모두 선택
클래스 선택자 / .slide / 클래스명으로 요소 선택
아이디 선택자 / #memid / 아이디명으로 요소 선택
후손 선택자 / .slide h2, .slide .btn / 후손(자식) 요소 선택 
자식 선택자 / .slide > div / 앞 선택자의 바로 밑 자식요소 선택
인접형제 선택자 / .banner + div / 앞 선택자의 형제 요소 바로 다음 요소 선택
                      / .banner ~ div / 앞 선택자의 형제 요소 형제요소 중 두 번째 요소 모두를 선택
그룹화 / h1, h2color:red / 콤마로 선택자를 나열하여 선택
속성 선택자 / a[target], a[target="_blank"] / 속성명 또는 속성명의 값으로 요소를 선택
가상 선택자 / :visited  / 방문한 링크 선택
                / :hover / 요소에 마우스를 올렸을 때
                / :active / 링크를 누르는 순간
               / :focus / 링크, 버튼, 입력요소 등에 초점이 이동했을 때
               / input:checked / input에 체크되었을 때
의사 요소 선택자 / h1:after content:'-'; / :before, :after (내용의 앞, 뒤)
구조 선택자 / :first-child, :last-child / 첫째 요소, 막내 요소
                / :nth-child(2n), :nth-child(2n+1) / 특정 번재 요소를 수식으로 선택
                / :nth-child(even), :nth-child(odd) / 짝수, 홀수 요소 선택
형태구조 선택자 / :first-of-type , :last-of-type, :nth-of-type(2n) / 같은 태그종류 중 첫째, 막내, 특정 번째 요소를 선택
부정 선택자 / :not(p) / 괄호 안 선택자의 반대 요소를 선택
                / li:not(:last-child) / 막내요소를 제외하고 나머지 요소를 선택


반응형