1. 프론트엔드 개발공부의 첫걸음
지난 목요일과 금요일은 오즈코딩스쿨 초격자캠프 프론트엔드 부트캠프를 강의를 들었다. 첫날은 OT 수업과 함께 K-디지털 트레이닝 규정을 들었다. 아무래도 국비로 운영되는 수업이다 보니 앞으로 출결 관리를 잘해야겠다는 생각이 들었다. 첫날 오후 시간과 금요일에는 HTML 강의를 듣고 그날그날 챌린지까지 완료했다. 금요일 오후 시간에는 2시간 정도 라이브 강의도 듣게 됐다. 아직은 첫 주라 html강의 밖에 안들었지만 일정을 보니 벌써 다음 주에는 Javascript 수업을 진행하는 것 같다. JavaScript는 아직 공부해 본 적이 없다 보니 약간의 기대도 되면서 내가 잘 소화 해낼 수 있지도 조금은 걱정된다...
수업을 듣다보니 아직은 기초적인 사용법도 헷갈리는 데 맥북도 처음 사용하다보니 개발자도구 단축키도 어떻게 하는지 몰랐다. 평소 윈도우를 사용하기도 하고 강의에서도 F12 버튼만 알려주셔서 일단은 수업하는 동안은 구글 사이트 우측 상단 버튼을 타고 들어갔다.
지금 맥북 개발자도구 단축키를 검색해보니 command + option + I 라고 한다. 기본적으로 윈도우의 ctrl 버튼이 맥에서는 command 였다.
command + C: 선택한 항목 클립보드에 복사command + V: 클립보드의 콘텐츠 붙여넣기command + X: 선택한 항목을 잘라서 클립보드에 복사command + A: 모든 항목을 선택command + T: 새 탭 열기shift + command + 3: 전체 화면 캡처하기shift + command + 4: 일부 화면 캡처하기
2. HTML 공부 사이트
프론트엔드 과정에서는 텍스트 에디터로 일단 VSCode 만 사용한다고 합니다. 디스코드에는 간혹 인텔리제이를 사용해도 되냐는 문의가 있던데 백엔드쪽에서는 통합 개발 환경(IDE, Integrated Development Environment) 으로 인텔리제이 프로그램을 많이 사용하는 것 같다. 프로그램이 유료이던데 보통 회사에서 많이들 사용하는 프로그램으로 보인다. 다만, 나는 프론트엔드 과정이고 더군다나 아직은 부트캠프를 학생이여서 VSCode만 사용해도 된다고 한다.
💻 HTML을 학습할 수 있는 사이트
- MDN : 웹 개발자들을 위한 문서 및 학습 자료 사이트
- W3school : 온라인으로 웹 기술을 배우는 교육용 웹 사이트
- Google : 모르는 것이 생기면 구글링은 역시 필수! 영어로 검색해야 검색양이 많다고 한다.
- 챗GPT : 개발 공부 시 모른다고 너무 의지하면 실력이 늘지 않는다. 정말 궁금한 내용은 물어볼 수 있지만, 챗GPT로 얻은 답은 먼저 왜 이 코드가 사용되었는지 충분한 이해와 논리도 같이 바탕이 되어야 한다.
- Youtube (유노코딩 강의) : 유튜브에도 html 강의를 검색해보면 많은 양의 동영상을 볼 수 있다. 그중 지금 학원 듣고 있는 html 강사 분이 하는 강의가 유튜브에도 있어 사이트 대표적으로 이 주소만 가져왔다.
html 코드를 입력하기 전 가장 기본이 되는 문서구조를 만들 때에는 VSCode에 !면 작성하고 엔터를 누르면 손쉽게 기본구조를 만들 수 있다.
일단은 한국어 사이트 위주로 만들테니 en은 ko로 바꿔준다.
3.HTML 기초 태그
일단 학원에서 진도 나갔던 html 강의 내용을 복습할 겸 아래에 정리해 본다.
3-1) 블록 레벨 요소, 인라인 요소
블록 레벨 요소는 자기가 속한 영역의 너비를 모두 차지하고 블록을 형성하는 요소이고, 인라인 요소는 자기에게 필요한 만큼의 공간만 차지하는 요소이다.
✨ 인라인 텍스트 요소 예
<mark>마크 텍스트 요소 - 형광펜 효과</mark> <strong>스트롱 텍스트 요소 - 폰트 굵게 하는 효과</strong> <em>이엠 텍스트 요소 - 이탤릭체(기울임) 효과</em> <q>큐 텍스트 요소 - 인용구 효과</q> <s>에스 텍스트 요소 - 취소선 효과</s>👇 결과
3-2) 컨테이너
컨테이너는 콘텐츠나 레이아웃에 아무런 영향을 주지 않는다는 특징이 있으며, 다른 요소 여러개를 묶어 관리하기 위해 사용되는 요소이다. 콘텐트의 내용을 구분하거나 공통적인 스타일 적용할 때 많이 사용한다.
<div>블록 레벨 컨테이너</div>
<span>인라인 컨테이너</span>전역속성: 모든 HTML에서 공통으로 사용할 수 있는데, 일부 요소는 아무런 효과가 없다. 아래는 자주 사용하는 전역 속성
id: 문서 전체에서 요소에 고유한 이름을 부여하는 식별자class: 요소를 그룹 별로 묶어 사용하는 식별자style: 요소에 적용할 CSS 스타일을 선언title: 요소와 관련된 추가 정보를 제공하는 텍스트
더 많은 전역 속성은 MDN에 가면 확인할 수 있다.
3-3) img 태그
imng 태그는 이미지를 표시할 때 사용하는 태그이다. 단일 태그라 닫는 태그는 따로 필요하지 않다.
src 속성으로 표시할 이미지의 위치정보 및 파일명을 입력받고, = 뒤에 위치정보를 입력해준다.
<img src="url"/>
<img src="같은 폴더 내 이미지 있는 폴더명/이미지.jpg">
<img src="(상위 폴더는 앞에)..을 붙인 폴더명/이미지.jpg">
alt는 alternative의 약자로 대체 텍스트 역할을 한다. width는 너비, heiht는 높이를 지정하고, 보통은 px 단위로 적용한다.
3-4) 링크 표시
링크는 현재 문서에서 다른 문서로 이동하는 수단을 말한다. a태그를 사용하고 다른 페이지, 전화번호, 이메일 주소 등 다양한 유형의 콘텐츠와 연결하는 역할을 하는 태그이다. a태그를 사용할 때에는 href도 필요하다.
<a href="https://www.naver.com/"> 네이버로 이동 </a>
<a href="https://www.youtube.com" target="_self"> 현재 탭에서 열기(기본 값)</a>
<a href="https://www.youtube.com" target="_blank"> 새 탭에서 열기</a>3-5) 목록 만들기
목록은 연관 있는 항목을 나열하는 것을 말한다. HTML 목록은 '순서가 없는 목록'과 '순서가 있는 목록'이 있다. 참고사항으로 모두 블록 레벨 요소를 만드는 태그라고 한다.
<ul></ul> 순서가 없는 목록
<ol></ol> 순서가 있는 목록
<li></li> 목록에 들어가는 항목 하나 하나<ul> <li>지유</li> <li>이솔</li> <li>수이</li> <li>하음</li> <li>키야</li> </ul>
- 지유
- 이솔
- 수이
- 하음
- 키야
<ol> <li>지유</li> <li>이솔</li> <li>수이</li> <li>하음</li> <li>키야</li> </ol>
- 지유
- 이솔
- 수이
- 하음
- 키야
3-6) 표 만들기
표는 행과 열로 이루어진 구조로 콘텐츠를 나타낸다.
table: 하나의 표를 나타내는 태그tr: 표 안에 하나의 행을 나타내는 태그th: 행 안에서 제목에 해당하는 셀을 나타내는 태그td: 행 안에서 콘텐츠에 해당하는 셀을 나타내는 태그table border: border 지정을 안하면 안 보인다. 테두리의 두께를 지정하는 태그caption:table태그 안쪽에 제목이나 표에 대한 설명을 나타낸다. 기본적으로는 표 가운데에 위치한다.
<table border="1"> <caption> 세계별 가수 명단 </caption> <tr> <th>한국 가수</th> <th>일본 가수</th> <th>미국 가수</th> </tr> <tr> <td>아이유</td> <td>아이묭</td> <td>테일러</td> </tr> </table>
세계별 가수 명단 한국 가수 일본 가수 미국 가수 아이유 아이묭 테일러
사용자는 셀에 표시된 콘텐츠의 성격이나 표의 구조에 따라 그룹으로 묶어서 관리 할 수 있다. 그 태그들은 아래와 같다.
<thead>: 표의 제목이나 주제를 나타냄<tbody>: 표의 본문을 나타냄<tfoot>: 표의 요약글이나 맺음말을 나타냄<table border="1"> <thead> <tr> <th>한국 바둑기사</th> <th>일본 바둑기사</th> <th>중국 바둑기사</th> </tr> </thead> <tbody> <tr> <td>신진서</td> <td>이치리키 료</td> <td>커제</td> </tr> <tfoot> <tr> <td>세계 랭킹 1위</td> <td>세계 랭킹 12위</td> <td>세계 랭킹 4위</td> </tr> </tfoot> </table>
한국 바둑기사 일본 바둑기사 중국 바둑기사 신진서 이치리키 료 커제 세계 랭킹 1위 세계 랭킹 12위 세계 랭킹 4위
3-7) 입력 태그
그다음으로는 웹 브라우저 화면을 통해 사용자가 데이터를 입력할 수 있는 입력에 대해서 알아봅니다. 입력 요소의 대표 주자는 바로 input 태그가 있습니다. input은 속성을 지정해 줄 수 있는데 type= 다음에 ""안에 데이터 유형을 표시합니다.
<input type="데이터 유형">어떤 타입을 지정했는지에 따라서 같은 텍스트라도 그 목적이 달라지게 됩니다. 대표적인 속성은 아래와 같습니다.
text: 기본 값으로 말 그대로 텍스트를 입력 받음password: 비밀번호를 입력 받음search: 검색할 텍스트를 입력 받음date: 날짜와 시간을 지정
수치를 입력받는 type들
color: 색상 선택number: 수치 선택range: 수준(달성도)선택
label: 입력 요소에 라벨을 붙여 웹 사용자에게 좀 더 직관적인 입력 요소를 제공할 수 있고, 코드의 가독성과 명확성을 높여준다.
3-8) input외 다른 입력 태그들
select는 다수의 옵션을 포함할 수 있는 메뉴를 만들 수 있다. 메뉴 안에 포함할 옵션은option태그를 사용한다.
<h5>좋아하는 F1선수를 고르시오.</h5> <select> <option>카를로스 사인츠</option> <option>페르난도 알론소</option> <option>루이스 해밀턴</option> <option>맥스 베르스타펜</option> <option>랜도 노리스</option> <option>샤를 르클레르</option> <option>피에르 가슬리</option> <option>조지 러셀</option> </select>
input태그를 이용해 텍스트를 입력 받으면, 단 한줄만 입력이 가능하다. 그렇지만,textarea태그를 사용하면 여러 줄의 텍스트를 입력 받을 수 있다.
<h5>아래에 텍스트를 입력하시오.</h5> <textarea cols="40" rows="5"></textarea>
progress태그는 작업이 어느 정도 진행되었느지 나타낼 때 사용한다.max속성은 작업 완료에 필요한 작업량을 지정하는 속성이고value속성을 통해 화면에 진척도를 표시한다.
<h5>작업 진행 중...거의 다 되어 가요...90%...</h5> <progress value="90" max="100"></progress>
button태그는 클릭을 입력으로 받는 버튼 요소를 만드는 태그이다.input태그에type속성을 지정해서 만드는 버튼 방식과 그냥button태그 사이에 버튼에 표시할 텍스트를 적어주는 방식이 있다. 화면상으로는 아무런 차이가 없는게 특징이다.
<!-- value에 표시할 텍스트를 작성 --> <input type="button" value="제출"> <!-- 태그 사이에 표시할 텍스트를 작성--> <button>제출</button>
