[멋사 FE 스쿨] 1일차 리뷰

3달간 우리들을 이끌어주실 주강사님 제주코딩베이스켐프의 이호준 대표님(Licat)의 실시간 줌 수업으로 본격적인 성장의 문이 열렸다!

http://www.paullab.co.kr/about.html

바울랩, 위니브

 

오늘 마크업 수업 들으며 든 생각?

그냥 "이거는 ~태그고요. 이런 일을 해요~"하고 무책임하게 지나가는 것이 아니라 실질적으로 어떻게 작성하는 것이 좋고 현재 개발자들 사이에 통용되는 약속은 뭐에요 라는 설명을 덧붙여 주신다. 덕분에 개발자들은 어떤 식으로 일하는지  간접적으로나마 느낄 수 있어서 좋다..!

 

 

이하 수업 필기 간단 정리

 

웹 기본 개념

이름 - URL

주소 - IP

문 - PORT

-> 간단히 이렇게 이해하자

 

1. 클라이언트(URL 입력) -> 공유기 -> 라우터 -> DNS에서 domain name에 할당된 IP 가지고 거꾸로 반환

2. 받은 IP 똑같이 [공유기 라우터 ] -> 각종 보안 및 네트워크 장비 -> 서버로 가서 DB 받아옴

   (가는 과정이 request, DB 받아오는 과정이 response

 

HTML(HyperText Markup Language)

- mark up vs. mark down : 이렇게 비교해볼 생각은 왜 안해봤지 나

- HTML Living Standard가 가장 최신 버전의 html 문법. html5, css3 뭐 이런식으로 말하는 건 옳지(?) 않다. 복잡한 역사가 있기 때문

- markup을 sementic하게 작성한다? -> markup만 보고도 얘네가 어떻게 작성했구나를 아는 것

그래도 html 구조를 만들기 어려울 때는 전부 다 div 태그로 만들고서 cheatsheet보면서 다 수정하자.

- html 만들 때 틀에 맞춰서 만드는 게 좋다. 태그를 만들 때 예를 들어 footer 태그가 있는데 자기 멋대로 div class="footer" 이런 식으로 넣지말자. -> div 태그 멈춰!

- h1이 가장 크고 굵은 글씨? 이런 의미로 개념을 잡는 것은 전혀 좋지 않다. margin, padding과 같은 부분에서 사람마다 다를 수 있고 이를 통합하기 위한 css reset을 해주기 때문에 h1은 그냥 제목이다! 라고 의미가 통용되고 있다.

- hr은 브라우저마다 좀 다르게 보이는 게 있어서 권장되지 않는다 엄밀하게 사용하는 곳에서는 사용하지 않는다. hr 대신 border로 테두리하려고 하자.

+ 다른 FE 멘토님 조언 - hr은 상하 내용이 구분된다는 의미로 html5에서 재정의 되었다.

a태그
- 절대경로(href="https://~")||상대경로(href="./test.html)이런식으로 "./": 현재 폴더를 의미
  -> 하지만 정보보안 상으로 좋지 않다.(보안 일을 하셔서 그런지 보안 강조를 많이 해주신다.)
- 페이지 내로 이동(href="#~~")
- target="\_blank"는 새로운 페이지로 열리기
- href="#[id]"는 해당 id로 이동

b vs strong & i vs em
- strong은 중요도를 강조할 때 / i em도 마찬가지 em도 더 강조의미일때 사용
- b 먼저 strong 나중 / i 먼저 em 나중

- mark 태그는 형광펜처럼 나온다.
- 신기한 페이지들 따라써보는 '필사' 방법도 좋은 성장 방법
- dt와 dd는 마치 key와 value의 관계! dt dd를 감싸주는 태그는 div로 하면 안되고 dl 태그로 해줘야 한다.

(dl 안에서 dt, dd 짝끼리 묶을 대는 div 가능한 듯)
- 보통 4~5개의 section을 나누어 css를 작성하는 것이 좋다. 

- h1은 페이지에 1개 넣는 것을 권장
- ul 안에 span 넣은 수는 있어도 span 안에 ul을 넣을 수는 없다.(이건 3일차에 다시 다룸!)

 

보안 관련(보안 전문가 Licat님)

- 댓글에 iframe을 허용하면 안된다. -> 동영상 삽입 등을 통한 해킹 가능(!)