미션은 저작권 문제로 오픈하면 안된다는 공지를 받았다.
웹 개발자들은 새로운 개념을 학습할 때, (Mozilla 재단)MDN Web Docs를 주로 참고한다고 한다.
https://developer.mozilla.org/ko/
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
1. HTML 정의 요약 빈칸 채우기
HTML은 HyperText Markup Language의 약자로 웹을 이루는 가장 기초적인 구성 요소입니다.
웹페이지의 모양을 꾸미는데 쓰는 CSS와 기능, 동작을 구현하는데 쓰는 JavaScript와 함께 쓰입니다.
HTML 요소는 태그를 사용해서 다른 텍스트와 구분합니다.
태그는 여는 홀화살괄호(<>)로 감쌉니다.
프론트엔드 개발자는 HTML, CSS, JavaScript를 사용해 웹을 만듭니다.
2. HTML 태그 요약 빈칸 채우기
HTML 태그엔 속성을 추가할 수 있습니다.
속성은 태그에 추가 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있게 해줍니다.
속성은 이름과 값으로 이루어져 있습니다.
속성값은 "와 '로 감싸 표현합니다.
한 태그에 여러 속성을 선언할 수 있는데,
여러 속성을 선언할 때는 공백으로 구분해서 사용합니다.
3. HTML 코드 수정
<!--대한민국 국민 이보라 자기소개-->
<h1>자기소개</h1>
<span>
<br>
안녕하세요. 대한민국에 사는 <strong>이보라입니다.
</br>
</span></strong>동작하지 않는 코드 -> 동작 가능한 코드로 수정
- 이름만 굵은 색으로 표시, 제목과 텍스트 사이 빈 줄 넣고 싶음.
<!DOCTYPE html> <!--1. DOCTYPE 선언 추가-->
<html lang="ko"> <!--2. html 언어 korean 선언-->
<!--대한민국 국민 이보라 자기소개-->
<head> <!--3. head 태그 추가-->
<meta charset="utf-8"> <!--4. 문자 인코딩 방식 명시 태그 추가-->
<title>이보라 자기소개</title> <!--5. 브라우저 창 제목 추가-->
</head>
<body> <!--6. body 태그 추가-->
<h1>자기소개</h1><br> <!--7. 제목-text 사이 공백 (br : 닫는 태그 x)-->
<span>
<!--span : 구문 콘텐츠를 위한 통용 인라인 컨테이너
(1) 아무것도 나타내지 않음
(2) 스타일 적용 위함, lang 등 어떤 특성 값 서로 공유 요소 묶을 때 사용
(3) <div>와 유사
a. <div> : 블록 레벨 요소
b. <span> : 인라인 요소
(4) 추가적인 의미 더하지 않고 CSS/JS 적용해 무언가 하고 싶을 때 사용
-->
안녕하세요. 대한민국에 사는 <strong>이보라</strong>입니다.
</span>
</body>
</html>
4. 네이버 로그인 페이지 접속 후 개발자 도구 오픈
: 어떤 태그가 쓰이고 있는지
: 각 요소별로 어떤 태그가 사용되고 있는지
확인 후 적기
네이버 로그인 페이지
https://nid.naver.com/nidlogin.login
[네이버: 로그인]
안전한 로그인을 위해 주소창의 URL과 자물쇠 마크를 확인하세요!
nid.naver.com
개발자 도구 여는 방법
https://ko.javascript.info/debugging-chrome
Chrome으로 디버깅하기
ko.javascript.info
(1) 위쪽의 NAVER 로고
<header class="header" role="banner">
<div class="header_inner">
<a href="https://www.naver.com" class="logo">
<h1 class="blind">NAVER</h1>
</a>
</div>
</header>
<header> 태그
-소개 및 탐색에 도움을 주는 콘텐츠 나타냄 (제목, 로고, 검색 폼, 작성자 이름 등 포함 가능)
-주위 구획의 제목(<h1> ~ <h6>) 감싸기 위한 요소이나, 필수 사항 x
<div> 태그
-아무것도 표현되지 않음
-CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 영향 X
-문서의 특정 구역 표시
<a> 태그
-href 특성 통해 다른 페이지나 같은 페이지 내 어느 위치, 파일, 이메일 주소와
그 외 다른 URL로 연결할 수 있는 하이퍼링크 만듦
-<a> 안 콘텐츠는 링크 목적지의 설명을 나타내야 한다.
<h1> 태그
-HTML 구획 제목 요소
-<h1> : <h1>~<h6> 중 가장 굵고 큰 글씨
-<h6> : 굵게 표시되지만 <h1>~<h6> 중 가장 작은 글씨
NAVER 로고를 클릭하면 네이버 홈페이지로 연결 된다.
(2) 아이디와 비밀번호를 입력하는 네모 상자
<div id="container" class="container">
<div class="content">
<div class="login_wrap">
<form id="frmNIDLogin" name="frmNIDLogin" target="_top" autocomplete="off"
action="https://nid.naver.com/nidlogin.login" method="post">
<input type="hidden" id="localechange" name="localechange" value>
<!--...-->
<!--id-->
<ul class="panel_wrap">
<li class="panel_item" style="display: block;">
<div class="panel_inner" role="tabpanel" aria-controls="1oinid">
<div class="id_pw_wrap">
<div class="input_row" id="id_line">
<div class="icon_cell" id="id_cell">
<span class="icon_id">
<span class="blind">아이디</span>
</span>
</div>
<input type="text" id="id" name="id" placeholder="아이디" title="아이디" class="input_text" maxlength="41" value>
<span role="button" class="btn_delete" id="id_clear" style="display: none;">
<span class="icon_delete">
<span class="blind">삭제</span>
</span>
</span>
</div>
<!--pw-->
<div class="input_row" id="pw_line">
<div class="icon_cell" id="pw_cell">
<span class="icon_pw">
<span class="blind">비밀번호</span>
</span>
</div>
<input type="password" id="pw" name="pw" placeholder="비밀번호" title="비밀번호" class="input_text" maxlength="16">
<span role="button" class="btn_delete" id="pw_clear" style="display: none;">
<span class="icon_delete">
<span class="blind">삭제</span>
</span>
</span>
</div><div> 태그
-아무것도 표현되지 않음
-CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 영향 X
-문서의 특정 구역 표시
<form> 태그
-정보 제출 위한 대화형 컨트롤 포함하는 문서 구획 나타냄
<input> 태그
-사용자 데이터 받을 수 있는 대화형 컨트롤 생성
-텍스트 입력, 컬러 선택, 체크박스, 날짜 지정 컨트롤, 파일 업로드 등 다양한 type 가지고 있음
<span> 태그
-구문 콘텐츠 위한 통용 인라인(한 문장/문구 내 사용) 컨테이너
-아무것도 나타내지 않음
-스타일 적용 위함, 어떤 특성의 값을 서로 공유하는 요소 묶을 때 사용 가능
<ul> 태그
-순서가 중요하지 않은 목록을 나타냄
<li> 태그
-목록의 항목 나타냄
-반드시 <ol>(순서 중요 목록), <ul>, <menu> 안 위치해야 함
(3) 초록색 로그인 버튼
<div class="btn_login_wrap">
<button type="submit" class="btn_login" id="log.login">
<span class="btn_text">로그인</span>
</button>
</div><div> 태그
-아무것도 표현되지 않음
-CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 영향 X
-문서의 특정 구역 표시
<button> 태그
-클릭 가능한 버튼 나타냄
-외형 CSS로 변경 가능
<span> 태그
-구문 콘텐츠 위한 통용 인라인(한 문장/문구 내 사용) 컨테이너
-아무것도 나타내지 않음
-스타일 적용 위함, 어떤 특성의 값을 서로 공유하는 요소 묶을 때 사용 가능
'[Language] > VIEW' 카테고리의 다른 글
| CSS 이해하기 (0) | 2022.05.22 |
|---|---|
| 콘텐츠모델, 시멘틱마크업,블록 & 인라인 (0) | 2022.05.17 |
| [부스트코스] HTML 태그 - 2주차 미션 (0) | 2022.05.15 |
| HTML 태그 (0) | 2022.05.15 |
| HTML 이해하기 (0) | 2022.05.09 |
