새로운 블로그에 다시 정리해 놓은 글이 있습니다.

참고하시면 좋을 것 같습니다!

https://youtaekjung.github.io/2018/05/05/html/HTML-Standard/


새로운 블로그에 다시 정리해 놓은 글이 있습니다.

참고하시면 좋을 것 같습니다!

https://youtaekjung.github.io/2018/04/17/HTML-basic/


HTML이란

HyperText Markup Language

HTML은 웹 페이지를 작성하기 위한 표준 마크업 언어


기본적인 HTML 구성

<!DOCTYPE html> HTML5 정의

<html> 루트 엘리먼트

<head> 문서에 대한 메타정보 포함

<title> 문서의 타이틀 지정

<body> 페이지의 컨텐츠


기본적인 태그의 종류

제목태그 <h1> ~ <h6>

단락태그 <p>

             <pre> 쓴 그대로 반영

링크태그 <a href="주소">

이미지태그<img src="주소" alt="대체 텍스트" width="너비" height="높이">

줄바꿈태그 <br> (닫는태그 없음)

수평선태그 <hr>

스타일태그 <style> 색상,글꼴,배경색 등.. 변경


HTML 속성

언어 선언 속성 <html lang="ko"> 필요한 응용프로그램, 검색엔진에 중요

제목 속성 <p title=""> title 속성 값이 툴팁으로 표시(단락 위에 마우스)

링크 속성 <a href=""> 링크 주소

크기 속성 <img src="주소" alt="대체 텍스트" width="너비" height="높이">

alt 속성 이미지를 표시할 수 없을때 대체 텍스트 지정


HTML 서식

<b> 굵게

<strong> 중요 텍스트

<i> 기울임

<em> 강조

<mark> 하이라이트

<small> 작은 텍스트

<del> 삭제된 텍스트

<ins> 삽입된 텍스트

<sub> 아랫첨자

<sup> 윗첨자


HTML 인용

<q> 따옴표 삽입

<blockquote cite=""> 인용구 삽입

<abbr title=""> 약어 정의

<address> 문서의 연락처 정보 정의 (이탤릭체 표시)

<cite> 작품의 제목 (이탤릭체 표시)

<bdo dir="rtl"> 텍스트 방향 재정의 


HTML 컴퓨터 코드

<kba> 키보드 입력 정의

<samp> 샘플 출력 정의

<code> 코드의 일부 정의 <pre>코드와 같이 사용

<var> 변수 정의


HTML 주석

<!-- -->

조건부 댓글

<!-- [if IE 9]> <![endif]-->


HTML 색상

rgb(255,255,255) or 16진법 #FFFFFF


HTML 링크

링크 전체 작성 or 로컬 링크 작성

로컬링크란 동일한 웹 사이트에서 상대url 지정 ex)html_images.asp


타겟 속성

<a href="" target="_blank">

_blank 새창이나 탭에서 문서 열기

_self 같은 창/탭에 문서 열기 (기본값)

_parent 부모 프레임에서 문서 열기

_top 윈도우 전체에 열기

 framename 명명된 프레임에 문서 열기

링크로 이미지를 사용하는게 일반적임

하이퍼링크 밑줄 없애기 text-decoration:none 설정


책갈피 만들기

id값을 준 뒤 <a href="#id">로 추가


HTML 이미지

<img src="주소" alt="대체텍스트" style="스타일">

닫는태그 x

항상 이미지 폭,높이 지정/미지정시 이미지 로드시 페이지 깜빡임

스타일 속성을 직접 사용하는것이 좋음

<a>태그를 사용해 이미지에 링크 사용

border:0; 속성은 IE9 이전을 위해 추가

이미지맵 <map>태그 사용

ex)

<img src="abc.gif" alt="abc" usemap="#abcmap" style="width:145px;height:126px;">

<map name="abcmap">
  <area shape="rect" coords="0,0,52,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="60,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>


HTML 테이블

<tr> 테이블 정의

<th> 테이블 헤더 정의

<td> 테이블 데이터 정의 (text,img,list 등등 HTML모든 요소 포함 가능)

<caption> 캡션 추가시 사용

<colgroup>,<col>열 그룹 지정/ <caption> 뒤 <tr> 전에 지정해야함

<thead>,<tbody>,<tfoot> 테이블을 부분화함

테두리 설정시 table, th, td 모두에 정의해야함

축소 테두리 사용시 border-collapse: collapse; 사용

간격 사용시 padding 사용

정렬시 text-align 사용

테이블 간격 사용시 border-spacing 사용

열 병합시 <th colspan="2"> 사용

행 병합시 <th rowspan="2"> 사용


HTML 리스트

<ul> 정렬되지 않은 리스트 style="list-style-type:~"

style - disc(기본값),circle,square,none

<ol> 정렬된 리스트 type="~"

type - 1(기본값),A,a,I,i

Description List

<dl> 목록, <dt> 용어(이름), <dd> 설명


HTML 블록,인라인

블록-<div>,<hi>,<p>,<form>

인라인-<span>,<a>,<img>

<div> 다른 element의 container로 사용, style,class가 일반적

<span> text의 container로 사용, style,class가 일반적

div class는 .class명으로 스타일 설정


HTML iframe

웹 페이지 내에 웹 페이지를 표시하기 위해 사용

<iframe src="url" height="~' width="~"></iframe>

style="border:none;" 테두리 제거

링크사용시 iframe에 name값을주고 a태그로 target지정

ex)<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="~" target="iframe_a">babo</a></p>


HTML JavaScript

JS로 HTML요소 선택시 document.getElementById(ID) 사용

.innerHTML로 내용변경

.style.fontSize="10px";로 스타일변경

<nonscript> 스크립트를 지원하지 않는 브라우저를 위한 대체 컨텐츠


HTML <head>

<title> <style> <link> <script> 포함

<meta charset="UTF-8">사용 문자 집합 정의

<meta name="정의" content="설명">

<meta http-equiv="refresh" content="30"> 30초마다 새로고침

<base> 모든 상대 url의 기본 url과 베이스 대상 지정


HTML 레이아웃

HTML5 시맨틱 요소


HTML <form>

<input type="~"> text/한줄의 텍스트 radio/선택버튼 submit/제출버튼 name속성 생략시 데이터 전송 x

<form action="양식 데이터를 처리하는서버,미지정시 현재페이지">

method 속성 get,post

get-크기제한, 짧은양 적합, 중요한정보 x

post-크기제한x 대용량 데이터, 중요한 정보

<fieldset> 그룹 관련 데이터에 사용

<legend> <fieldset> 캡션 정의


HTML 폼 양식

*<input> 여러 방법으로 표현 가능

*<select name="~"> 선택 옵션

 <option value="~" selected></option> selected속성-미리 선택

 </select>

*<textarea name="~" rows="~" cols="~"> 텍스트 영역 cols폭 rows 높이

*<button type="button"  onclick="alert('Hello world!')">button</button> 클릭버튼

*<datalist> <input>안에 들어가며 datalist의 id값과 input의 list 값이 같아야함

*<keygen name="security"> 사용자를 인증하는 보안방법 제공/ 클라이언트 인증서 생성시 사용가능

*<output> 계산결과를 보여줌


HTML 입력 유형

<input type="text"> 한줄의 텍스트필드

password 별표or원으로 표시

submit 입력처리,제출/ value를 생략하면 버튼생김

reset 초기화

radio 선택버튼

checkbox 체크박스

button 버튼 <input type="button" value="Click ME" onClick='alert('Hello World!')>

color 색상 선택기 표시,선택

date min,max로 날짜 설정

datetime

datetime-local 날짜,시간 선택

email 이메일 형식 입력 일부 스마트폰은 키보드에 .com추가

month 달 선택

week 주 선택

number min,max설정후 숫자 입력필드표시, step은 배수설정

range min,max로 조절

search 검색기능

tel 전화번호포함 (사파리8지원)

time 시간 선택

url url입력, 일부 스마트폰은 키보드에 .com추가


HTML 입력 특성

value로 초기값 지정

readonly 읽기전용,수정불가

disabled 비활성화 필드

size="10" 크기

maxlength="10"  최대길이

autocomplete="on" 자동완성 사용자가 이전에 입력한 값에 기초해 완료<form>의<input>에서 작동

novalidate  ??

autofocus 자동커서

form id값을주고 form 밖에서 같은값을 form속성으로 달면 form안의 내용으로 인식


*제출(submit, image)에 사용

formaction  form의 action을 무시하고 formaction으로 

formenctype 인코딩 방법 지정

formmethod <form>의 method무시

formnovalidate <novalidate> 무시

formtarget 


pattern 이메일,비밀번호 등 패턴을 설명

require 필수입력사항

step 단계속성, 숫자,범위,날짜 등 에 사용

HTML5에서의 시맨틱 웹과 시맨틱 태그(Semantic Web, Semantic tag)

시맨틱 웹이란?

구글에 검색했을때 위키백과에 나오는 내용을 그대로 적어보면 아래와 같다.

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,

현재의 인터넷과 같은 분산환경에서 리소스에 대한 정보와 자원 사이의 관계의미 정보를 기계가 처리할 수 있는 온톨로지 형태로 표현하고,

이를 컴퓨터가 처리하도록 하는 프레임워크이자 기술이다.

웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.

쉽게 생각하면 첫 줄만 읽으면 된다.

의미론적인 웹은 말 그대로 컴퓨터가 웹사이트를 단순한 코드의 구성이 아닌 의미를 가진 사이트라는걸 알 수 있게 만드는 것이다.

시맨틱 웹의 이상향은, 인터넷에 방대한 양의 데이터를 컴퓨터가 자동으로 해석해 사용자가 원하는 결과값을 정확히 주는 것이다.

여기까지 읽었을 땐 단순히 검색엔진 성능 향상에만 유용하게 쓰일 것 같지만, 찾아보니 암 치료 증진에도 기여할 수 있고, 석유가스 산업에도 응용될 수 있으며, 이외에도 많은 기업에서 사용할 수도 있다고 한다.(어떻게 이런 결과가 도출된건지는 잘모르겠다ㅋㅋ)

크게 생각 했을때 데이터들을 관리하고 통합하는 것이기 때문에 위와 같은 기대를 하는 것 같다.

HTML5에서의 시맨틱 웹

HTML5 이전까지는 시맨틱 태그라는 것이 없었다.

그 때의 대부분의 태그는 <div>로 감싸져 있었을텐데,

개발자의 입장에서는 코드로 사이트 전체 구조를 한눈에 파악하기 힘들었을 것이고, 검색 엔진은 사이트의 의미를 정확히 파악하지 못해 검색 결과값의 정확도가 떨어졌을 것이다.

그래서 나온 대안이 시맨틱 웹이고, 그에 따라서 HTML5에서 시맨틱 태그(Semantic tag)라는 것이 나온 것이다.

예를 들어 설명하면

기존에는 <div class="header">헤더입니다</div> 이렇게 썼던걸,

<header>헤더입니다</header> 이런식으로 쓰는 것이다.

<div>태그, <header>태그 둘 다 구역을 나눌 때 쓰는 껍데기 태그인데 둘의 차이는 의미를 가지고 있는지의 차이이다.

태그 이름 그대로 헤더부분을 <header>태그로 감싸는 것이다.

위와같이 div를 대체할 수 있는 태그로 header, nav, article, section, aside, footer가 나왔고, 각각 의미에 맞게 사용하면 된다.

위 태그들은 HTML5 이전에 div태그에서 클래스 명으로 많이 쓰던 것들을 토대로 만들었다고 한다.

결론

안써도 겉으로 보이기엔 똑같지만 검색 엔진 최적화(SEO)에서 중요한 역할을 하기 때문에 검색결과에서 상단을 차지하고 싶다면, 쓰는것을 습관화 하는 것이 좋다.

끝!

2/159

마크업 개발 레벨 테스트

서핑중에 흥미로운 테스트가 있어 해보고, 가져왔음
나름 마크업을 할줄 안다고 생각했는데, 처참히 발렸다..

프론트를 주력으로 하고있다면 아래의 링크로 가서 한번쯤 테스트 해보면 좋을 것 같음

마크업 테스트 출처
답안 참조

위 : 작성한 답
아래 : 검색 결과 (없을 시 답이 맞은것)

HTML

  1. Doctype을 사용하지 않을 때는 무슨 일이 발생할까요?

    HTML5이전 버전으로 렌더링되어 레이아웃이 깨짐

    웹이 quirks mode로 작동해 구형 브라우저에서 동작하던 것과 같이 동작함

  2. 웹표준에 맞게 작업할 때 b, i 태그 대신 적합한 태그는 각각 무엇일까요?

    <strong>, ?

    <strong>, <em>

    <b>,<i>는 표준에 맞지 않는것을 알고 있어서 사용을 안좋아했는데 <em>을 처음 알고 표준에 맞다는 사실도 알았음

  3. block 요소와 inline 요소에 해당하는 태그들을 각각 5개씩 적어보세요.

    div, p, a, h1, nav… / span, strong, li…

    블록 : div, p, h1~h6, ul, li…
    인라인 : a, img, span, select, td…

    몇개 잘못알고있었다.

  4. blockquote 태그는 어떤 용도로 사용해야 할까요?

    인용구 사용시

  5. 인라인 스타일(style=“property:value”)을 가급적 사용하지 말아야 할 이유는 무엇일까요?

    유지보수가 힘들어짐

    구조와 표현의 분리를 위함

  6. myPhoto.jpg 파일을 img 태그로 작성해보세요.

    <img src="myPhoto.jpg" alt="myPhoto">

  7. HTML에서 id 속성을 사용하는 이유와 주의 할 점은 무엇일까요?

    태그에 고유 id를 붙여 스타일링할때, class보다 우선순위로 적용되는 부분을 주의해야함

    페이지 당 한번만 써야함 / 알고있었지만 기억이 안났음

  8. ‘TopArea’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?

    script단과 맞춰주려면 kebab-case로 작성해야해야함

    Top이라는 방향성을 가지고 있어서, 접근성 차원에서도 방향은 의미가 없음

  9. ‘blue-box’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?

    음..클래스 이름이 의미하는것이 분명하지 않은 것 같다.

    색상이 CSS에서 변경될 수 있음

  10. HTML5에 새롭게 추가된 aside 태그는 어떤 용도로 사용해야 할까요?

    이름그대로 사이드에있는 nav라고 이해하고 있음

    컨텐츠의 주요 내용이 아니고 부수적인 내용일 때

  11. input 태그와 항상 함께 사용해야 할 태그는 무엇일까요?

    <button>

    <label>

    꼭 필요한건지 몰랐는데 처음 알았다

  12. 모바일 웹 또는 반응형웹디자인 프로젝트에서 각 기기에 적합한 화면을 보여주기 위해 필요한 meta 태그는 무엇일까요?

    device ~~ 속성을 썼는데 정확히는 모르겠다

    <meta name="viewport" content="width=device-width">

    보니까 알것같다

CSS

  1. 화면 상에는 보이지 않으나, 스크린 리더에서 읽혀야 하는 요소에 주어야 할 스타일링을 작성해보세요.

    img alt속성, html lang속성, 태그의 name속성 밖에 모르겠다

    IR기법이라 부르며 display: nonez-index는 잘못된 방법임. text-indentz-index를 활용

    처음봄. 자세히 알아봐야 할 필요가 있음

  2. float 속성을 가진 자식을 품은 부모요소는 높이 값이 0이 되는 때가 있습니다. 이 현상을 해소하는법(clearing)을 알고 있나요?

    부모요소:after에 content: ''; display: table; clear: both 적용

  3. border-box와 content-box의 차이점은 무엇일까요?

    width, heigth 기준(box-sizing)을 border와 content로 지정

  4. position: relative는 어떤 경우에 사용 하나요?

    부모요소를 기준으로 요소를 배치하고 싶을 때

    좌표를 재정의할 때

  5. CSS Reset은 무엇이며 왜 사용할까요?

    리셋하지 않으면 기본적으로 태그가 가진 속성이 스타일링에 포함되어 레이아웃이 뭉개질 수 있음

    크로스 브라우징(브라우저마다 약간씩 차이가 있으므로)

  6. Sass, less, Stylus와 같은 CSS 프리프로세서를 사용해본적이 있나요?

    Sass 공부중

  7. id, class, inline style, !important를 우선순위 순으로 나열해보세요.

    !important, inline, id, class

  8. CSS에서 상속이 되는 속성을 2개만 꼽아보세요.

    width, height? 잘모르겠다

    color, size가 상속

  9. Sprite image 기법을 사용하는 이유는 무엇일까요?

    처음 들어봤다

    로딩 속도 감소, 서버로의 요청 횟수 최소화
    이미지를 한개의 파일로 합쳐 background-image로 적용 후에 해당 이미지 위치에 레이아웃을 배치하는 방법, 자동화 툴도 존재함

    이것역시 공부해야 함

  10. Sprite image 기법을 사용하는데 필요한 CSS 속성들을 꼽아보세요.

    역시 모른다

    background-position

  11. 점진적 향상(Progressive Enhancement)의 뜻을 설명 할 수 있나요?

    이것도 모른다..3연속 blank..

    내용이 길어 다른 링크로 첨부

  12. 웹폰트를 적용하기 위해서는 어떤 확장자의 폰트 파일들이 필요할까요?

    ttc, ttf

    ttf,eot,svg 왼쪽 두개만 있어도 대부분 지원된다고 한다

  13. 개발사 접두어(vendor prefix)를 꼭 사용해야 할 CSS 속성(property)를 2개만 꼽아보세요.

    잘 모르겠다

    앞에 webkit(크롬,사파리), moz(파폭), o(오페라), ms(IE) 등이 붙는것

  14. 반응형웹디자인의 3가지 요소를 꼽아보세요.

    grid, …

    Media Query, Flexible Image, Fluid Grid

  15. 모바일기기를 대응할 때 기준으로 삼는 해상도 사이즈는 몇이며 그 이유는 무엇인가요?

    560px..? 잘 모르겠다

    320px!

  16. :first-child와 :last-child가 지원하는 IE의 버전명을 적어보세요.

    모르겠다

    7, 9(first-child로 예외처리를 많이 한다고 함)

  17. 포토샵(또는 다른 그래픽툴)에서 이미지를 자를 때 어떤 기능을 사용하나요? (메뉴명, 단축키 등)

    ?

    cmd + t

  18. jpg, gif, png의 차이점을 설명해보세요.

    png가 화질이 짱이다(주륵)

    jpg: 손실 압축, 용량을 줄임, 가장 널리 쓰임
    png: 비손실 압축, 투명 가능
    gif: 비손실 압축, 움직이는 이미지 제작 가능

  19. 가상컨텐츠(:before, :after)는 어떤 용도로 사용할까요?

    clearfix시 사용하기도 하고, 버튼으로 토글시에 사용함

  20. 블럭요소 안의 어떤 자식 요소를 정중앙에 놓는 방법을 알고 있습니까?

    부모요소에 position: absolute, 자식요소에 position: relative; top: 50%; left: 50%; 맞나..

    그냥 flexbox 쓰는게 짱인것 같다.

후기

모르는걸 많이 배운 것 같다. CSS는 진짜 알다가도 모르겠다

Graceful Degration 과 Progressive Enhancement

포스팅 참고 출처

Graceful Degration

우아한 낮춤? 적절한 퇴보 등으로 해석되며, 최신 기술 기반 또는 기기에서 동작하는 기능을 만들고 나서 오래된 기술 기반 혹은 기기에서도 유사한 성능으로 동작하도록 조치하는것

예를들어 자바스크립트가 동작하지 않는 브라우저에서 접속 했을 때 “자바스크립트를 지원하는 브라우저를 사용하거나, 자바스크립트를 활성화해주세요”같은 메세지를 띄우는 것이다.

이는 자바스크립트를 모르는 사람에게 어리둥절을 선사하는 방법이다
이와 반대하는 개념이 Progressive Enhancement!

Progressive Enhancement

점진적 향상이라 부르며, 말 그대로 가장 기초적인 기술을 기반으로 점차 향상시키는 방법이다.

웹을 예시로 들면 HTML로 마크업 후, CSS효과를 주고, JS를 적용시키는 단계로 구성하는 것이다.

정리

요즘 시대에서 Progressive Enhancement로 웹을 구성하기는 Graceful Degration과 비교해서는 시간과 노력을 훨씬 더 필요로 하는 매우 비효율적인 일이지만,

웹을 구성함에 있어 잊으면 안되는 원칙 “Web for All”을 생각한다면 충분히 가치가 있는 방법이라고 생각한다.

+ Recent posts