일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- Web
- java
- 単語
- vscode
- 인프런
- C로 시작하는 컴퓨터 프로그래밍4판
- Flutter
- nico
- springboot
- 日本語
- rails
- 비즈니스일본어
- 디지몬
- ruby
- javascript
- rails7
- html
- 건담
- メソッド
- Python
- DART
- 반다이몰
- Spring
- 一日一つメソッド
- 자바
- jsp
- CSS
- 일본어
- 연습문제
- 건담베이스
- Today
- Total
목록WEB (39)
AR삽질러
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b9I0Yl/btsIdVuNinL/bsb7Bxe9I9UkxAn64rOvgK/img.png)
JavaScript - 자료형Type (1) 1. 원시 타입(Primitive Types) 숫자형(Number) - 정수 및 실수 형태의 숫자를 포함한다.// 원시타입(Primitive Types)// 1. Number Typelet num1 = 30;let num2 = 3.5;let num3 = -20;console.log(num1 + num2);console.log(num1 - num2);console.log(num1 * num2);console.log(num1 / num2);console.log(num1 % num2); 문자형(String) - 텍스트 데이터를 포함하며 '', "", ``으로 감싸서 표현한다.let name = "arang";let age = '29';// 템플릿 리터럴let ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bIMxLR/btsIbvxHlqL/oEyZkK3XbNvCuvKpFs0hM0/img.png)
JavaScript - 변수와 상수 (0) 1. 변수 var, letlet 동일한 변수 이름은 다시 선언할 수 없다.// 1. 변수 letlet age = 29;console.log(age);age = 30;console.log(age); var 동일한 변수 이름을 다시 선언할 수 있다.// 2. 변수 varvar name = "Arang";console.log(name);var name = "AR";console.log(name);2. 상수 const - 상수는 선언과 동시에 초기화를 해줘야한다.// 3. 상수const number = 3;number = 5; 3. 변수 네이밍 규칙 1. camelCase - 변수명은 소문자로 시작하고 단어의 첫글자는 대문자로 사용한다. - 의미 있는 변수명 사용..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cuoWgz/btsBGYx3dPX/WfKPvciAG7SBomFqyaHjOK/img.png)
CSS - Flexbox 1. Flexbox - flex-direction의 디폴트는 row - inline block의 문제점을 해결하기위해 flexbox flexbox사용규칙 1) 자식에게 어떤것도 명시하지 않고 부모엘리먼트에게 명시한다. flex-direction, justify-content, align-items를 적용하고 싶다면 먼저 부모를 display:flex로 만든다. 2) flex컨테이너는 주 축(main axis)수평 와 교차축(cross axis)수 Flex Container는 두개의 축을 가지고 있다. 주요 Flexbox의 속성 flex-direction 주 축(main axis)를 정의한다. row row-reverse column column-reverse justify-con..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/1ULB8/btsBHPgrnLE/HSl0H21akrBaBkzStsrmlK/img.png)
CSS - Classes, inline Block 1. lnline - inline 요소는 높이와 너비를 가질 수 없다. - padding 요소는 사방에 가질 수 있다. 위 상황에서 위 아래 margin을 적용하고 싶다면 inline요소를 block로 수정해야한다. hello hello line요소 - span : inline요소로 텍스트를 묶기 위해 사용 2. Class hello hello hello hello hello hello Class - .으로 시작하고 클래스 이름이 뒤에온다. ex) .className .class1 - 선택자로 해당 클래스가 적용된 모든 HTML요소에 스타일 규칙을 적용할 수 있다. - HTML요소에 클래스를 적용하면 class속성을 사용할 수 있다. ex) - Class..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/caP6y1/btsyDwq7TIf/7g6n7DGOUnciQveqtMKcr1/img.png)
CSS Margin, Padding, Border - (3) CSS(Cascading Style Sheets)의 margin속성은 웹 페이지 요소의 외부 여백을 조절하는데 사용된다. margin의 여백은 요소의 경계밖에 위치하며 인접한 요소와의 간격을 생성하는 역할을 한다. Margin을 이용해 웹 페이지 레이아웃의 정렬과 간격을 정의하며 스타일링한다. Margin - Margin은 요소의 경계를 넘어 그 주위에 공간을 생성하는 요소와 그 주변 요소간의 간격을 조절한다. 1.1. Margin의 값을 지정하는 방법 1) 기본구문 : margin : top, right, bottom, left 2) 단일 값지정 : 요소의 모든 방향에 동일한 크기의 마진을 적용한다. 3) 두값 : 첫번째 값은 top, bot..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bsZpFw/btsytaCBcFM/qWlKwWHq9DmgQS0cfAxIdk/img.png)
CSS box - (2) - CSS의 box에는 두종류의 형태가 있다. 하나는 박스요소 옆에 다른 요소가 올 수 있고 하나는 박스요소 옆에 다른 요소가 올수없는것이다. - 요소 옆에 다른 요소가 올 수 없는것 blocks - 요소 옆에 다른 요소가 올 수 있는 것 inlines div는 요소 옆에 다른 요소가 올 수 없다. span은 요소 옆에 다른 요소가 올 수 있다. hello hello hello link도 요소 옆에 올 수 있다. hello hello hello link hello p는 div와 같이 요소 옆에 다른 요소가 올 수 없다. hello hello hello link hello 안녕하세요 HTML CSS를 활용한 프로젝트를 만들고 있습니다. img도 요소 옆에 올 수 있다. hello ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bsq8MJ/btsynXqrAZt/mnFp3F7CdXJm77ywW4ii1k/img.png)
CSS - How to Add CSS to HTML (1) 1. HTML 파일에 CSS 코드를 넣는방법 1-1. 같은 HTML파일에 HTML, CSS 코드는 넣는방법 - head 안에 style을 명시하려 css코드를 작성한다. 1-2. CSS와 HTML파일을 분리하는 방법 (추천) - 다른 방법 css파일을 분리하여 생성한후 link태그로 파일을 연결해준다. 2. CSS코드 작성 - CSS코드 작성 규직 3가지 1) CSS가 하는 일은 HTML태그를 가르키는 일로 첫쨰로 selector를 작성한다. 2) 어떤 태드를 가리키면 속성을 부여한다. 3) 중괄호 { } 를 사용하여 속성을 정의한다. styles.css h1{ color: red; } html The AR Profile Photo Hello!!..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bWskbq/btsxzYws5i7/qNX8iPffyrcQTgOnAgikdk/img.png)
HTML Form Tags - (2) https://developer.mozilla.org/ko/docs/Web/HTML/Element HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN 메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에 developer.mozilla.org - body 태그 내에 있는 콘텐츠가 브라우저에 표시된다. - 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다. - 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다. 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존해한다. -..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dcxsoO/btsxzXxxA9Q/ECWWJj5u48PRnBYNxA9d10/img.png)
https://developer.mozilla.org/ko/docs/Web/HTML/Element HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN 메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에 developer.mozilla.org HTML HTML(Hyper Text Markup Language)는 웹 페이지의 구조를 만드는 언어로 HTML에서는 다양한 태그를 사용해 웹페이지의 요소를 정의한다. 태그는 ""로 둘러쌓인 키워드를 구성되어 어디서부터 어디까지의 구간이 tag인지 지정할 수 있다. Tag 0. - HTM..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bYk9n1/btswcKkNdnT/ZTll2Kfi2aFA5RIs3kXda0/img.png)
CSS? CSS (Cascading Style Sheets) HTML은 Browser에게 웹사이트의 Content가 무엇인지 알려주는 것이다. CSS는 Browser에게 웹사이트의 그 Content가 어떻게 보이는지 알려주는 것이다. 즉 사용자에게 문서를 보여주는 방법을 지정하는 언어로 스타일, 레이아웃, 디자인 등 전반적인 모양을 지정하고 제어한다. CSS는 웹 페이지의 내용과 구조(HTML)와 분리되어 컨텐츠와 디자인을 분리하여 코드의 유지보수와 개선을 도와준다. https://ko.wikipedia.org/wiki/CSS CSS - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 종속형 시트 또는 캐스케이딩 스타일 시트(영어: Cascading Style Sheet)는 마크업 언어..