전 시간 복습
HTML 주의사항
파일명을 만들 때 영어로 할 것
확장자는 파일명.html로 만들 것
특수문자/띄어쓰기 X
예외 특수문자 - _ (예시 hello_world.html)
Tip
! 만 쳐도 HTML형태로 완성된다.
Point*
<input> 속성과 속성값 구분할 줄 알아야 함
내가 쓰는 속성이 block / inline 인지 구분할 수 있어야 함
표를 만들 수 있어야 함
표 생성 엘리먼트
table = 표 생성 엘리먼트
tr = 줄 생성 엘리먼트
td = 칸 생성 엘리먼트
CSS
HTML보다 다양하고 편리하게 스타일을 변경하는
스타일 시트의 표준안이 바로 CSS이고
CSS에는 3가지 적용 방법이 있다.
inline 스타일
<body>
<h1 style="font-size:12px; background-color: red;">1</h1>inline 스타일은 <body>에서 사용 가능하고
하나의 요소에만 스타일을 적용한다.
style 엘리먼트
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#title{
font-size:12px;
background: yellow;
}
.title{
font-size:12px;
background: green;
}
</style>
</head><style> 는 <head>영역에서 사용할 수 있다.
#title은 id속성에 "title"에 적용이 된다
.title은 class 속성에 적용이 된다.
참조
{ }는 선택자에 있는 css를 확실하게 구분하기 위해 사용 (컴퓨터가 이해하기 쉽게)
'>'는 하위 엘리먼트를 뜻함.
CSS는 중복되었을 때는 가장 아래에 있는 코드가 입혀진다.
외부 파일 가져오기
<link> 사용
<link> 라는 태그는 3가지의 속성값이 있다.
href : 파일의 경로
type : 파일의 형태
rel : stylesheet
<link href=".\css\index.css" type="text/css" rel="stylesheet">
<link> 를 사용하여 외부 CSS를 가져올 수 있다.경로 이동 연습하는 법 (연습하기)
명령 프롬프트 켠 후 \마다 끊어서 cd 이동할 경로
ex) C:\Users\pc\Documents\코딩\index.html\css
css 속성
style: 해당 속성에 글씨 크기, 색상을 바꾼다.
font size: 글씨 크기를 조절할 수 있다.
ex) font - size:12px;
background: 내가 차지하는 공간에 색상을 입힐 수 있다.
ex) background: red;
*{}: 모든 엘리먼트들을 뜻한다.
margin: 외부 엘리먼트들 간의 사이를 띄울 수 있다.
ex)
margin :100px
상하좌우 방향이 다를때
margin : 100px 150px 200px 100px (위쪽 방향부터 시계방향)
상하/좌우만 다를때
margin : 100px 200px (상하) (좌우)
padding: 내부 엘리먼트들 간의 사이를 띄울 수 있다.
box-sizing: border-box : border : boeder - box의 크기를 조절해 준다.
참조
CSS에서 ;는 끝나는 부분을 지정한다.
;가 없으면 컴퓨터가 이해할 수 없다.
