프로그래밍/HTML & CSS
-
HTML - form 관련 태그 / 파일 태그프로그래밍/HTML & CSS 2021. 9. 16.
입력 사항 아이디 : 패스워드 : 이름 : 성별 남자 여자 전화번호 : 이메일 : 생년월일 : 근무 시작 시간 : 나이 : 학력 : 대학원졸 대졸 고졸 기타 출신도 : :: 선택 :: 서울시 인천시 경기도 기타 좋아하는 과목 : 자바 스프링 오라클 HTML/CSS/javascript 리액트 취미 : 운동하기 영화보기 게임하기 음악듣기 춤추기 약관동의 회원가입 다시 입력 가입 취소 - form에서 name은 폼 이름이고 action은 폼을 전송할 URL이다. 자바스크립트로 보낼 수 있음. - method는 전송 방식 기본 값으로는 get이고 post도 선택 가능하다. * text입력 태그 label 태그 열고 input태그로 타입에 따라 다른 텍스트 입력 폼을 만들 수 있다. 아이디와 이름 입력란은 inp..
-
HTML - links 관련 태그 / iframe / 이미지,동영상프로그래밍/HTML & CSS 2021. 9. 16.
a 태그 게시판 구글 고양이 사진 - a태그는 하이퍼 링크 태그이다 (다른 곳 으로 이동하는) - href로 경로를 지정해준다. - href="ul-list.html" 이건 같은 경로내 ul-list.html을 연다는 뜻 - 그 밑에 구글 주소는 역시 클릭하면 구글 홈페이지를 여는데 옵션에 보면 target="_blank"라고 적혀있다 이건 새로운 창에서 열겠다는 의미이다. - 마찬가지로 웹페이지 뿐만 아니라 같은 경로내에 있는 사진들도 띄울 수 있다. - 타입은 이미지 png 파일만 열게끔 하는건데 의미는 크게 없다. iframe은 한마디로 인터넷창 안에 인터넷창을 여는거다. iframe 예제 - src로 오픈할 주소나 경로 입력해주고 옆에 폭이랑 높이를 지정할 수 있다. 물론 style도 적용 가능 ..
-
HTML - 리스트 관련 태그 (1)프로그래밍/HTML & CSS 2021. 9. 14.
ol 태그 - 번호가 붙는 목록 자바 오라클 자바스크립트 서블릿 리액트 자바 오라클 자바스크립트 서블릿 리액트 자바 오라클 자바스크립트 서블릿 리액트 자바 오라클 자바스크립트 서블릿 리액트 ul : 번호가 붙지 않는 목록. 자바 오라클 자바스크립트 서블릿 리액트 자바 오라클 자바스크립트 서블릿 리액트 자바 오라클 자바스크립트 서블릿 리액트 자바 오라클 자바스크립트 서블릿 리액트 자바 오라클 자바스크립트 서블릿 리액트 dl : 목록을 정의 웹프로그램 javascript CSS HTML 데이터베이스 오라클 마리아디비 MS-SQL 응용 예제 이름 국어 영어 수학 김자바 100 100 100 너자바 100 100 100 - li 태그 : 그냥 말 그대로 목록을 나타내는 태그 목록의 내용물 - ol 태그 : ol..
-
HTML - 테이블(table) 태그프로그래밍/HTML & CSS 2021. 9. 14.
table 태그 tr:행수, td:열수를 나타내며 tr 태그 안의 td수는 동일해야 함 A B C D E F A B C D E F A B C D E F A B C D E F A B C D E F G H I A B C D E F G H I J - table 태그 = 말 그대로 테이블 표를 만드는 태그 - tr = 행 한줄 두줄 세줄 이런식으로 줄이 점점 늘어남 - td = 열 행에 따라서 열이 가로로 죽 늘어남 - tr이 있어야 td를 만들 수 있음 tr 3개 만들면 3행 td 2개면 2열 3행 2열 이름 생년월일 국어 영어 수학 홍길동 2000-10-10 90 90 90 김자바 2000-10-10 90 90 90 스프링 2000-10-10 90 90 90 평균 90 90 90 계산서 책이름 수량 단가 가..
-
HTML - 레이아웃 / 시멘틱 태그프로그래밍/HTML & CSS 2021. 9. 14.
- 시멘틱 구조 태그는 한눈에 보기 쉽게 하기 위함이다. 어디가 제목이고 어디가 본문이고 어디가 하단인지 등등 CSS를 적용함에도 있어서 시멘틱 구조로 짜야 좋다. 메뉴 입니다. 메인 화면 입니다. header 태그 머릿글 태그, 소개 등을 지정 nav 태그 외부 페이지로 연결되는 링크의 모음. 일반적으로 메뉴를 구현 aside 태그 사이드바 태그 main 태그 해단 문서의 주 콘텐츠를 정의 article 태그 문서, 페이지, 애플리케이션에 포함되며, 그 자체로 독자적으로 완성된 내용을 담고 있음 session 태그 문서의 세션을 정의 div 태그 여러 태그를 묶을때 사용 푸터 입니다. - 처음에 스타일로 전체에 margin과 padding을 0으로 설정한다. (이래야 편함) - 시멘틱 태그들의 순서를 ..
-
HTML 선택자 / CSS 개요프로그래밍/HTML & CSS 2021. 9. 13.
간단한 css 예 과목-프로그래밍 자바 스프링 과목-웹 프로그래밍 HTML CSS JavaScript - div는 별 다른 기능은 없고 마치 그룹처럼 하나를 묶는다고 생각하면 된다. - div라는 태그 선택자로 인해서 부분에서 div 태그가 붙은 모든 것은 파란색에 볼드 처리가 된다. - id 선택자는 특정하게 한 태그에 적용 시킬 수 있다. 부분에서 내가 만든 id 선택자를 주면 된다. - class 선택자 클래스 선택자는 여러 태그에 다 같이 줄 수 있다. div 태그 대표적인 블록 태그 요소들을 묶어서 처리할 때 사용 A B C A B C padding-안쪽여백 위 오른쪽 아래 왼쪽여백 위 오른쪽/왼쪽 아래여백 위/아래 오른쪽/왼쪽 여백 - div 태그 - 요소들을 묶어서 처리할때 사용 - back..
-
HTML 기본 태그프로그래밍/HTML & CSS 2021. 9. 13.
환영합니다. 반가워요!! 10초후 이동합니다. - charset과 name, content, http-equiv는 모두 메타 데이터 임 : 말 그대로 제목 부분 ~ : 인터넷창 내용물에서 제목 헤드라인 담당 숫자는 크기임 1~6까지 있음 : 안에 일반적인 글을 쓸때 사용함 p안에 style을 넣는 것으로 여러가지 상태들을 바꿀 수 있음. background = 배경색 color = 글자색 그리고 meta데이터 http-equiv로 인해서 10초뒤에 네이버로 이동함. h 태그 h 태그 글자 크기를 지정하는 태그로 보통 제목을 나타낼때 사용함 크기는 1~6이며 1이 가장 큼 h1 태그 예제 h2 태그 예제 h3 태그 예제 h4 태그 예제 h5 태그 예제 h6 태그 예제 p 태그 기본 태그 - p 태그 : 문..
-