[Day2] html, css 기초 & virtual dom

HTML favicon

파비콘 : 글쓰기 탭 왼쪽에 이미지가 표시됨

제목 : 글쓰기 (page title)

  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">

HTML page title

<!DOCTYPE html>
<html>
<head>
  <title>HTML Tutorial</title>
</head>
<body>
The content of the document......
</body>
</html>

HTML table

태크	정의
<td>	테이블 데이터
<tr>	테이블 행
<th>	테이블 헤더

** <th>는 굵게 표시되고 가운데 정렬됨

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>

HTML Lists

순서 없는 리스트 : 목록 항목에 글머리 기호 (작은 검은색 원)으로 표시됨

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

순서 있는 리스트 : 목록 항목에 숫자가 표시됨.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

HTML block and inline Elements

block : 새 줄에서 시작하며, 항상 사용 가능한 전체 너비를 차지한다.
- <p> : html문서의 문단을 정의
- <div> : html요소를 위한 컨테이너
inline : 새 줄에서 시작하지 않으며, 필요한 너비만 차지
- <span> : 텍스트의 일부를 표시하는데 사용

HTML <form><input>

사용자로부터 데이터를 입력받기 위한 대화형 컨트롤
type 속성 값에 따라 다양한 컨트롤 유형을 제공
- <input type = "text">

<form action="처리 할 페이지주소" method="get|post"></form>

action = "" : 입력 받은 데이터를 처리할 스크립트 파일을 명시
method = "" : 입력받은 데이터를 서버에 전달하는 방식
- method 생략시 default는 get

[자주 쓰이는 type 속성 값]

<inut type = " ?? " >	설명
button	일반 버튼
checkbox	체크박스
color	사용자가 색상을 선택하거나 입력할 수 있는 컬러 피커 형태의 입력 필드
date	날짜 입력 컨트롤
datetime-local	날짜와 시간 입력 필드
email	이메일 주소 필드
file	파일 선택 및 업로드
password	비밀번호 입력 필드
radio	라디오 버튼

vscode로 html 실행해보기

<폴더 내의 html파일을 클릭하여 실행하는 경우>

http없는 단순한 파일형으로 웹 페이지가 열린다. 즉, 웹서버가 구축되지 않았다.

<vscode에서 Live Server를 이용하여 실행한 경우>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입 폼</title>
</head>
<body>
    <h1>회원가입</h1>
    <!-- action이 없으면 서버로 가지 않음 -->
    <form action="MainServlet" method="post"> 
        <input type="hidden" name="sign" value="registMember"><br><br>

        <label for="name">이름:</label><br>
        <input type="text" id="name" name="name" required><br><br>

        <label for="email">이메일:</label><br>
        <input type="email" id="email" name="email" required><br><br>

        <label for="password">비밀번호:</label><br>
        <input type="password" id="password" name="password" required><br><br>

        <input type="submit" value="가입하기">
    </form>
</body>
</html>

<위 코드에서 input값을 입력 후 button을 누른 경우>

입력한 input값이 [이름 = 값 & 이름 = 값 & 이름 = 값] 으로 url에 나타난다.

이를 쿼리 스트링이라고 한다.

쿼리스트링 : URL 뒤에 입력 데이터를 함께 제공하는 가장 단순한 데이터 전달 방법

ㄴ 주로 GET방식으로 데이터를 요청할 때 쓰인다.

ㄴ URL에 노출되기 때문에 보안에 취약하기도 하다.

<name 속성을 없앴을 경우>

value들이 서버로 넘어가지 않는다. -> name 속성을 가진 경우만 서버로 제출 된다.

HTTP (HyperText Transfer Protocol)

: 클라이언트와 서버 간에 데이터를 주고받기 위한 프로토콜

기본적으로 데이터를 주고받는 규칙을 정의하며, RESTful이 이를 기반으로 작동

HTTP 메소드	요청
GET	데이터를 요청 -> 오직 받기만 함
POST	데이터를 서버에 제출할 때
PUT	서버에 저장된 데이터를 수정 & 대체
DELETE	서버에 저장된 데이터를 삭제

RESTful API (Representational State Transfer)

: 웹 표준을 기반으로 API 설계 원칙

REST 원칙을 따르는 API는 HTTP 프로토콜을 사용하여 데이터를 주고받으며, 웹 개발에서 널리 사용됨

보안이 취약해서 get, post만 사용할 것을 지향함

-> 즉, RESTful은 HTTP 위에서 설계된 하나의 스타일이라고 볼 수 있습니다.

servlet (서블릿)

form태그에서 servlet을 사용하는 것을 보고 조금 더 조사해보았다.

servlet : 동적 웹 페이지를 만들 때 사용되는 자바 기반의 웹 애플리케이션 프로그래밍 기술

웹 요청과 응답의 흐름을 간단한 메서드 호출만으로 다룰 수 있게 해준다.
예를들면 로그인 시도를 할 때, 서버가 클라이언트에서 입력되는 아이디와 비밀번호를 확인하고 결과를 응답하는데 이러한 역할을 수행하는 것이 서블릿이다.

jsx / js 차이

강사님이 react 프로젝트에서는 jsx를 사용하고 next프로젝트에서는 js를 사용하길래 차이점에 대해서 찾아보았다.
강사님께서는 기존에 있던 index.js나 app.js와 같은 파일과 구별하기 위함이라고 하셨다.

JSX (JavaScript XML) : 자바스크립트에서 XML을 추가한 확장형 문법

자바스크립트에서 HTML 문법을 사용할 수 있고 주로 리액트나 다른 프론트엔드 프레임워크에서도 사용이 가능합니다.

const element = <h1>Hello, world!</h1>;

JSX파일은 UI 관련 작업을 할 때 권장되며, React에서 에러, 경고 메세지를 표시해준다

Babel

브라우저는 JSX를 이해하지 못합니다. 따라서 작성된 JSX 코드를 JavaScript 코드로 변환하는 작업이 필요합니다.

JSX 코드는 자바스크립트 컴파일러인 @babel을 통해 Javascript로 변환됩니다. Babel은 JSX를 JavaScript로 변환하는 데 사용되는 가장 일반적인 도구입니다.

JS와 JSX를 반드시 구분해서 사용해야 할까?

스택오버플로우의 ReactJS - .JS vs .JSX의 게시물에서 가장 높은 추천 수를 받은 답변의 내용을 확인해보면 'JS와 JSX는 확장자로서의 차이가 없다' 라는 의견이 현재 가장 지배적인 것 같습니다.

다만 게시물의 작성자는 JSX는 자바스크립트 표준 문법이 아니기에 이에 관한 논쟁이 있을 수 있다고 말하고 있습니다. 하지만 JSX에 대한 설명에서 보았듯이 결국 리액트로 작성한 코드들은 자바스크립트로 변환됩니다. 따라서 컴포넌트 파일을 만들어 사용하는 리액트의 JSX 관련 코드는 .jsx로 만들고, 나머지 일반 JavaScript 코드들은 .js로 만들며 유연하게 사용하면 될 것 같다.

참고

https://velog.io/@minkuk90/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-.js-vs-.jsx-%EC%B0%A8%EC%9D%B4%EC%A0%90

virtual dom

이전에 블로그에 정리한 내용 > https://yeeeon.tistory.com/33

[React] Virtual DOM

DOM(Document Object Model) 기존 웹이 사용하는 DOM의 Document는 HTML을 말한다. 브라우저를 공장이라고하면 html문서는 이 공장들에 보내주는 주문서이다. 이 주문서에는 내가 원하는 웹페이지의 요소들과

yeeeon.tistory.com

css 3가지 방법

css는 직접 사용해보면서 어느정도 익혔다고 생각해, 자세한 예제들은 생략하고 어떤 방식이 있는지 정리해보기로 했다.

외부 CSS
- HTML 페이지의 <link>요소에서 정의된다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

내부 CSS
- <style> 요소 안에서 정의된다

<!DOCTYPE html>
<html>
<head>
<style>
    body {
      background-color: linen;
    }

    h1 {
      color: maroon;
      margin-left: 40px;
    }
</style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

인라인 CSS
- 관련 요소에 style 속성을 추가

<h1 style="color:blue;text-align:center;">This is a heading</h1>

저작자표시 비영리 변경금지

'[LG유플러스]유레카 SW' 카테고리의 다른 글

[Day5] Javscript (1)	2025.01.24
[Day4] 부트스트랩 & Javascript (2)	2025.01.23
[Day3] CSS 기초 & bootstrap (4)	2025.01.22
[Day1] html 기초 & SEO 최적화 마크업 규칙 (2)	2025.01.20

vscode로 html 실행해보기

virtual dom

css 3가지 방법

'[LG유플러스]유레카 SW' 카테고리의 다른 글

티스토리툴바