본문 바로가기
  • 내 손안 세상 보기 니 해피
IT

니해피의 HTML CSS 리뷰

by 니해피 2024. 5. 7.
반응형

코딩 관련 여러 유튜브 채널을 시청하던 중 '코딩을 알려주는 누나' 채널을 알게 되면서 실무에 활용할 수 있는 웹사이트를 만들어 보고 싶어졌다. 코딩 입문을 위해서는 거쳐야 하는 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논 블로킹 모델이 큰 장점으로 작용한다.

 

HTML_요소
사진=백담계곡

 

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

관련글

댓글

티스토리툴바