백엔드 개발자가 왜 프론트엔드 기술을?
- 웹 개발 초창기에는 프론트엔드/백엔드 구분이 없었지만, 기술이 발전함에 따라 영역이 구분됨
- 그럼에도 불구하고, 웹 서비스는 협업을 통해 만들어지기 때문에 각 영역의 개발자는 상대 영역의 기본적인 내용에 대해 필수적으로 이해해야 함
- 백엔드 개발자도 기본적인 프론트엔드 개발 지식에 대한 이해가 필요하므로, HTML과 CSS에 대한 학습 필요
프론트엔드 3총사
- HTML : Structure. 구조, 뼈대 작성
- CSS : Presentation. 스타일, 디자인
- JavaScript : 상호작용, 동적 움직임
HTML(HyperText Markup Language)
- 웹 페이지의 내용과 뼈대를 정해진 규칙대로 기술하는 마크업 언어
HTML의 기본 구조와 문법
- HTML은 태그들의 집합이며, .html 확장자를 사용
- 태그(tag) : 부등호(<>)로 묶인 HTML의 기본 구성 요소
- 태그는 트리 구조로 이루어짐
- 여는 태그가 존재하면 닫는 태그도 존재 (e.g. <head> ... </head>)
예외) 닫는 태그가 없는 self-closing tag도 존재한다 (e.g. <img>)
자주 사용하는 HTML 요소
- <div> : Division. 한 줄 전체 차지
- <span> : Span. 컨텐츠 크기만큼 공간 차지
- <section> : 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분
- <img> : Image. 닫는 태그가 없음
- <a> : Link. 링크 삽입
- <ul> & <li> : Unordered List & List Item. cf. <ol> - Ordered List (1,2,3,... 넘버링)
- <input> : Input(Text, Radio, Checkbox). 입력 폼. 웹 앱에서 많이 사용 (ID, 비밀번호 등)
- <textarea> : Multi-line Text Input. 줄바꿈 가능한 입력 폼. 웹 앱에서 많이 사용
- <button> : Button. 웹 앱에서 많이 사용 (로그인 버튼)
- <style> : CSS
- <script> : JavaScript
References
- W3Schools : 프론트엔드(HTML, CSS, JavaScript) 레퍼런스, 예제
'백엔드 개발자 공부 > 프론트엔드 기초' 카테고리의 다른 글
| [프론트엔드 기초][실습] 트위틀러 목업 구현하기 (0) | 2022.08.25 |
|---|---|
| [프론트엔드 기초][실습] 와이어프레임 만들기 - 풋몹(fotmob.com) (0) | 2022.08.24 |
| [프론트엔드 기초] 웹 앱 화면 설계하기 (0) | 2022.08.24 |
| [프론트엔드 기초] 페이지 레이아웃 (0) | 2022.08.24 |
| [프론트엔드 기초] CSS (0) | 2022.08.23 |