728x90
Computer Paradigm의 변천(=IT기술) 과 Web 사용 발전
IT기술은 사용자의 편리성보다는 개발자의 편리성으로 인해 발전되었다.
1. program 기법 측면
2. 구조적 기법
- 과거에는 Main Frame 구조로 하나였지만 점차 발전되어 오늘날에는 Client-Server 구조로 전환되었다.
- process/ request 단위: thread
- platform dependence: 특정 운영체제나 하드웨어 환경에서만 실행 가능하거나 의존성이 존재하는 상태
- platform independence: 여러 플랫폼에서 동일하게 실행될 수 있는 특성
client tier-business tier-resource tier 3티어 아키텍처
client tier
- 사용자가 직접 상호작용하는 인터페이스
- 주로 브라우저, 모바일 웹, 데스크톱 애플리케이션 해당
business tier
- 애플리케이션의 핵심 로직을 처리하는 계층
- 클라이언트 요청 해석 및 비즈니스 규칙을 기반으로 데이터 처리
(servlet? java 기반의 서버측 기술)
resouce tier
- 데이터 저장 및 관리를 담당
모던 웹이란?
1. 컴포넌트 기반 (컴포넌트란? 재사용 가능한 모듈)
2. 상태관리
3가지 단계
1. 요청분석
2. 비즈니스 - 재사용이 가능
3. 응답
HTML
- Hyper Text Markup Language
HTML 요소란? 시작 태그, 일부 콘텐츠, 종료 태그
<!DOCTYPE html>
<!-- 문서 유형을 나타낸다. 1번만 표시-->
<html lang="en">
<!-- lang 속성 내부 <html> 태그를 지정해 웹 페이지 언어 선언-검색 엔진과 브라우저 돕기 위함 -->
<head>
<title>Document</title>
</head>
<body>
<h1>This is heading</h1>
<!-- heading은 h1~h6으로 구성, 숫자 클수록 작음 -->
<p>This is a paragraph</p>
<!-- 단락 -->
<p>
This is a <br />
paragraph with a line break.
</p>
<!-- br 태그는 줄바꿈 의미 -->
<a href="naver.com">html 링크 의미</a>
<!-- a태그는 하이퍼링크 정의, href 속성은 링크가 이동하는 페이지의 url 지정-->
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142" />
<!-- html 이미지, src: 원본 파일, alt: 대체 텍스트 -->
<img src="img_dev.jpg" />
<!-- img 태그는 HTML 페이지에 이미지 삽입하는데 사용 -->
<p style="color: red">This is a red paragraph.</p>
<!-- style은 스타일 속성-->
<p title="I'm a tooltip">This is a paragraph.</p>
<!-- title은 요소에 대한 추가 정보 정의-->
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr />
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr />
<!-- hr 태그는 HTML 페이지에서 주제별로 구분, 화면에 가로줄 나타냄-->
<b>This text is bold</b>
<!-- b 요소는 중요도 없이 굵은 텍스트 의미-->
<strong>This text is important!</strong>
<!-- strong 요소는 텍스트를 매우! 중요하게 정의, 굵게 표시-->
<i>This text is italic</i>
<!-- i 요소는 종종 기술 용어, 언어의 구절, 생각 등을 나타낼때 사용, 이탤릭체로 표시-->
<em>This text is emphasized</em>
<!-- em요소는 강조를 의미, 이탤릭체-->
<small>This is some smaller text.</small>
<!-- small 요소는 작은 텍스트 정의-->
<p>Do not forget to buy <mark>milk</mark> today.</p>
<!-- mark 요소는 표시하거나 강조 표시하는 텍스트 정의-->
<p>My favorite color is <del>blue</del> red.</p>
<!-- del 요소는 문서에서 삭제된 텍스트 정의, 브라우저는 보통 삭제된 텍스트를 통해 줄 긋는다. -->
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<!-- ins 요소는 문서에 삽입된 텍스트 정의, 브라우저는 삽입된 텍스트에 밑줄 긋는다.-->
<p>This is <sub>subscripted</sub> text.</p>
<!-- sub요소는 첨자 텍스트 의미, HO와2 같은 화학식에 사용가능 -->
<p>This is <sup>superscripted</sup> text.</p>
<!-- sup요소는 위 첨자 텍스트 의미, WWW와[1] 같은 각주에 사용가능-->
<p>
WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
</p>
<!-- q태그는 인용구 삽입 -->
</body>
</html>
- <tagname> Content goes here.. </tagname>
- HTML 요소는 중첩 가능
- 끝 태그 건너뛰지 X
url을 지정하는 2가지 방법 - 상대 URL 사용이 좋다. (도메인 변경해도 안깨진다.)
- 절대 URL - 다른 웹사이트에서 호스팅되는 외부 이미지로 연결 ( src="https://www.w3schools.com/images/img_dev.jpg ")
- 상대 URL - 웹사이트 내에서 호스팅되는 이미지에 대한 링크, URL에는 도메인 이름 포함X, URL이 슬래시 없이 시작되면 현재 페이지에 상대적으로 표시 ( src="/images/img_dev.jpg")
728x90
'💡 URECA > 🗒️ 스터디 노트' 카테고리의 다른 글
| [URECA] Day07 JS(4), TS(1) (1) | 2025.02.04 |
|---|---|
| [URECA] DAY 5 | JavaScript(2) (0) | 2025.01.24 |
| [URECA] Day 4 | 부트스트랩(2), JavaScript(1) (0) | 2025.01.23 |
| [URECA] Day 3 | CSS(2), 부트스트랩(1) (3) | 2025.01.22 |
| [URECA] Day 2 | HTTP 메서드, RESTful, 그리고 CSS(1) (0) | 2025.01.21 |
