반응형 Front-End/HTML | CSS10 CSS - 스타일 속성 총 정리 💡 스타일 속성 💡 배경 관련 속성 💡 폰트 관련 속성 💡 텍스트 관련 속성 💡 Box 관련 속성 - border, margin, padding 💡 목록 관련 속성 💡 테이블 관련 속성 💡 레이어 관련 속성 💡 flaot와 clear 속성 💡 다단 속성 💡 CSS 추가규칙 💡 미디어 쿼리 💡 웹 폰트 💡 CSS3 border 💡 transition 💡 animation 💡 transform 💡 스마트폰 레이아웃 💡 IE 💡 CSS3 Generator 2022. 7. 13. CSS - 선택자 💡 선택자 💬 전역 선택자 ◾ 전체에 적용하기 위한 선택자 ◾ * 를 이용한다 ex) 문서 내의 모든 곳에 굴림체 글꼴 적용 : *{font-face:"굴림체";} 💬 태그 선택자 ◾ html 태그 이름 사용 ◾ 태그가 가지고 있는 기본 스타일 지정, 스타일시트에 의한 스타일 적용 💬 그룹 선택자 ◾ 선택자를 , 로 분리하여 선언하면 여러 개 선택자에 하나의 스타일 적용 ex) 헤더 태그에 색상을 blue로 변경 : h1, h2, h3, h4, h5, h6 {color:blue;} 💬 내포 선택자 ◾ 요소가 내포 관계에 있을 때 적용 ◾ 선택자와 선택자 사이를 공백으로 띄우고 나열 ex) 태그 안에 태그가 올 경우 파란색으로 지정 : p strong{color:red;} 💬 인접 선택자 ◾ 선택자와 선택.. 2022. 7. 13. CSS - 기본 문법 💡 스타일과 스타일 시트 💬 CSS의 장점 ◾ 스타일을 부분으로 나눠서 적용할 수 있다. ◾ text-align:center - 글자를 가운데로 정렬 💡 CSS 기본 선택자 💬 class 선택자 ◾ 마침표(.) 다음에 클래스 이름 지정 ◾ 문서 안에서 여러 번 반복할 스타일이라면 클래스 선택자로 정의 💬 id 선택자 ◾ 파운드(#) 다음에 id 이름 지정 ◾ 문서 안에서 한 번만 사용한다면 id 선택자로 정의 💬 group 선택자 ◾ 쉼표(,)로 구분해 여러 선택자를 나열 ◾ 같은 스타일을 사용하는 선택자를 한꺼번에 정의 💡 글꼴 관련 스타일 💬 font-family ◾ 웹 문서에서 사용할 글꼴 지정 💬 font-size ◾ 브라우저에서 지정 or 상관없이 글자 크기를 지정 ◾ 상대적인 글자 크기를 지정.. 2022. 7. 12. HTML - 실습문제 04 📂 실습문제 💬 예제 💬 성적표 💬 회원등록 📃 주문서 폼을 만드시오. 💻 실행 화면 📝 Request.html 개인 정보 이름 메일주소 홈페이지(URL) 상품 검색 주문 정보 주문 색상 주문 개수 사이즈 주문일 📃 세미나 폼을 만드시오. 💻 실행 화면 📝 Seminar.html 세미나 정보 주제 : 차세대 웹 표준 기술 HTML 일정 : 5월 12일 14:00 ~ 17:00 장소 : 공학관 2층 세미나실 인원 : 선착순 100명 비용 : 본교 학생 무료(외부 참가자 5,000원_ 참가신청 : 아래 양식에 빠짐없이 기입하여 접수해 주세요. 개인 정보 이름 비밀번호 (수정시 필요) 참가 정보 참가 유형 선택 무료(교내참가자) 유료(교외참가자) 관심 분야 선택 HTML5 시맨틱 CSS3 Web Storage.. 2022. 7. 8. HTML - 입력 양식 작성하기, <form> 태그 💡 태그 ◾ 폼을 만드는 기본 태그 ◾ 과 사이에 여러 폼 요소 삽입 ◾ 기본형 : 여러 폼 요소 💬 서버 /* 여러 가지 폼 요소 */ ◾ 폼에 내용을 입력하고 서버로 전송했을 때 서버에 있는 register.php를 실행한다. 💬 태그의 속성 💡 폼 삽입하기 💬 태그 ◾ 폼 요소를 그룹으로 묶는 태그 💬 태그 ◾ 그룹으로 묶는 구역에 제목을 붙이는 태그 💬 태그 ◾ 태그와 같은 폼 요소에 레이블을 붙일 때 사용 💡 태그 💬 태그의 type 속성 한 눈에 살펴보기 💬 다양한 속성 ◼ autofocus ◾ 페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시 ◼ placeholder ◾ 입력란에 표시하는 힌트로, 필드를 클릭하면 사라짐 ◼ readonly ◾ 내용을 보기만 하고 입력하지 못하게 함.. 2022. 7. 8. HTML - 실습문제 03 💾 문제 파일 🗒️ 프레임 예제(1) 🗒️ 프레임 예제(2) 🗒️ 프레임 예제(3) 🗒️ 프레임 예제(4) 🗒️ 프레임 예제(5) 🗒️ 프레임 예제(6) 2022. 7. 7. HTML - 기본 구조와 태그 💡 HTML 기본 구조 💡 환영합니다 우리 집 너무하얗고 깨끗하죠^_^;; 조금씩 알찬 내용들로 채워가겠습니다.^_^ 내용 내용 2022. 7. 7. HTML - 실습문제 02 💾 소스파일 💡 교육일정 표를 만들어보자 🗒️ 모블 교육일정 스마트 디바이스 연동 및 융합 SW 개발 과정 일정표 번호 일정 교과목 확인 1 6월 20일 ~ 7월 1일 (10일) JAVA 언어 종료 2 7월 2일 ~ 7월 5일 (2일) 자바 2 (컬렉션, 제너릭스, 열거형, 에너테이션, 스레드, 람다와 스트림 종료 3 7월 6일 ~ 7월 12일 (5일) 자바스크립트, HTML, CSS 진행중 4 7월 13일 ~ 7월 18일 (4일) mySQL 진행중 5 7월 19일 ~ 8월 2일 (11일) 스프링 6 8월 3일 ~ 8월 25일 (16일) 안드로이드 7 8월 26일 ~ 9월 2일 (6일) 스프링 서버와 안드로이드 앱 간 통신 프로젝트 8 9월 5일 ~ 9월 13일 (5일) 라즈베리파이 💻 실행 화면 2022. 7. 7. HTML - 실습문제 01 💾 소스코드 📃 테이블(표) 만들기 예제 📝 테이블 만들기 실습 테이블 1 1행 1열 테이블 2 1행 1열 1행 2열 2행 1열 2행 2열 테이블 3 1행 1열 1행 2열 1행 3열 2행 1열 2행 2열 2행 3열 3행 1열 3행 2열 3행 3열 테이블 4 1행 1열 테이블 5 1행 1열 1행 2열 1행 3열 2행 1열 2행 2열 2행 3열 3행 1열 3행 2열 3행 3열 테이블 6 1행 1열 테이블 7 1행 1열 1행 2열 2행 2열 테이블 8 1행 1열 1행 2열 2행 2열 2행 3열 3행 2열 테이블 9 1행 1열 테이블 10 1행 1열 1행 2열 2행 1열 2행 2열 테이블 11 1행 1열 1행 2열 1행 3열 2행 1열 2행 2열 2행 3열 3행 1열 3행 2열 3행 3열 테이블 12 1행 1열.. 2022. 7. 6. 이전 1 2 다음 728x90 반응형
