HTML&CSS 태그, 속성, 셀렉터
- 3. <head> HTML문서를 위한 처리 정보와 메타 데이터를 담는 컨테이너 <title> HTML문서의 제목 <link> 다른 HTML문서로 이동시키는 링크 <style> HTML문서의 양식 self-closing tag : 짝 없이 스스로 닫히는 태그 예를 들면, <link /> <head> 태그
- 4. <body> HTML문서의 보여지는 내용을 담는 컨테이너 <h> heading 표제 <p> paragraph 절 <img> image 그림 <ol> ordered list 순서 있는 목록 <ul> unordered list 순서 없는 목록 <li> list item 목록의 항목 <strong> strong emphasis 강한 강조(볼드) <em> emphasis 강조(이텔릭) <body> 태그
- 5. <table> table 표 <tr> table row 표의 행 <thead> table header 표의 머리 부분 <th> table header cell 표의 머리 부분 셀 <tbody> table body 표의 몸체 <td> table datacell 표의 데이터 셀 <hfoot> table footer 표의 끝 부분 <div> division 분리(큼지막한 분리, 공간 분리) <span> span 한 뼘(더 소규모의 분리, 요소 스타일 분리) <body> 태그
- 6. 속성 <head>속성 <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <body>속성 <a href=”http://google.com”> <img src=/bssin/htmlcss-45973569/”http:/google.com/image/rubber_duck”> <th colspan=”2”> <td colspan=”2”>
- 7. 스타일 속성 공통 글꼴 serif, sans-serif, cursive, fantasy, monospace 텍스트 스타일 속성 color:red; font-size:10px; font-family:manaha, gulim, serif; font-weight:bold; text-align:center; text-decoration:none font-size:0.5em에서 em : 상대적인 크기값
- 8. 스타일 속성 background-color:brown; width:100px; height:100px; border:100% solid red; border-radius:5px; marign:auto; padding:-10px 10px 10px -10px; display:inline-block; visibility:visible; float:right; clear:both”> border:1px solid red = border-width:1px; border-style:solid; border-color:red; 중첩되는 경우엔 나중에 쓰인 속성이 먼저 쓰인 속성을 overriding합니다. margin:auto에서 auto : 좌, 우측의 마진이 같은지 확인해서 알아서 처리해라! padding:10px 10px 10px 10px = padding-top:10px; padding-right:10px; padding-bottom: 10px; padding-left:10px;
- 9. 스타일 속성 content에 padding이 더해진다. content+padding에 border가 더해진다. content+padding+border에 margin이 더해진다. display:block(default), display:inline, display:inline-block, display:none visibility:visible(default), visibility:hidden, visibility:collapse(테이블 전용) display와 visibility의 차이 : display는 어떻게 나타낼지, visibility는 보일지 말지 display:none과 visibility:hidden의 차이 : display:none은 아예 나타내지 않으므로 공간을 차 지하지 않고, visibility:hidden은 보이지는 않지만 공간을 차지 box-sizing:border-box
- 10. 스타일 속성 position:static(default), position:absolute, position:relative, position:fixed top:10px, right:10px, bottom:10px, left:10px(only for fixed) float:left, float:right, clear:left, clear:right, clear:both(only for static, relative) position:absolute : 형제들 간에 상대적인 위치 고려 안 함. position:relative : 형제들 간 상대적 위치 적용 position:fixed : 화면 내에서 절대위로 고정 z-index:0(default), z-index:1부터 무한(숫자가 클수록 앞에 위치함)
- 11. 셀렉터 p { /* <p> selector */ background-color:blue; } div div div p { /* multiple selectors */ /* 중첩된 세 개의 <div> 안에 있는 모든 <p>태그가 선택됩니다. */ } * { /* univeral selector */ /* 모든 요소가 선택됩니다. */ }
- 12. 셀렉터 div > p { /* children selector */ /* <div>의 바로 아래 있는 <p>태그만 선택됩니다. */ } inline CSS : <p style=”font-size:10px”> selector : css에서 정의해둔 양식을 적용할 수 있는 태그 선택자 양식에 대한 정보를 따로 분리하는 이유 1. 한 요소에 적용하면 그 요소가 쓰이는 모든 곳에 적용됩니다. 2. 미리 정의한 양식을 어느 요소에서든 재활용할 수 있습니다.
- 13. 셀렉터 .order { /* class selector of universal selector */ /* class=”order”가 들어있는 태그만 선택됩니다. */ /* 여러 번 사용할 수 있습니다. */ } #intro { /* id selector for universal selector */ /* id=”intro”가 들어있는 태그만 선택됩니다. */ /* 딱 한 번 사용할 수 있습니다. */ }
- 14. 셀렉터 a:hover { /* pseudo class selector */ /* 요소의 변화에 따라 다른 양식을 적용할 수 있는 셀렉터입니다. */ } a:link, a:visited, a:hover, p:first-child, p:nth-child(2) p:nth-child(oven) : 전체에서 모든 짝수 번째 <p>태그가 선택됩니다. 더 상세한 경로의 셀렉터는 겹치는 다른 셀렉터를 overriding합니다. id셀렉터와 class셀렉터가 같이 쓰였을 때 id셀렉터가 class셀렉터를 overriding합니다.