let patient = { name :"hyein", age : 30, disease : "love" } //객체 {} 어레이 [] console.log(patient) console.log(patient.name) //원하는 값만 출력하고 싶을 때 console.log(patient.age) console.log(patient["age"]) //출력되는 값은 같다. patient.name = "HI" patient.age = 25 //원하는 값을 선택적으로 바꿀 수 있다. console.log(patient) let patientList = [{name:"Kumho", age:4},{name:"Eunha", age:2},{name:"Donghae", age:1}] console.log(patientL..

2022-01-13 HTML과 JavaScript의 만남 1 (script 태그) / HTML과 JavaScript의 만남 2 (이벤트) / HTML과 JavaScript의 만남 3 (콘솔) / 데이터타입 - 문자열과 숫자 JavaScript JavaScript는 사용자와 상호작용하며, HTML을 제어할 수 있는 언어이다. JavaScript html 1+1 JavaScript의 text 출력 코드는 ↓ HTML의 onclick의 속성의 속성 값으로는 반드시 JavaScript가 오고, 웹브라우저는 이것을 기억하고 있다가 onclick 속성이 위치하고 있는 태그를 실행했을 때 동작되도록 한다. 이처럼 웹브라우저 위에서 일어나는 일들을 이벤트Event 라고 한다. 구글 개발자 도구 > 검사 > Consol..

Table (1) Rows 을 사용하는 많은 프로그램에서는 에 대한 정의가 이미 되어 있으므로, 그 뜻은 데이터가 있는 행(row)과 열(column) 그리고 셀(cell)을 가지고 있어야 한다는 말입니다. 에 데이터를 넣기 위한 첫번째 단계는 행 요소인 을 이용해 행을 입력하는 것입니다. (2) Data 행만으로는 충분한 데이터를 에 넣지 못합니다. 각 셀의 요소도 정의해줘야 합니다. 이는 를 이용해 추가할 수 있습니다. 73 81 위 예제에는 73과 81이 한 행 안에 입력되었습니다. 두 데이터를 추가함으로써 우리는 두 cell 값을 입력하게 된 것입니다. 브라우저의 표에는 행이 하나고 열이 둘인 표가 됩니다. (3)Headings 은 데이터가 뭘 나타내고 있는지에 대한 제목이 없으면 의미가 없습니다..

2022-01-11 반응형 디자인 / CSS 코드의 재사용 반응형 디자인 화면의 크기에 따라서 각 요소들이 반응하여 동작하는 디자인을 뜻한다. 미디어 쿼리(Media Query) 어떤 조건을 만족할 때만 CSS의 내용이 동작하도록 하는 것이 가능하다. 화면 크기에 따라서 특정 요소를 보이거나 안 보이게 하려면 우선 이것의 크기가 어느 정도인지 알아야 한다. 웹페이지에서 오른쪽 클릭을 통해 구글개발자 도구의 검사를 들어가보자. 화면 크기를 조정할 경우 상단 우측 모서리에 화면 크기가 나온다. 특정 요소를 화면 사이즈에 따라 보이거나 안보이게 하는 코드는 아래와 같다. /* screen width < 800px n보다 작다면 최대가 n이란 뜻 */ @media (max-width : 800px) /* scr..

HTML을 작성하다 보면 항상 동일하게 입력해야하는 부분이 있다. 그걸 Visual Studio Code에서 매번 칠 필요없이 양식을 불러올 수 있는데 어떻게 하는지 알아보자. 1. 하단에 HTML로 설정이 되어 있는지 확인 필요 우선 사용하고자 하는 HTML 파일을 생성한 후, VS Code 하단에 설정을 확인해보자. HTML 이라고 제대로 설정되어 있으면 괜찮지만 그렇지 않으면 HTML 으로 바꿔줘야 한다. 2. ! + Tab 혹은 html:5 입력 ! + Tab 혹은 html:5 를 작성하게 되면, VS Code에 입력되어 있던 기존 HTML 템플릿이 자동완성된다. 3. 템플릿 수정하기 그럼 이 자동완성 된 템플릿은 어떻게 수정할까? VS Code 하단에 위치한 설정 아이콘을 눌러 사용자 코드 조각..

2022-01-10 박스모델 / 그리드 Padding 부분의 숫자를 더블 클릭하고 방향키 위,아래를 이용해 숫자를 변경할 수 있다. 실시간으로 바로바로 바뀌는 값을 확인 가능! #grid { display: grid; grid-template-columns: 160px 1fr; } #article { padding-left: 25px; } 가방 후보군 DANKER (댄커) DANKER (댄커) DANKER (댄커) 1. DANKER (댄커) (U0323CBP92) 🔗 브랜드 : DANKER (댄커) 가격 : 80,460 비고 : 노트북수납칸이 있음 그럼 하단 에 id값 article을 추가해주고, 웹페이지를 보면서 적당한 padding-left 값을 style에 추가해주도록 하자. #ol → #grid ..

2022-01-09 CSS 등장 이전의 상황 / CSS의 등장 / 혁명적 변화 / CSS 속성을 스스로 알아내는 방법 / CSS 선택자를 스스로 알아내는 방법 CSS의 시작 HTML에 디자인 태그를 추가하지만 한계를 깨닫고, 디자인에 최적화 된 완전히 새로운 언어를 만들은 것이 CSS 이다. 박스모델 우리가 원하고자 하는 레이아웃의 화면분할을 위해서 박스모델을 사용한다. Margin은 다른 Box Model과의 거리간격 Border은 Box Model의 경계선 Padding은 Context와 Border 와의 거리간격 Context는 Box Model의 내부 페이지 오른쪽 클릭을 했을 때 나오는 '검사'를 클릭하면 Box Model을 확인할 수 있다. 미래의 가방 후보군 1. DANKER (댄커) (U0..

1. Material theme 작업환경 테마 설정 가능 2. Material icon theme 파일 종류 별로 아이콘 가시성 증대 3. Prettier 코드 포맷 설정. Cmd + , 로 이동 4. bracekt pair colorizer 코드 괄호마다 색상 표시 5. Indent-rainbow 들여쓰기 부분마다 색상 표시 6. Auto rename tag 열린태그 수정 시 닫힌태그 자동 수정 7. CSS Peek HTML에 적용 된 CSS 바로찾기 가능 (Cmd + click) 8. HTML CSS Support 만들어놓은 CSS를 HTML에서 사용 가능 9. Live Server 웹에서 프로젝트 확인 가능. 커맨드 팔렛트에 >live Server: Open with Live Server 입력하고 ..

1. bitnami MAMP 설치하기 https://bitnami.com/stack/mamp MAMP MAMP packaged by Bitnami provides a complete, fully-integrated and ready to run MAMP development environment. In addition to PHP, MySQL and Apache, it includes FastCGI, OpenSSL, phpMyAdmin, ModSecurity, SQLite, ImageMagick, xDebug, Xcache, OpenLDAP, ModSec bitnami.com 사이트에 접속해서 아래쪽으로 내리면 이렇게 버전별로 다운로드 버튼이 있다. 최신버전으로 다운로드를 해주자. 다운로드를 다 받으면 ..

2020-01-06 웹호스팅 (GitHub Pages) 1. 깃허브에서 New repository 생성하기 깃허브 상단의 내 사진 옆에 보면 + 아이콘이 있다. 그걸 클릭하면 드롭다운 메뉴가 나오는데 그 중에서 New repository를 선택해 준다. 2. Repository 내용 입력하고 만들기 Owner는 나로 자동 선택되어 있고, Repository name은 비어있으니 꼭 써주도록 하자. Initialize this reposityory with: 은 옵션이다. 선택하지 않아도 Repository는 생성할 수 있다. 하지만 Add a README file을 선택하여야 마음대로 파일을 업로드 할 수 있으니 선택하자. 3. 파일 올리기 Repository를 생성하고 나면 이런 화면이 뜨는데 파일을 ..