멋쟁이사자처럼 프론트엔드스쿨 2기 TIL (3월 29일)
🔖LikeLion_FrontEndSchool_TIL 3월 29일 (화)
제주코딩베이스캠프 이호준 강사님의 강의
과제
- URL, IP, PORT 정리
- HTML Living Standard란?
- Grouping Content
- github 가입
- VSC extension 설치
프론트엔드 로드맵(전체 로드맵 중 배울과목, 추천과목만 기입함)
- 프론트엔드
- 언어
- HTML/CSS
- JavaScript
- 프레임워크 및 라이브러리
- Bootstrap
- jQuery
- React.js
- SASS
- Vue.js
- next.js
- 백엔드
- 언어
- JavaScript
- 프레임 워크
- Express(Node.js)
- 인프라
- AWS
- firebase
- Database
- MySQL
- MongoDB
- 가상화 구축
- Docker
- 형상관리
- github
- 정보보안
- 웹 해킹
- 네트워크 해킹
- DoS
- 법
- 개인정보보호법
- 정보통신망법
- 그 외 알아야 할 지식
- 웹 접근성
- 알고리즘 & 코테
- SEO
- HTTP/HTTPS
- 리눅스
- TDD
- 웹팩
- IDE
강의 내용
- 언어
- HTML/CSS
- JavaScript
- 프레임워크 및 라이브러리
- Bootstrap
- jQuery
- React.js
- SASS
- Vue.js
- next.js
- 언어
- JavaScript
- 프레임 워크
- Express(Node.js)
- 인프라
- AWS
- firebase
- Database
- MySQL
- MongoDB
- 가상화 구축
- Docker
- github
- 웹 해킹
- 네트워크 해킹
- DoS
- 법
- 개인정보보호법
- 정보통신망법
- 웹 접근성
- 알고리즘 & 코테
- SEO
- HTTP/HTTPS
- 리눅스
- TDD
- 웹팩
- IDE
1. HTML의 기초
- HTML의 정의
- Hyper Text Markup Language의 약자로 링크로 연결된 텍스트와 태그와 같은 기호를 이용해 문서를 작성하도록 도와주는 언어를 의미
- CSS의 정의
- Cascading Style Sheets의 약자로 웹의 전반적인 스타일 작성해 저장하는 파일 의미
- HTML(뼈대) + CSS(살) + JavaScript(근육)
2. URL, IP, PORT(과제 2)
www.naver.com | 도메인, URL | 이름 |
---|---|---|
105.209.222.141 | IP | 주소 |
22, 23, 80, 433 ... | Port | 문 |
- URL
- 웹상의 문서, 이미지, 동영상 등의 자원들의 위치를 나타내는 주소
EX) 네이버 URL => https://www.naver.com/ - 프로토콜 종류, 자원이 있는 IP 주소, 도메인 주소, 포트 주소, 자원 위치로 구성되어 있어
"프로토콜// IP주소 or 도메인 주소 or 포트 주소 / 자원 위치" 형식을 갖음
- 웹상의 문서, 이미지, 동영상 등의 자원들의 위치를 나타내는 주소
- IP
- 컴퓨터 네트워크 상에서 각 장치들의 고유 번호를 의미
- IP 주소는 외우거나 구별하기 어려워 DNS를 통해 구별하기 쉬운 도메인 주소로 변환됨
- 택시를 타고 기사님에게 제주코딩베이스캠프로 가달라하면 네비에 검색해 정확한 주소를 얻어 해당 주소로 가는 것과 같은 원리로 URL과 함께 동작
- 포트
- 포트는 소프트웨어에서 네트워크 서비스나 특정 프로세스를 식별하는 논리 단위
- 번호로 구별되어 포트 번호라 불리고 IP 주소와 함께 쓰여 해당하는 프로토콜에 의해 사용
EX) 105.209.222.141:80
3. HTML Living Standard(과제 1)
HTML 문법 등을 규정한 표준.
-
XHTML과 HTML living standard
HTML을 협력해서 개발하던 두 팀 W3C, WHATWG가 있었다. W3C는 HTML4를 XML 기반의 XHTML을 웹 표준 방향으로 정했지만, 문법이 엄격하고 더 구조화되어 WHATWG가 독자적인 HTML 표준의 작업을 시작해 개발된 것이 HTML living standard이다.
-
HTML 문법
- HTML 요소는 HTML 태그와 속성으로 구성
- 보통 여는 태그와 닫는 태그 한쌍으로 구성
<!-- 여는 태그 Contents 닫는태그 --> <p>Hello World!</p>
- 일부 태그는 한쌍
EX) br, hr - 속성은 항상 여는 태그에 삽입
- Sementic HTML
요소에 고유한 의미를 지정해 웹 접근성에 도움을 줄 수 있음
-
HTML Tag
-
document element & metadata
<!DOCTYPE html>
문서 타입에 대한 정보를 제공하는 tag. 만약 제거하면 브라우저는 쿼크 모드로 html을 렌더링하게 되어 브라우저마다 다르게 동작할 가능성이 있어 반드시 문서 최상단에 선언<html>
HTML 문서의 최상위 요소. lang 속성을 통해 문서의 주 언어가 무엇인지 설정 가능함.<head>
문서에 적용되는 메타데이터의 집합
cf. 메타데이터: 데이터에 대한 데이터.<title>
문서의 제목을 의미. 반드시 한번만 사용되어야 함.<link>
외부의 자원을 문서와 연결하는 역할함. CSS, JavaScript 파일 같은 자원 연결.<meta>
해당 문서의 메타데이터를 나타내는 요소charset
: 문서의 문자 인코딩 상태 의미, 보통 UTF-8로 설정name="author"
: 페이지 작성한 개발자의 이름name="description"
: 페이지에 대한 설명 정보를 나타냄. 검색엔진이 사용자에게 결과 화면 출력할 때 중요한 고려 요소.name="viewport"
: 모바일 장치에서 사용자 화면의 사이즈에 대한 값 설정.http-equiv="X-UA-Compatible”
: 프리그마 지시문. 브라우저에게 어떤 행동을 지시하려는 목적으로 사용.
-
section
주제별로 그룹화 된 콘텐츠를 나타내는 tag들.
<body>
실제 사용자에게 보여지는 문서 컨텐츠 나타내는 요소.<article>
독립적으로 구분하거나 재사용할 수 있는 구획을 나타냄.
요소를 다른 서비스에 가져다 놔도 이상하지 않은 거를 article tag로 지정.<section>
일반적으로 연관성 있는 문서의 구획을 나누고자 할 때 사용하는 요소.
요소를 다른 서비스에 가져다 놓으면 이상한 거를 section tag로 지정.<article> vs <section> 문서의 흐름과 상태에 따라 적절하게 배치해야함.
<header>
특정 컨텐츠의 시작 부분을 나타내는 요소. 일반적으로 구역의 제목을 포함.<h1> ... <h6>
제목을 지정하기 위해 사용. 1~6까지 중요도에 따라 사용되며 단순히 글자의 크기나 굵기를 조절하기 위해 사용되지 않음
<h1>
요소는 페이지당 한 번만 사용되야함.<nav>
네비게이션, 탐색 요소. 보통 메뉴, 네비게이션바에 사용됨.<aside>
해당 콘텐츠와 별개 콘텐츠를 나타낼 때 사용. 보통 사이드바, 광고 영역으로 활용.<footer>
작성자 정보, 저작권, 관련 링크 등의 내용을 담는 요소.<address>
가장 가까운 부모 article이나 body 요소의 연락처 정보를 나타냄.
-
Grouping content(과제 3)
콘텐츠를 묶어서 관리할 수 있도록 사용하는 tag들-
<ol>, <ul>, <li>
각각 ordered list, unordered list, list item의 약자로 정렬된 배열, 정렬되지 않은 배열, 배열의 아이템을 뜻함.
<li>
는<ol>
,<ul>
요소 안에서만 사용되어야함.<ul> <li>one</li> <li>two</li> <li>three</li> </ul> <ol type="I"> <li>one</li> <li>two</li> <li>three</li> </ol> <p>type : a, A, i, I</p>
<ol>
의 type으로 a, A, i, I를 사용해 다른 방식으로 표현 가능함. -
<dl>, <dt>, <dd>
목록을 정의할 때 사용되는 tag로 사전처럼 어떠한 것을 정의할 때 쓰이는 목록.
definition list, definition term, definition description의 약자로 CSS 속성을 부여해 dt를 보이지 않게 하고, dd에 용어 설명을 넣어 웹 접근성을 준수하는데 사용된다.<dl> <dt>HTML</dt> <dd>마크업 언어 입니다.</dd> </dl>
-
<div>
레이아웃을 나눌때 사용하는 태그. 컨텐츠의 형태를 변형시키지는 않지만 하위에 있는 여러 요소를 묶어 스타일 변경 가능.
<section>
,<article>
,<header>
, 등의 tag들은<div>
와 같은 역할을 하지만, 태그에 의미를 부여한 것이기 때문에 의미가 부여된 태그를 먼저 사용하고 대용할 태그가 없을 때<div>
를 사용하는 것이 바람직함. -
<figure>, <figcaption>
이미지에 자막을 연결되도록 하는 tag.<figure> <img src="imgs/facebook.png" alt="페이스북" /> <figcaption>페이스북 로고</figcaption> </figure>
-
<p>
단락을 표시하는 tag. 하나의 완결된 문단을 의미하기 때문에 p tag 안에 자식으로 p를 사용하거나 줄바꿈의 용도로 사용해서 안됨. -
<pre>
HTML에 작성한 내용 그대로 화면에 표현하는 tag. 주로 코드를 표현할 때 사용.<pre> <code> let val = 1; function myFunc(value){ return value; } myFunc(val); </code> </pre>
-
<blockquote>
인용블록으로 q는 인용구를 나타냄.<blockquote> <p>제발 그만해.. 이러다가 다~~ 죽어!</p> <cite>오징어게임 오일남</cite> </blockquote> <p><q>제발 그만해.. 이러다 다~~ 죽어!</q>라고 오일남이 소리쳤습니다.</p>
-
<main>
HTML 문서의 주요 콘텐츠를 나타내는 tag.
주요 콘텐츠 영역은 문서의 핵심 주제나 웹 어플리케이션의 핵심 기능에 직접적으로 연결되어 있는 부분을 뜻하기 때문에 메인 요소 안에 들어가는 내용은 문서의 유일한 내용이어야 함.
github도 main tag안에 사이트의 메인 컨텐츠를 담아두고 있다. -
<hr>
이야기에서 장면 전환 혹은 문단 안에서 주제가 변경되었을 때 그 구별을 위해 사용됨.<blockquote> <p>제발 그만해.. 이러다가 다~~ 죽어!</p> <cite>오징어게임 오일남</cite> </blockquote> <hr /> <p><q>제발 그만해.. 이러다 다~~ 죽어!</q>라고 오일남이 소리쳤습니다.</p>
-
-
Author And Source
이 문제에 관하여(멋쟁이사자처럼 프론트엔드스쿨 2기 TIL (3월 29일)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@luckjjh/멋쟁이사자처럼-프론트엔드스쿨-2기-TIL3월-29일저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)