멋사 3일차.... 수업 끝나고 공부하기로 했으면서 왜 이제까지 블로그 밖에 안쓴거냐고..
정신 차려!
요즘 업계에서의 개념
퍼블리셔 : 이미지 에디터 + HTML + CSS + 크로스 브라우징 + 웹표준 + 접근성
프론트엔드 : HTML + CSS + 크로스 브라우징 + 웹표준 + 접근성 + 자바스크립트 + 프론트엔드 프레임워크(Angular, React, Vue)
퍼블리셔 라는 개념은 우리나라에만 있다.
프론트엔드 라는 개념은 해외에서 수입되었다.
크로스 브라우징
다양한 웹브라우저에서 깨지지 않게 보이는 웹페이지 제작 기술을 얘기하는 것으로 W3C에서 채택된 웹표준 기술을 기본으로 제작한다.
내 컴퓨터에서는 잘 보이는 웹페이지가 다른 사람의 컴퓨터에서도 잘 보이도록 하는 개념이다.
동일하게 보이는 것이 아니라, 동등한 수준의 정보, 기능 제공이 우선이다.
프론트엔드 개발자는 요런 사람이다!
성능측정(애니메이션 퍼포먼스, 서버와의 통신시간, 지연시간)
- 웹 렌더링(브라우저의 작동 방식을 파악해 렌더링 성능 최적화)
- 웹 접근성(스크린 리더, 명도, 채도 등을 이용해 장애인 분들도 사욜할 수 있도록 & 웹 에이전트 고려)
- 웹 표준 준수
- 검색엔진 최적화(SEO)
- 레거시 브라우저 대응(IE, Android, IOS)
- R&D(미래 기술에 대한 대비)
- 디자이너와 기획자 납득시키기 등등을 하는.........................................
출처 : WENIV DB
body
실제 사용자에게 보여지는 문서의 컨텐츠를 나타내는 요소이다.
article
독립적으로 구분하거나 재사용할 수 있는 구획을 나타낸다.
위젯을 만들 때도 사용한다.
section
일반적으로 연관성 있는 문서의 구획을 나누고자 할 때 사용하는 요소이다.
section vs article
- article 요소는 독립적 콘텐츠(다른 서비스에 가져다 놔도 이상하지 않음)
- section 요소는 사이트 내 연관 콘텐츠(다른 서비스에 가져다 놓으면 이상함)
- aritcle과 section 요소는 heading 요소와 함께 사용하는 것을 권장(높이 없이 비워두기도 함)
header
특정한 컨텐츠의 시작 부분을 나타내는 요소이다. 일반적으로 구역의 제목을 포함한다.
h1~h6
heading은 제목을 지정하기 위해 사용된다. h1내용h1~ h6내용h6까지 중요도에 따라 사용되며 단순히 글자를 크게하거나 굵게 하기 위해 사용하지는 않는다.
h1 요소는 페이지당 한 번만 사용할 것을 권장.
heading 요소를 사용하면 익명 영역을 생성한다. living standard에 section에 해당 태그가 들어가 있으나, 이해를 돕기 위해 글자 태그로 그룹핑 했다.<h1>hello world</h1> <h2>hello world</h2> <h3>hello world</h3> <h4>hello world</h4> <h5>hello world</h5> <h6>hello world</h6>또한 heading 요소들은 아래와 같이 사용자로 하여금 페이지의 계층구조를 쉽게 파악할 수 있도록 한다. 그렇기 때문에 특별한 이유 없이 heading 레벨을 갑자기 몇 단계 뛰어넘도록 작성하는 것은 지양해야 한다.
nav
nav(네비게이션, 탐색) 요소는 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타낸다. 보통 메뉴에 사용된다.
<nav> <a href="https://paullab.co.kr">바울랩</a> ```
aside
- 문서의 주요 흐름을 따라가지 않는, 간접적으로 관련있는 별개의 구획을 만들 때, 사용한다.
- 보통 각주 혹은 광고 영역으로 활용한다. 이 밖에도 양쪽 사이드에 위치해야 하는 요소를 그룹 지을 때 사용한다.
footer
footer 요소가 속한 가장 가까운 구획의 작성자 정보, 저작권, 관련된 링크 등의 내용을 담는 구획 요소이다.
address
가장 가까운 부모 article 이나 body 요소의 연락처 정보를 나타낸다. 만약 가장 가까운 부모 요소가 body라면 문서 전체의 연락처 정보를 의미합니다. 연락처 정보에는 전화번호, 메일정보를 의미한다. 연락처 정보에는 전화번호, 메일 주소, 우편 주소등이 있다.
<addrss> <a href="http://www.somedomain.com/contact"> 홈페이지</a>.<br> <a href="mailto:webmaster@somedomain.com"> 메일 주소</a>.<br> 오시는 길:<br> 제주특별자치도 제주시 동광로 137 </address>
ol, ul, li
ol은 ordered list의 약자로 순서가 있는 목록을 뜻하며 ul이란 unordered list의 약자로 순서가 없는 목록을 뜻한다. li는 각 항목들을 나열하는 태그로 list item을 뜻한다.
주의할 점은 li 요소는 ol 혹은 ul 요소 안에서만 사용되어야 하며, ol, ul의 직계 자식 요소로는 li 요소만 사용되어야 한다.
dl, dt, dd
ol, ul, li가 목록을 정의할 때 쓰였듯이 dl, dt, dd도 목록을 정의할 때 쓰인다.
차이점이 있다면 dl, dt, dd는 사전처럼 어떠한 것을 정의할 때 쓰이는 목록이다.
dl은 정의 목록이며 dt는 정의할 용어를 뜻한다. dd는 용어를 설명할 때 쓰인다.<dl> <dt>HTML</dt> <dd>마크업 언어입니다.</dd> </dl>
div
div는 레이아웃을 나눌 때 사용하는 태그이다. 이 태그는 컨텐츠의 형태를 변형시키지는 않지만 하위에 있는 여러 요소들을 묶어 스타일을 변경시킬 수 있다.
article, section, header, nav는 기본적으로 div와 같은 역할을 한다. 차이점이 있다면 태그에 의미를 부여한 것이다. 예를 들어 내용이 하나의 독립된 컨텐츠라면 div대신 article을 사용한다. 바꿔 말해 article, section, header, nav 모두 div로 대신 사용할 수 있으나 보다 적합한 요소를 찾은 후 대용할 태그가 없을 경구 사용하길 바란다. ```html<div>hello</div>
소스코드
<!DOCTYPE html> <html> <head> <title> Document </title> </head> <body> <h1>분야별 공부 분야 추천</h1> <h2>Front-End</h2> <ol type="A"> <li>HTML</li> <li>CSS</li> <li>Javacript</li> <li>Jquery</li> <li>Bootsrap</li> </ol> <h2>Back-End</h2> <ul> <li>Python</li> <li>Django</li> </ul> <dl> <dt>HTML</dt> <dd>마크업 언어입니다.</dd> </dl> <hr> <!-- 둘 다 꾸며줄 다른 태그가 없을 경우 사용 --> <div>hello</div> <!-- lorem10 --> <p>Lorem <span>ipsum</span> dolor sit amet consectetur adipisicing elit. Fuga, consectetur.</p> </body> </html>
figure, figcaption
웹페이지를 탐색하다보면 가끔 캡션(자막, 설명)이 있는 이미지를 접할 때가 있다.
이러한 컨텐츠의 경우 이미지와 캡션이 연결되도록 figure 요소를 도입할 수 있다.
<figure> <img src="images/baby.jpg" alt="엄마 코끼리와 아기 코끼리"> <figcaption> 관심 받고싶어하는 아기 </figcpation> </figure>figcaption 요소는 이미지에 캡션을 추가하기 위해 도입되었으며 figure, figcaption 요소가 나오기 이전에는 img 요소와 해당하는 캡션을 연결할 방법이 없었다.
p
태그는 단락을 표시하는 태그이다. 하나의 완결된 문단을 의미하기 때문에 p 태그 안에 자식으로 p를 또 사용하지 않으며, 줄바꿈의 용도로 사용해서도 안된다.
<h1>hello world</h1> <p>hello world</p> ```
pre
HTML에 작성한 내용 그대로 화면에 표현한다. 주로 컴퓨터 코드를 표현할 때 사용한다.
<pre> 최 영 준 의 벨 로 그 입 니 다 지 금 은 오 후 1 1 : 3 8 ㅠ ㅠ </pre>
blockquote
- 인용 블록이다.
- q는 인용구 이다. 주로 문장 안에서 사용된다.
<blcokquote> <p>제발 공부해.. 이러다가 나~~ 취업 못해!</p> <cite>멋사 프론트엔드스쿨중에서. 최영준</cite> </blockquote> <p><q>제발 공부해.. 이러다 나~~ 취업 못해!</q>라고 최영준이 소리쳤다.</p>
main
HTML main 요소는 문서의 주요 콘텐츠를 나타낸다.
주요 콘텐츠 영역이란 문서의 핵심 주제나 웹어플리케이션의 핵심 기능에 직접적으로 연결되어 있는 부분을 뜻한다. 메인 요소안에 들어가는 내용은 문서의 유일한 내용이어야 한다.
다른 페이지나 섹션에서 반복적으로 표시 될 수 있는 정보, 에를 들어 사이트 로고, 검색 폼, 저작권 정보 등은 들어가지 않는다.
IE 에서는 지원하지 않는 비교적 최근에 등장한 요소임으로 사용에 주의가 필요하다.
hr
hr 태그는 원래는 가로줄을 표현하기 위해 사용했으나 HTML5에 오면서 의미가 생긴 요소이다.
이야기에서의 장면 전환 혹은 문단 안에서 주제가 변경되었을 때그 구별을 위해 사용한다. 단락을 구분할 때 사용하므로 p 태그 내 사용은 웹 표준에 어긋난다.<p> 근대란 그렇듯 각자의 능력이 타고난 신분의 제약에서 벗어나 인생역전의 기회를 갖게 해주는 시대를 가리킨다. 그렇다면 쥘리앵의 인생역전은 어디까지 가능했던가. </p> <hr> <p> 포괄적으로 ‘근대’라고 적었지만 <적과 흑>의 시대적 배경은 프랑스의 왕정복고기다. 1789년 대혁명 이후 구체제가 붕괴되었지만 1815년 워털루 전투에서 패배한 나폴레옹이 완전히 몰락한 이후에 프랑스... </p>
entity
엔티티는 &로 시작해서 ;로 끝나는 문자열이다. 보통 HTML 안에서 예약어로 사용되고 있는 문자를 대체하기 위한 용도로 사용한다.
가장 많이 사용되는 예약어 목록
1. &
&
2. <
<
3. >
>
4. "
"
이 외의 엔티티가 궁금하믄 :
https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references
영준님 블로그는 수업 요약본 같아요! ✨ 그만큼 잘 정리하셨다는 뜻,, 🔥 아무래도 하나하나 정확하게 알고 적으려고 하다보니까 시간이 좀 걸리는 것 같은데 (저도 그래요)... 너무 힘드시면 간단히 키워드 식으로 정리해보시는 것도 좋을 것 같아요! ㅎㅎ 오늘도 고생 많으셨슴다 🙆🏻♀️ -게더타운에서 같이 춤춘...-