Develope
[3] Vue.js를 이용한 todolist 만들기
[3] Vue.js를 이용한 todolist 만들기
2023.05.05- 2021.10.06 - - 2023.05.05 - 기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다 기존에 만들어놓던 프로젝트를 실수로 제거가 되서 다시 처음부터 만들게 되었다. 언제 이 게시글이 공개로 돌려질 수 있을지 모르지만..ㅋㅋ 10월이내로 vue.js를 이용한 todolist를 만드는 것이다. 조건은 아래와 같다. 01. IntelliJ 프로그램 사용 02. Vue.js를 이용한 코딩 03. Local Storage를 이용한 todolist 구현 일단 이 3가지로 공부를 할꺼고 3번까지 구현이 되면 욕심을 담아서 좀 더 해볼 생각이다. New Project를 누르고 JavaScript - Vue.js 클릭. Create Project 이후 자동으로 vue cli를 설치해준다...
[2] IntelliJ 셋팅하기(Github 연동)
[2] IntelliJ 셋팅하기(Github 연동)
2023.05.05- 2021.10.02 - - 2023.05.05 - 기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다 이전 편인 IntelliJ의 셋팅이 다 끝났다면 이제 Github와 연동을 해야한다. (이전편은 여기로!) 프로젝트를 만들고 첫 화면을 띄웠다. 나는 Java로 간단하게 HelloWorld를 만들어 Github와 연동시켜 올릴것이다. 코드를 마저 작성하고 System.out.print("Hello java and IntelliJ"); 상단에 보이는 Help - find action으로 들어간다. Github를 검색하면 위에서 4번째 항목인 'Share Project on Github'가 있다 나같은 경우에는 저렇게 바로 Share Project on github가 떴지만 초기의 경우 gi..
[1] IntelliJ 셋팅하기(vuejs, nodejs, vuecli)
[1] IntelliJ 셋팅하기(vuejs, nodejs, vuecli)
2023.05.05- 2021.09.27 - - 2023.05.05 - 기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다 Web 개발을 위해 여러 프로그램을 찾던 도중 친척형의 조언을 얻어 IntelliJ를 찾게 되었다. IntelliJ는 유로 프로그램으로 구독제로 관리가 되고있는데 대학생의 신분이라면 졸업 직전까지 충분히 무료로 사용할 수 있다. 학생용 라이센스 진행은 여기에서! IntelliJ를 설치했다면 아래 항목들을 설치해야한다. 사이트는 누르면 이동할 수 있다. :) 1. vue.js 2. node.js 3. vue cli IntelliJ는 html과 java 등 vuejs, nodejs를 다룰 수 있고 또한 GitHub를 통해서 코딩을 빠르고 편하게 공유할 수 있어서 장점이 많은 프로그램이다. v..
[4] CSS셀렉터의 종류 및 설명(조합,상태,특성 선택자)
[4] CSS셀렉터의 종류 및 설명(조합,상태,특성 선택자)
2023.05.05- 2021.08.26 - - 2023.05.05 - 기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다 CSS 셀렉터 내부/외부 스타일 시트에서 문서의 html 요소를 선택할 수 있게 하는 문법 - tag 선택자 : html 문서의 모든 특정 태그를 선택할 때 사용 html 태그의 이름으로 바로 선택할 수 있다. 어떠한 기로호 붙이지 않고 태그 이름을 사용할 수 있다. - id 선택자 : html 문서의 하나의 요소를 특정해서 선택할 때 사용 html태그의 속성으로 id를 지정/선언 할 수 있습니다. 하나의 id는 문서 내 하나만 존재 해야한다. #기호로 표현한다. html 에서 css #description-text-1{ css 속성 선언 } 으로 표현 - class 선택자 : html ..
[3] HTML로 작성한 페이지에 Style을 적용해보자
[3] HTML로 작성한 페이지에 Style을 적용해보자
2023.05.05- 2021.08.26 - - 2023.05.05 - 기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다 지난 학습한걸로 우리는 CSS를 선언하는 방법. 그리고 내외부 스타일 시트에 대해 배우고 폰트와 관련댄 스타일들에 대해 학습했다. 오늘은 이걸 이용해서 기존에 html로 작성해놓은 페이지에 스타일을 적용하려고 한다. 작성해두었듯 스타일이 적용되지않아 심심해 보인다. 하이퍼링크가 적용된 경복궁은 밑줄이 쳐져있다. 나는 여기에서 지난번에 학습한 내용들 중 외부스타일 시트를 이용해 html로 작성한 페이지에 스타일을 적용해보려고 한다. 2021.08.25 - [WEB/Web 공통] - [CSS] (4) 개념과 선언하기 외부 스타일 시트에 대한 선언방법에 관한글은 눌러보면 바로 갈 수 있다. 기..
[2] 글자와 관련된 스타일
[2] 글자와 관련된 스타일
2023.05.05- 2021.08.26 - - 2023.05.05 - 기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다 글자와 관련된 스타일 color 글자의 색을 표현 ( rgba, cmyk등의 형태, 16진수 코드 ) font-family 글씨체를 표현 ( 글씨체에 띄어쓰기가 있을 경우 쌍따옴표(")를 사용 ) font-size 글씨의 크기를 표현 ( pt,px,em으로 표현 ) font-weight 글자의 굵기를 표현 ( 100~900 사이의 값이나 bold로 굵기 표현 ) font-height 줄의 간격을 표현 ( %단위나 px등의 단위를 사용 ) Font Font(글씨체)는 폰트명을 직접 작성함으로써 지정한다. 하나의 글씨체 이름이 여러 단어로 이루어져있다면 쌍따옴표로 묶어주고 아니면 그냥 기술함..
[1] 개념과 선언하기
[1] 개념과 선언하기
2023.05.05- 2021.08.25 - - 2023.05.05 - 기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다 CSS ( Cascading Style Sheets) html 웹 문서의 스타일을 표현하는 언어로써 html 코드로 작성된 웹의 요소들이 어떻게 표시되어야 할지를 정의 CSS는 CSS속성, 속성값, 선택자를 이용해서 표현한다. body { font-size:9pt; } body 는 선택자(selector) font-size 는 CSS 속성 9pt 는 CSS 속성 값 CSS를 선언하는 법 CSS를 html에 적용하는 3가지 방법 (1) 인라인(inline) 스타일 (2) 내부 스타일 시트 (3) 외부 스타일 시트 (1) inline 선언 각 html 태그에 직접 style속성을 이용해서 선..
[4] form 태그, meta 태그, fields 태그, legend 태그 알아보기
[4] form 태그, meta 태그, fields 태그, legend 태그 알아보기
2023.05.05- 2021.08.24 - - 2023.05.05 - 기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다 Form 사용자에게 데이터를 입력 받기 위한 화면 구성을 지칭한다. 태그 사이에 관련 태그들(input, label, button, select 등)을 넣어 하나의 폼을 완성할 수 있다. - 폼의 시작과 끝을 정의하는 태그 사진1의 위와 아래처럼 form태그를 열어서 태그 안에서 div, label,input태그를 사용해서 데이터를 입력 하는데 form태그는 사용자의 데이터를 입력받을 수 있는 태그들을 위한 화면을 구성한다. 주요 속성 action 데이터를 전송할 url주소를 입력한다. 사진1을 보면 action="signup.html"이라는 항목이 있는데 폼에서 작성이 완료된것을 sig..
[3] Inline과 Block. 그리고 표 만들어보기
[3] Inline과 Block. 그리고 표 만들어보기
2023.05.05- 2021.08.23 - - 2023.05.05 - 기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다 html 요소의 두형태가 있는데 크게 Inline과 Block 형태로 나뉜다 Inline 태그의 내용에 맞춰서 너비가 결정됨 레이아웃에 영향을 주지 않고 일부 내용에만 스타일이나 내용의 구분을 주고 싶을 때 사용 Inline 요소 - span 아무 의미도 내포하지 않은 대표적인 Inline 요소. CSS 스타일과 함께 특정 내용을 강조하거나 구분하고 싶을 때 사용. 대표적으로 서식태그에서 학습했던 b(Bold), i(Italic)이 이에 속하고 대표적인 태그로 span이 존재. Block 태그의 내용과 관계 없이 상위 요소의 너비에 맞게 너비를 차지함.레이아웃 영역을 지정할 때 주로 사용..
[2-1] 서식태그 Bold와 Strong의 차이점
[2-1] 서식태그 Bold와 Strong의 차이점
2023.05.05- 2021.08.21 - - 2023.05.05 - 기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다 어제는 공부하면서 궁금했던 점들을 자기전에 검색해보았다. 서식태그중에 강조체로 사용할 수 있는 태그가 두개가 있었는데 바로 Bold와 Strong 태그 였다. 바로 이 두개의 태그는 모두 공통되게 강조가 필요할때 사용하는 태그로 학습했다. 근데 내가 내가 언어를 배웠을때에는 어떤 식이 쓰일때 같은 기능을 하는 두개의 수식은 없는걸로..? 알고있다. 만일 있게되더라도 그 이유는 그 수식에 보안적인 문제가 된다던지(Buffer Overflow 등)할때 그 기능을 보완하는 수식이 있다. 실제로 Buffer Overflow 공격에 취약함수 strcpy()를 strncpy()로 변경하여 사용하는것..
[2] List 태그에 대하여
[2] List 태그에 대하여
2023.05.05- 2021.08.20 - - 2023.05.05 - 기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다 리스트를 나열하는 태그들에 대해 공부했다. 리스트 태그는 어떤 항목들을 구분해서 나열하고 싶을 때 사용하는 태그들인데 여러개의 리스트(li)를 ol 또는 ul 태그로 묶어 사용한다. List item 태그 태그 : li ol태그 혹은 ul태그와 같이 사용하며 리스트를 표현하는데 이용한다. 단독으로 사용할 수 없고 ol태그와 ul태그와 같이 사용해야 한다. 사과 메론 Ordered List 태그 태그 : ol 순서가 있는 항목들을 나열할 때 사용한다. 입력 사과 메론 출력 1. 사과 2. 메론 Unordered List 태그 태그 : ul 순서가 정해지지 않는, 순서 정렬이 필요없는 항목들..
[1] HTML 개념과 서식에 관한 태그
[1] HTML 개념과 서식에 관한 태그
2023.05.05- 2021.08.20 - - 2023.05.05 - 기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다 HTML은 web을 구성하는 가장 기초적인 구성요소로, 웹 페이지의 내용을 서술하고 정의하는데 사용한다. 태그(Tag)라는 개념으로 구분한다. HTML의 문법에는 크게 여는 태그와 닫는태그가 있는데 이 태그는 중첩될 수 있다는것을 알아두자 컨텐츠 간단하게 이렇게 구성이 되는데 왼쪽부터 설명을 하면 여는 태그 라고 하며 태그네임 혹은 태그 타입이라고 지칭한다. 컨텐츠 콘텐츠로 여는태그 다음에 나오는 내용이 들어가는 부분이다. 닫는 태그 라고 지칭한다. HTML의 기본 구조는 크게 html, head, body 태그로 구분한다. html 태그는 문서의 시작과 끝을 정의 head 태그는 문서의..