SEB_FE_45 두번째 강의는 HTML 학습이었다.
- 웹개발 이해하기
- HTML 기초
- HTML 심화
위 순서로 강의가 진행되었으며, 각 챕터별 목표를 달성하기 위해 노력하였다.
1. 웹개발 이해하기
웹 개발 시 사용하는 언어는 HTML / CSS / JavaScript 가 주로 사용된다.
HTML은 기본 구조를 표현하는 마크업 언어이다.
CSS는 스타일을 표현하는 디자인 언어이다.
마지막으로 JavaScript는 이용자와의 웹페이지 간의 상호작용을 돕는 프로그래밍 언어이다.
2. Visual Studio Code(이하, VScode)
VScode는 마이크로소프트사에서 만든 개발 에디터이다. 장점은 아래와 같다.
- 운영체제 상관없이 사용가능하다.
- 위의 세가지 언어 모두 편집할 수 있다.
- 다양한 확장프로그램(extension)이 제공되어, 개발자에 취향에 맞게 커스터마이징이 가능하다.
- 디버깅이 편리하다.(디버깅이란 모든소프트웨어 소스코드의 오류 또는 버그를 찾아 수정하는 과정이다.)
- 무료로 사용이 가능하다.
3. HTML 기초
HTML은 "Hyper Text Markup Language"의 약자이다.
위에서 언급한 것처럼 웹페이지의 구조(틀, 뼈대 등등)와 같은 기초를 만드는 언어이다.
태그(<>)의 집합으로 이루어져 있으며, 태그는 HTML의 기본 요소이다.
태그는 짝이 있으며, 트리구조로 이루어져 있다.
<!DOCTYPE html> // HTML문서임을 명시
<html lang="en"> // html 문서의 틀 구성
<head> // 문서의 메타데이터 선언
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> // 브러우저 탭의 문서 제목 표시
</head> // <head>와 짝꿍
<body> // 문서 내용을 담는 곳
<h1>title</h1> //heading을 의미, 크기에 따라 h1 ~ h6까지 사용가능
<div>content</div> // Contents division의 의미, 줄바꿈됨(한줄차지, css로 편집가능)
<span>content</span> // 줄바꿈이 없는 contents 컨테이너, 콘텐츠의 길이만큼만 구역 할당됨(css로 편집가능)
</body>
</html>단, 짝꿍이 없이도 작동하는 태그도 있는데, 이를 Self-Closing tag라 한다.
<img src="~~~~.png" />
<input type="radio" />위 두가지 태그는 짝꿍이 없이도 작동이 가능한 태그의 예이다. <input>의 경우에는 /로 마무리하지않고 닫아도 작동이 되었다.
자주 사용하는 HTML 태그 종류는 아래와 같다.
<div> // Division
<span> // Span
<img> // Image
<a> // Link
<ul> or <ol> & <li> // Unordered List or Ordered List & List item
<input> // Type(radio, text, checkbox ...)
<textarea> // Multi-Line Text Input
<button> // Button<div> 와 <span>태그는 컨텐츠를 담는 박스의 역할을 수행한다.
두 태그의 가장 큰 차이점은 차지하는 구역에 있다.
<div> 태그의 경우, 한줄을 차지한다. 반면, <span> 태그는 태그안에 담긴 컨텐츠의 내용만큼만 구역을 차지한다.
CSS 언어를 통해 편집이 가능하지만, 기본적인 차이는 위와 같다.
<ul> 과 <ol> 태그는 목록을 표현하는 태그이다.
차이점은 <ul> 태그는 순서가 없는 목록을 표현하고, <ol> 태그는 순서가 있는 목록(1,2,3.. 또는 로마자 등 타입을 class 값에 입력)을 표현해준다.
<li> 태그는 List item 목록 안에 들어가 있는 항목 수준으로 이해하면 된다.
<a> 태그는 링크 연결 시 사용하는 태그이다. 코드는 아래와 같다.
<a href="https://www.tistory.com"> 티스토리로 이동 </a> //현재탭에서 이동
<a href="https://www.tistory.com" target="_blank"> 티스토리로 이동 </a> //새탭에서 이동<input> 과 <textarea> 태그는 입력 폼을 표현할 수 있다.
<input> 태그로는 로그인 페이지에서 ID와 PW를 입력하는 텍스트 박스와 같은 입력 폼을 구현할 수 있다.
<textarea>는 줄바꿈이 가능한 텍스트 박스를 구현할 수 있다.
속성값을 이용하여 radio, checkbox, text, password 등 다양한 타입의 입력폼을 구현할 수 있다.
radio 와 checkbox 타입의 경우 항목을 선택한다는 행위를 할 수 있는 것은 동일하다.
차이점은 그룹을 선택할 수 있느냐이다. 쉽게 설명하면 '택 1' 의 가능 여부이다.
radio 타입의 목록에서는 4지 선다형과 같이 1개만 선택해야 하는 항목을 구현할 수 있다.(name="그룹" 속성값을 통해)
checkbox 타입에서는 '택1'을 할 수는 없고, 중복해서 선택할 수 있는 항목 구현 시 필요하겠다.
태그 안에 href=" ", type=" ", placeholder=" " 등은 속성값(attribute name)이라고 하며, key="value" 형태를 띄고 있다.
시멘틱 요소란?
사람과 컴퓨터가 읽기 편하게 하기 위해 사용하는 요소이다.
HTML 이 고도화됨에 따라 추가로 생성된 태그이다.
<section>, <article>, <aside>, <footer>, <header>, <nav>, <main> 등이 있다.
시멘틱 요소는 개발을 수행함에 있어 의미가 있는 부분을 표현할 때, 빠른 탐색이 가능하게 돕는다.
이에 HTML 요소 작성시 작성할 데이터를 가장 잘 설명할 수 있는 요소가 무엇인지 고려해야 한다.
4. HTML 심화
HTML로 웹과 앱의 구조를 만들기 전에 만들고자 하는 웹/앱의 구조를 잡아야 하며, 방법은 아래와 같다.
- 큰 틀에서 영역을 나눈다.(쓰기영역 / 읽기영역)
- 각 영역을 태그로 표현해보기(<div>로 영역을 묶어보고, 해당 영역에 들어갈 태그를 고민해본다.)
구조를 고민했으면, 뼈대가 되는 HTML 태그를 만들어야 한다.
이후, 만들어놓은 태그들 안에 속성값 중 이름을 할당해야 한다.
이때 사용하는 이름 속성값은 id = " " 와 class = " "이며, 두 태그 간의 차이가 있기 때문에 목적에 맞게 사용해야 한다.
id = " " 는 고유한 영역인 경우 사용하는 속성키이다. 반면, class = " "는 반복되는 영역(내용)에 사용한다.
이름 속성을 입력할 때에는 아래와 같이 selector 입력이 가능하다.
<div id="yongtree"> === div#yongtree
<li class="dailynote"> === li.dailynote위에서 시멘틱 요소에 대해 언급하였다.
이와 관련하여 영역을 구분하는 두가지 태그의 차이점을 알아보자.
<div> 와 <section> 두가지는 모두 영역을 나타내는 태그이다.
<div>는 HTML5 이전 버전에서 구역을 나타내기 위해 사용해 왔다. 다만, 시멘틱 요소의 발전에 따라 영역을 구분하는 최후의 수단이 되었다.
이에, 의미단위가 될 수 있는 어떤 것이든 묶어서 구역을 구분하려면 <section> 을 사용하는 것이 더 바람직하겠다.
5. Unit2를 마치며..
HTML에 대해 공부할 수 있는 하루였다. 17시에 진행한 라이브세션 이전까지는 URCLASS 사이트를 통해 문서자료와 영상자료 등을 통해 스스로 학습을 진행하였다. 이에 스스로 학습시간을 잘 활용할 수 있을까 하는 의문이 들었으나 생각보다 알차게 학습에 참여할 수 있었다.
우선, 학교수업과 같이 강의가 연달아 있지 않아서 여러 자료들을 찾아가며 학습을 진행할 수 있었다.
시간 분배에 있어서 자율성이 보장된다는 부분도 큰 메리트였다. 집중이 잘되는 시간에는 조금더 집중해서 학습을 진행하고, 집중이 안되는 시간에는 휴식을 취할 수 있다는 장점이 학습의 질을 높이는데 유효했다.
6개월 후에도 지금의 소감이 계속되기를 바란다.
'SEB_FE_45(코드스테이츠) > section 1.' 카테고리의 다른 글
| 블로깅챌린지]Unit.5 JavaScript 기초(타입, 변수, 할당) - 코드스테이츠 (0) | 2023.04.18 |
|---|---|
| 블로깅챌린지]Unit.4 HTML / CSS 활용 복습 및 페어프로그램 (0) | 2023.04.17 |
| 블로깅챌린지]Unit.4 HTML / CSS 활용 - 코드스테이츠 (0) | 2023.04.15 |
| 블로깅챌린지]Unit3. CSS 기초(개요, 텍스트 꾸미기, 단위, 박스모델, 박스구성요소, CSS Selector) - 코드스테이츠 (0) | 2023.04.13 |
| 블로깅챌린지] Unit1. 코드스테이츠 부트캠프에 탑승하다! (0) | 2023.04.11 |