개발자 도구 이용법: 개발자 도구 Element 탭을 사용하여 웹사이트의 구조를 확인할 수 있습니다.
9 : 30 ~ 4 :00
자습
Unit2 [HTML] 기초
Chapter1. 웹 개발 이해하기
웹 개발은 인터넷을 통해 웹사이트와 웹 애플리케이션을 개발하는 과정을 의미합니다.
웹 개발에서 가장 기본적인 기술은 HTML, CSS, JavaScript입니다. HTML은 웹 페이지의 구조와 내용을 정의하는 마크업 언어이고, CSS는 HTML로 정의된 요소들의 디자인과 스타일을 지정하는 스타일 시트 언어입니다. JavaScript는 동적인 기능과 상호작용을 구현하는 스크립트 언어입니다.
여기서! 각 기술의 정의를 알아보자면 ~
HTML (Hypertext Markup Language)
HTML은 웹 페이지의 구조와 내용을 정의하는 마크업 언어입니다. HTML로 작성된 코드는 브라우저에서 해석되어 웹 페이지가 표시됩니다. HTML은 텍스트와 태그로 이루어져 있으며, 각 태그는 특정한 기능을 수행합니다. 예를 들어, <p> 태그는 단락을 나타내며, <img> 태그는 이미지를 삽입합니다.
CSS (Cascading Style Sheets)
CSS는 HTML로 작성된 요소들의 디자인과 스타일을 지정하는 스타일 시트 언어입니다. CSS를 사용하면 웹 페이지의 레이아웃, 색상, 폰트 등을 쉽게 변경할 수 있습니다. CSS는 HTML과는 별도로 작성되며, 선택자와 속성으로 이루어져 있습니다. 예를 들어, h1 선택자를 사용하여 제목에 대한 스타일을 지정할 수 있습니다.
JavaScript
JavaScript는 동적인 기능과 상호작용을 구현하는 스크립트 언어입니다. JavaScript를 사용하면 HTML과 CSS를 조작하거나, 사용자와 상호작용하는 기능을 구현할 수 있습니다. 예를 들어, 버튼을 클릭하면 해당 버튼에 대한 이벤트를 처리하는 JavaScript 코드를 작성할 수 있습니다. JavaScript는 HTML 파일 내에 <script> 태그 안에 작성되며, 자바스크립트 코드를 작성할 수 있는 다양한 도구들도 제공됩니다.
Chapter2. HTML 기초
오늘 집중적으로 공부해 볼 기술은 HTML입니다.!
위 정의에도 나왔듯 HTML은 태그와 텍스트로 이루어져 있습니다.
여기에 나오는 태그가 무엇인지 알아봅시다~!
HTML의 대표적인 태그
<!DOCTYPE html>
문서 형식을 정의하는 태그입니다. HTML5를 사용하는 경우 다음과 같이 작성합니다.
<html>
웹 페이지의 전체 내용을 감싸는 태그입니다.
<head>
웹 페이지의 메타 정보를 포함하는 태그입니다. 제목(title), 스타일 시트(CSS), 스크립트 등이 포함됩니다.
<title>
웹 페이지의 제목을 나타내는 태그입니다.
<body>
웹 페이지의 본문 내용을 감싸는 태그입니다.
<h1>~<h6>
제목을 나타내는 태그입니다. h1이 가장 큰 제목이며, 숫자가 작아질수록 작은 제목을 나타냅니다.
<p>
문장이나 단락을 나타내는 태그입니다.
<img>
이미지를 삽입하는 태그입니다. src 속성에 이미지 파일의 경로를 지정해야 합니다.
<a>
링크를 생성하는 태그입니다. href 속성에 링크 주소를 지정하고, 링크 내용은 태그 사이에 작성합니다.
<ul>
순서 없는 목록을 만드는 태그입니다.
<ol>
순서 있는 목록을 만드는 태그입니다.
<li>
목록의 각 항목을 나타내는 태그입니다.
시맨틱 요소(semantic element)는
HTML에서 의미론적인 요소를 나타내는 태그를 말합니다.
태그
설명
<header>
문서의 머리말을 나타내는 태그입니다.
<nav>
네비게이션을 나타내는 태그입니다.
<section>
주제나 콘텐츠 영역을 나타내는 태그입니다.
<article>
독립적인 콘텐츠를 나타내는 태그입니다.
<aside>
부가 정보나 사이드바를 나타내는 태그입니다.
<footer>
문서의 꼬리말을 나타내는 태그입니다.
위의 표는 HTML에서 주로 사용되는 시맨틱 요소들을 보여줍니다. 이러한 요소들은 문서의 구조와 의미를 더욱 명확하게 표현할 수 있도록 도와줍니다. 또한, 이러한 요소들을 사용하면 웹 페이지의 접근성, 검색 엔진 최적화, 유지 보수성 등을 향상할 수 있습니다.
HTML의 구조
영역
설명
<!DOCTYPE>
문서 형식을 정의합니다. HTML5 문서라면 <!DOCTYPE html>을 작성합니다.
<html>
전체 문서를 감싸는 부분으로, 문서의 언어와 버전 등의 정보를 포함합니다.
<head>
문서의 정보를 정의하는 부분으로, <title>, <meta>, <link> 등의 태그를 사용하여 문서의 제목, 키워드, 스타일시트 등을 정의할 수 있습니다.
<body>
실제로 사용자가 볼 수 있는 콘텐츠를 담고 있는 부분입니다. 시맨틱 요소를 사용하여 문서의 구조를 정의할 수 있습니다.
<header>
문서나 섹션의 제목이나 소개를 담고 있는 부분입니다.
<nav>
문서의 내비게이션 링크를 담고 있는 부분입니다.
<main>
문서의 주요 콘텐츠를 담고 있는 부분입니다.
<section>
문서의 섹션을 나타내는 부분입니다.
<article>
문서의 독립적인 콘텐츠를 담고 있는 부분입니다.
<aside>
문서의 주요 콘텐츠와 연관된 보충 정보를 담고 있는 부분입니다.
<footer>
문서의 저작권 정보나 연락처 정보를 담고 있는 부분입니다.
태그를 사용하여 맛보기 로그인 페이지 구성 만들기
<p><input type="text" placeholder="ID"> </p> <!-- <p> 태그는 단락(paragraph)을 나타내는 태그 -->
<input type="password" placeholder="password">
<div style="white-space: pre-line;"> <!-- CSS의 white-space 속성을 사용하는 방법: white-space 속성을 pre-line으로 설정하면 HTML에서의 줄 바꿈과 동일한 방식으로 줄이 바뀌게 됩니다.-->
<button>Login</button>
<label> <input type="checkbox"> Keep Login </label>
</div>
코드 실행 결과
1 :00 ~ 5 : 00
실습
자기소개 페이지 만들기
- 자기소개. html
<!DOCTYPE html>
<html lang="ko">
<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>코드스테이츠 1번째 과제</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="headline">
<br>
<h2>끈기와 열정으로 새로운 분야에 도전하는 박다해입니다.</h2> <br>
<img src="/Users/bagdahae/Desktop/코드스테이츠/2023.04/자기소개/img/짱구코난.gif" alt="이미지"
style="border-radius: 50%; width: 300px; border: 2px solid black;"> <br><br>
</div>
<div class="body">
<h3>부트캠프에 오기까지 내가 걸어온길</h3>
<ul>
<li>프로브카드 업계에서 만5년간 근무, 회로설계 부서에서 회로 설계 담당자로 근무</li>
<li>프론트엔드 관련 서적 및 강의를 이용하여 독학으로 공부</li> <br>
</ul>
<h3>나의 목표</h3>
<ul>
<li>2023년이 끝나기 전에 프론트엔드 분야로 취업하기</li> <br>
</ul>
<h3>목표를 이루기 위해 부트캠프에서 꼭 얻고 싶은 것</h3>
<ol>
<li>개인 작업을 할수있는 역량 (프로젝트 진행 역량)</li>
<li>다른 팀원들과 함께 소통하며 업무할수 있는 능력 </li>
<li>개인 작업 및 팀 작업 2개 이상</li><br>
</ol>
<h3>목표를 이루기 위해 실천해야 할 것</h3>
<ol>
<li> 꾸준한 공부 와 정리</li>
<li> 팀 프로젝트 적극 참여 하기</li>
<li> 개인 작업도 틈틈히 하기</li>
</ol>
</div>
</body>
</html>
