hatemogi/html-07.md

## html-07.md

      
    Raw
  

              html-07.md
            
          
    웹사이트 제작 스터디 7회 - 수업

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 태그와는 전혀 다르게 생겼다.

CSS 설명


MDN - Cascading Style Sheets


CSS 선택자 (selector) 초급


스타일을 어떤 태그에 적용할 것인가를 선택한다.
스타일 - 색상, 여백, 효과 등
태그로 선택
class로 선택 - .클래스
id로 선택 - #아이디
여러 조건을 조합해도 됩니다.
여러 선택자를 한번에 정의할 수도 있습니다. (쉼표로 연결)
MDN - CSS Selectors

CSS 선택자 (selector) 중급


특수 조건 선택
선택 조건의 우선 순위. 여러 조건이 다 해당될 때 어느 걸 적용하나?

CSS 속성 (property) 초급


color, background-color
font-size: 15px, 200%, 1.5em
font-weight
font-family
line-height: 1.4
text-align: center

CSS 박스 모델


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>
CSS 파일 분리하기

<!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 속성 초중급
자바스크립트 맛보기

다음 시간


이번 (목) 모각공
다음 주 (화) 수업