HTML+CSS(6)
-
CSS 기본 텍스트를 표현하는 스타일
1. 글꼴관련 스타일 속성 font-family 선택자 { font-family : 글꼴, 글꼴 } 글꼴 적용 - 앞에서 부터 우선순위 font-size 선택자{ font-size : 크기} 글꼴 크기 키워드(small - large...등) 단위 (px, em, pt.. 등) 백분율 (부모의 크기에 따라) font-style 선택자{ font-style : italic} 이텔릭체 변환 (obilque) default = nomal font-weight 선택자{ font-weight : 굵기} lighter. bold, bolder 100~900 (굵기) 2. 웹 폰트 사용하기 사용자 컴퓨터에 없는 폰트도 웹에 출력 가능 구글 폰트 : fonts.google.com @import url(' 폰트 주소 '..
2021.04.02 -
CSS 기본 - CSS 다루기
1. 웹문서에 디자인 입히기 HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹문서의 디자인을 구성한다. (웹 표준) HTML은 PC의 웹브라우져 화면에 최적화 되어 있음. 따라서 인쇄, 다른 기기의 사용 제약이 있음. CSS는 HTML 변경 없이 기기에 맞춰 CSS 파일만 변경하면 되므로 효율적 반응형 웹디자인 - 웹 브라우저의 크기에 따라 레이아웃 자동 변경 2. 스타일과 스타일시트 스타일 형식 선택자 {속성 : 속성값; ....} p{ color: red;} 내부에서 스타일 시트 브라우저 기본 스타일 사용자 스타일 인라인스타일 내부스타일 외부스타일 인라인 스타일 간단한 스타일 정보를 적용할 때 대상에 직접표시 ~~~ 내부스타일 HTML문서에 저장하는 스타일 head 태그안에서 태그 안에 작성 외..
2021.04.01 -
HTML+CSS+자바스크립트 웹코딩의 정석 3강
5. 폼 삽입하기 5-1 폼에서 사용하는 태그 form - 폼의 시작과 끝을 만듦 fieldset - 폼 요소를 그룹으로 묶음 legend - 필드셋에 제목을 붙임 label - input 태그와 같은 폼 요소에 레이블을 붙임 input - 사용자가 입력할 필드 삽입 select, option - 드롭다운 목록 삽입 textarea - 여러줄 입력이 가능한 텍스트 영역 삽입 datalist - 데이터 목록 삽입 autocomplete - 자동완성기능 5-2 사용자 입력을 위한 input 태그 input의 타입 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40..
2021.03.30 -
HTML+CSS+자바스크립트 웹코딩의 정석 2-1강
표 만들기2 thead - 표 제목 tbody - 표 본문 tfoot - 표 요약 자바스크립트를 이용하여 각 장마다 표 제목과 표 요약을 출력할 수 있음 행,열 합치기 rowspan colspan td ------ = 합칠 셀 갯수 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 Insert title here table, td { boder-collapse: collapse; } 우리반 목록 이름 전화번호 전공 이름1 0101 ㅁㅁㅁ 이름1 0101 ㅁㅁㅁ 이름1 0101 ㅁㅁㅁ aa ㅁㅁㅁ aa..
2021.03.30 -
HTML+CSS+자바스크립트 웹코딩의 정석 2강.
4. 웹 문서에 다양한 내용 입력하기 4.1 텍스트 입력하기 제목 heading ~~ 점점 작아짐 반드시 사용 단락 줄바꿈 '인용 강조(굵게) 굵게 강조(기울이기) 기울이기 줄임말 참고사항 컴퓨터인식 작은 텍스트(부가정보 등) 아래 첨자 위 첨자 취소선 밑줄 새 내용 삽인 삭제 ** 4.2 목록 만들기** 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 목록만들기 unordered List HTML5 CSS3 JSCIPT JQUERY ordered List HTML5 CSS3 JSCIPT JQUERY HTML5 CSS3..
2021.03.29 -
HTML+CSS+자바스크립트 웹코딩의 정석 1강.
1.1 웹개발 정적 사이트(static) - 방문자에게 정보를 보여 주기만 하는 웹 사이트 동적 사이트(dynamic) - 친구추가, 좋아요, 공유하기, 구매, 결제 등 기능과 서비스 포함 서버와 클라이언트 서버 인터넷에 연결된 컴퓨터 텍스트, 웹요소, 사용자 정보등을 저장 클라이언트 웹사이트에 접근하는 PC나 스마트폰등 프런트엔드 개발과 백엔드 개발 프런트엔드 사용자 앞에 보이는 영역 다양한 브라우져 종류와 버전에 따라 작동하게 만들어야함 백엔드 보아지 않는 영역 데이터베이스 설계 데이터처리 웹개발의 기본 HTML, CSS, JavaScript 웹문서의 뼈대를 만드는 HTML 웹문서를 꾸미는 CSS 사용자 동작에 반응하는 자바 스크립트 HTML이란? 웹문서를 만드는 언어 Hyper Text Markup..
2021.03.29