쥬로그

https://flukeout.github.io/ https://devchallenges.io/ devChallenges.io | Real-life Coding Challenges to become a Software Engineer Web Development Resources and Community that help you to become a Web Developer by working with Real-life projects and practices. Founded, designed and developed by @thunghiemdinh devchallenges.io https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS f..

여러 데이터를 나열해 표시하고 사용자가 선택할 수 있도록 해 주는 폼 관련 태그들 * 2개 이상의 데이터 나열 • 내용 1 내용 2 ... : 드롭 다운 목록 만들기 : 클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐진다. : 공간을 최소한으로 사용하면서 여러 옵션을 표시하고 싶을 때 사용 • ~ 태그 : 드롭다운 생성 : 기본적으로 한 가지 옵션이 표시되고 화살표를 클릭하면 나머지 옵션이 펼쳐진다. → size 속성 : 화면에 표시될 드롭다운 메뉴의 항목 개수 지정 ! 크롬 브라우저의 경우, 지정한 개수보다 하나 더 많은 옵션이 나타난다. → multiple 속성 : ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목 선택 가능 • ~ 태그 : 드롭다운 목록에 표시되는 ..

사용자가 한 줄 짜리 데이터를 입력할 부분을 생성하는 태그이다. 아이디나 비밀번호 등 이메일 주소, 전화번호, 날짜, 시간, 이미지,버튼 등 다양하게 설정 가능 * 사용자 입력 태그 • : 입력 항목 만들기 : 닫는 태그 없음 ✔ type="유형" 속성 : 사용자가 입력할 수 있는 형태 지정 : 모바일 버전 제작 시 필수 요소 → 이메일 주소, 전화번호 등 입력할 때 자동으로 가상 키보드 배열이 변경됨 → hidden : 사용자에게 표시되지는 않지만 서버로 넘겨지는 값 : 사용자에게 굳이 보여 줄 필요가 없지만 관리자가 알아야 하는 것을 히든 필드로 설정한다. → text : 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 생성 : 주로 아이디, 이..

사용자가 웹 사이트로 정보를 보낼 수 있는 요소(=form) 태그를 생성해보자. 폼과 관련된 대부분의 작업은 정보를 저장하거나 검색, 수정하는 일이므로 데이터베이스를 기반으로 한다. 폼에 입력된 사용자 정보를 처리하는 것은 ASP, PHP, JSP 와 같은 서버 프로그래밍을 이용한다. * 폼 만들기 • ~ : 사용자가 입력한 자료들을 서버로 어떤 방식으로 넘길 지, 서버에서 어떤 프로그램을 이용해 처리할 것인지 속성 값으로 지정 → method 속성 : 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정 ✔ 속성 값 get : 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나므로 보안이 약함 : 글자 수 256byte ~ 4096byte까지의 ..

* 이미지 맵 : 하나의 이미지에 여러 개의링크를 만드는 것 위 이미지에 맵을 생성해보자. 루피의 왼쪽 눈에 뽀로로 홈페이지를, 이빨에 티스토리를 연결하려고 한다. 그러기위해선 눈의 중심 위치, 반지름 길이와 이빨의 왼쪽 상단 위치, 오른쪽 하단 위치의 정보가 필요하다. 위치 정보는 그림판에서 알아낼 수 있다! 1) 원형 영역에 map 생성 2) 사각 영역에 map 생성 * usemap에 # 잊지말고 꼭! 넣자 ✔ 브라우저에서 확인해 보면 생성한 map 부분에 커서를 가져가면 변하는 것을 확인할 수 있다. ✔ 이미지 맵은 주로 메일에서 많이 활용된다. 메일로 보낼 때는, ~ 사이 태그를 복사해서 html 모드에 태그를 붙여 넣어 보내면 된다. 😎 결과물을 확인해보자! 😊 Do it! HTML5 + CSS..

* SVG 이미지란? : Scalable Vector Graphics (스케일러블 벡터 그래픽)의 약자 : 벡터 이미지 (vector image) : 크기를 조정해도 이미지가 깨지지 않고 깨끗이 유지 : 로고, 아이콘, 차트, 다이어그램, 지도 등에 사용됨 : 태그를 이용해 삽입뿐만 아니라 제작까지 가능 → scalable : 확대가 가능하다, 자연스럽게 크기 조절이 가능하다. → 비트맵 이미지 와 벡터 이미지 차이 ▷ 비트맵 이미지 (bitmap image) gif, jpg/jpeg, png 파일 확대 시 이미지 테두리 부분이 울퉁불퉁해짐. 즉, 작은 크기의 이미지를 확대하면 이미지가 깨지는 type ▷ 벡터 이미지 (vector image) svg 파일과 같이 확대 시 이미지..

★ 웹 이미지 형식 ✔ GIF (Graphic Interchange Form) : 표시 가능한 색상 수 최대 256개 : 다른 파일 형식에 비해 용량이 작아 아이콘, 볼릿 등 작은 이미지에 주로 사용 : 투명한 배경 or 움직이는 이미지 제작 가능 ✔ JPG/JPEG (Joint Photographic Experts Group) : 다양한 색상과 명암 표현 가능 : 반복 저장하면 화질이 떨어질 수 있다. ✔ PNG (Portable Network Graphics) : 다양한 색상 표현 가능 : 투명 배경 : 네트워크용으로 개발되어 최근 많이 사용됨

이미지를 클릭하면 다른 문서나 사이트로 넘어가도록 하이퍼링크(hyperlink) 거는 방법 * 이미지 관련 태그 • : 웹 문서에 이미지 삽입 : src 속성을 사용해 파일 경로를 알려 주어야 화면에 표시 가능 → src 속성 : 이미지 파일 경로 지정 ex) 웹 문서와 이미지 파일이 같은 경로에 있는 경우 ex) 웹 문서와 이미지 파일이 다른 경로에 있는 경우 body { ~~-image: url("../파일명/~~~.png"); } ! 파일 경로 한 단계 위로 올라가는 기호 ' .. ' 한 단계 아래로 내려오는 기호 ' / ' ex) 웹 상의 링크를 복사해 이미지 경로 지정 이미 인터넷에 올라와 있는 이미지 링크를 복사해 이미지 경로 지정 ! 웹 이미..

✔ OTF : Open Type Font 의 약자 : 마이크로소프트와 어도비가 개발한 확장자 : 디자인이 중요한 인쇄, 출력 작업에 적합 : 고해상도 : 모든 환경(OS)에서 변형 없이 사용 가능 ✔ TTF : True Type Font 의 약자 : 마이크로소프트와 애플이 개발한 확장자 : 주로 웹 작업이나 문서 작업용으로 적합 : 저해상도 : 폰트 크기에 따라 변형이 있으나 가독성 우수

* 목록(list) 생성 태그(tag) • ~ ~ ~ : 순서 없는 목록 : unordered list의 줄임말 : list item의 줄임말 : CSS에서 불릿 수정 가능 ex) 주주디 쥬쥬디 주쥬디 • ~ ~ ~ : 순서 있는 목록 : ordered list의 줄임말 : list item의 줄임말 : 속성값을 통해 종류, 시작 번호를 설정할 수 있다. : 또는 CSS에서 변경 가능 → type 속성 속성 값 설명 1 숫자 (기본값) a 영문 소문자 A 영문 대문자 ⅰ 로마숫자 소문자 Ⅰ 로마숫자 대문자 ⇒ ex) ~ → start 속성 : 지정하는 숫자, 문자 등 부터 시작 가능 ⇒ ex) → reversed 속성 : 항목을 역순으로 표시 ! 생략 가능 : 여러..