최신 html인 표준기준으로 동작하게 함
->문서를 최신버전으로 함을 정의
태그
<!DOCTYPE html>
<html>
<head>
<title>Fruits</title>
</head>
<body>
<h1>orange</h1>
</body>
</html>
-시작태그<>와 종료태그</> 사이에 내용을 삽입함
-html태그(부모요소) 안에 head, body태그(자식요소) 들어감 -> head, body태그끼리는 형제요소
요소(element)
-시작태그에서 마지막 태그까지를 한번에 요소라고 한다.
-head안에는 제목이 삽입되며 창에는 보이지 않는다
-body안에는 내용이 삽입되고 이는 화면에 표시된다
<h1>태그
- h1: 문서의 제목으로 만듦
- h1~6에서 1에 가까울수록 상위제목(크기가 큼) =>6단계의 제목들로 구성됨
- 검색엔진은 디자인과 상관없이 h숫자 태그를 제목으로 인식한다
목록태그-<ul>
<body>
<h1>orange</h1>
<ul>
<li> kiwi</li>
<li>strawberry</li>
</ul>
</body>
-<ul>태그는 순서가 없는 리스트를 나타내며 li태그로 항목들을 나타낸다.
-이때 li태그는 body태그의 자손으로 하위요소이다
-ul은 목록, li는 목록의 아이콘
디자인 <style>
<body>
<img scr="cat.jpeg"/>
<h1 style="background-color: aqua;
width: 300px;border-radius:
50;text-align: center; ">orange</h1>
<ul>
<li> kiwi</li>
<li>strawberry</li>
</ul>
</body>
<head>
<title>Fruits</title>
<style>
h1{
background-color: aqua;
width: 300px;border-radius:
50;text-align: center;
}
</style>
</head>
h1태그인 내용을 꾸미기 위해 style태그를 사용한다
-style속에 속성(property)들을 부여해 글자색, 바탕색, 크기, 정렬 등의 값(value)을 지정할 수 있다.
표현방식
1) style태그를 body 태그 내의 h1태그에 바로 삽입->하나하나 삽입해야 함
2) style태그를 head태그 내에서 선언해 h1의 타입으로 지정하기->이때 h1은 type selector라고 한다.
- type selector를 사용해 특정 태그부분의 스타일을 고정해서 설정할 수 있다.
<style>
*{
background-color: aqua;
width: 300px;border-radius:
50;text-align: center;
}
</style>
- type selector를 *나 body로 설정하면 창의 전체 배경색을 지정할 수 있다.
- CSS Box-model 입문
<style>
body{
background-image: url(orange-bg.png);
}
div{
background-color: white;
width: 400px; /*부모 너비 기준 확장*/
height: auto;/*자식 너비 기준 확장*/
margin: 0 auto;/*박스 외부 여백의 위아래는 0, 좌우는 auto로 설정*/
padding: 40px;/*박스 내부의 상하좌우 여백 지정*/
border: 10px solid orange; /*박스의 테두리 설정*/
}
</style>
->총정리
<head>
<title>Fruits</title>
<style>
body{
background-image: url(kiwi-bg.png);
}
div{
background-color: antiquewhite;
width: auto; /*부모 너비 기준 확장*/
height: auto;/*자식 너비 기준 확장*/
}
</style>
</head>
-모든 속성(property)의 값은 초기값을 가지고 있다
*auto: 브라우저가 자동을 계산해줌
height: auto; 자식의 너비를 기준으로 조절해 줌
margin 속성
*auto: 브라우저가 자동으로 계산해주는 값
margin->auto 가용공간을 여백화한다
- margin의 초기값은 0px이다.
<head>
<title>Fruits</title>
<style>
body{
background-image: url(orange-bg.png);
}
div{
background-color: white;
width: 400px; /*부모 너비 기준 확장*/
height: auto;/*자식 너비 기준 확장*/
margin-left: auto;/*왼쪽 기준 여백*/
margin-right: auto;/*오른쪽쪽 기준 여백*/
margin: 0 auto;/*여백의 위아래는 0, 좌우는 auto로 설정*/
}
</style>
</head>
-왼쪽, 오른쪽 가용공간을 여백화 하여 중앙정렬함0
margin: 0 auto;/*여백의 위아래는 0, 좌우는 auto로 설정*/
-가용공간은 좌우로만 지정됨, 상하단 margin은 auto가 적용되지 않는다.-> 상하단은 다음 div 내용을 위한 공간
padding속성
-내부의 여백을 조절해줌
padding: 40px;/*박스 내부의 상하좌우 여백 지정*/
*margin은 외부 여백, padding은 내부 여백을 나타낸다.
border속성
-테두리를 설정해줌
border: 10px solid orange; /*박스의 테두리 설정*/
<총요약>
<!DOCTYPE html>
<html>
<head>
<title>Fruits</title>
<style>
body{
background-image: url(orange-bg.png);
}
div{
background-color: white;
width: 400px; /*부모 너비 기준 확장*/
height: auto;/*자식 너비 기준 확장*/
margin: 0 auto;/*박스 외부 여백의 위아래는 0, 좌우는 auto로 설정*/
padding: 40px;/*박스 내부의 상하좌우 여백 지정*/
border: 10px solid orange; /*박스의 테두리 설정*/
}
</style>
</head>
<body>
<div>
<img src="orange.png" />
<h1>orange</h1>
<ul>
<li> orange</li>
<li> kiwi</li>
<li>strawberry</li>
</ul>
</div>
</body>
</html>
