id 선택자
<style>
/* id 선택자 */
/* 선택자 앞에 # + id 속성값 */
#container{
width: 400px;
height: 500px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="container">컨테이너 박스</div>
</body>
예시
id 선택자는 실무에서는 사용빈도가 낮다고 한다.
복합 선택자
/* 복합 선택자 */
/* 하위 선택자 방식 */
section ul {
}
해당 section ul{} 선택자는 하위 선택자 방식이다
<section> 이란 태그 안에 모든 <ul>태그에만 적용되는 선택자이다
예시로
<body>
<section>
<p>p태그</p>
<ul>
<li>
li태그
<ul>
<li>li태그</li>
</ul>
</li>
</ul>
</section>
</body>
이 태그에 적용할 수 있다
section {} 이렇게 선택자를 만들면 이건 태그 선택자가 될것이다
요기서 section 선택자에 ul을 덧붙이면
section ul {
}
<section>태그 안에 <ul>태그 들만 적용할 수 있는 하위 선택자를 만들수 있다
하위 선택자에 속성을 입혀보자
section ul {
border: 1px solid black;
}
border 속성은 감싸고있는 선이라는 뜻이다 border 값에 1px(두께)
solid(직선) 을 black(검은색)으로 값을 줬다
<style>
/* 복합 선택자 */
/* 하위 선택자 방식 */
section ul {
border: 1px solid black;
}
</style>
</head>
<body>
<section>
<p>p태그</p>
<ul>
<li>
li태그
<ul>
<li>li태그</li>
</ul>
</li>
</ul>
</section>
</body>
그러면 ul 태그에만 적용이 되는걸 볼 수 있다.
자식 선택자
/* 자식 선택자 방식 */
section > ul {
}
자식 선택자는 > 를 이용한다
section > ul
<body>
<section>
<p>p태그</p>
<ul>
<li>
li태그
<ul>
<li>li태그</li>
</ul>
</li>
</ul>
</section>
</body>
해당 코드에서
<section>태그의 자식은 첫번째 <p>와 <ul>태그이다
바로 밑에 단계를 자식으로 뜻한다
첫번째 <ul>태그 밑에 또 있는 <ul>태그는 자손 이라고 뜻한다
그래서 자식 선택자는 해당 태그의 바로 밑에 있는 태그에 적용된다
/* 자식 선택자 방식 */
section > ul {
border: 1px solid black;
}
</style>
</head>
<body>
<section>
<p>p태그</p>
<ul>
<li>
li태그
<ul>
<li>li태그</li>
</ul>
</li>
</ul>
</section>
</body>
이렇게 실행하면
맨 첫번째 <ul>태그만 선이 그어지는걸 볼 수 있다
인접 형제 선택자
인접 형제 선택자는 + 기호로 표기된다 h1+ul {}은
<h1> 태그에 인접한(붙어있는) <ul>태그에 적용되는 선택자라는 뜻이다
/* 인접 형제 선택자 */
h1 + ul {
background-color: blue;
}
이렇게 h1+ul 인접 형제 선택자에 속성값을 주고
<div>
<h1>태그</h1>
<ul>
<li>li태그1</li>
</ul>
<ul>
<li>li태그2</li>
</ul>
</div>
이렇게 <ul>태그를 두개 만들었다 <li태그1번>이 <h1>태그와 인접해(붙어)있으므로
<li태그1번>에만 background-color: blue; 라는 속성이 적용된다
일반 형제 선택자
/* 일반 형제 선택자 */
h1 ~ ul {
}
일반 형제 선택자는 ~ 기호로 표기된다
h1~ul {} 선택자는 <h1> 태그에 있는 같은 <ul>태그들에만 적용되는 선택자라는 뜻이다
/* 일반 형제 선택자 */
h1 ~ ul {
background-color: blue;
}
이렇게 똑같이 속성값을 주고
<div>
<h1>태그</h1>
<ul>
<li>li태그1</li>
</ul>
<ul>
<li>li태그2</li>
</ul>
</div>
이렇게 하면 <li태그 1>,<li태그 2> 해당 태그 둘 다 적용되는 걸 볼 수있다
속성 선택자
속성 선택자는 해당 속성에 대한 선택자이다
기호는 [] (대괄호) 기호를 사용한다
<body>
<input type="text" name="" id="" />
<input type="email" name="email" id="" />
<input type="date" name="" id="" />
</body>
해당 <input> 태그들 중에
name="email" 태그만 속성값을 주고 싶으면
<style>
/* 속성 선택자 */
[속성명] {속성값}
[name='email'] {
border: 2px solid blue;
}
</style>
이렇게 [name="email] 이라는 속성 선택자를 이용해
<input>태그중 name="email"이라는 값을 가진 태그만 적용할 수 있다.
<style>
/* 속성 선택자 */
[속성명] {속성값}
[name='email'] {
border: 2px solid blue;
}
</style>
</head>
<body>
<input type="text" name="" id="" />
<input type="email" name="email" id="" />
<input type="date" name="" id="" />
</body>
속성 선택자를 하위 선택자와 같이 사용할수도 있다
<style>
/* 속성 선택자 */
[name='email'] {
border: 2px solid blue;
}
</style>
</head>
<body>
<input type="text" name="" id="" />
<input type="email" name="email" id="" />
<input type="date" name="" id="" />
</body>
이런 코드에서
선택자를 하나 더 만들어 보겠다
input[type='text'] {
border: 2px solid red;
}
<input> 이라는 태그 안에있는 type="text" 값을 가진 속성 선택자를 뜻한다
요기서 input[style="text"] 처럼 띄어쓰기는 하지 않고 딱 붙여줘야한다
<style>
/* 속성 선택자 */
input[type='text'] {
border: 2px solid red;
}
[name='email'] {
border: 2px solid blue;
}
</style>
</head>
<body>
<input type="text" name="" id="" />
<input type="email" name="email" id="" />
<input type="date" name="" id="" />
</body>
그러면 <input> 태그 안에 type="text" 라는 속성에만 적용할 수 있다
클래스 선택자와 같이 쓸수도 있다
<style>
/* 속성 선택자 */
input[type='text'] {
border: 2px solid red;
}
[name='email'] {
border: 2px solid blue;
}
</style>
</head>
<body>
<div>
<input type="text" name="" id="" />
<input type="email" name="email" id="" />
<input type="date" name="" id="" />
</div>
<input type="text" name="" id="" />
<input type="email" name="email" id="" />
<input type="date" name="" id="" />
</body>
이렇게 <div>태그 안에 있는 <input>태그들과
<body> 안에 있는 태그들이 있을때 나는 <div>태그안에 있는 type="text"인 친구들만 속성값을 주고 싶을때
클래스 선택자를 이용해 보자
.box1 input[type='text'] {
border: 2px solid red;
}
이렇게 점(.)으로 box1 이라는 클래스 선택자를 만들고
<body>
<div class="box1">
<input type="text" name="" id="" />
<input type="email" name="email" id="" />
<input type="date" name="" id="" />
</div>
<input type="text" name="" id="" />
<input type="email" name="email" id="" />
<input type="date" name="" id="" />
</body>
<div class="box1"> 이라는 클래스 값을 입히면
class="box1" 이라는 클래스 값을 가진 태그 안에
<input> 태그 안에 type="text" 라는 속성을 가진 태그에만 적용 할 수 있다
이런 식으로 어떤식으로 조합하느냐에 따라 굉장히 복잡한 html 요소들 중 찾고자하는 것만 빠르게 찾아갈 수 있다
각종 속성 선택자의 활용이다
이렇게 까지 많은 패턴을 실무에선 적용하진 않는다고 한다.
이것이 있다는 것만 알아두자
가상 클래스 선택자
가상 클래스 선택자는
사용자의 어떤 특정한 행위에 의해서 발생이 되는 상황이다
개발자는 그 상황을 예상하고 그 클래스는 만들어 놓는다
가상 클래스 선택자는
:(콜론) 뒤에, 속성 뒤에, {} 이런 식이다
예시를 보자
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
</body>
이렇게 아무 링크나 만들고 태그 선택자를 이용해서 밑줄을 지웠다
이렇게 밑줄이 없는 링크가 두개 만들어 졌다
<style>
a {
text-decoration: none;
}
/* 가상 클래스 선택자 */
a:hover {
}
</style>
</head>
<body>
</body>
요기서 a:hover {} 라는 가상 클래스 선택자를 만들었다
<a>라는 태그에 hover 속성 (올려져있다 라는 뜻이다) 을 적용해 보자
/* 마우스가 a태그 위에 올라올 때 */
a:hover {
color: white;
background-color: blue;
}
<a>라는 태그에 hover 속성에 속성값은
color: white;
background-color: blue;
로 값을 적용하면
<a>라는 태그에 마우스를 올려두면 색상은 하얀색 백그라운드 색은 파란색으로 바뀐다는 뜻이다
이렇게 되는걸 볼 수 있다
가상 선택자의 다른 예시들도 봐보자
/* 방문한 적이 없는 링크 */
a:link {
color: blue;
}
이 가상 선택자는 방문한 적이 없는 링크를 파란색으로 나타낸다는 뜻이다
/* 방문한 적이 없는 링크 */
a:link {
color: blue;
}
</style>
</head>
<body>
</body>
이렇게 세상에 없는 사이트를 하나 만들면
방문하지 않은 사이트를 파란색으로 표시할 수 있다
/* 방문한 적이 있는 링크 */
a:visited {
color: green;
}
visited 속성으로 방문한 적이 있는 링크들에 값을 줄 수 있다
/* 방문한 적이 있는 링크 */
a:visited {
color: green;
}
</style>
</head>
<body>
</body>
이렇게 방문한 적이 있는 네이버, 구글 링크는 초록색으로 표시된다
button 태그에도 가상 클래스 선택자를 적용할 수 있다
button:hover {
color: white;
background-color: red;
}
또 hover 속성으로 마우스를 button 태그위에 올려두었을때 색상이 바뀌게 했다
button:hover {
color: white;
background-color: red;
}
</style>
</head>
<body>
<br />
<button>조회</button>
</body>
마우스를 올리지 않은 상태
마우스 올린 상태
이렇게 사용자에게 명확히 알려 줄 수 있다
input 태그에도 사용해 보자
/* 마우스가 포커스 됐을 때 */
input:focus {
border: 5px solid red;
}
/* 마우스가 포커스 됐을 때 */
input:focus {
border: 5px solid red;
}
</style>
</head>
<body>
<input type="text" name="" id="" />
</body>
텍스트칸을 클릭하지 않은 상태
텍스트칸을 클릭 한 상태
이렇게 마우스가 포커스 됬을때 일어날수 있는 상황을 디자인 할 수 있다
표 태그(table)에 가상 클래스 선택자를 적용해 보자
<table>
<thead>
<tr>
<th>이름</th>
<th>연락처</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr>
<td>유재석</td>
<td>010-0000-0000</td>
<td>ryu@gmail.com</td>
</tr>
<tr>
<td>김종국</td>
<td>010-0000-0001</td>
<td>kim@gmail.com</td>
</tr>
<tr>
<td>송지효</td>
<td>010-0000-0002</td>
<td>song@gmail.com</td>
</tr>
<tr>
<td>양세찬</td>
<td>010-0000-0003</td>
<td>yang@gmail.com</td>
</tr>
</tbody>
</table>
<table>태그로 표를 만들었다
이제 요기에서
태그 선택자를 이용해 table, th, td 에 전부 속성값을 넣어 칸을 만들자
,(콤마 또는 쉼표)가 있으면 table, th, td 에 전부 속성값을 넣을 수 있다
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
border:1px (1px두께의 칸 또는 경계선을 의미) solid(직선) black(색상)
border-collapse: collapse ( 칸 또는 경계선이 중복되면 하나로 합치다)
라는 속성값을 주고
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 100%;
}
<table> 태그의 넓이를 100%로 꽉 차게 값을 주자
그러면 이렇게 넓이가 100%로 꽉찬 표가 만들어 진다
위의 표에서 홀수행 마다 혹은 짝수행 마다 색상을 주고싶을때
자식선택자 > 기호로 <tbody> 의 자식 <tr> 태그 들에게 가상 클래스 선택자를 적용할 것이다
가상 클래스 선택자 기호는 : 이므로 tr 뒤에 : 를 붙인다
그리고 nth-child() 라는 속성을 적용한다
tbody > tr:nth-child() {}
나는 요기서 괄호 안에는 2n이라는 값을 주겠다
tbody > tr:nth-child(2n) {
}
그리고 대괄호 안에 background-color: greenyellow 값을 주자
tbody > tr:nth-child(2n) {
background-color: greenyellow;
}
이렇게 실행 시키면
tbody 태그안에 tr(자식) 태그들중 짝수행(2n 또는 even)만 색상이 입혀진걸 볼 수 있다
홀수행 만 색상을 입히고 싶으면
nth-child(2n+1 또는 odd) 으로 값을 주면 된다
tbody > tr:nth-child(2n + 1) {
background-color: greenyellow;
}
그러면 홀수행(2n+1) 만 적용된걸 볼 수 있다
/* 2n 혹은 even : 짝수행 */
/* 2n+1 혹은 odd : 홀수행 */
tbody > tr:nth-child(2n + 1) {
background-color: greenyellow;
}
nth-child 는 tr 태그에만 쓸수 있는게 아니라
tr태그 처럼 반복되는 태그들에 쓸 수 있다
예시로 <ul> 태그안에 반복되는 <li>태그에도 쓸 수 있다
