Mozilla Firefox
Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.
Fact
- 맴버쉽 2주차 1일 진행.
- css html등 프론트엔드 전반적인 지식 공부
Feelings
Findings
HTML
- HTML문서는 html이라는 태그로 시작해서 html태그로 끝난다.
-
HTML은 계층적이다
- 브라우저는 HTML정보를 tree 구조로 보관한고 있다(DOM Tree)
-
HTML은 적절한 tag를 사용해서 구조를 만든다.(tag 예> body div h1 ul li )
<li>사과</li> -
head 태그는 html문서의 meta정보이다. 타이틀, style 테그 등도 포함되어 있다.
meta
-
meta데이터는 데이터를 설명하는 데이터이다. 예)작성자, 중요한 키워드와 같은 HTML에 대한 내용
<meta charset="utf-8"> - 많은 요소가 name 과 content 속성을 가집니다:
- name 은 메타 요소가 어떤 정보의 형태를 갖고 있는지 알려줍니다.
-
content는 실제 메타데이터의 컨텐츠입니다.
<meta name="author" content="Chris Mills"> <meta name="description" content="The MDN Learning Area aims to provide complete beginners to the Web with all they need to know to get started with developing web sites and applications."> -
Open Graph Data 는 Facebook이 웹 사이트에 더 풍부한 메타 데이터를 제공하기 위해 발명한 메타 데이터 프로토콜이다. MDN 소스코드에서 다음과 같은 부분을 볼 수 있을 것이다.
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> <meta property="og:description" content="The Mozilla Developer Network (MDN) provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS."> <meta property="og:title" content="Mozilla Developer Network"> - Facebook에서 MDN에 링크를 하면, 이미지와 설명이 함께 나타난다. 사용자에게는 더 좋은 정보를 보여줄 수 있는 것이다.
-
body
- body 태그는 화면에 보여지기 위한 정보이다.
HTML 기본 지식
-
div(division)태그만 사용해도 되는거 아닐까?
- 의미없이 다른 태그를 감싸는 역할(그룹을 지어서 style을 반영하는 등에 필요)을 하기 위해서는 div를 쓸 수 있지만, 의미에 맞는 태그들을 찾아서 사용하는 것이 중요하다.
- semantic 하게 짜야 한다. 의미 요소는 브라우저와 개발자 모두에게 그것의 의미를 명확하게 설명한다.
- 구조화 설계
- 스타일을 신경쓰지 않고 문서의 구조에 집중해서 설계하고 이를 적절한 의미의 tag를 사용해서 표현하는것.
-
화면의 배치(layouting)을 위한 태그가 있는가?
- 아래 태그를 유심히 공부할 필요가 있다. Top-down방식으로 HTML구조를 만들때 이를 이용한다.
- header, section, nav, footer, aside
- http://m.naver.com 에서 이 태그들이 실제 사용된 예를 들여다보자.
- article x
- header x
- section => 검색을 감쌈
- aside => body id를 aside 로 줌
- footer => 밑에 로그인 ~고객센터 footer 로 줌
-
article: 요소는 독립적이고 자급자족적인 내용을 명시한다. 기사는 그 자체로 타당해야 하며, 나머지 웹사이트와는 독립적으로 배포하는 것이 가능해야 한다.
<article> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article>
-
header: 태그는 <body> 태그의 제목 부분을 영역으로 구분할 때 사용하는 태그다. 맨 위에서 설명한 <h> 태그 즉 HTML heading은 <header> 태그 사이에 포함될 수 있다
<article> <header> <h1>What Does WWF Do?</h1> <p>WWF's mission:</p> </header> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article> - main
- mark
-
nav: nav 요소는 링크들의 모음을 가르킨다.
<nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav> -
section: 제목이 있는 내용의 주제 그룹화
<section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section>
그외
<details> 보이기/숨김 할수 있는 정보를 표시
<summary>는 <details> 정보를 표시하는 타이틀 설정
<time> 시간 태그. 표시 되는건 아무것도 없다.
<mark> 감싼 텍스트 하이라이트
<main> 메인 테그용
<aside> 컨텐트 외 것 테깅용
<figure> 사진,그림,도형, 등 감싸는 태그
<figcaption>는 <figure> 감싼 태그 설명용
<div> 아무런 의미 없다. 주로 그룹으로 묶어서 css 적용하기 위해서 쓴다. block level element로써 쓰면 줄바꿈이 된다
<span> 원래 글들을 묶는 것인 줄 알았지만 아무런 의미가 없는 것이라 한다. inline element 로써 쓰면 div와 달리 줄바꿈이 안된다.
<a> anchor로써 다른 페이지나 외부 사이트 연결을 해준다.
<script>는 자바 스크립트 코드 사용 혹은 파일 불러올 때.
<link> 외부 파일 연결할 때 쓴다. 보통 css 연결할 때 씀.
<img> 이미지 삽입할 때 쓴다.
<p> 단락을 의미한다. 사용하면 앞에 빈 줄이 생긴다.
<li>는 항목들을 나열할 때 쓰는 태그이다ㅣ.
<ol> 은 li들을 순서가 있는 형식으로 묶을 때 쓴다.
<ul> 운 li들을 순사가 없는 형식으로 묶을 때 쓴다.
<style> 은 스타일 정보(css )정의 할때 쓴다.
<br> 줄바꿈
<h1~6> 글자 제목 크기 1이 크고 6이 제일 작은 것
<input> form 요소 중 하나. 입력창을 만들어 준다.
<form> form 요소들을 하나로 묶어주는 태그
<strong> 강조하고 싶은 곳에 쓰인다.
<button> form 요소 중 하나. 버튼을 만들어준다.
<i> 글을 italic 화해준다.
주석
html <!—내용—>
css /* 내용 */
Future Action
- 미리미리좀…