x
<body> <div> <span>my text is upper!</span> <ul> <li> <span>my text is dummy</span> <div> <p> export fore fugiat sint fugiat fore quid tamen nulla velit anim elit quid legam quis irure veniam ipsum quae legam sint esse veniam eram quae sunt export noster quem sint esse quis summis anim dolore fugiat quae ipsum aute multos irure export esse velit culpa nulla sint sunt duis nisi quem fugiat veniam tamen magna elit fugiat nulla dolor legam nisi nulla duis magna malis nisi malis quae quae fore quem nulla enim summis fugiat duis nulla fugiat eram export legam quorum esse esse sunt summis quae velit sunt quem legam cillum tamen veniam noster nisi magna irure sint noster </p> </div> </li> <li></li> </ul> </div> </body>위의 html을 기준으로 진행하겠습니다.
1. id
id를 선택하는 방법은 #id를 이용해야 합니다.
id는 가장 높은 우선순위를 가지고 있으며, 문서 내의 해당 id를 가지는 모든 요소들을 선택합니다.
<div> <span id="myspan">my text is upper!</span> <ul> <li> <span id="myspan">my text is dummy</span>우선 html 안의 span에 모두 myspan이라는 id를 추가합니다.
x
<style> #myspan { color : red; }</style>id를 선택하기 위해서는 id 앞에 #을 붙혀야 합니다.
myspan의 id를 가진 모든 요소에 css가 적용되었습니다.
하지만 id의 경우 javascript에서도 사용이가능하며 이때 javascript에서는 검색하는 id를 가진 요소들중 가장 먼저 찾아진 요소만을 선택하게 됩니다. 따라서 id의 경우 하나의 html 당 하나만 사용하는것이 좋습니다.
2. class
class를 선택하는 방법은 .class이름을 이용해야 합니다.
xxxxxxxxxx <div> <p class="content"> quis irure veniam ipsum quae legam sint esse veniam eram quae sunt export no quem sint esse quis summis anim dolore fugiat quae ipsum aute multos irure export esse velit culpa nu ...html 의 p태그에 content라는 class를 설정합니다.
xxxxxxxxxx<style> .content { color : green; }</style>class를 선택하기 위해 .content를 사용합니다.
3. name
name은 css의 선택자로 이용될 수 없습니다. 이는 form태그를 통해 서버로 데이터를 전송할 때 사용됩니다.
4. 자식 선택
자식을 선택하기 위해서는 >를 사용하면 됩니다.
xxxxxxxxxx<style> div > ul > li > div > p{ color : blue; }</style>div의 자식 ul의 자식 li의 자식 div의 자식 p를 선택합니다.
5. 후손 선택
후손은 한 집안을 의미합니다. 즉 자식, 그자식의 자식, 또 그자식의 자식의 자식 ... 을 선택합니다.
<style> div { color : blue; }</style>div의 후손들을 모두 선택한 경우 입니다.
모두 파란색으로 변경된 것을 볼 수 있습니다.
크롬 개발자도구를 통해 확인을 해보겠습니다. body하위의 요소중 하나를 선택하고 style을 확인하면 해당 css를 body로 부터 상속받았다고 나타납니다. (Ingerited from body)
<style> body { border : 2px solid slategray; }</style>위 처럼 body의 후손들에게 레이아웃에 2px 두께의 회색 테두리를 주도록 해보겠습니다.
결과가 조금 이상하다고 생각되지 않으신가요? 후손들에게 레이아웃 설정들이 되물림 되지 않았습니다. 이처럼 레이아웃의 경우에는 상속이 되지 않습니다.
'Web > CSS' 카테고리의 다른 글
| CSS - CSS를 이용한 html 엘리먼트 위치변경(display, position, float,clear) (0) | 2019.05.11 |
|---|
