<!DOCTYPE html> // 1
<html lang="en"> // 2
<head> // 3
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body> // 4
</body>
</html>- 문서의 HTML버전을 지정
DOCTYPE (DTD) 은 마크업언어에서 문서형식을 정의,
웹브라우저가 어떤 HTML버전의 해석 방식으로 페이지를 이해하면 되는지 알려주는 용도
HTML1, HTML2, HTML3, HTML4, XHTML, HTML5 (표준)
다른버전은 ?
XHTML 버전인 경우 :<!DOCTYPE HTML PUBLIC ="-//WSC//DTD XHTML 1.0 ...
우리가 사용하는 각 웹페이지는 HTML페이지 하나이기 때문에, html을 하나의 페이지로 이해할 수 있다.
-
문서의 전체 범위 HTML문서가 어디에서 시작하고 어디에서 끝나는지 알려주는 역할
-
문서의 정보 (보이지 않는) 를 나타내는 범위
웹페이지의 보이지 않는 정보(웹페이지의 제목, 설명, 사용할 파일위치, CSS)를 작성하는 범위 -
문서의 구조 (보이는)를 나타내는 범위
로고 헤더 푸터 nav, menu, ... 같이 웹페이지에서 보여지는 구조를 작성하는 범위
참고 : 웹 브라우저마다 범위의 해석방식이 다르다
Link태그
<link href="./main.css" rel="stylesheet">
외부문서를 가져와 연결 시 사용 대부분 CSS파일
./ : 작성된 html파일 기준으로 '주변'에서 찾는다.
rel : relationship 가져온 파일이 무슨 관계인지 설명
Meta태그
<meta> : 정보
HTML문서의 제작자, 내용, 키워드 같은 여러정보를 검색엔진이나 브라우저에게 제공
name : 정보의 종류,
content : 정보의 값
<meta name="author" content="blah-blah">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport : 모바일에서만 해당,데스크탑에서는 해당 X
빈 태그
img, input태그 처럼 속성 값으로 정보를 나타내는 태그 종료태그가 필요없다.
Ex)<input/>
Inline Tag
<span>태그는 줄바꿈하면 띄어쓰기가 된다.
span같은 인라인태그는 text이기 때문에 가로세로 크기를 지정할 수 없다
margin(외부), padding(내부) 여백을 줄때는 수평(좌우)만 적용O 수직(상하)은 적용X
<span><div></div></span> --> X
<span><span></span></span> --> O
Block Tag (div)
부모요소의 크기만큼 자동으로 늘어남, 세로는 자동으로 줄어듦
input : inline-block
글자-상자 ?
글자요소이기는 한데 상자요소가 갖고 있는 특성을 추가적으로 사용 가능
가로세로 값 부여 O , 상하좌우 여백 O
<input type='radio' name=''> name : 그룹짓기위한 속성
<태그 data-이름="데이터"></태그>
js에서는 태그.dataset.camelCase로 불러온다.
가상클래스 선택자 :
:hover
:active : click을 하고 있는 동안에만
:focus : 대표적으로 input, a, button, label, select등 (+ tabindex속성 사용요소) 에만 적용가능
tabindex : focus가 안되는 요소들도 focus될 수 있도록 할 수 있다.
-1값이 아닌 다른값을 넣는것은 비추, input요소에는 넣지말것
:first-child : 형제 요소중 첫째라면 선택
:last-child : 막내라면 선택
:nth-child(n) : n번째라면 선택
:not(span) : span빼고 선택
/* 태그종류와 무관하게 3번째 자식 선택 */
.fruits *:nth-child(3) {
color: blue;
/* n은 0부터 numbering됨 (zero-based numbering)
2n은 짝수번째, 2n + 1은 홀수번째에 선택,
n + 2 : 두번째요소부터 선택됨 (첫번째 적용 X) */
.fruits *:nth-child(2n) {
color: green;
}
* : 단독사용X , 다른선택자와 같이 사용됨
가상 요소 선택자
::before : 가상의 인라인 요소를 만들어 내부 앞에 내용을 삽입
::after : 가상의 인라인 요소를 만들어 내부 뒤에 내용을 삽입
/* content 필수로 값을 줘야한다. */
.box::before{
content:"앞!"
}
.box::before{
content:"앞!";
width:30px;
height:20px;
background-color:royalblue;
}
-----> 아무 변화 x
왜 ? after , before은 inline속성이기 때문, inline속성은 가로세로 사이즈 적용X
block형식으로 적용 후 사이즈를 적용시켜야 한다.
HOW???
display:block;
속성을 주자
속성선택자 []
특정 속성만 선택할 시 유용하다.
스타일 상속
스타일 강제 상속 : inherit
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>.parent {
width:300px;
height:200px;
background-color: orange;
}
.child {
width: 100px;
height: inherit;
background-color: inherit;
}
height,backgroud-color 는 상속되지 않는 속성인데, inherit 키워드를 통해 강제상속을 적용시킬 수 있다.
선택자 우선순위
* (문서전체를 의미 : 0점 )
div(태그이름 : 1점)
. (클래스 : 10점)
# (id : 100점)
inline style : 1000점
!important :100000000점
