저장소

간단하게 말해 기능을 있어보이게 한 내용이다. 가끔 다른 사이트를보면 PDF 나 다른 문서들을 클릭하면 해당 파일이 저장되거나 새로운 창이 열리면서 해당 파일이 열리는 경험을 사이트를 돌아다녀보면 많이 확인하였을 것이다. 그 부분에 관하여 아주 간단하게 설명한 내용이다. 물론 로컬 피시에서 사용하기 위해 내 프로젝트에 파일을 미리 올리거나 서버에 올리는 경우에는 서버나 해당 다른 경로에 파일을 올려두어야 한다. 여기에서는 총 3가지 방법을 알아볼 생각이다. 1. 내 프로젝트 내에 PDF 파일을 올리고 다운로드 하는 방법 PDF 다운로드 내 download 를 작성하여 다운로드할 수 있게 한 간단한 기능이다. download를 쓰지 않으면 현 페이지에서 내가 올린 PDF를 열어주게 된다. 그러면 내가 보고..

✔ 기본예제 1 동적으로 바인딩된 나의 title을 보려면 몇 초 동안 마우스를 올려 놓으세요! 이것은 빨간색이어야 합니다! 전환하려면 저를 클릭하세요!! 이것은 녹색이어야 하며, 클릭 시 녹색과 파란색 사이를 전환합니다. this.isRed에서 isRed의 default 값은 True이다. click 한 경우 != 메소드 발생하여 False가 되어 색이 변하게 된다. ✔ 기본예제 1 결과 ✔ 기본예제 2 목록 전환 숫자 추가 숫자 제거 목록 뒤집기 {{item}} 목록이 비어있지 않지만, 숨김처리 되었습니다 목록이 비었습니다 v-if, v- else-if 문을 사용하여 원하는 출력을 할 수 있다. ✔ 기본예제 2 결과 기본예제 3 텍스트 입력 {{ text }} 체크박스 체크됨 : {{ checked ..

✔ 기본예제 1 {{ message }} {{message1}} mount(".app") 은 class app을 사용하여 메시지를 출력할 것이다 ✔ 기본예제 1 결과 ✔ 기본예제 2 숫자 세기: {{count}} button @ click ="increase" : 버튼을 클릭 시 increase 함수 발동하여 숫자 증가시키기 ✔ 기본예제 2 결과 ✔ 기본예제 3 {{ message }} 메시지뒤집기 "!" 추가하기 e.preventDefault()가 작동하는 링크 ✔ 기본예제 3 결과

Vue.js 프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크 MVVM(Model-View-ViewModel) 패턴의 ViewModel에 해당하여, UI코드와 데이터제어 로직을 분리 view 변경 methods: { change: function(){ // 클릭 시 change라는 함수 실행 this.message = "바이 뷰!" } } 변경 methods: { change: function(){ // 클릭 시 change라는 함수 실행 this.message = "바이 뷰!" } } mounted(){} Vue의 기본 함수, 초기 화면이 렌더링 되고 실행되는 함수 methods : { ~~ }, mounted(){ console.log(`숫자 초기값은 ..

구 GitHub 클린코딩 국비지원 과제로 한 내용이지만 필요없는데 있는 내용이나 이상한 부분이 많습니다. 개인 복습용 저장공간입니다. ✔ HTML 부분 Personal Open Source Businees Explore pricing Blog Support sign in sign up How people build software Millions of developers use GitHub to build personal projects, support their businesses, and work together on open source technologies. Use at least one letter, one numeral, and seven characters Sign up for GitHub..

✔ 솔로의 식탁 HTML DOCTYPE html> 솔로의 식탁 솔로의 식탁 밥/죽 셀러드 반찬 일품요리 음료.칵테일 솔로의 식탁 ✔ 솔로의 식탁 CSS 휴대폰, 태블릿, 컴퓨터 크기에 따라 설정 @font-face { font-family: 'Y_Spotlight'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/Y_Spotlight.woff') format('woff'); font-weight: normal; font-style: normal; } body { font-family: 'Y_Spotlight';} #container{ width: 100%; margin: 0 auto; } nav { height: 50px;..

CSS 2D transform 2차원 좌표에서 요소를 변형시키는 속성 이동, 확대, 축소, 회전, 경사등을 만들 수 있음 translate : 이동 rotate : 회전 scale : 확대, 축소 skew : 경사(약간 꼬거나 틀기) DOCTYPE html> transform p{ width: 600px; padding: 20px; border: 3px solid rgba(0,0,0,0.5 ); } #translate { transform: translate(30px, 50px); /*이동에 관한 것- > x,y*/ background-color: deeppink; } #rotate { transform: rotate(60deg); /*~도 회전하는 기능 - deg*/ background-color: g..

✔ 미디어쿼리 미디어 쿼리(media query) - 특정 속성이 적용되는 범위가 변경되었을 때 컨텐츠를 별도록 변경하지 않아도 알맞는 형태로 스타일을 조절 @media 매체유형 and(속성에 대한 조건){ css코드 ... } ✔ 미디어쿼리 코드1 DOCTYPE html> 미디어쿼리1 body { background-color: beige; } @media screen and (min-width : 1024px) { body { background-color: aqua; } } 미디어쿼리 ✔ 미디어쿼리 결과 ✔ 미디어쿼리 코드2 DOCTYPE html> 미디아쿼리2 인스타그램 유튜브 페이스북 트위터 Lorem ipsum dolor sit amet consectetur adipisicing elit. M..

✔ CSS 다단레이아웃 다단 레이아웃 - 텍스트를 column 속성으로 다단을 생성 - 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 - column-count : 단의 갯수를 설정 - column-rule : 단과 간사이의 구분선, 구분의 모양, 두께, 색상을 설정 - column-gap : 단과 단사이의 여백을 설정 - column-span : 단과 안의 포함된 요소를 다단편집에서 해제 ✔ CSS 다단레이아웃 코드 DOCTYPE html> 다단 레이아웃 div, h2, p{margin: 0; padding: 0;} body {margin: 10px;} h2 {padding: 0 0 20px; text-align: center;} div.col{ text-align: justify; pad..

✔ CSS 박스 모델 박스 모델(Box Model) - 모든 HTML 요소는 박스모양으로 구성 - 박스모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함 ✔ CSS content 내용(content) - 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 ✔ CSS 패딩 패딩(padding) 내용과 테두리 사이의 간격 - padding-top, padding-right, padding-bottom, padding-left - padding: 위 오른쪽 아래 왼쪽 안녕하세요 div#padding { padding: 20px 50px 30px 10px} 위 20px, 오른쪽 50px, 아래 30px, 왼쪽 10px div#padding { padding: 20px 50px 30px } 위 20p..

✔ CSS 위치 CSS Position 요소의 위치를 결정하는 방식을 설정 1. 정적(stataic)위치 지정방식 - 기본값 - HTML 요소의 위치를 결정하는 기본적인 방식 - 단순히 웹 페이지의 흐름을 따라 요소들이 위치를 결정하는 방식 ✔ CSS 상대위치 2. 상대(relative)위치 지정방식 - HTML 요소의 기본위치(정적 위치 지정방식)를 기준으로 위치를 재설정 하는 방식 - top, left, right, bottom 속성 값을 사용할 수 있음 ✔ CSS 상대위치 코드 DOCTYPE html> 상대위치지정방식 .relative1 { width: 200px; background-color: deeppink; padding: 20px; } .relative2 { position: relativ..

✔ CSS 배경 CSS 배경 background-color HTML 요소의 배경색을 설정 ✔ CSS 배경 코드 DOCTYPE html> CSS 배경 1 body {background-color: deepskyblue;} div {background-color: white;width: 60%;padding: 20px;border: 3px dotted red;} CSS 배경 1 배경 적용하기 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse eligendi molestiae harum deserunt vel. Sequi illo illum maxime labore. Sapiente cupiditate explicabo perferendis arc..

✔ CSS 컬러 CSS의 컬러 1. 색상 이름으로 표현 deeppink, deepskyblue, red, blue.. 2. RGB 색상값으로 표현 rgb(0~255, 0~255, 0~255) - 0에 가까울수록 그 색상이 연하게 나온다고 생각 -> rgb(0, 0, 255) - 파랑 rgba(0~255, 0~255, 0~255, 0~1의 소수) - 투명,불투명 효과 추가할 3. 16진수 색상값으로 표현 #0000ff(파랑) #00 00 ff -> #00f R G B ✔ CSS 텍스트 CSS의 텍스트 color 텍스트의 색상을 설정, 기본색은 검정색 letter-spacing 텍스트 내에서 글자 사이의 간격을 설정 안 녕 하 세 요 . 오 늘 은 화 요 일 화 가 나 네 요 . word-spacing 텍스..

✔ 그룹 선택자 1. 그룹 선택자 여러개의 요소를 나열하고 (,)로 구분하여 스타일을 적용 h2, p {text-align: center;} 제목 HTML 구조 안녕하세요 를 알아볼게요 HTML구조 ✔ 그룹 선택자 코드 DOCTYPE html> 그룹선택자 h2,p,h3,ul {text-align: center;} h2 {color: deepskyblue;font-size: 50px;} li {display: inline-block; margin-right: 30px; font-weight: bold; color: deeppink;} 그룹선택자 여러개의 요소를 나열하고 (,)로 구분하여 스타일을 적용 선택자의 종류 전체 요소 아이디 클래스 그룹 ✔ 그룹 선택자 결과 ✔ 자손 선택자 2. 자손 선택자 조상요..

✔ 상속 ✔ 상속 부모 요소의 속성값이 자식 요소에게 전달되는 것 과제. 본인의 홈페이지에 아래와 같이 적용 index.html : 대문 index.html 메뉴 [홈(index.html) 인터넷기사(news.html) 이력서(resume.html) 즐겨찾기(favorite) ] 즐겨찾기 본인이 자주가는 웹사이트 3개이사 소개하는 페이지(iframe 적용) ✔ 상속 코드 DOCTYPE html> 상속 div{ color: deeppink; border : 3px dotted gold; padding: 30px; } 상속 div 영역 상속이란 부모 요소의 속성값이 자식 요소에게 전달되는 속성 ✔ 상속 결과 ✔ 전체 선택자 선택자 1. 전체 선택자 스타일을 모든 요소에 적용 * { padding: 0; ma..

✔ CSS CSS(Cascading Style Sheets) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 ✔ 내부스타일 코드 DOCTYPE html> 내부 스타일 h2{font-size: 50px;} /* h2 요소의 사이즈를 50px로 설정*/ p{font-size: 25;} ul{list-style: none;} li{color: deeppink; font-weight: bold; display: inline-block; margin-right: 30px;} 내부 스타일 CSS를 사용하는 방법 인라인 스타일 내부 스타일 외부 스타일 ✔ 내부스타일 결과 ✔ 외부 스타일 3. 외부 스타일 웹 ..

✔ 아이프레임 아이프레임 - inline frame의 약자 - 웹사이트 안에 또 다른 웹사이트를 삽입 ✔ 아이프레임 코드 아이프레임 홈페이지 &nbsp뉴스기사(새탭)&nbsp이력서(새탭) 즐겨찾기 ✔ 폼 태그 폼 태그 - 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그 - 사용자가 입력한 데이터를 서버로 보낼 때 form 요소를 사용 - 데이터를 묶어 보낸다. form 태그 안에 form 요소를 통해 데이터를 서버로 전달 입력 상자 type 속성 text : 문자를 입력받는 글상자 password : 비밀번호를 입력받는 글상자 radio : 여러개의 옵션 중에서 단 하나의 옵션만을 입력받을 수 있도록 하는 버튼 - 그룹을 맺기 위해서 name 속성의 값이 동일해야 함 checkbox : 여러개의..

✔ FTP FTP(File Transfer Protocol) - 클라이언트-서버(c/s)용 프로토콜 - 클라이언트가 파일을 요청하면 서버가 요청된 파일을 제공 - 클라이언트가 서버로 파일을 전달 - 주로 대량의 파일을 처리할 때 사용 - 기본포트 : 21 ✔ 파일질라 설치 - Downlodad FILEZILLA CLIENT ✔ 호스팅 서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해주는 서비스 https://www.dothome.co.kr/ // 호스팅 무료 사이트 https://filezilla-project.org/ // 기업에서 많이 활용하는 사이트 -> Download FileZilla Client for Windows (64bit x86) 선택 ✔ 닷홈 호스팅 주의사항 - html ..

과제 1. 인터넷 뉴스 페이지를 HTML 문서로 작성해보기. DOCTYPE html> 연합뉴스 의무경찰과 함께하는 마지막 경찰의 날…'굿바이, 의경 40년' 송고시간:2022-10-21 06:10 김윤철 기자 마지막 기수 내년 5월 전역…'최후의 의경부대'선 특식 제공 "자식처럼 함께 생활…경찰관 1인몫 해낸 의경 그리울 것" (서울=연합뉴스) 김윤철 기자 = 의무경찰 제도가 내년 5월 폐지됨에 따라 21일은 의경과 함께 맞는 '마지막' 경찰의 날로 기록된다. 경찰 관계자는 "의경과 같이하는 마지막 기념일인 만큼 각 부대에서는 출장 뷔페 등 특식을 제공해 대원들을 격려하고 '경찰 생일'의 의미를 함께 기릴 예정"이라고 말했다. 경찰의 날은 1945년 10월 21일 미군정청 경무국 창설을 기리기 위해 제정..

6. 테이블 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표 : 행을 생성 : 셀을 생성 : 셀의 제목, 가운데 정렬, 굵은 글씨 예제 기본 테이블 테이블1 첫번째 셀 첫번째 셀 두번째 셀 첫번째 셀 두번째 셀 세번째 셀 네번째 셀 이름 국어점수 수학점수 김사과 100 80 반하나 90 70 colspan 속성 - 셀을 가로로 합침(열) rowspan 속성 - 셀을 세로로 합침(행) 예제 테이블 colspan, rowspan DOCTYPE html> 테이블 2 table { width : 600px; border: 1px solid black; } td{ border : 1px solid black; } th{ border : 1px solid black; } 테이블2 1 2 4 5 6 7 8 9 ..

3. 이미지 태그 1) 비트맵 이미지 - 픽셀이 모여 만들어진 정보의 집합 - "레스터 이미지"라고 부름 - 픽셀 단위로 화면에 랜더링함 - 그림판, 포토샵등 틀로 편집 2) 백터 이미지 - 수학적 정보의 형태들이 만들어내는 결과물 - 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음 - 확대 및 축소를 해도 이미지가 깨지지 않음 - 일러스트 같은 툴로 편집 jpg(jpeg) - 압축률이 훌륭하여 사진이나 예술분야에 많이 사용 - 가장 널리 쓰이는 이미지 포맷 - 표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합 - 손실 압축 gif - 이미지 파일내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일 - 여러장의 이미지를 한 개의 파일에 저장할 수 있음(움..

1. 서식 태그 : 텍스트를 굵게 표현 : 텍스트를 이탤릭체로 표현 // html1 버전 웹 접슨성을 위한 태그이다. : 텍스트를 굵게 표현, 리더기에서 거쎈 발음 : 텍스트를 이탤릭체로 표현, 리더기에서 거쎈 발음 //html5 버전 여러분 아녕하세요. 오늘은 HTML에 데헤서 베워볼게요 https://validator.w3.org/ 잘못된 스크랩트나 토드가 있는지 확인하는 사이트 예제 서식태그 DOCTYPE html> 서식태그 서식태그 b태그는 단순히 글자가 굵게> 표현됩니다 strong 태그는 중요한 글자를 굵게 표현됩니다 i 태그는 단순히 글자를 이탤릭채로 표현합니다 em 태그는 중요한 글자를 이탤릭체로 기울여 표현합니다. del 태그는 글자를 지운 것처럼 표현합니다. ins 태그를 사용하면 중요..

클라이언트 사이드 랭귀지 HTML : 웹사이트의 틀을 작성하는 언어 (제어문이나 로직은 없으며 명령어로만 사용 가능, 골격을 만든다, 프로그래밍 언어 X) - 이런 형태를 마크업언어라고 한다. CSS : HTML 문서를 시각적으로 만들어주는 언어 (HTML을 보조하며 시각화에 도움을 준다, 프로그래밍 언어 X) JavaScript : HTML문서의 컨텐츠 내용을 바꾸고 동적인 페이지를 만들기 위해 사용하는 프로그래밍 언어 (웹사이트를 동적으로 표현하는 언어) 서버가 클라이언트에게 전달해줄 수 있는것은 html, css, js이다 브라우저를 통해 클라이언트에게 전달한다. --------------------------------------------------------------------- 서버 사이드..