ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko nb ko ko ko en en ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko fr ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
#9 부모와 자식 관계 - 웹 코딩 강좌 | 디자인베이스
홈 웹 코딩 #9 부모와 자식 관계 – 웹 코딩 강좌
웹 디자이너를 위한 웹 코딩 강좌 아홉 번째 시간입니다.
오늘은 부모와 자식에 대한 개념을 알아볼게요. 특정 class나 id 안에 있는 요소에만 스타일을 적용시키고 싶을 때 사용합니다. 나중에 Javascript를 할 때도 비슷한 개념이 있어서 알아두면 좋습니다. 최대한 코드를 간단하게 효율적으로 짜는 게 중요하니까요.
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
일반적으로 태그를 쓸 때 하나만 쓰지 않죠. 그 안에 여러 태그를 적습니다.
이렇게 있다면, h1 태그는 article 태그의 자식이죠.
반대로 article는 h1 태그의 부모입니다.
이걸 왜 알아야 할까요? 특정 태그 혹은 class, id 명 하위에 자식 요소에만 스타일을 줄 수 있기 때문이죠. 모든 태그에 class와 id를 부여할 수는 없잖아요.
특정 부모의 자식 선택자에게만 스타일을 입히는 방법은 간단합니다.
앞에 부모 뒤에 자식을 넣어주면 되는 거예요.
바로 한 단계 하위에 적용하고 싶다면 article > h1 이렇게 적어주시면 됩니다.
더 정확한 이해를 위해서 영상을 시청해주시길 바랍니다 🙂
부모와 자식 선택자           리스트     제목   설명       제목   설명         제목     설명
*{ box-sizing: border-box; } .container{ width:100%; max-width: 1080px; padding:40px; margin:auto; } article{ width: 100%; padding:20px; font-size: 16px; background-color: #eee; border-radius: 10px; margin-bottom:20px; } h1{ font-size: 24px; margin-bottom:10px; } article > h1{ font-size: 20px; margin:0; } article p{ margin:0; } .dark-mode{ background-color: black; } .dark-mode h1, .dark-mode p{ color:#fff; }
재밌죠?! 분명히 코드를 적었는데 작동을 안 한다면 저 우선순위를 생각해보세요.
크롬 브라우저에서 요소 보기를 통해서도 제대로 작동되고 있는지 확인이 가능합니다.
만약 스타일 영역에 -가 그어져있다면 적용 순위에서 밀린 것입니다.
#4 귀여운 뚱보 고양이 그리기(일러스트레이션) – 포토샵 실전 강좌
#17 구글 웹 폰트 적용하고 자간 행간 조절하기 – 웹 코딩 강좌
#07 이 영상 하나로 카메라 완벽 이해하기 – Three.js 강좌
쉽게 사람 일러스트레이션 믹스 매치 하기 ‘humaaans’
디자이너가 무조건 피해야 할 회사 유형
아이폰 손으로 잡고 있는 목업
3d 카툰 핸즈 아이폰 목업
10. 자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌
27. 귀여운 꿀벌 일러스트 쉽게 만드는 방법 – 일러스트레이터 기초 강좌
09. 3d 물체에 그림자 적용하는 방법 – Three.js 강좌
26. 프리폼 그라디언트로 5초 만에 부드러운 그라데이션 배경 만드는 방법 – 일러스트레이터 기초 강좌
Youtube Instagram Pinterest Naver Blog
포토샵 일러스트레이터 피그마 스케치 XD 프로토파이
웹디자인 웹코딩 인비전 프린서플 Lottie Three.js
소개 매거진 디자인 사전 북마크 무료 소스 문의하기 멤버십
© 2022 Designbase. All rights reserved.