HTML & CSS & JS
웹 개발에서
HTML 은 웹페이지의 뼈대를 만들고 👉 구조
CSS 는 디자인을 입히고 👉 스타일
JS 는 동적인 기능을 추가한다. 👉 상호작용
HTML
HTML
HyperText Mark-up language의 약자
웹페이지의 모습을 구현하기 위한 마크업 언어 / tag 들의 집합
HTML 의 기본구조
HTML 의 기본구조를 "TREE STRUCTURE" (트리구조) 라고도 한다.
<!DOCTYPE html> 이 문서가 HTML 문서임을 명시 <html> html 시작 태그로, 문서 전체의 틀을 구성 <head> 문서의 메타데이터 정의(선언) <title>page title</title> 문서의 제목, 브라우저 탭에 보임 </head> head 닫기 <body> 문서의 내용을 담는 곳 <h1>Hello world</h1> heading의 약어 크기별로 h1 ~ h6 까지 있음 <div>Content here division의 약어, 블록(공간)을 표시하는 태그, 줄바꿈됨 <span>Here too!</span> 줄바꿈 안되는 content 블록 </div> div 닫기 </body> body 닫기 </html> html 닫기
자주 사용하는 HTML Tag
div Vs span 태그
div 태그는 한 줄을 차지함 (줄바꿈 됨)
span 태그는 컨텐츠 크기만큼 공간을 차지 (줄바꿈 안됨)
a 태그
a 태그는
anchor의 약어로 웹페이지와 웹페이지를 연결해주는 태그이다.ex) <a href="https://www.google.com/" target="_blank" title="구글">구글</a> "구글" 이라는 텍스트를 누르면 위 페이지로 연결됨 target="_blank" 속성은 새창에서 해당 링크를 열고자 할 때 사용 (target 속성을 입력하지 않으면 해당 창에서 링크로 이동함) title="구글" 속성은 해당 링크에 마우스 커서를 올릴 때 도움말 설명을 설정할 때 사용
ul & ol & li 태그
모두 목록을 만드는 태그로 웹페이지 메뉴를 만들 때 많이 사용된다.
- ul : unordered list 의 약자로 숫자나 알파벳 등 순서가 있는 목록을 만들 때 사용
- ol : ordered list 의 약어로 순서가 필요없는 목록을 만들 때 사용
ex) <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <ol> <li>Item 3-1</li> </ol> </ul>
input 태그
input 태그는 사용자에게 입력을 받을 수 있는 필드를 생성해준다.
type 속성을 사용해 입력 양식을 여러가지로 변경하여 사용할 수 있다.
| type 속성값 | 내 용 |
|---|---|
| text | 텍스트 입력창을 생성 |
| password | 비밀번호 입력창을 생성 |
| radio | 라디오 버튼을 생성 |
| checkbox | 체크박스를 생성 |
| button | 일반버튼을 생성 |
textarea 태그
textarea 태그는 여러 줄의 텍스트를 입력하는 창을 생성한다.
ex) <textarea></textarea>
Self-Closing-Tag
일부 태그에서는 닫기 태그 " / " 가 필요하지 않은데 이를 Self-Closing-Tag 라고 한다.
대표적으로 img (이미지 삽입) 태그가 있다.ex) <img src = "the_image.jpg" alt="the_image" width="100" height="100" />
항상 닫기 태그 "</>" 를 넣어주는 것이 좋다. 시각적으로 가독성을 높여주기 때문
초보 개발자 성장일기