웹 개발과 HTML & CSS & JavaScript
HTML은 구조를 만드는 마크업 언어, CSS는 스타일을 담당하는 디자인 언어, JavaScript는 각 요소에 생명(상호작용)을 부여하는 역할을 담당한다.
웹 사이트의 구조를 만든는 것 = HTML
웹 사이트의 구조에 스타일을 입히는 것 = CSS
웹 사이트에 기능적인 부분을 담당하는 것 =JavaScript
HTML 기초 개요
HTML은 HyperText Markup Language 약자로, 웹 페이지의 틀을 만드는 마크업 언어이다. HTML 은 tag들의 집합으로 되어있다. 여기서 tag란, 부등호(<>)로 묶인 HTML의 기본 구성 요소를 말한다.
<html>
<head>
<title> 제목 </title>
</head>
</html>Self closeing Tag
태그 내부에 내용이 없으면 이와 같이 표현 가능하다.
<tag></tag> -> <tag/>
✔ HTML 기초 문법
div
div는 한 줄을 차지한다.
span
span 태그는 컨텐츠 크기의 공간을 차지한다.
img
이미지 삽입할 때 사용하고 src 속성에 이미지의 경로를 넣어준다. 닫는 태그가 없다는 특징이 있다.
a
링크 삽입할 때 사용하고 href 와 target 속성이 있다.
ul, li, ol
리스트 형식이 필요할 때 사용한다.
- ul : 앞에 검정색 도트가 표시
- ol : 앞에 숫자가 표시
- li : 리스트를 표시
<ul>
<li>사과</li>
<li>바나나</li>
<ol>
<li>사과</li>
</ol>
</ul>input, textarea
type을 변경하여 다양한 기능 사용 가능하다.
- text
- password
- radio
- checkbox
checkbox 와 radio 차이
radio 는 여러개 중 하나만 선택 가능 (name 속성을 이용해 그룹해야함 ! )
checkbox 여러개 중 선택 가능
button
버튼 필요할 때 사용한다.
<button > 저장 </button>
✔ 시맨틱 요소란?
HTML의 최신 버전인 HTML5에서는 시맨틱 웹이 중시되면서 여러 시맨틱 요소가 새롭게 만들어졌다. 시맨틱은 '의미가 있는' '의미론적인'이라고 해석할 수 있다. 즉, 스스로 브라우저와 개발자에게 사용된 의미를 명확히 전달해주는 요소를 의미한다.
시맨틱 요소의 장점
-
검색 효율성
검색 엔진은 웹페이지들을 방문할 때, 시맨틱 요소를 중요한 키워드로 고려하기 때문에 시맨틱 요소에 담긴 의미에 따라 검색 결과의 상위 노출이 결정된다. -
개발자간 소통 용이
여러 명의 개발자가 동업 시, div 요소를 탐색하는 것 보다 의미 있는 코드 블록을 찾는 것이 편리하며, 요소 안에 채워질 데이터 유형을 예측하기 쉽다. -
웹 접근성 향상
모든 환경과 사용자를 떠나, 항상 동일한 수준의 정보를 제공할 수 있어야하는데 시맨틱 요소를 사용하여 작성했다면 화면의 구조에 대한 정보를 전달할 수 있기 때문에 더욱 정확한 콘텐츠를 전달할 수 있다.
시맨틱 요소의 종류
<article>: 독립적이고 자체 포함된 콘텐츠를 지정함<aside>: 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소<footer>: 일반적으로 페이지나 해당 파트 가장 아래의 위치함<header>: 일반적으로 페이지나 해당 섹션 가장 위에 위치함<nav>: 내비게이션(navigatio) 약자로, 일반적으로 상단바 등 사이트를 안내할 때 사용<main>: 문서의 주된 콘텐츠를 표시
id / class
id : 고유한 이름을 붙일 때 사용
class : 복되는 영역을 유형별로 분류할 때 사용, 하나의 태그에 class를 여러개 작성해주고 싶을 땐 하나의 문자열 안에서 띄어쓰기로 구분
<div id="writing-section">
<li class="comment">
