12/21 정리 HTML/ 동기부여세션

웹페이지를 이루는 3개의 구조 HTML / CSS / JAVASCRIPT

HTML - 설계도 그리기(구조)

CSS - 재질, 색상 등 꾸미기(스타일)

JAVASCRIPT - 특정조건에 따른 동작 만들기 (상호작용)

 

1. HTML(HyperText Markup Language)

웹페이지의 구조를 다루는 마크업(Mark up) 언어

Tag들의 집합, Tree Structure

Tag의 종류는 수십가지가 있으며, 다 외울 필요는 없고 자주 쓰는것만 기억해둘것

- <div> 한줄 전체 차지

- <span> contents 크기만큼 차지

- <img src=''> img삽입 src라는 속성이 있다.

- <a href=''> 링크 삽입 href, target이라는 속성이 있다.

- <ul>, <ol>, <li>  리스트만들기

- <input>, <textarea> 다양한 입력폼  type속성으로 여러가지 형태의 입력폼을 만들 수 있다. 

- <button> 버튼을 만들 수 있다.

 

2. 로그인 페이지 만들기 실습

<input type="'text" placeholder="ID" />

<input type="'password" placeholder="password" />

<button>로그인</button>

<label> <input type="checkbox" />Keep Login </label>

3. 시맨틱 요소(semantic element)

그 자체로 의미를 가지는 요소. 브라우저와 개발자 모두에게 자신이 사용된 명확한 의미를 보여준다.

검색엔진이 검색할 때 시맨틱 요소를 고려하고, 여러 개발자가 함께 작업할 때 다른 사람이 의미를 명확하게 이해할 수 있다.

다른 HTML요소와 마찬가지로 모두 암기할 필요는 없고, 필요할 때 찾아서 사용한다.

<article> : 독립적이고 자체 포함된 콘텐츠를 지정합니다.

<aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.

<footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.

<header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.

<nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록 형태로 사용합니다.

<main> : 문서의 주된 콘텐츠를 표시합니다.

 

4. Id와 class 선택자

 Id(#) : 문서 전체에서 유일한 고유 식별자

class(.): 여러 태그를 묶는(grouping) 그룹 식별자

 

5. 동기부여 세션

활동지향형이 취업성공률 높음

구직효능감 - 작은성공경험

자기주도 학습 - 성장 마인드셋 가지기 (변화할 수 있다는 믿음, 도전, 피드백좋아)

                         메타인지(사고에 대한 사고) 학습전략!

                         그릿(열정적 끈기의 힘)

                         긍정적인 마인드

계획된 우연 - John. D. Krumboltz

걱정하지마라 더이상 걱정이 늘지않게 - 글배우