[Front-end🦁] #4-1 HTML 과제 review

1. Settings

1-1. Shadow DOM 보기

크롬 > 개발자 도구 > 설정 > Preferences > Elements > Show user agent shadow DOM 켜기

원래 작성 되어 있지만 안보이는 Shadow DOM 코드를 볼 수 있다.

Shadow DOM 이란? HTML에서 캡슐화가 필요한 요소에 캡슐화를 적용할 수 있게 한다.

• 캡슐화 : 밖에서는 코드가 보이지 않도록 안쪽으로 넣는 것. HTML의 경우에는 캡슐화를 하면 CSS 에서 * 로 선택해도 캡슐화한 코드는 선택되지 않는다.

1-2. vscode-htmltagwrap

왠지 모르겠는데 설치가 이미 되어 있었다. 엄청나게 불편하게 코드를 짜고 있었다...

• 텍스트가 있을때 태그에 넣고 싶은 텍스트를 option + W 누르면 양쪽이 p 태그로 감싸지고, 양쪽 태그 안에 커서가 들어가서 쉽게 다른 태그로 바꿀 수 있다.
• option + 더블클릭으로 단어 단위로 여러개 선택해서, htmltagwrap (option + w) 를 통해 여러 줄에 태그를 동시에 붙일 수 있다.

2. HTML

2-1. 과제 리뷰

1102 과제 : Korea Startup Forum html 클론 코딩.

• emmet 문법

ul>li{menu$}*4 /* menu 1~4 생김 */

• 개행이 되어있는 곳은 br 태그를 쓰면 screen reader 로 읽을 때 끊기고 반응형 작업시에도 문제가 될 수 있으므로, 그냥 enter 쳐두고 나중에 CSS 를 이용해서 개행하게 하자.
• entity code   같은 것을 사용하지 말자
• section은 위 아래 요소들과 연관이 있는 것에, article은 독립적인 것에 (걔만 똑 떼서 다른 곳에 둬도 문제가 없는)
• 페이지에 보이지 않더라도 section에 대한 heading은 주는 것이 좋다.
• footer에는 구획을 나누지 말자!

a 태그에서 메일, 전화로 이동

href="mailto:메일주소"
href="tel:전화번호"

• 클론코딩한 것을 올릴때는 내용을 lorem ipsum 이용해서 다 바꿔주자.

2-2. 회원가입 form sample code

• 약관 동의 같은 경우는 radio 버튼이 동의하지 않습니다에 가도록

• 전화번호 같은 것은 placeholder도 넣고, 정규표현식으로 검증해주기.

• 보통 현업에서는 스토리보드를 받아서 코딩을 진행

2-3. HTML

#2 HTML 의 4번부터 이어서 작성!

3. CSS

#4-2에 작성하였다.