들어가기 전
웹 개발 초기는 프론트/백엔드의 구분이 없었으나 웹 개발 기술이 발전함에따라 각 기술들의 내용의 세분화되었다.
따라서 점차 복잡해지는 웹 개발의 영역을 구분해야할 필요성 대두되었다.
이러한 구분에도 불구하고, 각 영영의 개발자는 상대 영역의 기본적인 내용에 대해 인지하고 있어야 하며 이는 웹 서비스는 프론트엔드 개발자와 백엔드 개발자의 협업을 통해 만들어지는 것이기 때문이다.
- 이 과정에서는 HTML과 CSS에 대해서만 다루도록 한다.
HTML은 HyperText Markup Language의 약자로 웹 페이지를 구성하는 마크업 언어 이다.
쉽게 말해 웹 페이지의 프레임(뼈대)를 정해진 규칙대로 기술하며, 전체적인 구조를 담당한다.
마크업 언어란 태그를 이용해 문서나 데이터의 구조를 명기하는 언어의 한가지로 문서의 구조를 표현하는 방법(체계)으로 알아두자.
div
,<span>
,<ul>
, <ol>
, <li>
, <input>
등<html> # 해당 문서가 html 문서임을 명시
<head> # html의 시작 태그로, 문서 전체의 틀을 구성
<title>page title</title> # 문서의 제목
</head> # </태그이름>은 해당 태그가 끝났음을 의미
<body> # 문서의 내용을 담는 곳
<h1>Hello World</h1> # heading을 의미하며, 1-6까지 크기 조절 가능
<div> contents here. # content division을 의미하며, 줄바꿈 포함
<span>Here too!</span> # 줄바꿈이 없는 contnet 컨테이너
</div>
</body> # </> 태그 종료
</html>
태그 | 설명 | 비고 |
---|---|---|
<div> | Division | 콘텐츠 길이와 상관없이 한 줄 차지(줄바꿈) |
<span> | Span | 콘텐츠의 길이만큼 줄 차지(줄바꿈 없음) |
<img> | Image | 이미지 삽입 |
<a> | Link | href 요소를 사용해 링크 삽입 |
<ul> &<li> | Unordered List & List Item | 순서 유무 리스트 |
<input> | Input(Text, Radio, Checkbox) | type 속성을 사용해 다양한 형태 변경 |
<textarea> | Multi-Line Text Input | 글상자로 줄 바꿈 가능한 입력 폼 |
<button> | button | 버튼 |
예시 - 입력 폼
<input type = 'text' placeholder = "type here">
<div>
<input type='radio' name='choice' value='a'>
<input type='radio' name='choice' value='b'>
</div>
<textarea></textarea>
<div>
<input type='checkbox' checked>checked
<input tpye='checkbox' unchecked> unchecked
</div>
HTML 연습문제(W3 Schools)
HTML, CSS, SQL, JAVA, PYTHON 등 코드 예시와 테스트
HTML로 웹 구조를 잘 세우고, 더 나은 사용자 경험(UX)을 제공하기 위해 CSS로 UI와 레이아웃을 적절히 구성하면 더 나은 웹 페이지를 완성할 수 있을 것이다.
CSS 특징?
setp2)
step3)
줄바꿈이 되는 block 와 옆으로 붙는 inline, line-block에 대해 생각해보자
- css - display
세가지 박스의 특징
display 방식 | block | inline-block | inline |
---|---|---|---|
줄바꿈 여부 | O | X | X |
기본적 너비(width) | 100% | 글자만큼 | 글자만큼 |
width, height 사용 가능 여부 | O | O | X |