HTML 8

HTML5 + CSS3 (12) CSS3 선택자, (13) 애니메이션

12. CSS3 선택자 * 연결 선택자: 선택자와 선택자를 연결해 적용 대상을 한정하는 선택자 - 하위 선택자: 부모 요소에 포함된 모든 하위 요소에 스타일이 적용 (예시) section 요소 안에 있는 모든 p 요소의 글자 색을 파란색으로 지정 section p { color: blue; } - 자식 선택자: 자식 요소에 스타일을 적용하는 선택자, '>'부등호를 표시해 부모와 자식 요소를 구분 (예시) section 요소 안에 포함된 p 요소 중 자식 p 요소에만 파란색으로 지정 section > p { color: blue; } - 인접 형태 선택자: 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일 적용 (예시) h1 요소 다음에 오는 p 요소들 중 첫 번째 p 요소에만 밑줄 적용 h1..

프로그래밍 2021.10.12

HTML5 + CSS3 (10) HTML - 시맨틱 태그, (11) 멀티미디어

10. HTML - 시맨틱 태그 * 시맨틱 태그 - 태그: 머리말 지정하기 사이트 전체의 제목 부분, 본문의 제목 부분, 주로 페이지 맨 위나 왼쪽에 삽입 태그를 사용해 검색 창을 넣거나 태그를 사용해 사이트 메뉴를 넣음 - 태그: Navigation 링크 - 태그: 주제별 콘텐츠 영역 문서에서 주제별로 콘텐츠를 묶을 때 사용 섹션 제목을 나타내는 태그가 함께 사용(h1, h2, h3...) - 태그: 콘텐츠 내용, 독립적으로 배포하거나 재사용하더라도 하나의 콘텐츠로 인식됨 - 태그: 본문 이외의 내용 - 태그: 외부 문서 삽입 속성 설명 width, height 너비, 높이 name 이름 src 프레임에 표시할 문서의 주소 seamless 프레임의 테두리를 없애 본문의 일부처럼 보이게 한다. - 태그:..

프로그래밍 2021.10.12

HTML5 + CSS3 (7) 배경 스타일, (8) 레이아웃 스타일, (9) CSS 포지셔닝

7. 배경 스타일 * 색상 표현법 - 16진수 표기법 #ffffff 형식(000000(검은색) ~ ffffff(흰색))으로 6자리의 16진수 표기 앞 2자리 = 빨강, 중간 2자리 = 초록, 끝 2자리 = 파랑 2자리씩 중복될 경우 중복해서 사용할 수 있음(ffaacc -> fac) - hsl/hsla 표기법 color: hsl(240, 100% 50%) 표기 240(색상, hue), 100%(채도, saturation), 50%(밝기, light) 투명도를 조절할 때 마지막에 알파값 추가(알파값은 불투명도를 나타내는 값, 0 ~ 1) - rgb/rbga 표기법 color: rgb(255, 0, 0) 표기 빨강, 초록, 파랑 0은 하나도 섞이지 않음, 255 가득 섞임 투명도를 조절할 때 마지막에 알파값..

프로그래밍 2021.10.11

HTML5 + CSS3 (5) CSS 기초, (6) 텍스트 관련 스타일

5. CSS기초 * 스타일, 스타일 시트 - 스타일: HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등을 결정짓는 요소 - 스타일 시트: 스타일을 관리하기 쉽게 집합시켜놓은 것 - 스타일 형식 p { text-align: center; } p: 선택자, { } 와 사이에 정의한 스타일 규칙이 적용될 대상 text-align: 스타일 속성 center: 속성 값, 속성과 속성값이 여럿일 경우 세미콜론으로 구분 - 스타일 주석: /* */ 사이에 주석 내용 입력 - 내부 스타일 시트 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것 모든 스타일 정보는 태그 안에서 정의 태그 사이에 작성 - 외부 스타일 시트 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할..

프로그래밍 2021.10.11

HTML5 + CSS3 (4) 폼

4. 폼 * 제작 - 사용자가 웹 사이트로 정보를 보낼 수 있는 요소 - 관련 작업: 정보를 저장하거나 검색, 수정 작업 - 폼에 입력한 정보를 처리하는 것은 ASP나 PHP 같은 서버 프로그래밍을 이용한다. 폼을 제작하는 기본 태그 예시) 여러 폼 요소 폼 요소에 레이블(텍스트)를 붙이는 태그 예시) 폼 요소를 그룹으로 묶는 태그 예시) ... 그룹으로 묶는 구역에 제목을 붙이는 태그 fieldset과 함께 쓴다. 예시) 로그인창 - 사용자가 입력하는 부분 - 입력하는 내용의 종류는 태그의 type 속성을 통해 지정 - id 속성을 이용해 여러 번 사용된 폼 요소를 구분하기 위해 사용한다. 예시) - 태그에서 사용하는 속성 속성 설명 method 사용자가 입력한 내용을 서버 프로그램으로 넘길 방법을 지..

프로그래밍 2021.10.07

HTML5 + CSS3 (1) 기본, (2) 텍스트 관련 태그, (3) 이미지와 하이퍼링크

1. 개념 * HTML이란? 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어 * 웹 표준 - 웹 사이트를 제작할 때 지키는 규칙 - 웹 표준을 지켜 제작한다면 장소나 브라우저와 상관없이 웹을 볼 수 있음 * HTML5, CSS3 의의 - 최신 웹 표준에 맞는 웹 사이트 제작 도구 - 앱을 디자인하기 위한 기초 - 인터랙티브(사용자의 동작에 결과물을 보여줄 수 있는)한 사이트 제작 - 사이트와 블로그의 수정을 쉽게 함 * HTML 기본 문서 구조 Main Title Hello World~~~ - 현재 문서가 HTML5 언어로 작성된 웹 문서 - : 처리할 문서의 유형을 알려주는 태그 ~ - 웹 문서의 시작과 끝을 나타내는 태그 - lang 속성: 문서에서 사용할 언어 지정( ex: lang="ko" ..

프로그래밍 2021.10.02

[Web] 웹 사이트 개발(Tomcat, Servlet)

※ 개요 - 웹 서버가 실행할 수 있는 자바 프로그램 - 모든 웹 서비스는 웹 서버로부터 웹 클라이언트에게 정보 제공 - 정보 제공 형태는 HTML, CSS, Java Script(클라이언트로 도착해서 실행되는 코드) - 웹 브라우저가 프로그램이 실행되는 플랫폼이 되어가는 추세 * 정보 교환 과정 - 웹 브라우저(웹 클라이언트)를 사용해 구글 웹 서버에 접속한다. - 웹 브라우저 주소창에 http://google.com을 입력하고 엔터(웹 서버 접속) - Domain Name: google.com * 구성 - 물리적인 웹 서버 컴퓨터 - 접속 요청에 응답할 웹 서버 소프트웨어 - 웹 클라이언트 - 웹 서버 간의 통신 규약(HTTP) * Web Server SW 종류 - Apache Web Server: ..

프로그래밍 2021.06.16

[데이터 수집] 빅데이터 수집 시스템 개발(BeautifulSoup)

※ 개요 - 웹 크롤링(Web Crawling) - 웹 스크래핑(Web Scraping): 웹 페이지 내에서 정보를 수집 - 수집 툴 * requests * BeautifulSoup * Selenium: 동적인 컨텐츠까지 접근하여 수집 가능 - 웹 페이지 동작 순서 사용자 클릭 or 동작 -> 요청이 서버로 전달 -> 서버는 해당 컨텐츠 서칭 -> 웹 브라우저로 컨텐츠 다운로드(html 형태, 안에는 실행 가능한 Javascript 내장) -> 추가로 Javascript가 서버에 또 다른 컨텐츠 요청 가능 ※ Requests(웹서버에 대한 요청 전달) - 웹 서버에 접속 - 요청 ≒ 웹 브라우저 주소창에 URL을 입력하고 엔터를 치는 행위 ≒ URL 클릭(링크) - request response(형식: ..

프로그래밍 2021.06.15