<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS3 개요</title>
<link rel="stylesheet" href="css/09hellocss.css">
<style>
div:nth-child(15) {
color:blue; font-weight:bold}
</style>
</head>
<body>
<h1>css3 개요</h1>
<h2>스타일 시트</h2>
<p>웹페이지의 스타일과 내용적인 부분을 서로 분리해서 내용에 디자인을 적용하기 위해
작성하는 서식을 의미</p>
<p>문서작성과 디자인을 분리하면
1. 협업, 스타일 변경시유지보수 용이
2. 태그만으로 구현할 수 없는 기능 수행
3. 전송 및 로딩시간 단축</p>
<p>css1:1996, css2: 1998, css3: 2005</p>
<h2>CSS문법</h2>
<img src="../img/css3.png">
<h2>CSS 사용위치</h2>
<p>인라인 스타일시트: html요소 내에 style이라는 속성을 사용해서 css스타일을 적용</p>
<p>내부 스타일시트: html문서의 head 태그 내에 style이라는 태그를 사용해서 css스타일 적용</p>
<p>외부 스타일이스(추천) : html문서의 head 태그 내에 link라는 태그를 사용해서 외부 css파일을 통해
css스타일을 적용하는 방법</p>
<div style="color : red"> 시간은 금이라고 친구!!</div>
<div>시간은 금이라고 친구!!</div>
div:nth-child(14) {color: purple; font-style: italic; font-size:x-large}
<h2>CSS 우선순위</h2>
<p>인라인 스타일 > 내부 스타일 > 외부 스타일></p>
<p>기본 우선순위와 상관없이 강제 스타일 적용시 !important 지시자 사용</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS3 개요</title>
<link rel="stylesheet" href="css/09hellocss.css">
<style>
div:nth-child(15) {
color:blue; font-weight:bold}
</style>
</head>
<body>
<h1>css3 개요</h1>
<h2>스타일 시트</h2>
<p>웹페이지의 스타일과 내용적인 부분을 서로 분리해서 내용에 디자인을 적용하기 위해
작성하는 서식을 의미</p>
<p>문서작성과 디자인을 분리하면
1. 협업, 스타일 변경시유지보수 용이
2. 태그만으로 구현할 수 없는 기능 수행
3. 전송 및 로딩시간 단축</p>
<p>css1:1996, css2: 1998, css3: 2005</p>
<h2>CSS문법</h2>
<img src="../img/css3.png">
<h2>CSS 사용위치</h2>
<p>인라인 스타일시트: html요소 내에 style이라는 속성을 사용해서 css스타일을 적용</p>
<p>내부 스타일시트: html문서의 head 태그 내에 style이라는 태그를 사용해서 css스타일 적용</p>
<p>외부 스타일이스(추천) : html문서의 head 태그 내에 link라는 태그를 사용해서 외부 css파일을 통해
css스타일을 적용하는 방법</p>
<div style="color : red"> 시간은 금이라고 친구!!</div>
<div>시간은 금이라고 친구!!</div>
div:nth-child(14) {color: purple; font-style: italic; font-size:x-large}
<h2>CSS 우선순위</h2>
<p>인라인 스타일 > 내부 스타일 > 외부 스타일></p>
<p>기본 우선순위와 상관없이 강제 스타일 적용시 !important 지시자 사용</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS reset</title>
<link rel="stylesheet" href="../css/normalize.css">
</head>
<body>
<h1>CSS reset</h1>
<h2>개요</h2>
<p>모든 웹브라우저는 디폴트 스타일을 가지고 있음
따라서, CSS가 없어도 디폴트 스타일에 의해 기본적인
스타일이 적용되어 보여짐</p>
<p>하지만 브라우저에 따라 디폴트 스타일이 각각
다르기 때문에 스타일이 제각각 보여지는 경우가 많음</p>
<p>따라서, 이를 초기화reset시켜 다양한 브라우저에서도
동일한 스타일이 적용되도록 해야 함</p>
<p>작업한 결과물이 어떠한 브라우저에서도 동일한 모양을
보여주도록 하는 것을 cross browsing이라 함</p>
<p>단, w3c에서 공식적으로 권장하는 기법은 아니지만,
실무에서 편의에 의해 임의로 실행하는 방식임</p>
<p>브라우저 기본요소의 디자인을 0으로 만들어 각각의 스타일 종류 차이 최소화</p>
<h2>CSS reset 종류</h2>
<p>에릭 마이어의 css reset : 최초의 css리셋, 15년 지난 지금도 많이 사용
모든 요소에 대해 초기화 시키는것이 성능과 출력 에 이슈가 존재할수있음</p>
<p>normalize reset:모든 요소를 0으로 고정적으로 설정하는 방법에서 탈피한 reset.
브라우저의 디폴트 스타일을 통일시키는 방향으로 css를 reset함
user-agent stylesheet 가 표준이 생긴 탓에 탄생생</p>
<p>bootstrap css reset:css ui framework의 하나.
적은 노력으로 화려한 웹 페이지를 만들수 있게 해줌
normalize css에 부트스트랩만의 reset 추가 </p>
</body>
</html>