처음부터 따라해보는 HTML/CSS 실습
추천하는 확장 프로그램
-
Live Server (v.5.7.9)
Live Server 실행 후 Ctrl + S 를 누르면 자동으로 반영된다. -
CSS Peek (v.4.2.0)
태그에 마우스오버를 하면 적용된 css가 보이거나
단축키를 이용해 팝업으로 css를 띄워 바로 수정할 수 있게 해준다.
-
Beautify (v.1.5.0)
저장하면 코드가 자동으로 정렬된다. (나는 설치 안함) -
Material Theme (v.33.6.0)
HTML : HyperText Markup Language
사용자(유저), 브라우저(크롬, 웨일, 사파리...)
< 태그 > 들의 집합
사용자에게 보여주고 싶은 컨텐츠를 브라우저가 읽을 수 있도록 만든 문서
< head >
body 태그를 읽기 전에 알아야 할 기본적인 정보
< body >
사용자에게 보여주고 싶은 컨텐츠
< Tag >
< opening Tag > </ closing Tag >
< img src="#" />
태그는 계층적으로 이루어져 있다
계층은 tag간의 부모-자식 관계를 나타낸다
tag의 속성
⇨선택적 속성
class=""
id=""
⇨필수 속성
< a href="" >
CSS 적용 방법
- 인라인 스타일
<p style="font-size : 48px;
font-weight : 100~900 또는 bold,lighter;
color : yellow 또는 #hecxa 또는 rgb(45, 45, 45);
">- head의 style
<head>
<style>
p{
font-size : 48px;
font-weight : 100~900 또는 bold,lighter;
color : yellow 또는 #hecxa 또는 rgb(45, 45, 45);
}
#heading{
font-size : 36px;
color : blue;
}
.title{
font-weight : 700;
font-size : 24px;
}
</style>
</head>
<body>
<p id="heading">
안녕하세요
</p>
<p class="title">
도레미파솔라시도
</p>
</body>왜 head 태그 안에 style 을 선언하는가?
style 파일은 컨텐츠를 설명하는 내용이니까
태그에 css가 곂치게 되면 "인라인->id->class->tag" 순서로 인라인이 가장 먼저 적용된다.
id : 파일 안에 id는 한 태그에 하나의 id만을 사용해야 한다. 중복불가
class : 하나의 파일 안에 동일한 class명을 갖은 태그를 가질 수 있다. 중복사용가능
하나의 태그 안에 여러개의 class를 사용할 수 있다.
< p class="클래스명1 클래스명2 클래스명3">
한 칸 띄우면 된다.
p*3
p태그 3개 만들기
< p >< /p > < p >< /p > < p >< /p >
p.title*4
class명이 title 인 p 태그 4개 만들기
< p class="title" >< /p > < p class="title" >< /p > < p class="title" >< /p > < p class="title" >< /p >
ul>li*3
ul 태그 안에 li 태그 3개 만들기
< ul >
< li >< /li >
< li >< /li >
< li >< /li >
< /ul >
하나의 파일에서는 하나의 일만 해야한다.
