developer_jju's_day

안녕하세요 JJU_DEVELOPER입니다. 이번시간에는 CSS 이미지와 그라데이션 효과 맛보기에 대한 설명입니다~! 목차 09-1 배경색과 배경 범위 지정하기 09-2 배경 이미지 지정하기 09-3 그러데이션 효과로 배경 꾸미기 09-1 배경색과 배경 범위 지정하기 속성 설명 background-color 배경색 지정 background-clip 배경색이나 이미지를 어디까지 적용할지 지정 background-image 배경 이미지 지정 background-repeat 배경 이미지의 반복 방법을 지정 background-position 배경 이미지의 위치 지정 background-origin 배경 이미지를 배치할 기준 지정 background-attachment 배경 이미지를 문서에 고정 backgroun..

안녕하세요 JJU_DEVELOPER입니다. 이번시간에는 CSS 반응형 웹과 미디어 쿼리에 대한 설명입니다~! 목차 12-1 반응형 웹 알아보기 12-2 미디어 쿼리 알아보기 12-3 그리드 레이아웃 알아보기 12-4 플렉스 박스 레이아웃 알아보기 12-5 CSS 그리드 레이아웃 알아보기 반응형 웹 디자인 • 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법 • 다양한 화면 크기의 모바일 기기들이 계속 쏟아져 나오는데 그때마다 그 크기에 맞춘 사이트를 별도로 제작하는 것은 비효율적 ->화면 크기에 ‘반응’해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것이 바로 반응형 웹 디자인입니다!!! 12-1 반응형 웹 알아보기 보통은 사이트는 똑같고, 디바이스의 사이즈에 ..

안녕하세요 JJU_DEVELOPER입니다. 이번시간에는 CSS 고급 선택자에 대한 설명입니다~! 목차 10-1 연결 선택자 10-2 속성 선택자 10-3 가상 클래스와 가상 요소 10-1 연결 선택자 • 연결 선택자 : 선택자와 선택자를 연결해 적용 대상을 제한하는 선택자. • 콤비네이션 선택자(combination selector) 또는 ‘조합 선택자’라고도 함 하위 선택자(descendant selector) • 부모 요소에 포함된 모든 하위 요소에 스타일이 적용된다 • 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용 • 하위 선택자를 정의할 때는 상위 요소와 하위 요소를 나란히 쓴다. 예약 방법 & 사용 요금 아직 온라인 예약 신청이 준비되어 있지 않습니다. http..

안녕하세요 JJU_DEVELOPER입니다. 이번시간에는 CSS 기초에 대한 기본적인 설명입니다~! 목차 07-1 글꼴 관련 스타일 07-2 웹 폰트 사용하기 07-3 텍스트 관련 스타일 07-4 목록 스타일 07-5 표 스타일 07-1 글꼴 관련 스타일 속성 설명 font-family • 웹 문서에서 사용할 글꼴 지정 • 태그를 비롯해 태그나 태그처럼 텍스트를 사용 하는 요소들에서 사용 • 지정한 글꼴이 없을 경우에 대비해 두 번째, 세 번째 글꼴까지 지정. • 둘 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 글꼴 구분 • 태그 스타일에서 한 번 정의하면 문서 전체에 적용되고 문서 안의 모든 자식 요소에 계속 같은 글꼴이 사용됨. font-size • 폰트의 크기 정함 • 부모 요소의 글자 크기를 기준으..

안녕하세요 JJU_DEVELOPER입니다. 이번시간에는 CSS 기초에 대한 기본적인 설명입니다~! 목차 06-1 웹 문서에 디자인 입히기 06-2 스타일과 스타일 시트 06-3 CSS 기본 선택자 06-4 캐스케이딩 스타일 시트 스타일을 사용하는 이유? • 지난 시간의 문서 HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성 ->스타일을 사용하면 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있습니다. ▼▼▼지난 시간 HTML 뼈대 구경하기▼▼▼ 05장 HTML fieldset, legend, lable, option 예시 안녕하세요 JJU_DEVELOPER입니다. 지난 시간에 이어 html의 input 설멍에 조금 더 참고 할 수 있는 예제를 가져왔습니다. ▼▼▼지난시간 참고▼▼..

안녕하세요 JJU_DEVELOPER입니다. 지난 시간에 이어 html의 input 설멍에 조금 더 참고 할 수 있는 예제를 가져왔습니다. ▼▼▼지난시간 참고▼▼▼ 05장 HTML 입력 양식 작성하기 (폼삽입, input 태그 총정리) 안녕하세요 JJU_DEVELOPER입니다. 이번 시간에는 05장 입력 양식 작성하기에 대해 설명드리겠습니다. 목차 05-1 폼 삽입하기 05-2 사용자 입력을 위한 input 태그 05-3 input 태그의 주요 속성 05-4 폼에서 사 jju240.tistory.com 전자기기 구매 새로운 박스! 상품 선택 아이폰 14 프로 에어맥스 에어팟 프로 새로운 박스! 상품 선택 아이폰 14 프로 에어맥스 에어팟 프로 form 안에 filedset을 만들고 select안에 opti..

안녕하세요 JJU_DEVELOPER입니다. 이번 시간에는 05장 입력 양식 작성하기에 대해 설명드리겠습니다. 목차 05-1 폼 삽입하기 05-2 사용자 입력을 위한 input 태그 05-3 input 태그의 주요 속성 05-4 폼에서 사용하는 여러 가지 태그 ✔ 폼 삽입하기 • 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼(form) • 폼과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들 • 이런 작업은 모두 데이터베이스를 기반으로 한다. • 아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 HTML 태그 • 폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP 같은 서버 프로그래밍 이용 태그 • 폼을 만드는 기본 태그. 과 사이에 여러 폼 요소 ..

안녕하세요 JJU_DEVELOPER입니다. 이번 시간에는 본격적으로 HTML의 기본에 대해 알아보겠습니다. ▼▼▼지난 시간 공부하기▼▼▼ 03장 HTML 시작하기! HTML 기본, 시맨틱 태그 개념 타파! 안녕하세요 JJU_DEVELOPER입니다. 이번 시간에는 지난 시간에 이어 본격적으로 HTML의 기본에 대해 알아보겠습니다. ▼▼▼지난 시간 기초 설정 ▼▼▼ 01~02장 웹개발 시작하기_VSCODE 설정, 기본 개념 jju240.tistory.com ✔ 목차 04-1 텍스트 태그 알아보기 04-2 목록 만들기 04-3 표 만들기 04-4 이미지 삽입하기 04-5 오디오와 비디오 삽입하기 04-6 하이퍼링크 삽입하기 ✔ 텍스트 태그 알아보기 태그 설명 제목 표시 기본형 : 제목 제목을 표시할 때 사용하..

안녕하세요 JJU_DEVELOPER입니다. 이번 시간에는 지난 시간에 이어 본격적으로 HTML의 기본에 대해 알아보겠습니다. ▼▼▼지난 시간 기초 설정 ▼▼▼ 01~02장 웹개발 시작하기_VSCODE 설정, 기본 개념 설명 안녕하세요 JJU_DEVELOPER입니다. 이번 시간에는 HTML을 사용하기 위한 기본 설치 과정에 대해 알아보겠습니다. ✔ 프런트엔드 개발 기술 종류 제이쿼리 부트스트랩 리엑트 앵귤러 뷰 ✔ 백엔드 개발 jju240.tistory.com ✔ HTML이란? hyper text mark up language 웹에서 자유롭게 오갈 수 있는 웹문서를 만드는 언어입니다. 예를들어 사이트에서 하나를 클릭하면 다음 문서로 가는 그런 것을 하이퍼 텍스트 라고 합니다. 즉, 문서를 이어주는 것 이죠..

안녕하세요 JJU_DEVELOPER입니다. 이번 시간에는 HTML을 사용하기 위한 기본 설치 과정에 대해 알아보겠습니다. ✔ 프런트엔드 개발 기술 종류 제이쿼리 부트스트랩 리엑트 앵귤러 뷰 ✔ 백엔드 개발 기술 종류 노드제이에스 익스프레스 자바-> 스프링 파이썬-> 장고 PHP=> 코드이그나이터 ✔ 기본 설정 웹 브라우저 : 크롬 사용 웹 편집기 : Visual Studio Code 사용 ✔ 기본 설정 - 한글팩 설정 한글팩 사용법: 왼쪽 네모박스 누르고, korean을 검색 후 설치해 줍니다. ✔ 기본 설정 - 테마 변경 색 테마 변경법 : 설정에서 색변경 클릭 ✔ 기본 설정 - 원하는 예제가 있을 때 clone 하는 방법 1. 현재 내 파일탐색기에서 클론을 받을 위치 지정 C:\dev\workspac..