티스토리 뷰
- HTML elements 에 Style을 적용하기 위한 3 ways
>>>>> External Styling (External CSS) @CHARSET "UTF-8"; body{background-color:silver} h1{color:green; text-align: center} p{color: orange} <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../css/styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> | 인라인 : html 요소 안에다 그냥 씀 인터널 : <head>의<style>태그 안에 넣어준다 익스터널 : 별도의 css파일을 만들어준다 css파일내용) rel : 어떤 역할을 할 것이냐를 나타냄... 얘를 안적으면 오류가 난다.(필수요소) href의 css파일위치를 유념하여 적는다 |
[1] id속성 이용하기 -id가 같다면 그 id를 가진 태그들은 모두 변경된다 -p#p01 이면 p에만 해당되는 것. <!DOCTYPE html> <html> <head> <style> p#p01 { color: blue; } </style> </head> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p id="p01">I am different.</p> </body> </html> | [2] class속성 이용하기 -class가 같다면 그 class를 가진 태그들은 모두 변경된다 <!DOCTYPE html> <html> <head> <style> p.error { color:red; } </style> </head> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p class="error">I am different.</p> <p>This is a paragraph.</p> <p class="error">I am different too.</p> </body> </html> |
IDs - HTML 문서에서 유일하다는 것을 의미합니다. 세그먼트 식별자로 연결해서 요소를 식별할 때 사용할 수 있습니다. 요소는 오직 하나의 id 속성을 가질 수 있습니다.
Classes- HTML 문서 내에서 여러번 재 사용될 수 있습니다. 주로 스타일을 주거나 특정요소를 타겟으로 정할 때 사용됩니다.
..라는데 아직은 이해가 잘 안간다. id 2번써도 잘 돌아가던데? 흠....
nth-child() 예제
<!DOCTYPE html> <html> <head> <style> table { width: 100%; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } table#t01 tr:nth-child(even) { /* table#t01의 자식인 tr에 nth-child(짝수)인것에만 적용시켜라 */ 보통 선택한 것의 자식을 지정할 때 부모(한칸띄우고)자식 이렇게 적는다. background-color: #eee; } table#t01 tr:nth-child(odd) { background-color: #fff; } table#t01 th { background-color: black; color: white; } </style> </head> | <body> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> <br> <table id="t01"> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html> |
적용결과 :
nth-child()에 대해 알아보자.
같은 형태의 요소들이 반복될 때, 그리고 이 요소들을 특정 순서에 따라 CSS 속성을 다르게 지정하고 싶을 때 사용한다.
child 선택자의 종휴는 여러가지가 있다. 가장 많이 쓰는 것이 nth-child이고 only-child, first-child, last-child, nth-last-child가 있다.
비슷한 놈으로는 nth-of-type 와 그 똘마니 선택자가 있다고 한다.
//소스 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <!-- li:nth-child(index) -> index해당 child의 속성 --> <html lang="en" > <head> <meta charset="utf-8" /> <title></title> <style> li {list-style: none} #px li:nth-child(1) {} #px li:nth-child(2) { font-size: 12px; color:red;} #px li:nth-child(3) { font-size: 16px; color:blue;} #px li:nth-child(4) { font-size: 24px; color:green;} #px li:nth-child(5) { font-size: 32px; color:yellow;} </style> </head> <body> <div> <ul id='px'> <li>HTML5&CSS3 - default</li> <li>HTML5&CSS3 - 12px</li> <li>HTML5&CSS3 - 16px</li> <li>HTML5&CSS3 - 24px</li> <li>HTML5&CSS3 - 32px</li> </ul> <hr> </div> </body> </html> | cs |
//출력 화면
그렇다면 각 태그에 속성을 하는 것이 아닌 홀수나 짝수 태그에만 속성을 주려면 어떻게 할까요??!
nth-child( index ) 이 index값을 2n을 해주면 됩니다.! 그렇다면 홀수는 2n-1 or 2n+1 겠죠??
- >라고 써놓으셨지만 그냥 nth-child( even )이라고 해도 된다..
//소스 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title></title> <style> p:nth-child(2n) { color:red;} </style> </head> <body> <div> <p>HTML5&CSS3</p> <p>HTML5&CSS3</p> <p>HTML5&CSS3</p> <p>HTML5&CSS3</p> <p>HTML5&CSS3</p> <hr> </div> </body> </html> | cs |
//출력 화면
'web > css,html' 카테고리의 다른 글
| Font Awesome - 아이콘 폰트형식으로 추가하기 (0) | 2018.08.14 |
|---|---|
| w3school (0) | 2018.01.17 |
| 마진, 패딩, Border, Outline (0) | 2018.01.17 |
| 리스트 (0) | 2018.01.17 |
| utf-8로 설정하기, html프로젝트 생성하기 ,html 실행시키기 (0) | 2018.01.17 |