속성 상속
div{
background-color: white;
width: auto; /*부모 너비 기준 확장*/
height: auto;/*자식 너비 기준 확장*/
width: 400px;
margin: 100px auto;/*박스 외부 여백의 위아래는 0, 좌우는 auto로 설정*/
padding: 40px;/*박스 내부의 상하좌우 여백 지정*/
border: 10px solid orange; /*박스의 테두리 설정*/
text-align: center;
color: orange;
}
div에 준 속성이 h1과 ul에 영향을 주어 중앙 정렬되어있고 색도 반영되어어있다
-> h1과 ul은 div의 속성을 상속받는다
text-align: center;
color: orange;
}
ul{
text-align: left;/*속성 갱신*/
}
ul이나 h1태그의 속성을 따로 재설정해 상속된 속성을 갱신할 수 있다
border-radius - 테두리 각도 속성
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
->상단 좌측, 하단 우측 각도 설정
border-radius: 60px 10px 30px 50px;
->4군데 각도 한번에 설정
<head>
<title>Fruits</title>
<link rel="stylesheet" href="common.css">
</head>
-css파일 경로를 지정해 스타일 시트 참조
스타일을 지정하는 CSS파일을 따로 만들어 html문서에 연결할 수 있다
-각 html 파일별로 style을 관리하지 않고 css 파일만 관리해도 되어 효율적
->효율성 증가, 특정 css를 여러 html파일에 적용할 수 있어 스타일 변경 용이
css파일 공유
<head>
<title>Fruits</title>
<link rel="stylesheet" href="common.css">
<style>
body{
background-image: url(straw-bg.png);
}
</style>
</head>
위와 같이 straw.html파일에 동일한 css를 적용할 수 있다.
if)css파일에서 갱신할 속성이 있다면?
<head>
<title>Fruits</title>
<link rel="stylesheet" href="common.css">
<style>
body{
background-image: url(straw-bg.png);
}
div{
border: 10px solid red;
}
</style>
</head>
- 배경이미지, 메인이미지를 변경해야 하므로 css파일 이후에 설정해 재설정해 갱신해야 한다.
img요소는 div요소와는 다른 "특성"을 가지고 있기 때문에 width: auto가 div요소의 width: auto와 다르게 계산 되어진다.
img{
width: 100%;/*부모(div)의 너비 기준으로 계산됨*/
}
->이미지의 비율을 항상100%로 고정한다
-부모인 div의 width가 400px이므로 자식인 img의 width도 부모의 100%인 400px로 설정된다.
a태그-참조태그
<ul>
<li> kiwi</li>
<li>strawberry</li>
</ul>
-리스트의 첫번째 아이템인 orange를 클릭하면 링크를 참조할 수 있도록 하기
a태그로 3개의 html 파일 연결하기
<ul>
<li><a href="orange.html"> orange</a></li>
<li><a href="kiwi.html">kiwi</a> </li>
<li><a href="strawberry.html">strawberry</a></li>
</ul>
-h1은 시멘틱한 마크업, div는 의미가 없으므로 시멘틱하지않다
-img는 텍스트와 같은 급으로 종료태그가 필요없다
-사용자 에이전트 스타일시트로 초기값을 재설정할 수 있다
5가지 박스모델 요소
단축속성
