웹 프로그래밍
웹 프로그래밍(웹을 개발하는 작업) 이란?
= 집을 짓는 것과 같다. HTML+CSS+Javascript를 다루는 개발이다.// 예를 들어, 내가 만약 나만의 집을 만들려고 한다고 하자.
이미 지어져 있는 집이 아닌 나만의 집을 짓기 위해서는 집을 짓기 위한 땅이 필요하고,
집을 쌓아 올릴 철근들이 필요하다. 그리고 그 철근들을 덮을 시멘트와 벽돌 등이 필요하다.
집의 구조가 다 만들어진 후에는 집 내부를 인테리어 작업을 통해 꾸며준다.
웹을 개발하는 과정도 집을 만드는 과정과 비슷하다.
웹 페이지의 구조를 만드는 작업은 HTML(Hyper Text Markup Language)라는 마크업 언어를 사용한다.
| 구분 | 집을 짓는 작업 | 웹을 개발하는 작업 |
|---|---|---|
| 지면 (땅) 준비, 건축 설계도 작성 | 땅 사기, 구역 나누기(ex. 집, 마당, 텃밭, 주차장..) | HTML로 구조(뼈대) 잡기 |
| 뼈대잡기 | 집을 쌓아 올릴 철근 설치하기. | HTML 태그를 사용하여 뼈대 만들기 |
| 살붙이기 | 벽돌 쌓기. 시멘트 바르기 | CSS로 스타일 입히기 |
| 인테리어하기 | 바닥재, 마감재(ex. 타일, 목재, 유리..), 벽지 등 인테리어하기 | CSS로 디자인 마무리하기 |
| 내부 인테리어하기 | 가스, 전기 설치 등 집 내부를 인테리어 하기 | JavaScript로 인터랙티브 기능 추가하기 |
HTML
HTML (= Hyper Text Markup Language) 이란?
= 뼈대잡기. 즉, 웹 페이지의 구조를 만드는 작업이다.// HTML은 <head>와 <body>로 나누어져 있고, 태그들로 이루어져 있다.
(cf. HTML 에서 주석은 <!ㅡㅡ 주석 표시 ㅡㅡ>, 자바스크립트 에서 주석은 //)
(실습) HTML로 브라우저에 ‘행운이의 농장’ 띄우기// 이 실습을 통해 HTML을 사용하여 크롬, 파이어폭스 등의 브라우저에 원하는 것을 띄우는 방법을 알아본다.
// 영역을 구분하는 태그 —> <div> 비어있는 영역 </div>
- <> 와 </> 의 형태로 이루어진 것들을 태그라고 한다.
- <>로 태그를 열고, </>로 태그를 닫는다.
- <div> 원하는 텍스트 </div>
- div 는 division(분할, 분배)의 약자로, HTML에서 사용할 수 있는 태그네임 중에 하나다.
- div 대신에 span, section, h1, h2 등 다양한 태그네임을 사용할 수 있다.// 태그 안에 텍스트를 넣으면, 그 텍스트가 태그의 영역 안에 띄어진다.
// <div> 와 </div> 사이에는 텍스트 말고도 다른 태그를 넣을 수 있다.
다른 태그를 넣으려면 들여쓰기(tap)하여 하위 태그를 달아준다.
Ex 1) <div>
행운이의 농장
<div> 채소밭 </div>
<div> 과수원 </div>
<div> 닭장 </div>
<div> 농막 </div>
</div>
Ex 2) <div>
<p> 행운이의 농장 </p>
<div>
<p> 채소밭 </p>
</div>
<div>
<p> 과수원 </p>
</div>
<div>
<p> 닭장 </p>
</div>
<div>
<p> 농막 </p>
</div>
</div>CSS
CSS (= Cascading Style Sheets) 란?
= 살붙이기. 즉, 웹 페이지를 아름답게 꾸미는 작업이다.// 투명한 상태인 태그들에 크기, 배경색, 테두리 스타일, 텍스트 스타일, 애니메이션 효과 등을 부여할 수 있다.
selector
selector (선택자)란?
= 태그의 부족한 기능을 채워주는 역할을 하는 '속성'으로,
특정 태그를 선택하여 스타일(CSS)을 적용할 수 있도록 하기 위한 CSS의 문법이다.// HTML 태그와 CSS는 '선택자'를 통해 연결된다.
// 꾸미고 싶은 태그에 큰따옴표("")를 이용하여 선택자를 부여하고, CSS에서 해당 선택자를 불러내어 스타일을 적용한다. ex) farm이라는 class를 가진 태그의 영역 <div class="farm">행운이의 농장</div>에 있는 모든 내용("행운이의 농장")의 font-color를 빨간색으로 바꾸고 싶다. .farm {color : red;}
// 대표적인 선택자로는 'ID'와 'Class'가 있다.
| 구분 | ID (=Identification) | Class |
|---|---|---|
| 의미 | HTML 파일 안에서 유일한 값을 식별하기 위해서 사용하며, 단 하나만 존재하는 요소를 표현하기 위한 선택자 | HTML 파일 안에서 어떤 비슷한 종류의 요소들을 묶어주기 위해서 사용하며, 비슷한 요소들을 표현하기 위한 선택자 |
| 예시(인생네컷) | 4개의 서로 다른 이미지가 필요. 이때 각각의 이미지들은 서로 다른 요소들이므로 ID 선택자를 사용하여 꾸며줘야 한다. | 4개의 이미지들은 공통된 크기, 테두리 스타일, 배경색 등을 가지므로 Class 선택자를 사용하여 꾸며줘야 한다. |
| 태그 코드 | <div id="farm"> 행운이의 농장 </div> | <div class="farm"> 행운이의 농장 </div> |
| 스타일 코드 | # 부여한 ID명 {속성 : 속성값} = #farm{ color: red; } | . 부여한 Class명 {속성 : 속성값 } =.farm{ color : red; } |
<실습>
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link href="./src/styles.css" rel="stylesheet" />
<style>
.farm {
color: red;
}
.vegetable {
background-color: orange; <!--텍스트 바탕색은 오렌지로 해줘-->
font-size: 20px; <!--폰트 크기는 20px로 해줘-->
border: 1px solid black; <!--텍스트 테투리 굵기는 1px이고, 테투리 색은 완전한 검정으로 해줘-->
text-shadow: 3px 3px 1px black; <!--텍스트 그림자는 가로 세로 크기 3px이고, 번짐정도는 1(진함)로 검정색으로 번지게 해줘-->
}
.orchard {
background-color: yellow;
}
.chickenCoop {
background-color: greenyellow;
}
.farmhouse {
background-color: skyblue;
}
</style>
</head>
<body>
<div class="farm">
행운이의 농장
<div class="vegetable">채소밭</div>
<div class="orchard">과수원</div>
<div class="chickenCoop">닭장</div>
<div class="farmhouse">농막</div>
</div>
<!--<미션>
"행운이의 농장"이 들어있는 div태그의 class를 "farm"으로 설정하세요.
"채소밭"이 들어있는 div태그의 class를 "vegetable"로 설정하세요.
"과수원"이 들어있는 div태그의 class를 "orchard"으로 설정하세요.
"닭장"이 들어있는 div태그의 class를 "chickenCoop"으로 설정하세요.
"농막"이 들어있는 div태그의 class를 "farmhouse"로 설정하세요.-->
</body>
</html>
<결과물>
