HTML - QA 1
HTML Q & A 1
1. <br> vs <br/>
<br> 태그 : HTML5 에서는 <br> 태그가 정석.
<br/> 태그 : *XHTML에서는 공백이 붙은 <br />이 정석이고, <br> 또는 <br/>이 일부 허용.
1.5. HTML vs XHTML
HTML : HTML5
XHTML(Extensible Hypertext Markup Language):HTML4를 XML에 맞게 재정의한 언어. HTML과 동등한 표현 능력을 지닌 마크업 언어로, HTML보다 엄격한 문법을 가짐. 이런 엄격함으로 인해 보다 다양한 브라우저에서 정확하게 문서가 표시 가능. HTML과 XHTML은 별개의 분리된 표준.
[XHTML 특징]
종료태그가 반드시 있어야 한다.(ex:<p></p>) HTML 은 종료태그가 없는 것을 허용(ex:<p>)
잘못된 중첩을 허용하지 않는다. HTML 은 태그가 잘못 중첩되어도 화면표시(렌더링)에 별 영향을 미치지 않았지만 XHTML의 경우 잘못된 중첩은 화면표시(렌더링)에 직접적인 영향을 주기도 함.
요소(element)와 속성(Attribute)은 소문자로 표기 HTML은 요소와 속성에 대소문자를 함께 사용하는 것을 허용하였으나 XHTML은 요소와 속성들을 반드시 소문자로 표기. xml이 대소문자를 구별하기 때문. HTML에서는 대소문자의 구별이 없음.
속성(Attribute) ‘값(value)’들은 항상 따옴표로 감싸주어야 합니다. HTML 의 경우 속성 값들을 따옴표로 감싸지 않는 것을 허용하였지만 XHTML 에서는 반드시 속성값은 따옴표 안에 있어야 한다. ex : <p align=center>로 하면 안되고 <p align=”center”>와 같이 반드시 따옴표를 사용해야 합니다.
속성(Attribute)과 값(Value)의 단축표기를 허용하지 않는다. HTML 에서는 속성과 속성 값의 단축표기를 허용하였으나 XHTML 에서는 단축표기 하는 것을 허용하지 않습니다. ex: <input checked> 는 <input checked=”checked”> 와 같이 사용
비어있는 태그(종료태그가 없는 태그)도 종료 되어야 한다. HTML 에서 <br>, <hr> 과 같이 콘텐트를 담지 않는 빈 태그들은 <br />, <hr /> 과 같이 표기하여 시작태그에서 곧 종료됨을 표기해 주어야 한다.
2. <strong> vs <b/>, <em> vs <i/>
<strong>, <em>: 스크린리더에서 강조하기 위해. 브라우저에 코들르 더 잘 전달. 최적화? <b>,<i>: 스크린 리더랑 무관.
*스크린 리더(screen reader):시각 장애인을 위한 컴퓨터의 화면 낭독 소프트웨어.
3.alt(ALTernative)
HTML의 <img> 태그에서 쓰이는 alt 속성은 그림이 렌더링되지 못할 때 나타날 문자열을 지정하기 위한 값이다.
<img src="이미지 주소" alt="이미지 설명">
[alt 사용 이유]
이미지 주소가 연결되지 않거나, 인터넷 연결 속도나 품질이 낮다든지 화면이 제한적인 이동형 장비에서 이미지를 내려받지 않고 문자열만 보여주기 위해 사용.
텍스트 전용 웹 브라우저(lynx, w3m 등)에서 사용.
최적화 : 수많은 검색 엔진은 이미지에 대한 정보를 alt 속성을 읽어서 얻는다.
시각장애인 등을 위해 문서의 내용을 목소리로 변환해 주는 음성 합성 기술을 이용한 스크린 리더(또는 Text-to-speech) 소프트웨어에서 사용.
4.rel(RELation)
<link rel=”stylesheet” href=”style.css”>
link 태그에 사용 되며, 현재 페이지와 어떤 관계를 갖는지를 설명하는 attribute(속성)이다.
검색 엔진이 링크에 대한 더 많은 정보를 수집할 때 사용이 되어 사용자에게 더 정확한 검색 결과를 주는데 사용된다. 즉, SEO에 영향을 미친다는 뜻.
- rel에 들어가는 속성(Attribute) 값(Value) :
- https://www.w3schools.com/tags/att_link_rel.asp (영문)
- http://tcpschool.com/html-tag-attrs/link-rel (한글)
- 한가지 속성 값으로 링크 태그를 설명하기 어려울 때는 여러가지 속성 값을 줄 수도 있는데 이때는 띄어쓰기 사용 ex) rel=”alternate external”
5. href vs src
href(Hypertext REFerence) : 링크로 연결(이동). 해당 페이지의 특정 리소스에 연결하는 데 사용됩니다.
<link rel="stylesheet" href="style.css">
<a href="이미지 링크">
src(SouRCe): 경로를 통해 받아오는 것. 해당 리소스를 페이지에 추가하는 데 사용
<script src="경로(app.js)"></script>
<img src="이미지 주소" alt="이미지 설명">
6. method GET vs POST
method : <form> 태그의 속성(attribute)인 method는 폼 데이터(form data)가 서버로 제출될 때 사용되는 HTTP 메소드를 명시합니다. method 속성(attribute)의 값(Value)로는 GET과 POST 두 가지 중 하나를 선택할 수 있습니다.
<form method:"GET" 또는 "POST">
*HTTP 메소드 : 클라이언트와 서버 사이에 이루어지는 요청(Request)과 응답(Response) 데이터를 전송하는 방식. 쉽게 말하면 서버에 요청을 보내는 방법.
GET :데이터가 노출되기 때문에 보안에 취약 하며, 개인정보가 포함되지 않는 상황에서 캐싱을 하여 페이지 로딩 속도를 높일 때 사용.
POST : BODY에 데이터를 넣어 전송하며 길이의 제한이 없다. 따라서 GET과 다르게 대용량 데이터를 전송 할 수 있으며, BODY에 전송되어 내용이 눈에 보이지 않아 보안적으로 조금 더 안전 하다고 할 수 있다. 하지만 POST요청도 크롬 개발자 도구같은 툴로 요청내용을 확인할 수 있기 때문에 민감한 데이터는 반드시 암호화 하여 전달해야 한다.
