실행결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/1.html
태그의 중첩
[잘못된 태그 선언]
<h1>Hello, <i>HTML</h1></i>[올바른 태그 선언]
<h1>Hello, <i>HTML</i></h1><i>의 종료 태그를 먼저 선언해준 후 <h1>의 종료 태그를 선언해야 합니다.
태그는 대부분 중첩가능하다 <h>등 몇몇의 태그는 부모태그로 분류되며 부모태그는 자식태그보다 먼저 종료돼서는 안된다
빈태크
- <br>
- <img src="">
- <input type="">이런 태그들이 빈 태그이며 이런 태그는 닫을 필요 없고 사용자가 입력하여 출력하는 태그들과는 달리 html내에서 출력되는 태그들을 뜻한다
공백
<h1>Hello, HTML</h1>
<h1>Hello, HTML</h1>
<h1>
Hello,
HTML
</h1>html은 1개의 공백밖에는 인식하지 못하여 공백을 아무리 많이 넣어 텍스트를 입력하더라도 같은 값이 출력된다.
주석
<!--<h1>Hello, HTML</h1>-->
<h1>Hello, HTML</h1>
<h1>
Hello,
HTML
</h1>첫 줄을 주석처리했다.
<!— (내용) —> html의 주석을 사용하는 법이다 자꾸 //로 하게 돼어서 주의해야겠다
기본구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>html의 기본구조이다.
아톰에서는 html을 치면 자동으로 구성된다
- doctype을 선언해줘야 브라우저가 표준언어임을 인식한다
- 해드태그 -기본정보 설정, 자바스크립트 파일을 연결한다
- charaset=문자 인코딩 방식을 선언
- title태그 브라우저 화면 탭에 출력되는 제목
- 바디-실제 화면내용이 출력되는 태그
1주차미션
미션 1
HTML은 <**Hypertext markup Language>**의 약자로 웹을 이루는 가장 기초적인 구성 요소입니다. 웹페이지의 모양을 꾸미는데 쓰는 CSS와 기능,
동작을 구현하는데 쓰는 JavaScript와 함께 쓰입니다.
HTML 요소는 <**태그>**를 사용해서 다른 텍스트와 구분합니다. <**태그>**는 여는 홀화살괄호(<>)로 감쌉니다.
프론트엔드 개발자는 **<html, css, javaScript>**를 사용해 웹을 만듭니다.미션 2
HTML 태그엔 <**속성>**을 추가할 수 있습니다. <**속성>**은 태그에 추가 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있게 해줍니다.
속성은 이름과 값으로 이루어져 있습니다. 속성값은 <**홑따옴표('')>**와 <**쌍따옴표("")>**로 감싸 표현합니다.
한 태그에 여러 속성을 선언할 수 있는데, 여러 속성을 선언할 때는 <공백>으로 구분해서 사용합니다.미션3
<h1>자기소개</h1>
<span>
<br>
안녕하세요. 대한민국에 사는 <strong>이보라입니다.
</br>
</span></strong>위 코드에서 이름에만 진하기를 넣고 제목에서 한줄 띄기한다
수정결과는 아래와 같다
<h1>자기소개</h1>
<br>
안녕하세요. 대한민국에 사는 <strong>이보라</strong>입니다.<br>은 닫는 태그가 필요하지 않는 태그라서
을 삭제하였다<span>은 일단 위 코드에서 구현하고자 하는 내용과는 크게 상관없는 태그이기에 삭제하였다.<strong>태그가 본문 마지막에서 닫혔기에 이름 뒤에 닫는 태그를 넣어주었다.
미션4
naver의 로그인창을 개발자도구로 열어 태그를 살펴본뒤 어떤 태그가 있는지 이야기 해본다.
일단 로그인 태그가 굉장히 길어 head태그와 body태그로 나눠보기로 했다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta property="og:type" content="website">
<meta property="og:title" content="[네이버: 로그인]">
<meta property="og:description" content="안전한 로그인을 위해 주소창의 URL과 자물쇠 마크를 확인하세요!">
<meta property="og:image" content="https://ssl.pstatic.net/sstatic/search/common/og_v3.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="1200">
<title>네이버 : 로그인</title>
<link rel="stylesheet" type="text/css" href="/login/css/global/desktop/w_20220216.css?20210812">
</head>기본언어는 ko 로 설정되어 있으며 UTF-8로 인코딩 되어있다
meta태그가 많이 사용되고 있다.
stylesheet를 불러와 사용중이라는 것을 알수있다.
탭바에 출력되는 타이틀 이름은 네이버:로그인이다
edge와 크롬에 대해 어떤 값이 입력되어있다 엣지와 크롬의 최적화에 대한 코드일것 같다
<body>
<div id="wrap" class="wrap">
<div class="u_skip"><a href="https://www.naver.com">본문 바로가기</a></div>
<header class="header" role="banner" >
<div class="header_inner">
<a href="https://www.naver.com" class="logo">
<h1 class="blind">NAVER</h1>
</a>
<div class="lang" id="show_locale_switch">
<select id="locale_switch" name="locale_switch" title="언어선택" class="sel">
<option value="ko_KR">한국어</option>
<option value="en_US">English</option>
<option value="zh-Hans_CN">中文(简体)</option>
<option value="zh-Hant_TW">中文(台灣)</option>
</select>
</div>
</div>
</header>
<div id="container" class="container">
<!-- content -->
<div class="content">
<div class="login_wrap">
<ul class="menu_wrap" role="tablist">
<li class="menu_item" role="presentation">
<!--[주] 탭메뉴 활성화시(=선택시) "on"을 추가해주세요. 접근성: aria-selected는 탭 선택시 true, 미선택시 false로 적용-->
<!--[주:접근성] 탭메뉴의 id 값과 탭내용의 aria-controls를 연결하고 있습니다. -->
<a href="#none" id="loinid" class="menu_id on" role="tab" aria-selected="true">
<span class="menu_text"><span class="text">ID 로그인</span></span>
</a>
</li>
<li class="menu_item" role="presentation">
<a href="#none" id="ones" class="menu_ones" role="tab" aria-selected="false">
<span class="menu_text"><span class="text">일회용 번호</span></span>
</a>
</li>
<li class="menu_item" role="presentation">
<a href="#none" id="qrcode" class="menu_qr" role="tab" aria-selected="false">
<span class="menu_text"><span class="text">QR코드</span></span>
</a>
<!--넛지배너-->
<div class="nudge_banner" id="nudge_tooltip">
<span class="nudge_text">PC방 등 공용PC라면 QR코드 로그인이 더 안전해요.</span>
<button type="button" id="nudge_close" class="nudge_close"><span
class="icon_nudge_close"></span></button>
</div>
</li>
</ul>
<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="">
<input type="hidden" name="dynamicKey" id="dynamicKey" value="La1Nuz5uNGIO6P-lHSR9QfhYE129neWNbNmNuMmfvGP8NYmERH3uoVJIEMaZdECfOxex1mb7v3sjSv7M0XxCwROpyPydkKovd3UsdYwHjV4">
<input type="hidden" name="encpw" id="encpw" value="">
<input type="hidden" name="enctp" id="enctp" value="1">
<input type="hidden" name="svctype" id="svctype" value="1">
<input type="hidden" name="smart_LEVEL" id="smart_LEVEL" value="1">
<input type="hidden" name="bvsd" id="bvsd" value="">
<input type="hidden" name="encnm" id="encnm" value="">
<input type="hidden" name="locale" id="locale" value="ko_KR">
<input type="hidden" name="url" id="url" value="https://www.naver.com">
<ul class="panel_wrap">
<li class="panel_item" style="display: block;">
<div class="panel_inner" role="tabpanel" aria-controls="loinid">
<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>
<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>
<div class="login_keep_wrap" id="login_keep_wrap">
<div class="keep_check">
<input type="checkbox" id="keep" name="nvlong"
class="input_keep" value="off">
<label for="keep" class="keep_text">로그인 상태 유지</label>
</div>
<div class="ip_check">
<a href="/login/ext/help_ip3.html" target="_blank" id="ipguide" title="IP보안"><span class="ip_text">IP보안</span></a>
<span class="switch">
<input type="checkbox" id="switch"
class="switch_checkbox" value="off">
<label for="switch" class="switch_btn">
<span class="blind" id="switch_blind">OFF</span>
</label>
</span>
</div>
</div>
<div class="login_error_wrap" id="err_capslock" style="display: none;">
<div class="error_message">
<strong>CapsLock</strong>이 켜져 있습니다.
</div>
</div>
<div class="login_error_wrap" id="err_empty_id" style="display: none;">
<div class="error_message">
<strong>아이디</strong>를 입력해 주세요.
</div>
</div>
<div class="login_error_wrap" id="err_empty_pw" style="display: none;">
<div class="error_message">
<strong>비밀번호</strong>를 입력해 주세요.
</div>
</div>
<div class="login_error_wrap" id="err_common" style="display:none;">
<div class="error_message"
style="width:90%">
</div>
</div>
<div class="btn_login_wrap">
<button type="submit" class="btn_login" id="log.login">
<span class="btn_text">로그인</span>
</button>
</div>
</div>
</li>
</ul>
</form>
</div>
<ul class="find_wrap" id="find_wrap">
<li><a target="_blank" href="https://nid.naver.com/user2/api/route?m=routePwInquiry&lang=ko_KR"
class="find_text">비밀번호 찾기</a></li>
<li><a target="_blank" href="https://nid.naver.com/user2/api/route?m=routeIdInquiry&lang=ko_KR"
class="find_text">아이디 찾기</a></li>
<li><a target="_blank" href="https://nid.naver.com/user2/V2Join?m=agree&lang=ko_KR" class="find_text">회원가입</a>
</li>
</ul>
<!--배너-->
<div id="gladbanner" class="banner_wrap">
</div>
</div>
<!-- //content -->
</div>
<!-- footer -->
<div class="footer">
<div class="footer_inner">
<!--[주]고객센터,제휴문의,서비스안내-->
<ul class="footer_link" id="footer_link">
<li><a target="_blank" class="footer_item" href="http://www.naver.com/rules/service.html"
id="fot.agreement"><span class="text">이용약관</span></a></li>
<li><a target="_blank" class="footer_item" href="http://www.naver.com/rules/privacy.html"
id="fot.privacy"><span class="text">개인정보처리방침</span></a></li>
<li><a target="_blank" class="footer_item" href="http://www.naver.com/rules/disclaimer.html"
id="fot.disclaimer"><span class="text">책임의 한계와 법적고지</span></a></li>
<li><a target="_blank" class="footer_item"
href="https://help.naver.com/support/service/main.nhn?serviceNo=532" id="fot.help"><span
class="text">회원정보 고객센터</span></a></li>
</ul>
<div class="footer_copy">
<a id="fot.naver" target="_blank" href="https://www.navercorp.com">
<span class="footer_logo"><span class="blind">네이버</span></span>
</a>
<span class="text">Copyright</span>
<span class="corp">© NAVER Corp.</span>
<span class="text">All Rights Reserved.</span>
</div>
</div>
</div>
</div>
<input type="hidden" id="nclicks_nsc" name="nclicks_nsc" value="nid.login_kr">
<input type="hidden" id="nid_buk" name="nid_buk" value="exist">
<input type="hidden" id="removeLink" name="removeLink" value="">
<input type="hidden" id="hide_util" name="hide_util" value="">
<input type="hidden" id="ncaptchaSplit" name="ncaptchaSplit" value="none">
<input type="hidden" id="id_error_msg" name="id_error_msg" value="<strong>아이디</strong>를 입력해주세요.">
<input type="hidden" id="pw_error_msg" name="pw_error_msg" value="<strong>비밀번호</strong>를 입력해주세요.">
<input type="hidden" id="locale" name="locale" value="ko_KR">
<input type="hidden" id="adult_surl_v2" name="adult_surl_v2" value="">
<input type="hidden" id="ispopup" name="ispopup" value="false">
<script type="text/javascript" src="/login/js/bvsd.1.3.4.min.js"></script>
<script type="text/javascript" async src="https://ssl.pstatic.net/tveta/libs/glad/prod/gfp-core.js"></script>
<script type="text/javascript" src="/login/js/v2/default/common_202201.js?v=20220322"></script>
<script type="text/javascript" src="/login/js/v2/default/default_202105.js?v=20210910"></script>
<div id="nv_stat" style="display:none;">20</div>
</body>id와 class값으로 속성이 중복적용되어있는 코드가 굉장히 많다
특별히 이미지를 불러오는 태그가 보이지 않는다.
스타일시트에서 구성되어있는 이미지를 사용중인게 아닌가 추측된다.
NAVER를 클릭하면 네이버 메인화면으로 갈수있도록 링크가 지정되어있다.
그 밑에는 로그인화면 상단 오른쪽에 보이는 언어선택 리스트가 보인다.
코드만으로는 언어를 선택하면 어떻게 변화하는지 알수 없다, 다른 파일에서 다른언어에 관련된 소스를 가져오는 것으로 보인다.
로그인 창에대한 주석이 적혀있다.
작게 나타나는 1회용로그인에 대한 안내문구 관련 태그도 보인다.
input type이라는 태그가 굉장히 많은데 입력버튼에 관한 태그라고 생각된다.
id/비밀번호 오류시에 볼수있는 메세지가 전부 이 body태그에 작성된 것을 알수 있다.
<!—배너—>부터는 로그인 부분이 아닌 그 밑에 작게 나오는 회사에 대한 설명과 약관 부분을 나타내는 태그라는것을 알수있다.
hello world