WHAT IS HTML?
- HyperText Markup Language의 약자
- 웹 페이지의 틀을 만드는 마크업 언어
HOW TO USE HTML?
- HTML은 tag들의 집합
- Tag: 부등호(<>)로 묶인 HTML의 기본 구성 요소
TREE STRUCTURE
<html>
<head>
<title> Page title </title>
</head>
<body>
<h1> Hello world </h1>
<div> contents here
<span> here too! </span>
</div>
</body>
</html>SELF-CLOSING TAG
<img src = "codestates-logo.png"/>MOST USED TAGS IN HTML
<div> Division
<span> Span
<img> Image
<a> Link
<ul>&<li> Unordered List & List Item
<input> Input (Text, Radio, Checkbox)
<textarea> Multi-line Text Input
<button> Buttondiv VS. span
div 태그는 한 줄을 차지합니다
division 2
span 태그는 컨텐츠 크기만큼 공간을 차지합니다 span 2 span 3
division 3
ul, li: 리스트
- item 1
- item 2
다양한 input type
<input type = 'radio' name = 'choice' value = 'a'>
<input type = 'checkbox' checked>
<input type = 'password'>Achievement Goals
- HTML이 markup language라는 것을 이해할 수 있다.
* "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.- HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
* opening tag, closing tag, self-closing tag에 대해서 이해하고 있다.- 자주 사용되는 HTML 요소(element)가 무엇인지 알고 차이를 설명할 수 있다.
* div, span 이 무엇이고, 차이는 무엇인지 알고 있다.
* ul, ol, li 가 무엇이고, 언제 사용해야 하는지 알고 있다.
* input type을 설정하여 다양한 종류의 input을 활용할 수 있다.- HTML을 동적인 웹 어플리케이션으로 개발할 수 있는 구조로 짤 수 있다.
* 간단한 웹 페이지 기획을 HTML 문서로 표현할 수 있다.
* id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.
* HTML5 semantic tag를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.
CSS는 스타일링
멋진 모양새와 디자인뿐만 아니라
- 적당한 위치에 콘텐츠 배치 (레이아웃)
- 텍스트 강조와 같은 최소한의 타이포그래피 (조판, typography)
- 최소한의 접근성 (예를 들어 색상)
프론트엔드 개발자의 소양
- 정렬이 어긋나거나 배색이 좋지 않음을 인지할 수 있는 감각
- 사용자가 사용하기 편한 앱이 무엇인지, 왜 편하게 느끼는지에 대한 이유를 분석해본 경험
CSS 파일 추가
CSS 파일을 href 속성을 통해 파일 링크하기
<link rel = 'stylesheet' href = 'index.css' />id VS. class
class:
.으로 선택
목적에 맞게 자유롭게 이름 붙일 수 있음
동일한 값을 갖는 엘리먼트가 많음
엘리먼트가 여러 값을 가질 수 있음
스타일의 분류 (classification)에 사용
id:
#으로 선택
목적에 맞게 자유롭게 이름 붙일 수 있음
문서 내에서 단 하나의 엘리먼트가 유일한 값을 가짐
엘리먼트 단 하나의 값을 가짐
특정 엘리먼트를 이름 붙이는 데 사용
Achievement Goals
- CSS의 목적을 이해할 수 있다.
- 프론트엔드 개발자의 소양에 대해 이해할 수 있다.
- CSS의 기본 문법과 구조를 이해할 수 있다.
- CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다.
* 직접 HTML 안에 CSS를 정의하는 것을 왜 권장하지 않는지 이해할 수 있다.- id 및 class와 관련된 selector 규칙을 이해할 수 있다.
- CSS를 이용해 텍스트를 꾸밀 수 있다
- CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있다.
* 어떤 단위가 어떤 경우에 적합한지 이해할 수 있다.- CSS 박스 모델을 이해할 수 있다
* box model
* width, height
* margin, padding, border
* 박스 크기를 측정하는 두가지 기준의 차이를 이해할 수 있다.- MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다.
newbieForNow