본문 바로가기

프로그래밍 수업 정리 HTML

HTML 프로그래밍 여덟번째(폰트/글자 색/ 글자 정렬/줄 간격/text-decoration/그림자) 오늘 알아볼 것은 폰트 글자 색 글자 정렬 줄 간격 텍스트에 선 넣기 그림자 를 넣는 걸 배워볼 것이다. 첫번째로, 글자에 폰트를 넣는 방법을 알아볼 것이다. 구글 폰트 사이트를 검색해서 들어간다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 그다음, Language를 Krean으로 바꿔준다. 그 후에 원하는 폰트를 골라 클릭한다. 그후 오른쪽에 Select this style 를 눌러서 @import로 바꿔주고 글자 폰트를 바꾸고 싶은 html파일의 head안에다 을 넣어준다. 그 후에 클래스 선택자를 이용하여 font-f.. 더보기
HTML 프로그래밍 일곱번째(CSS기본형식/스타일적용) 오늘은 CSS의 기본 형태 스타일 적용 을 배울거다. 1. 기본형태 우선 css를 사용할때 기본 형태를 알아보자. 선택자 { 속성: 속성값; 속성2: 속성값; } *CSS에서 값을 넣어주는 대입 연산자에는 :(콜론)을 한 명령어/문장이 끝날때는 ;(세미콜론)을 넣어줘야 한다. ① 주석 /* 주석 내용 */ HTML의 주석처리 → Java 주석처리 → //주석내용 C언어 주석처리 Python 주석처리 → ##주석내용 ② 스타일 시트&상속 - 택스트등을 꾸미는 방법은 2가지가 있다. 첫번째는, 브라우저 기본 스타일로 → HTML만으로 웹문서 작성한 것을 웹 브라우저에 출력시킬 때의 스타일이다. 두번째는, 사용자 스타일로, CSS를 사용하고 파일에 적용하는 방법이 3가지가 있다. - 인라인 스타일(in-lin.. 더보기
HTML 프로그래밍 3/30 여섯번째(text/textarea태그,select, datalist, button태그) 오늘 배울것은 text태그와 textarea태그 select datalist button연습이다. 1. text태그와 textrea태그 - 두가지의 차이점을 알아볼 것이다. → 웹 페이지 상에 한줄만 보여진다. 내용 → 여러줄을 입력할 수 있다. textarea 속성 ① cols=" " → textarea 너비 지정(문자 단위로,가로 문자 수) ② rows=" " → 화면에 보여지는 줄 수(행,세로 줄 수) placeholder는 텍스트 입력이라는 글을 보여줌. 실행화면이다. 2. select - 드롭다운 목록을 만들어 준다. → 드롭다운 목록을 만들어준당 → 각 항목/옵션 표기 속성 ① size=" " : 화면에 표시할 드롭다운 항목 개수 지정 ② multiple : 옵셔을 2개 이상 선택 시 사용 속.. 더보기
HTML 프로그래밍 3/23 다섯번째(submit/reset과 button 차이) 오늘은 submit/reset과 button의 차이 button에 행동 넣기(간단예제) 파일 추가 태그 autofocus placeholder required 를 배웠다. 1.submit/reset과 button의 차이 input type =" submit/reset " → 이미 동작이 구현되어진 버튼이다. input type =" button " → submit과 reset과는 다르게 동작이 구현되어 있지 않는다. (Javascript를 이용해서 동작구현 가능) 버튼에서 html로도 간단하게 동작을 만들 수 있다. 2.button에 행동 넣기(간단한 예제) onclick → 버튼을 눌렀을때 발생하는 event를 말한다. window.open → window를 새로 여는 event이다. javascrip.. 더보기
HTML 프로그래밍 3/17 네번째(폼,인풋,체크박스) 오늘 배울것은 폼 인풋 체크박스/라디오박스 number&range 태그 날짜 선택 인풋태그 시간태그 버튼(제출,초기화) 이다. 1. 폼(form) : 입력 양식을 담는 틀 폼의 속성 값 method(방법) → post : 주소창에 입력한 것이 보이지 않음. → get : url주소창에 입력한 게 보인다. ex) 로그인 name - JavaScript에 넘겨줄 form 이름을 말한다. action - 에 내용을 처리해줄 프로그램과 연결 (자주 쓰임) target - 현재 창이 아닌 다른 위치에서 열리도록 한다. → form 안에 있는 것들을 묶어준다 → fieldset 제목 설정 tag 코드 사용 인풋 태그 실행화면 2. input태그 type = 입력할 것의 종류를 말한다. ex) text, email,.. 더보기
HTML 프로그래밍 3/16 세번째(표, 행/열합침, 하이퍼링크) 표(테이블) ★★★★★ : 표는 그리는 것을 명시 : table row, 행(줄) 추가 : table data, 열(칸) 추가 : table head, 제목 칸 추가 border = 내에 있는 모든 태그 값에 적용 ★★★★★ 에 테두리x 테두리, 테두리에 적용 → 이부분 잘 기억하기 th vs td 글씨크기, 글씨 굵기가 다름 ← 태그 ← 태그 table의 영역구분, 부분 나누기 → CSS에서 사용 행/열 합침 ★★★★ 행 합침(줄 합침) → 속성값 rowspan 줄 합침(칸 합침) → 속성값 colspan 실행화면 하이퍼링크 삽입 텍스트/이미지 코드 실행화면 이미지 삽입&이미지 tag 사용 시 자주 쓰는 속성 오디오/비디오 삽입(실습X) 더보기
HTML 프로그래밍 3/4 두번째(글씨관련태그, 목록) 글씨 관련 태그(굵기,기울임,위첨자 아래첨자) 인용구문 ← 태그 사용 시 ← 태그 사용 시 text강조(굵게 하기) - 둘다 똑같은 모습 1. 2. -> b=bold text 강조(기울임) - 둘다 똑같은 모습 1. 2. -> 이탤릭체 = 기울임체 위첨자&아래첨자 -> 위첨자(문장위의 자그마한 글자) -> 아래첨자(문장아래의 자그마한 글자) +참고 -> 코드/코딩 - 웹이 코드라는 걸 알수있게 도와주는 역할 취소선&밑줄 태그 목록 1.순서있는 목록 2.순서없는 목록 3.설명목록 1. 순서있는 목록 -> ordered list = 리스트 자체를 말함 -> list 2.순서없는 목록 = unordered list 3. 설명목록 -> description list -> 설명구문 더보기
HTML 프로그래밍 3/3 첫번째(웹,서버, HTML기본구조,제목/본문태그) 오늘 알아볼 것은 웹 서버/클라이언트 HTML기본구조 제목/본문태그이다. 오늘은 HTML의 기본구조를 알아볼 것이다. 1. 웹 사이트 정적 : 정보 제공 web(알바몬-> 알바정보), 기업홍보 web -> HTML+CSS 동적 : 쇼핑몰, 티켓구매 -> HTML+CSS+JS 웹사이트에는 정적 사이트와 동적 사이트가 있다. 정적은 주로 정보 제공에 쓰이며, HTML과 CSS로 만들어지고, 예로는 알바정보를 알아보는 알바몬 등이 있다. 동적은 그와 반대로 구매등 행동이 이루어지는 사이트에 쓰이며, HTML+CSS+JS로 만들어지고(어려움), 예시로는 옷을 구매하는 쇼핑몰 사이트가 있다. 2. 서버, 클라이언트 서버 : 인터넷에 연결된 computer 클라이언트 : 사용자가 사용하는 PC, 스마트폰 등 태그 .. 더보기

티스토리툴바