코딩 관련 여러 유튜브 채널을 시청하던 중 '코딩을 알려주는 누나' 채널을 알게 되면서 실무에 활용할 수 있는 웹사이트를 만들어 보고 싶어졌다. 코딩 입문을 위해서는 거쳐야 하는 html/css, javascript, react, nodejs, mongedb의 5가지 과정을 제시하고 있으므로 리뷰해 보았다.
noona와 함께 배우는 코딩 강좌는 실습을 하면서 이론을 곁들인다는 멘트가 맘에 와닿았다. 코딩에 코자도 모르는 왕초보 입장에서 볼 때 이론부터 시작하면 지루해서 중도 포기 할 수도 있다고 생각되기 때문이기도 하다.
니 해피의 HTML CSS 리뷰
웹 개발을 하려면 프런트엔드와 백엔드 차이점과 어떠한 기술이 적용되는지 알고 있어야 개발 프로젝트 이해의 중요한 키 포인트가 된다고 한다.
백엔드는 사용자가 웹 페이지를 사용하면서 필요한 비즈니스 로직을 만드는 작업이고, 프런트엔드는 웹페이지를 열었을 때 볼 수 있는 화면을 만드는 작업을 하는 것이다. 다시 말해서 프런트엔드는 백엔드 API에서 가져온 데이터의 출력 입력을 통한 비즈니스 로직 구성과 사용자와 대화하는 사용자 인터페이스 부분을 작업하는 것이다.
1. HTML/CSS
ⓐ HTML 은 웹페이지와 그 내용(콘텐츠 구조)을 정의하는 코드(markup언어)이다. 웹사이트 구조를 만드는 과정이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>코딩을 알려주는 누나</title>
<link rel="stylesheet" href="https://example.com/style.css">
</head>
<body>
<!-- 많이쓰는 태그... -->
<h1>- <h5>
<div> this text color will be red</div>
<p class="editor-note">사각형박스 </p>
<img src ="sample/">
<input>
<button>
<a>
<label>
<select>
<option>
<script src="https://example.com/script.js"></script>
</body>
</html>
요소와 속성 개념
요소 (element) → <p class="editor-note">사각형박스 <p>
태그 : <p> → 여는 태그, <p> → 닫는 태그
속성(attribute) → class="editor-note", lang="en", charset="UTF-8", name="viewport", content="width=device-width, initial-scale=1.0", rel="stylesheet"와 같은 모든 것이 속성이다.
요소는 다른 요소 안에 중첩(nesting)해서 넣을수 있고 이미지와 같이 내용이 없는 빈요소 <img src="images/firefox-icon.png" alt="my test-image" /> 일 수도 있다.
요소에는 블럭 레벨 요소(block level element)와 인라인 요소(inline element가 있다
인라인 요소 블록 레벨 요소에 향상 포함 <em>니해피의</em> <em>html</em> <em>프리뷰</em> |
니 해피의 html 프리뷰 문장 단어 등 작은 부분에 적용 같은 줄에 공백 없이 위치한다 |
블록 레벨 요소 단락, 목록, 네비게이션 메뉴, 꼬리말 <p >누나와</p> <p>함께 배우는</p> <p>CSS</p> |
누나와 함께 배우는 CSS 새로운줄 위 아래 여백이 있다. |
ⓑ CSS는 뼈대만 갖춘 웹사이트를 꾸미는 과정이다.
스타일을 만든 다음에 적용하고자 하는 HTML 태그에 입힌다.
HTML 태그에 스타일을 주는 방법은 다음과 같이 3가지이다. 이중 class 방법이 가장 일반적인 사용 방법이다.
⑴ html 태그에 직접 사용 : 어떤 태그에 공통적인 스타일을 주고 싶을 때 사용
div {
color:red;
}
선택자→div {속성→color:red; ←속성값}
선언 → color :red;
- 선택자 (selector) : html 맨 앞 요소(예 p, div, label etc) 꾸밀 요소를 선택하는 것을 말한다.
- 선언 (declaration) : 꾸미려는 요소를 선택한다
- 속성 (property) : 영향을 줄 속성을 택함을 의미한다
- 속성값(property value) :속성 오른쪽 콜론(,) 뒤 속성을 위해 가능한 결과에서 선택하기 위해서 속성값을 같는다.
☞ 해당 문단 내 모든 요소들 색상을 빨간색으로 지정시켜 준다.
- 만든 스타일의 속성값을 html태그에 적용시킨다. <div> this text color will be red </div> ☞<div class="text-red"> this text color will be red </div>
- border도 적용시키려면 탭을 한번 후 border-blue를 넣어 준다. ☞ <div class="text-red border-blue"> this text color will be red <div>
- 이미지 사이즈 적용 : <img src ="images; class="image-size" />
- HTML에 박스를 추가하기 : css의 border와 이미지 사이즈를 활용하여 HTML에 추가 적용시킬 수 있다.
☞ 여러 속성값을 한 번에 수정하기 위해서는 아래와 같이 세미콜론(;)으로 구분해서 작성한다.
p {
color: red;
width: 500px;
border: 1px solid black;
}
☞ 여러 개의 요소를 한 번에 수정하려면 여러 타입의 요소를 선택하고 콤마로(,) 구분해서 작성한다
p,
li,
h1 {
color: red;
}
⑵ id 사용 : 한 번에 하나의 스타일에만 사용, 주로 자바스크립트에 사용되고, 스타일링에서는 많이 쓰이지 않는다.
#new-style {
color:red;
}
<div id="new-style">
⑶ class 사용 : 한 번에 여러 개 스타일을 줄 수 있는 방법으로 제일 많이 사용한다.
. new-style {
color:red;
background-color:yellow;}
<div class="new-style">
//border 추가
. border-blue {
border: 5px solid slim;
}
//이미지 추가
. image-size {
width:200px;
height:150px;
}
⑷ 복합 선택자
일치선택자 : 두 가지 조건을 동시에 만족하는 요소 선택
div.new-style {
/*div 태그에 new-style 클래스
}
자식선택자 :
div>. new-style {
/*div 자식요소 중 class="new-style" 선택
}
후손 선택자 :
div.new-style {
/*div후손요소들 중에서 class="new-style
☞ 포트폴리오 프로젝트 만들기
- Flexbox, position
☞ Flexbox이용한 포트폴리오 만들기
-부트스트랩
모바일버전 웹사이트를 만들 수 있게 된다.
2. JavaScript
html과 css로 구성한 웹페이지에 생동감을 넣어 준다. 멀티미디어를 제어하고 이미지에 애니메이션 적용등의 모든 기능을 제어한다. 내 집에 예쁘게 입체적인 인테리어를 한다고 보면 될 것이다.
3. React
사용자가 보는 모바일 웹화면등 웹페이지의 사용자 인터페이스(UI) 조각을 맞추는 것이다. 사용자 인터페이스(UI)란 사람과 시스템 사이 의사소통을 할 수 있도록 돕는 물리적 가상적 매개체이다. React는 UI의 라이러리(library)라고도 한다.
내 집(프로그램)을 꾸밀 도구 자재를 대형판매점인 라이브러리에 가서 구매하여 꾸민다고 보면 될 것이다.
react는 JSX(javascript xml)라는 자비스크립트에서 확장된 문법이 사용되며 프로그램설계를 조직화시켜 HTMLCSS JavaScript만으로 웹페이지를 만드는 것보다 커다란 이점이 있다.
<APP>
<header title="gardening" />
<FlowerList flower={flower} />
<GrassList grass={grass} />
<Footer />
</APP>
REACT는 전체 프로그램 설계를 깔끔하고 일관성 있게 정리할 수 있는 조직성이 강하며 미리 만들어 놓은 조각을 다시 사용가능하여 코드 재 사용성이 높고, 기본 웹 프로젝트뿐만 아니라 모바일 웹 데스크톱 앱을 만들 수 있다는 점에서 매우 유연한 장점이 있다.
4.NodeJS
자바스크립트를 서버 사이드에서 실행할 수 있게 해부는 플랫폼으로 비동기 I? O를 지원하고, 이벤트 기반의 논블로킹 모델릉 사용함으로써, 고성능 네트워크 애플리케이션을 구축할 수 있는 환경을 제공한다.. 데이터 집약적인 실시간 애플리케이션을 구축하는데 적합한 플랫폼으로 인식되고 있다.
NodeJS의 활용은 웹서버, 데이터 API서버 실시간채팅 애플리케이션 lot(사물인터넷) 서비스 등 다양한 서버 사이드 애플리케이션을 JavaScript로 구현을 할 수 있다.
다음은 기본적인 Node.js 웹 서버 구현 예시이다
const http = require('http');
const server = http.createserver((req, res) =>{
res.writehead(200, {'content-type': 'text/plain'}); res.end('hello world/n');
});
server.listen(3000, '127.0.0.1');
console.log('server running at http://127.0.0.1 : 3000/');
실시간 데이터 처리가 필요한 애플리케이션의 경우 node.js논 블로킹 모델이 큰 장점으로 작용한다.
5. MongoDB
크로스 플랫폼 도큐먼트 지향 데이터베이스 시스템이다. 특정 종류의 애플리케이션을 더 쉽고 빠르게 데이터 통합을 가능하게 한다.
전문 개발자 길을 가고자 하지 않고 실무에 활용할 수 있는 필요한 웹 개발을 손수 하고자 한다면 어느 단계까지 공부를 해야 하는지 감이 오지 않는다. 일단 HTML CSS JavaScript 과정을 수료하여 기본적인 제작을 할 수 있도록 해볼 필요는 있다고 생각된다.
'IT' 카테고리의 다른 글
스마트 스위치 설치 스마트폰 데이터 백업 복원 (0) | 2024.05.13 |
---|---|
초 초보 HTML Tag 코딩 호기심 (0) | 2024.05.08 |
비주얼 스튜디오 코드 다운로드 개발 환경 설정 (1) | 2024.05.03 |
자동차 할부 계산기 HTML CSS JavaScript 코드 (0) | 2024.04.29 |
테무 이용 후기 가격 조정 요청 과 반품 환불 정책 (0) | 2024.04.22 |
댓글