전체 글 (444) 썸네일형 리스트형 [JS강좌] 1강 자바스크립트 소개 및 기본용어 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=ZXUgTQ9gLYQ 1. 자바스크립트(JAVASCRIPT) 소개 1) 웹 개발자가 반드시 알아야 하는 3가지 언어 - 웹 페이지의 내용을 정의하는 HTML - 웹 페이지의 스타일과 레이아웃을 지정하는 CSS - 웹 페이지의 동작을 프로그래밍하는 JavaScript ** 웹 페이지는 JavaScript가 사용되는 유일한 장소가 아닙니다. 많은 데스크탑 및 서버 프로그램은 JavaScript를 사용합니다. 그 중 Node.js가 가장 잘 알려져 있습니다. MongoDB 및 CouchDB와 같은 일부 데이터베이스는 JavaScript를 프로그래밍 언어로 사용합니다. 2) JavaScript가 수.. [CSS3강좌] 29강 이미지를 위한 object-fit속성 - 오쌤의 니가스터디 ** 동영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=8hsCUwZJjw4 1. object-fit속성이란? - 요소의 크기에 맞게 태그와 태그의 크기를 조정하는 방법으로 사용되는 속성입니다. 1) object-fit속성값 속성값 설명 fill 기본값, 요소에 크기에 맞게 꽉채워 보여줌, 필요한 경우 오브젝트가 늘어나거나 찌그러집니다. contain 요소의 가로나 세로크기에 가능한 딱 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 딱 맞추기 때문에 남는 공간이 발생할 수 있습니다. cover 요소의 가로나 세로크기에 가능한 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 개체 크기에 맞게 잘립니다. 가득 채울때까지 확대됩니다. non.. [CSS3강좌] 28강 CSS Grid 레이아웃 모드 - 오쌤의 니가스터디 1. Grid 레이아웃이란? - CSS에서 제공되는 Grid 레이아웃은 행과 열이 있는 그리드 기반 레이아웃 시스템입니다. - 위치 지정 시 float나 position을 사용하지 않고도 웹페이지 레이아웃을 쉽게 잡을 수 있습니다. - 단, 최신브라우저에서만 지원됩니다. 브라우저 크롬 익스플로러/엣지 파이어폭스 사파리 오페라 버전 57.0 이상 16.0 이상 52.0 이상 10 이상 44 이상 1) 그리드 요소 설정하기 - 그리드 레이아웃은 하나 이상의 하위 요소가 있는 상위 요소로 구성됩니다. - display속성의 값을 [grid]로 변경합니다. - grid-template-columns속성은 그리드 레이아웃의 열 수 및 열 너비를 지정합니다. 값은 공백으로 구분된 목록으로 각 값은 각 열의 크기를 .. [HTML기초문법] 18강 a태그의 링크의 종류 - 오쌤의 니가스터디 1. URL을 이용한 하이퍼링크 ## 문법 1) 절대 경로 - 파일의 탐색 경로가 파일 시스템의 루트로부터 시작해 명시된 파일의 경로 이름 - /images/common/xxx.jpg - 외부 페이지 경로 : https://tistory.com TISTORY 나를 표현하는 블로그를 만들어보세요. www.tistory.com ## 문법 티스토리 바로가기 2) 상대 경로 - 파일 시스템에서 현재 작업 디렉토리부터 찾아갈 파일에 이르는 경로 - 현재 작업 파일이 무엇이냐에 따라 상대적으로 바뀌는 경로 - ./현재폴더의 파일선택 - ../상위폴더의 파일선택 - 하위폴더명/하위폴더의 파일선택 - 자세한 경로 공부 : ossam5.tistory.com/31?category=897196 [HTML기초문법] 3강 a(.. [포토샵강좌] 3강 앱아이콘 제작하기 - 오쌤의 니가스터디 1. iOS 스타일가이드 확인 1) iOS Human Interface Guidelines ## 스타일가이드 주소 URL : developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/ App Icon - Icons and Images - iOS - Human Interface Guidelines - Apple Developer App Icon Every app needs a beautiful and memorable icon that attracts attention in the App Store and stands out on the Home screen. Your icon is the first opportu.. [CSS3강좌] 27강 CSS flexbox - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=DhiDpXEkd-E 1. 과거의 레이아웃 모드 1) 웹페이지의 구역을 block요소로 처리 - block요소로 처리되는 요소들을 수직 나열 처리가 됩니다. ## block요소의 수직나열된 코드 ## block요소의 수직나열된 결과 - div태그는 block요소이므로 부모 영역 안에서 수직 나열 처리되는 것을 확인할 수 있습니다. 2) 이미지태그처럼 inline-block으로 나열 처리 - 블록요소를 수평 나열 처리하기 위한 방법으로 display를 inline-block으로 처리합니다. ## inline-block으로 바꾼 코드 ## inline-block으로 바꾼 결과 - 한줄로 수평 나.. [HTML기초문법] 17강 meta태그와 viewport - 오쌤의 니가스터디 ** 동영상으로 보고 싶으신 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=4Y5GFdwq9xc&t=2s 1. meta 태그란? - HTML 문서에 대한 메타 데이터를 정의합니다. - 메타 데이터는 데이터에 대한 데이터 (정보)입니다. - 항상 2. meta 태그의 속성 속성 값 설명 charset UTF-8 EUC-KR 등등 각국의 언어 셋 HTML문서의 문자 인코딩을 지정 content 연관된 값 http-equiv 또는 이름 속성과 연관된 값을 지정합니다. http-equiv content-security-policy content-type default-style refresh 콘텐츠 속성의 정보 / 값에 대한 HTTP 헤더를 제공합니다. name app.. [HTML기초문법] 16강 SVG태그의 effect와 gradient - 오쌤의 니가스터디 1. SVG 태그란? - SVG태그는 Scalable Vector Graphics의 약자로 벡터 기반 그래픽을 XML 형식으로 정의하는 것을 의미합니다. - SVG태그는 SVG그래픽을 담기 위한 요소입니다. - SVG태그 내부에 담을 수 있는 것은 원, 사각형, 다각형, 라인, path 등이 있습니다. - SVG태그는 파일의 모든 요소와 모든 속성에 애니메이션을 적용할 수 있습니다. ## SVG태그 SVG그래픽 ... - svg는 컨테이너로 묶음을 의미합니다. 내부에 그래픽을 담기 위한 그릇과 같은 태그입니다. 2. SVG Filters - SVG 필터는 SVG 그래픽에 특수 효과를 추가하는 데 사용됩니다. ## 태그 - 뒤에 기능들이 영문으로 붙음 - : 이미지 결합용 필터 - : 색상 변환을 위한 필.. 이전 1 ··· 40 41 42 43 44 45 46 ··· 56 다음
