# 1. HTML attribute
1) Img
<img width="300px" src="https://cdn.pixabay.com/photo/2020/07/06/01/33/forest-5375005_1280.jpg" alt="forest picture"/>
alt(alternative) = 이미지가 렌더링 되지 않을 경우 보여지는 대체 텍스트
2) Ancher
<a href="#contact" target="_blank">Hi, I'm charlie</a> <div id="contact"> <p>email: jun@blog.com | phone: 555-1098</p> </div>
<a> 태그를 사용해 특정 위치로 이동하는 방법은 2가지가 있다.
첫 번째, id값을 활용하는 방식
두 번째, name값을 활용하는 방식
3) Section, Article, Div
<section class="content"> <article class="human">a블로그 글 1</article> <secton>뚱뚱한 사람</section> <secton>마른 사람</section> <article>a블로그 글 2</article> <article>a블로그 글 3</article> </section> <div class="contact"> E-Mail: jun@blog.com </div>
<section>, <article>, <div>는 문서의 구조를 형성하는 태그다.
독립적인 하나의 내용에는 <article>,
내용이 서로 관계가 있다면 <section>,
의미적으로 관련이 없다면 <div>를 사용한다.
목적에 맞는 <tag>의 사용은 검색엔진최적화(SEO)에 도움이 된다.
4) Form validation
<body> <h1>Sign Up</h1> <p>Create an account</p> <form action="submission.html" method="post"> <label for="username">- Username</label> <br> <input id="username" name="username" type="text" required pattern="[a-zA-Z0-9]+" minlength="3" maxlength="15"> <br> <label for="pw">- Password</label> <br> <input id="pw" name="pw" type="password" required minlength="8" maxlength="15"> <br> <input type="submit" value="Submit"> </form> </body>
Sign Up
Create an account
Username
Password
*벨로그에서는 maxlength가 적용이 되지 않는 듯하다.
validation은 2가지 종류가 있다. 데이터가 서버에 전송되고, 데이터베이스에 저장되기 전 단계에서 유효성 검사를 하는 server-side validation과 데이터가 서버에 전송되기 전에 브라우저에서 유효성 검사를 하는 client-side validation.
ex) ID에 특수문자를 사용하지 말라는 에러는 즉각적으로 피드백이 나타나지만 (client-side validation), ID에 맞지 않는 PW를 입력하면 서버에서 유효성 검사가 이루어지므로 피드백에 시간이 걸린다. (server-side validation)
'[a-zA-Z0-9]+'는 정규표현식 중 하나로, 영어와 숫자만 허용한다는 의미다.
매일 하루에 딱 한 걸음만