HTML&CSS 태그, 속성, 셀렉터

HTML&CSS 태그, 속성, 셀렉터

신부설2015.03.18

학습 도움

코드카데미 http://www.codecademy.com

http://www.codecademy.com

http://www.codecademy.com

<head> HTML문서를 위한 처리 정보와 메타 데이터를 담는 컨테이너<title> HTML문서의 제목<link> 다른 HTML문서로 이동시키는 링크<style> HTML문서의 양식

self-closing tag : 짝 없이 스스로 닫히는 태그 예를 들면, <link />

<head> 태그

<body> HTML문서의 보여지는 내용을 담는 컨테이너<h> heading 표제

<p> paragraph 절

<img> image 그림

<ol> ordered list 순서 있는 목록<ul> unordered list 순서 없는 목록<li> list item 목록의 항목<strong> strong emphasis 강한 강조(볼드)<em> emphasis 강조(이텔릭)

<body> 태그

<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> 태그

속성

<head>속성<link type="text/css" rel="stylesheet" href="stylesheet.css" />

<body>속성<a href=”http://google.com”><img src=”http://google.com/image/rubber_duck”><th colspan=”2”><td colspan=”2”>

http://google.com

스타일 속성공통 글꼴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 : 상대적인 크기값

스타일 속성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;

스타일 속성content에 padding이 더해진다.content+padding에 border가 더해진다.content+padding+border에 margin이 더해진다.

display:block(default), display:inline, display:inline-block, display:nonevisibility:visible(default), visibility:hidden, visibility:collapse(테이블 전용)

display와 visibility의 차이 : display는 어떻게 나타낼지, visibility는 보일지 말지display:none과 visibility:hidden의 차이 : display:none은 아예 나타내지 않으므로 공간을 차지하지 않고, visibility:hidden은 보이지는 않지만 공간을 차지

box-sizing:border-box

스타일 속성position:static(default), position:absolute, position:relative, position:fixedtop: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부터 무한(숫자가 클수록 앞에 위치함)

셀렉터

p { /* <p> selector */background-color:blue;

}

div div div p {/* multiple selectors *//* 중첩된 세 개의 <div> 안에 있는 모든 <p>태그가 선택됩니다. */

}

* { /* univeral selector *//* 모든 요소가 선택됩니다. */

}

셀렉터

div > p {/* children selector *//* <div>의 바로 아래 있는 <p>태그만 선택됩니다. */

}

inline CSS : <p style=”font-size:10px”>selector : css에서 정의해둔 양식을 적용할 수 있는 태그 선택자

양식에 대한 정보를 따로 분리하는 이유1. 한 요소에 적용하면 그 요소가 쓰이는 모든 곳에 적용됩니다.2. 미리 정의한 양식을 어느 요소에서든 재활용할 수 있습니다.

셀렉터

.order { /* class selector of universal selector *//* class=”order”가 들어있는 태그만 선택됩니다. *//* 여러 번 사용할 수 있습니다. */

}

#intro {/* id selector for universal selector *//* id=”intro”가 들어있는 태그만 선택됩니다. *//* 딱 한 번 사용할 수 있습니다. */

}

셀렉터

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합니다.

HTML&CSS 태그, 속성, 셀렉터

Technology

Transcript of HTML&CSS 태그, 속성, 셀렉터