w3C
웹의 표준화를 추진하는곳.
그래서 우리가 HTML에 정의된 태그를 사용해서 웹페이지를 만들면 모든 브라우저 상에서 잘 표현 될 거라는 것을 믿고 쓰는 것!
간혹 다른 브라우저에서 지원이 되지 않는 태그들이 있다.
웹표준:웹 기술을 표준화하기 위한 일련의 단계, 요구사항
웹표준 지키야하는 이유는?
브라우저 구성요소 - 브라우저 엔진이 있다
웹 페이지를 구성하는 html css등 자료를 해석해서 사용자의 장치에 맞게 변화하는 역할을 하는데
엔진 - 웹 표준에 의거하여 프로그래밍 해야한다
따라서, 코드 작성 시, 웹 표준에 맞게 코드를 작성해야 브라우저가 정상적으로 읽을 수 있다.
크로스 브라우징 : 여러 브라우저에서 동일한 화면 / 동작 등을 보여줄 수 있도록 제작하는 기술 또는 방법.
브라우저의 기본 명칭
*뷰포트:하나의 웹 페이지가 출력되는 영역.
-출력:**렌더링 : 브라우저의 뷰 포트 영역에 웹 사이트를 출력 / 그려내는 것.
2.웹 접근성
장애를 가지신 분들도 웹 사이트를 이용할 수 있게 하는방식
3.웹 호환성
웹 사이트가 작동하는 서비스 이용자 단말기(pc, 모바일등) 다른 환경에서도 동등한 서비스를 제공하는 것.
4.UI
UI디자인 - 화면의 모양이나 기능 등 표현하는 것.
사용자가 마주하게 될 시각적인 디자인을 말한다.
목적: "일관성을 확보"하는것.
5.웹
-인터넷이 연결된 사용자들이 서로 정보를 공유하는 공간.
-웹 브라우저를 통해 접근할 수 있는 사이트를 웹 사이트라고 한다.
-www / w3라고 부른다.
6.웹 브라우저
-어떤 사이트에 접속할 수 있는 도구를 브라우저 또는 웹 브라우저라고 합니다.
종류: 크롬, 엣지(MS), 파이어 폭스, 사파리 등
7. 웹개발
-웹 사이트를 만드는 것.
1)정적인 사이트
-사용자에게 단순한 정보를 보여주는 것.
2)동적 사이트
-화면에 보이는 모습 뿐만 아니라 사용자에게 제공할 기능과 서비스까지 포함한 사이트.
3)백 엔드
-보이지 않은 정보를 처리.
-서버에서 데이터를 관리하는 프로그래밍
-데이터베이스를 설계하거나, 데이터를 처리하는 영역
4)포른토 엔드(클라이언트)
-눈에 보이는 화면
-웹 사이트의 디자인, 사용자 동작에 반응하는 기능을 만든다.
-"서버에서 받아온 데이터를 웹 브라우저에 어떻게 표시할 것"인지 프로그래밍한다.(HTML CSS JS)
8.서버(제공하는 역할)
-유투브->서버 라고 부르는 컴퓨터에 들어있는 내용들
-제공하는 역할
예:관광지 어플 - 갈만한 곳 ->전주 한옥, 어디어디
관광지 어플 : 서버 역할
나: 클라이언트
덕진 공원 위치 - 맵
관광지 어플 <-----지리 정보 서버
관광지 어플 : 클라이언트 역할
지리 정보 서버: 서버
제공하는 컴퓨터:서버
그 서비스를 받는 컴퓨터: 클라이언트
9.웹 동작 방식
웹 앱 = 웹 어플리케이션 = 인터넷을 통해 웹 브라우저에서 이용할 수 있는 응용 프로그램.
웹 앱 - 홈페이지
사용자 컴퓨터 ---- 서버
1.브라우저를 연다
2. 주소창에 접속을 원하는 사이트 주소를 입력한다
3.해당 사이트의 주소에 맞는 서버로 최초 요청이 들어간다
4.최초 응답 - 기본적인 웹 사이트 구조를 담고 있는 html파일로 응답.
5. 작성된 html에 맞는 이미지, css파일 등 서버로 추가 요청을 보낸다.
6. 새로운 파일(페이지를 구성하는)들을 보내준다.
*키워드
-웹 사이트를 개발: 우리 컴퓨터 환경을 로컬(local)개발 환경(로컬은 테스트용, 로컬이야? 이렇게 물어보면 너 컴퓨터에서 테스트 하고 있냐는 말임)
HTML(Hyper Text Markup Language)
-HTML은 기본적으로 의미를 가지고 있습니다. 자주 사용하는 HTML요소와 해당 요소들을 가지고 실제 CSS와 JS를 통해 어떻게 웹 사이트를 만들 수 있는지 알아야 한다.
Hyper Text:문서를 연결해주는 링크
Markup Language: 표시하다.
-마크업 언어는 화면에 표시되는 형식을 나타내거나 태그를 이용해서 데이터의 논리적 구조를 명시하기 위한 규칙을 정의
HTML5 특징
-시멘틱 태그를 지원하다.(Semantic:의미의, relating to meaning in language or logic.
-문서 구조에 적합하게 웹 페이지를 설계할수 있다.
-직관적으로 레이아웃을 작성할 수 있다.
웹 개발
웹 편집기를 통해 소스를 작성하고, 웹 브라우저에서 결과를 확인한다.
웹 편집기 종류 : Notepad++, vscode 등등
Tab size: 2로 바꿔주셈
바꿔주는 이유는 들여쓰기를 지켜줘야 매너 있는거임
들여쓰기(기본)
-코드의 가독성을 위해서
-나를 감싸는 중괄호 1개 = 탭 1번
!html 치면 이렇게 저절로 언어 생성됨.(아까 html auto completion) 깔았기 때문ㅇㅇ
shift+home: 커서가 뒤에 있을때 이렇게 눌러누면 앞에까지 커서 잡아줌. 복사할때 편함ㅎㅎ
shift+end:커서가 앞에 있을때 이렇게 눌러주면 뒤에까지 커서 잡아줌. 복사할때 편함ㅎㅎ
HTML 기본 구조
1. HTML에서 사용하는 명령어 - 태그(Tag)라고 합니다.
<...>로 나타내며, 대부분 한 쌍으로 이루어져 있다.
HTML 문서는 웹 브라우저에서 실행된다. - 웹 표준을 준수 - 브라우저 엔진(표준) - 정상적으로 읽을 수 있다.(정상적으로 뷰 포트 영역에 렌더링)
위 문제를 해결하기 위해 Unicode를 만들었다.
-Unicode는 모든 문자를 표현할 수 있다.
-하나의 문자셋 안에 전 세계 모든 문자를 넣어서 사용한다.
-UTF-8, UTF-16
=========================================================
html tag
1. 텍스트와 관련된 태그들
1)제목에 표시하는 h*
*h1태그는 모든 페이지에 하나만 작성해야 한다.(웹 표준)
2)굵은 글씨
b, strong
b태그는 단순한 굵은 글씨
strong태그는 실제 페이지에서 더 중요한 내용을 표기할 때 사용하며, 시각 장애를 가지신 분들을 위한 HTML을 만들 때 사용합니다.
웹표준을 준수하고 싶으면 strong태그를 사용하는 것이 좋습니다.
3)이텔릭체(기울어진 글씨)
em, i
i태그는 그냥 단순한 기울어진 글씨
em태그는 문장의 흐름에서 특정 부분을 강조하고 싶을때
4)문단을 나타내는 p
5)밑줄, 취소선u
u.s
6)큰 글자와 작은 글자
big, small
7)강제 공백
8)주석
<!-- 주석 내용 작성-->
9)개행(줄 바꿈)
<br>:웹 표준을 준수하려면 사용하지 말아야 한다.
2.미디어 관련 태그
video
src 경로 작성
이미지 img : *img은 따로 끝에 </img>없음*
src 경로 작성
3. 링크 관련 태그 - a
-하이퍼링크:클릭하면 해당 페이지로 이동
-href 경로 작성
저렇게 target="_blank" 하면
4.Table
-테이블은 table 태그로 시작, 끝
5.목록
1)순서가 있는 목록:ol
2)순서가 없는 목록:ul
3)li 태그 - ol,ul과 같이 사용해야 한다.
6. input: 사용자에게 어떤 정보를 입력 받을 때 사용한다.
***요소와 속성
<h1>안녕하세요.</h1> --> h1 요소: 안녕하세요.
요소(Element:태그와 태그 사이에 있는 내용을 포함하여 요소라고 한다.
내용 앞 태그를 시작(열린)태그, 뒤 태그 종료(닫는)태그
*태그 사용 시, 대소문자를 구별하지 않는다. 단, W3C에서 소문자를 권장하고 있기 때문에 소문자를 사용하는것이 일반적인 방법이다.
2.빈 요소(Empty Element)
-내용을 가질 수 없는 요소를 빈 요소라고 한다.
예:<br> <input> <link> 등
3. 속성(attributes)
태그가 가질 수 있는 정보를 속성이라고 한다.
태그 내부에 속성을 부여하고, 값을 넣을 수 있다.
속성 작성 시, 시작 태그에 작성해야 한다.
HTML에는 태그마다 지정할 수 있는 속성이 미리 정의되어 있다.
4.전역 속성
1)id
-요소를 가르키는 이름을 작성한다.
-중복된 이름(id)을 사용할 수 없다
2)class
-요쇼를 가르키는 이름을 작성한다.
-이름 중복 가능
3)style: 요소에 스타일을 지정할 수 있다.
=================================
table 요소
-행과 열로 구성된 표를 만들때 사용하는 요소입니다.
-thead: 표 상단을 담당합니다.
-th : 표 상단 thead의 칸을 나타낼 때 사용합니다.
-tbody:표의 본문
-tr(table row):행, 한줄
-td(table data) : 열column, 한 칸의 cell data 표현합니다.
행 병합과 열 병합
행 병합(rowspan) 예)rowspan="3"
-줄. 셀을 세로로 합친다.
-데이터를 가로 방향으로 읽는다.
열 병합(colspan)
-셀이 가로로 합친다
-데이터를 세로 방향으로 읽는다.
========================================================
사용자에게 입력 받는 input
-사용자가 데이터를 입력하는 요소, type 속성으로 입력 받을 데이터타입을 정할 수 있다.
***name 속성으로 해당 input의 이름을 명시한다.
***value속성으로 해당 input의 초기값을 명시한다.
name속성:form 데이터를 서버로 전송하면, 서버에서 받을때 name 데이터로 받는다. 실제 값은 value 값이 들어있다.
form
ID<input type="text" name="userid">
String userid = request.getParameter("userid")
label
input 태그와 관계(연결)를 맺을 수 있습니다.
input 태그가 무엇을 말하는지 제목을 명시할 수 있다.
lable 태그를 사용하면 사용자가 클릭할 수 있는 범위를 확장할 수 있다.
label의 사용방법
1)input을 lable태그를 감싸기
2)input id와 for 속성에 동일한 값을 작성하기
*사용자 측면에서 label을 사용하는것이 편하다.
힌트를 표시하는 placeholder 속성
-사용자가 입력 할 안내문 역할
-사용자의 입력 실수를 최소화한다.
비활성화, disabled
-입력 요소를 비활성화 할 수 있다.
읽기 전용, readonly
-사용자가 입력은 할 수 없지만, 읽는 것만 가능한 읽기 전용 필드
==============================
input type 종류
HTML5에서는 용도에 맞게 입력할 수 있는 다양한 텍스트 필드를 제공합니다.
text
-maxlength: 최대 길이
-minlength: 최소 길이(최소 길이 위반 시, 서버로 전송 거부)
tel
pc 브라우저에서는 큰 변화가 없어 보이지만, 모바일 기기에서는 키보드 배열이 바뀐다.
file
-accept:받을 파일의 종류를 설정
-multiple : 여러 파일을 선택할 수 있는 속성
hidden
-화면에는 보이지 않지만, 서버로 전송되는 요소.
-사용자에게 보여줄 정보는 아니지만, 관리자 / 개발자가 알아야하는 정보를 hidden 필드에 입력한다.
radio
-택1. 사용자에게 체크 여부를 해당 그룹에서 1개만 입력 받는다.
-동일한 name 속성을 작성하여 그룹으로 묶을 수 있다.
-value값은 실제 서버에 전송되는 값 > 예시에서는 한글로 작성했지만, 실제 코딩 시, 영어 또는 숫자로 작성한다.
<input type="radio" name="userGen
복수 선택을 하고 싶은 첫번째 질문같은 경우 type="checkbox"로 가고
한가지만 선택하고 싶은 두번째 질문 같은 경우는 type="radio"로 함
==============
textarea
-장문의 텍스트 데이터를 받을 때 사용합니다.
-너비를 지정하는 cols 속성과 몇줄을 표시할 지 정하는 rows 속성을 사용한다.
cols="20"--> 20글자만큼의 너비를 입력할 수 있어요. X
한글로 약 10글자 정도.
select
-사용자가 여러 데이터 중 1개를 선택할 수 있습니다.
-radio와 차이는 드롭 다운 기능을 제공한다.
-option 태그와 함께 사용한다.
-select 태그는 value 속성을 가질 수 없고, name 속성은 가질 수 있다. option태그는 value속성을 가질 수 있다
'UX UI' 카테고리의 다른 글
| 1주일_3일차: UX,UI (0) | 2023.03.10 |
|---|---|
| 1주일_2일차: UX,UI (0) | 2023.03.09 |
| 1주일차: UX,UI (0) | 2023.03.08 |
