Pseudo Selectors 응용 part 2
<body>
<p>I am from my first web site</p>
<address>korea</address>
<span>and my name is Caleb</span>
</body>위와 같은 코드가 있을 때 span 태그를 CSS로 위치를 정의하기 위해서 p + span은 더 이상 작동이 안된다. 왜냐하면 p + span은 p 라는 태그 바로 밑에 있는 span 태그를 정의하는 것이라서 안된다. 그래서 span을 정의하는 방법은 p ~ span을 사용하면 된다. p ~ span은 p 태그의 형제 태그 중 span찾으라고 컴퓨터한테 명령하는 것이다.
Pseudo Selectors input 응용
<body>
<form>
<input type="text" required placeholder="username">
<input type="password" placeholder="password">
</form>
</body>위와 같은 코드가 있을 때 Pseudo Selectors를 이용해서 input의 attribute를 이용해서 특정 input을 가리킬 수 있다.
ex) CSS 코드:<style> input:required{ border: 1px solid tomato; } </style>
attribute selector란
attribute selector은 요소의 attribute를 이용해서 CSS상에서 어떠한 요소든 가리킬 수 있는 기능이 있다. 요소[요소의 attribute] <- 이러한 레이아웃으로 작성하면 된다.
CSS 예시 코드
<style>
input[placeholder="First name"]{
border: 1px solid tomato;
</style>Tip
<style>
input[placeholder~="name"]{
border: 1px solid tomato;
</style>위에 코드를 해석하면 input중에 placehorder attribute중에 name이 들어간 모든 input의 borderdmf 1px 선 종류를 solid 색깔을 tomato로 설정한다. 라고 해석할 수 있다.
