- UI 구현
- WWW(World Wide Web Consortium)
W3C는 월드 와이드 웹을 위한 표준을 개발하고 장려하는 국제적인 컨소시엄 조직
웹의 지속적인 성장을 도모하는 프로트콜과 가이드라인을 개발하여 월드 와이드 웹의 모든 잠재력을 이끌어 낸다는 목적
- 웹의 3요소
① 웹 표준
: 웹에서 사용되는 기술이나 규칙을 의미하며, 웹 사이트를 작성할 때 이용하는 HTML CSS JS 등에 대한 규정과 다른 기종이나 플랫폼에서도 웹페이지가 구현되도록 제작하는 기법
② 웹 접근성
: 어떠한 사용자, 어떠한 기술 환경에서도 사용자가 전문적인 능력없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장
③ 웹 호환성
: 서비스 이용자 단말기의 하드웨어 및 소프트웨어 환경이 다른 경우에도 동등한 서비스를 제공
- 서버와 클라이언트
1. 서버
클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 또는 프로그램
1) 웹 서버는 웹 브라우저(ct)로 부터 HTTP 요청을 받아들이고, HTML 문서(웹페이지)를 반환
① 웹 서버의 기능은 HTML문서(웹 페이지)를 클라이언트로 전달하는 것
② HTML문서에는 그림, CSS, 자바스크립트가 포함
③ 콘텐츠 제공뿐 아니라 클라이언트로부터 콘텐츠를 전달 받는 것도 웹 서버의 기능
2) 서버 프르그램의 종류 : Apache, IIs, nginx, GWS 등
2. 클라이언트
1) 네트워크를 통하여 다른 서버 시스템 상의 컴퓨터에 원격 서비스에 접속할 수 있는 응용 프로그램이나 서비스를 의미
2) 웹 브라우저에 URL을 입력하여 그 URL에 해당하는 웹 서버로 웹 페이지에 대한 요청을 전달하는 것
3) 클라이언트의 대표적인 종류 : 파이어폭스, 크롬, IE, 사파리 등
3. 웹 사이트와 웹 페이지
1) 웹 사이트는 인터넷 프로토콜 기반의 네트워크에서 URL을 통하여 보이는 웹 페이지들의 의미 있는 묶음
2) 웹 페이지는 월드 와이드 웹상에 있는 개개의 문서 의미
- HTML
Hyper Text Markup Language
- 하이퍼텍스트를 만드는 언어
- 하이퍼텍스트 : 링크를 만드는 텍스트
1. 기본태그
① <!DOCTYPE html> - HTML5 문서임을 의미
② <html></html> - html 문서의 시작과 끝
③ <head></head> - 스타일과 스트립트를 선언
④ <title></title> - 브라우저 제목
⑤ <body></body> - 사용자에게 보여주는 실제 내용
2. 레이아웃 관련 태그
① Header - 해당 페이지의 헤더 영역을 지정하고, 주로 로고, 회사명, 사이트 맵, 검색 버튼 등이 위치
② Navigation - 본문의 주요 메인 영역 지정
③ Section - 해당 페이지의 콘텐츠 영역을 지정할 때 사용하며 헤더, 푸터 태그와 비교해서 영역 구분 지정
④ Article - 독립적인 콘텐츠 항목에 대한 영역
⑤ Aside - 본문 내용 이외에 표현하고자 하는 기타 내용이 있을 경우에 영역을 지정할 때 사용, 서브 메뉴
⑥ Footer - 본문 내용 아래에 위치, 주로 개인정보 보호정책, 회사 주소등 작성
- CSS
: 웹 페이지 전체의 일관성을 유지할 수 있도록 스타일을 미리 저장해 둔 시트 의미
1. 문법
선택자 {
속성 : 값;
속성 : 값;
}
h1 {
color: white;
background-color: black;
}- 선택자 : 스타일을 적용하기 위한 대상으로 HTML요소, id(#id명), class(.class명) 형태로 지정가능
2. CSS 선택자
1) 공용 선택자
: HTML 요소를 선택자로 하여 해당 범위나 모든 스타일에 적용 가능(모든 스타일은 *으로 )
* 보통 초기화값을 주고 싶을 때 사용 -> * { 속성: 값; }
2) 태그 선택자
: 지정한 태그에 대하여 스타일이 적용 -> 클래스명 { 속성: 값; }
3) 클래스 선택자
: 그룹화하여 스타일 지정가능 -> .클래스명 { 속성: 값; }
4) 아이디 선택자
: 특정 아이디를 부여한 태그에만 사용(유일, 많이사용지양) -> #아이디명 { 속성: 값; }
'국비 > HTML&CSS' 카테고리의 다른 글
| UI 설계_개념 (0) | 2021.10.07 |
|---|---|
| CSS_flex와 float (0) | 2021.10.01 |
| CSS_display (0) | 2021.10.01 |
| HTML_form (0) | 2021.09.28 |
댓글