2018-01-08 TIL WPS 1.OT

08 Jan 2018 • TIL

Orientation

  • 10시 수업시간 엄수(지각 및 결석 시 감점)
  • 2/7 STOP-OUT 과제 제출
  • 2/9 결과 발표
  • 2/19 재도전 과제 제출

HTML과 CSS

CSS

  • 색깔입히고 모양을 만드는 것
  • 나중에 시간나면 부트스트랩도 할 것(부트스트랩 먼저 하면 css가 하기 싫어짐)

HTML

HTML은?

  • 마크업을 이용해 월드와이드웹(WWW)의 페이지를 서로 오갈 수 있는 웹 문서를 만드는 언어

  • 마크업 언어 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어

  • 하이퍼 텍스트 링크를 이용해 웹 페이지를 서로 연결하는 것을 의미

  • http://html5test.com/ 웹 표준 지원 정도를 테스트하는 사이트
  • http://caniues.com 플랫폼마다 문법을 몇개 쓸 수 있는지 확인?
<!--01.first.html-->
<!DOCTYPE html>
<html> <!--여는 태그-->
<head> <!--문서의 제목-->
	<title>Document</title>
</head>
<body> <!--본문 내용-->
</body>
</html> <!--닫는 태그-->

태그의 요소와 속성

  • HTML 태그의 구성
  • 담을 내용이 없다면 닫히는 태그를 쓰지 않아도 됨
<요소 속성 = "값"> 또는
<요소 속성 = "값">내용</요소>
  • 예제
<a href=“http://naver.com”>네이버 홈으로 가기</a>
<img src=“https://www.google.co.kr/images/branding/googlelogo/1x/
googlelogo_color_272x92dp.png”>
  • href는 Hyper Reference(참조), src는 Source(출처, 소스)의 줄임말

절대경로와 상대경로

절대경로

  • http://로 시작하는 전체 주소
<img src=“https://www.google.co.kr/images/branding/googlelogo/1x/
googlelogo_color_272x92dp.png”>

상대경로

  • 해당 HTML파일 기준으로 한 경로
<img src=“./images/sample.png”>

head 태그

  • 문서의 메타데이터(데이터의 데이터) 집합
  • 인코딩 방식, 렌더링방식, css파일 연결, JavaScript파일 연결, 문서의 제목 등
<head>
<meta charset="UTF-8"> //웹페이지의 인코딩 방식을 정의
<meta http-equiv="X-UA-Compatible" content="ie=edge"> //IE에서의 렌더링 방식을 최선으로 설정
<link rel="stylesheet" href="style.css"> //CSS파일을 연결
<script src="script.js" charset="utf-8"></script> //JavaScript파일 연결
<title>Document</title> //문서의 제목
</head>

body 태그

  • 브라우저에 표시될 내용. 즉, 사용자에게 보여짐

Atom 편집기

  • Emmet 설치

Emmet

  • HTML/CSS 코딩 생산성을 향상시켜주는 도구
  • html:5를 입력 한 후 TAP을 누르면 아래 템플렛이 바로 입력된다
<!--02.body.html-->
<!--html:5 + tap을 누르면 -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>

</body>
</html>

개발자 도구

  • 브라우저에서 HTML/CSS요소를 디버깅하기
  • Cmd + Alt + I

요소(Elements)

  • 마우스로 요소 선택하기 cmd+shift+c
  • 현재 렌더링 된 HTML요소들을 보여줌
  • 선택한 요소에 대한 CSS값을 보여줌

콘솔(Console)

  • 실시간으로 내부의 자바스크립트를 테스트하거나, 로그를 출력해줌

블록과 인라인

블록

  • 줄 바꿈이 일어나는 형태
  • 기본적으로 width가 전체 너비의 값을 가짐
  • 블록 요소 색깔 바꾸기
<!--03.block-elements.html-->
<!DOCTYPE html>
<head>
  <title>Document</title>
  <style>
  h1 {
    background-color: #f00;
  }
  p {
    background-color: #0f0;
  }
  div {
    background-color: #00f;
  }
  </style>
</head>
<body>
  <h1>블록 요소</h1>
  <p>p요소는 블록 형태</p>
  <div>div요소도 블록 형태</div>
</body>
</html>

인라인

  • 줄 바꿈이 일어나지 않는 형태
  • 기본적으로 자신의 내용만큼의 가로너비를 가진다.
  • 블록 요소는 인라인 요소를 포함할 수 있지만, 인라인 요소는 블록 요소를 포함할 수 없다.
  • 인라인 요소 색깔 바꾸기
<!--04.inline-elements.html-->
<!DOCTYPE html>
<head>
  <title>Document</title>
  <style>
  strong {
    background-color: #f00;
  }
  a {
    background-color: #0f0;
  }
  span {
    background-color: #00f;
  }
  </style>
</head>
<body>
  <strong>strong 요소</strong>
  <a href="">a요소</a>
  <span>span요소</span>
</body>
</html>

레이아웃 요소

div, span

  • div와 span은 오직 block과 inline방식의 레이앗을 구현하는데에 사용한다
<div>
<p>블럭요소 내부에 <span>인라인 요소를 사용합니다</span></p>
</div>

Heading(주제, 제목)

  • 웹페이지의 개요를 나타냄 (h1 ~ h6)
  • 중요도 순으로 개요를 나타낼 때 사용

줄 바꾸기

  • p 태그(paragraph) : 각 p태그 아래에 공백이 생김
  • br 태그(linebreak) : 줄바꿈 간에 여백이 없음
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Repudiandae sequi ratione
tenetur reiciendis cum in totam atque ipsum
similique quae.</p>
<p>Lorem ipsum dolor sit amet.</p>

Lorem ipsum dolor sit amet.<br>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Tenetur, ab.<br>

그 외

  • hr 태그
  • blockquote 태그
  • pre 태그(Preformatted text, 이미 형식화 된 텍스트)
<!--07.others.html-->
<!DOCTYPE html>
<head>
  <title>Document</title>
</head>
<body>
  <h2>Horizontal Rule</h2>
  <hr>

  <h2>blockquote</h2>
  <blockquote>인용문입니다.</blockquote>

  <h2>Preformatted Text</h2>
  <pre>
    class Post(models.Model):
    title = models.CharField(max_length=80)
    content = models.TextField()

    def __str__(self):
    return self.title
  </pre>
  <p2>Nomral paragraph</p2>
  <p>
    class Post(models.Model):
    title = models.CharField(max_length=80)
    content = models.TextField()

    def __str__(self):
    return self.title
  </p>
</body>
</html>

줄바꿈 없는 텍스트 태그

  • strong, b태그(강조, 굵게 표시)
  • em, i태그(문맥상 특정부분 강조, 이탤릭 표시)
  • mark태그(형광펜 효과)
  • strong과 bold, em과 i의 차이는 웹 접근성 차이. 예를 들어 시각장애인의 리더기는 strong을 강조하는 부분을 인식하고 읽는다.
<!DOCTYPE html>
<head>
    <title>Document</title>
</head>
<body>
  <h2>Strong, Bold</h2>
  <p><b>단순히 텍스트를 굵게 표시</b></p>
  <p>매우 강조되어야 할 <strong>부분</strong>에 strong사용</p>

  <h2>Emphasis, Italic</h2>
  <p><i>단순히 텍스트를 기울여 표시할 때</i></p>
  <p>강조되어야 할 <em>부분</em>에 em사용</p>

  <h2>Mark</h2>
  <p>형광펜으로 <mark>칠한</mark>효과에 mark사용</p>


</body>
</html>

링크(Anchor)

  • a
<a href="http://www.naver.com" target="_blank" title=“네이버 열기”>새 창으로 네이버 열기</a>
  • href : 이동할 페이지 주소
  • targe : 링크 걸린 페이지를 여는 방법(_self, _blank)
  • title : 마우스를 올렸을 때 보여줄 제목

이미지

  • img
<img src=“이미지 경로" width="100" height=“200" alt=“이미지 설명">
  • src : 이미지의 경로
  • width, height : 이미지의 가로/세로 크기(px단위)
  • alt : 대체 택스트(arternative text)

HTML의 Data Tags

목록

  • <ol></ol> : ordered list
  • <ul></ul> : unordered list
  • 목록 속성
값 설명
1 숫자(기본값
a 영문 소문자
A 영문 대문자
i 로마숫자 소문자
I 로마숫자 대문자
  • 여러개 목록 한번에 입력하기
ol>li{항목}*5 + tap

ul>li{항목$}*5 + tap

ol[type=i start=6 reversed] > li{항목$}*5 + tap
  • 실습해보기
<!DOCTYPE html>
<head>
  <title>Document</title>
</head>
<body>
  <h2>Ordered List</h2>
  <!--ol>li{항목}*5-->
  <ol>
    <li>항목</li>
    <li>항목</li>
    <li>항목</li>
    <li>항목</li>
    <li>항목</li>
  </ol>
  <h2>Unordered List</h2>
  <!--ul>li{항목$}*5-->
  <ul>
    <li>항목1</li>
    <li>항목2</li>
    <li>항목3</li>
    <li>항목4</li>
    <li>항목5</li>
  </ul>

  <h2>List attributes</h2>
  <ol type="i" start="6" reversed>
    <li>항목</li>
    <li>항목</li>
    <li>항목</li>
    <li>항목</li>
    <li>항목</li>
  </ol>

</body>
</html>

정의 목록

  • 목록과 정의 목록은 서로 중첩
<dl>
	<dt>HTML</dt>
	<dd>Hyper Text Markup Language</dd>
	<dd>웹 페이지를 구현하는 마크업 언어이다</dd>
	<dt>CSS</dt>
	<dd>Cascading Style Sheet</dd>
	<dd>HTML의 형태를 지정하는 언어이다</dd>
</dl>

숙제

  • Emmet.io Abbreviations Syntax 공부하기

Comments

Related Posts