2019/09/24(화)
- 주석 (코멘트)
- HTML 뼈대 완성
- 내용 구조 태그. header, footer, main, section
- div
- 인라인 태그. i, em, small, sup, sub
- 유튜브 임베딩
- CSS 맛보기
<style>
header {
background-color: blue;
color: white;
}
footer {
background-color: grey;
}
</style>
<header>
<h1>웹페이지 제작 스터디</h1>
</header>
<main>
<section>
<h1><em>나만의</em> 웹사이트를 만들자.</h1>
<p>이게 내 첫 <mark>웹페이지</mark>입니다.</p>
<p>
이미지를 보여볼게요.
<br>
<img src="unsplash.jpg" width="300">
</p>
</section>
<section>
<h2>최근 관심사</h2>
<ol>
<li>함수형 프로그래밍</li>
<!-- <li>오프로드 바이크</li>
<li>자동차 서킷주행</li> -->
</ol>
</section>
</main>
<footer>
<p>2019년 김대현 제작</p>
</footer>
- <style> 태그 안에 CSS를 작성한 방법.
- 일반 태그 안에
style 속성
으로 정의해도 된다.
- 그 안에 내용은 HTML 태그와는 전혀 다르게 생겼다.
- 스타일을 어떤 태그에 적용할 것인가를 선택한다.
- 스타일 - 색상, 여백, 효과 등
- 태그로 선택
class
로 선택 - .클래스
id
로 선택 - #아이디
- 여러 조건을 조합해도 됩니다.
- 여러 선택자를 한번에 정의할 수도 있습니다. (쉼표로 연결)
- MDN - CSS Selectors
- 특수 조건 선택
- 선택 조건의 우선 순위. 여러 조건이 다 해당될 때 어느 걸 적용하나?
- color, background-color
- font-size: 15px, 200%, 1.5em
- font-weight
- font-family
- line-height: 1.4
- text-align: center
- margin: margin-top, margin-bottom, margin-left, margin-right
- border: border-width, border-style, border-color
- padding: padding-top, padding-bottom, padding-left, padding-right
- display: none / block / inline
- 크롬 개발자 도구에서 쉽게 확인해볼 수 있다.
<style>
header {
background-color: blue;
color: white;
border: 1px solid black;
margin: 5px;
padding: 5px;
}
footer {
background-color: grey;
}
</style>
<header>
<h1>웹페이지 제작 스터디</h1>
</header>
<main>
<section>
<h1><em>나만의</em> 웹사이트를 만들자.</h1>
<p>이게 내 첫 <mark>웹페이지</mark>입니다.</p>
<p>
이미지를 보여볼게요.
<br>
<img src="unsplash.jpg" width="300">
</p>
</section>
<section>
<h2>최근 관심사</h2>
<ol>
<li>함수형 프로그래밍</li>
<!-- <li>오프로드 바이크</li>
<li>자동차 서킷주행</li> -->
</ol>
</section>
</main>
<footer>
<p>2019년 김대현 제작</p>
</footer>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>페이지 제목</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<!-- 여기에 이제껏 연습한 내용이 들어갑니다 -->
</body>
</html>
- <link> 태그에
href
속성으로 CSS 파일(링크)를 지정.
- 해당 파일 안에 있는 스타일이 다(!) 적용됨.
<button>버튼</button>
<div id="표시">0</div>
<button id="버튼">버튼</button>
<div id="표시">0</div>
<script>
var 횟수 = 0;
const 버튼 = document.getElementById('버튼');
const 표시 = document.getElementById('표시');
버튼.onclick = function(e) {
표시.innerText = ++횟수;
};
</script>
- HTML에서 CSS 스타일을 적용하는 방법 세 가지.
- CSS 선택자 초중급
- CSS 속성 초중급
- 자바스크립트 맛보기