웹 제작시 고려 사항
- 웹 표준 : 웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격
- 웹 접근성 : 장애의 여부와 상관없이 모두가 웹 사이트를 이용할 수 있게 하는 방식
- 크로스 브라우징 : 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법
HTML 기본 태그 정리
<img> 태그 : 정보성을 갖고 있는 이미지를 삽입
<img src=”logo.png” alt=”회사로고”>- src 속성 : 삽입할 이미지 파일 경로 width 혹은 height 속성을 이용해 크기 지정 가능
- alt 속성 : 웹사이트가 이미지를 출력하지 못했을 경우, 텍스트 정보로 대체
- 닫힌 태그 없이도 작성이 가능한 Self-Closing 태그
- 이미지에 마우스를 올렸을 때 표시할 텍스트를 title 속성으로 지정할 수 있으며 위 화면의 두 번째 이미지처럼 이미지를 정상적으로 불러오지 못했을 때 alt 속성을 이용해 대체할 텍스트를 지정할 수 있음.
<h> 태그 : heading 의 약자로 제목이나 부제목을 표현
<h1>Hello Wolrd</h1>
<h2>Hello Wolrd</h2>
<h3>Hello Wolrd</h3>- 숫자가 클수록 폰트 사이즈가 작음. 즉 숫자는 정보의 중요도를 나타냄
<h1>태그는 가장 중요한 정보를 담으므로, 하나의 html 문서에서 한번만 사용됨 (ex:네이버,다음)
<p> 태그 : paragraph 의 약자로 본문 내용을 표현
<p>Nice to meet you</p>- 제목뿐만 아니라 단락을 지정할 수 있는
<p>태그 - 태그 사용 시 문단의 앞뒤로 여백이 추가 됨
<a> 태그 : 하이퍼링크를 걸어주는 태그
- href: 클릭시 이동 할 링크
- target: 링크를 여는 방법
<a href="http://www.naver.com">Go NAVER</a>ul 태그 : unordered list의 약자로 순서가 없는 리스트를 생성
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul><ol> 태그 : ordered list 의 약자로 순서가 있는 리스트를 생성
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul><input> 태그
- 웹 사이트에서 로그인과 같이 사용자의 정보 입력이 필요할 경우 사용
<input>태그 또한 Self-Closing 태그이며 입력받는 정보가 어떤 것인지에 따라 type을 할 수 있음.- 사용자에게 어떤 정보를 입력해야 하는지 힌트를 주고 싶다면 placeholder 속성을 사용할 수 있음. 이 속성에 텍스트를 지정하면 사용자가 해당 태그를 클릭하기 전까지 해당 텍스트가 표시 됨.
<button> 태그
- 사용자가 클릭할 수 있는 버튼이 필요할 경우
<input type="button" />혹은<button>태그를 사용할 수 있음 <button>태그는 열린 태그와 닫힌 태그로 이루어져 있기 때문에 태그 사이에 컨텐츠를 포함해 시각적인 효과를 줄 수 있음.
<form> 태그 : 웹 페이지에서의 입력 양식을 의미?(로그인 창, 회원가입 폼)
<form>태그는 전체 양식을 의미하며, 화면에 보이지 않는 추상적인 태그- type 속성을 통해 종류를 나타내며, name을 통해 데이터의 이름, value를 통해 기본 값을 지정
text: 일반 문자
password: 비밀번호
button: 버튼
submit: 양식 제출용 버튼
reset: 양식 초기화용 버튼
radio: 한개만 선택할 수 있는 컴포넌트
checkbox: 다수를 선택할 수 있는 컴포넌트
file: 파일 업로드
hidden: 사용자에게 보이지 않는 숨은 요소<div> 태그 : 페이지의 영역을 분리 (division)할 떄는 <div> 를 사용
<span> 태그 : 텍스트와 같이 줄 바꿈없이 한 줄로 나열되는 인라인 요소들을 나타낼 때 사용
<br> 태그 : 기본적으로 HTML은 코드 가독성 향상을 위해 줄 바꿈을 해도 줄 바꿈이 화면에 출력되지 않고 한줄로 연이어 나오는데 줄 바꿈을 하려면 직접 줄 바꿈을 한다는 명령을 적어주어야 하며 <br> 태그를 통하여 줄바꿈을 실행
<strong> 태그 : font-weight 값을 bold로 설정하는 효과
시맨틱 태그
웹의 레이아웃이 점점 다양해지면서 영역을 구분하여 코드를 작성하는 것이 중요하게 되어서 HTML5 버전부터
, 와 같이 태그 자체에 의미를 담은 여러 가지 시맨틱 태그들이 등장.시맨틱 태그를 사용하면 브라우저 검색 시, 문서 구조를 보다 정확히 분석할 수 있기 때문에 알맞은 검색 결과를 찾도록 유도할 수 있음.
개발자 또한 코드를 더욱 직관적으로 이해할 수 있기 때문에 유지보수하기 쉬워짐.
<section>태그 : 한 영역 안에서 구분이 필요한 경우 <div> 대신 사용
웹 사이트의 목차 담당
<heaer> , <nav> 태그
<header>
<nav>
...
</nav>
</header><header> 태그 : 웹 사이트의 머리글을 담는 공간
<nav> 태그 : 메뉴 버튼을 담는 공간(navigation)으로 <ul>``<li>``<a> 태그와 함께 자주 사용 됨
<h1> 가장 중요한 정보
<a> 로고를 클릭하면 이동 함
<ul> 메뉴 버튼은 순서를 가지지 않음
웹 사이트의 본문을 담당
<main>, <article> 태그
<main role=”main”>
<article>
<h#></#h>
...
</article>
</main><main>태그 : 문서의 주요 내용을 담는 태그(internet Explorer는 지원하지 않으므로 role=”main” 속성 필수 입력
<article> 태그 : 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그로, 태그 내 구역을 대표하는 타이틀 <#h> 태그가 존재 해야함
웹 사이트의 부록을 담당
<footer> 태그
<footer>
<!-- 하단 영역 -->
<div>
<!-- 최형욱 정보 -->
<p>주소: 서울 서울 서울</p>
<p>이메일: contact@elice.io</p>
</div>
<div>
<!-- 전자상거래소비자보호법 필수 정보 -->
<p>사업자 등록번호: 000-00-00000 | 대표: 최형욱</p>
<p>통신판매업신고번호: 제0000-성북구-0000호</p>
</div>
</footer><footer>태그 : 가장 하단에 들어가는 정보를 표기할 때 사용<div>태그: 임의의 공간을 만들 때 사용
