JuinThyme

direction 속성 - 글자 쓰기 방향 지정하기 direction 속성을 이용하면 텍스트를 어느 방향부터 쓰기 시작해 화면에 표시할지 설정할 수 있다. direction : ltr | rtl 속성 ltr : 왼쪽에서 오른쪽으로 (left-to-right) 텍스트를 표시한다. 기본값이다. rtl : 오른쪽에서 왼쪽으로 (right-to-left) 텍스트를 표시한다. text-align 속성 - 텍스트 정렬하기 화면에 표시할 때 왼쪽에 배치할 건지, 가운데에 정렬할 것인지 설정이 가능하다. text-align 속성을 이용해 텍스트를 정렬할 수 있다. text-align : start | end | left | right | center | justify | match-parent 속성 start : 현재..

IT/HTML 및 CSS 2021. 4. 20. 19:30

color 속성 - 글자 색 속성 - 글자 색 웹 문서에서 문단이나 제목 등의 텍스트에서 사용되는 글자 색을 바꿀 때는 color 속성을 사용한다. color : 16진수나 rgb, hsl 또는 색상 이름으로 표기할 수 있다. 세계 10대 슈퍼푸드 마늘의 일해백리 마늘 특유의 아린 맛은 알리신 알리신이라는 성분 때문으로 text-decoration 속성 - 텍스트에 줄 표시하기/없애기 text-decoration 속성을 이용하면 텍스트에 밑줄을 긋거나 취소 선을 표시할 수 있다. text-decoration: none | underline | overline | line-through 속성 none : 밑줄을 표시하지 않는다. underline : 밑줄을 표시한다. overline : 영역 위로 선을 그..

IT/HTML 및 CSS 2021. 4. 19. 20:11

font-weight 속성 - 글자 굵기 지정하기 글자 굵기를 조절할 수 있다. 속성 normal : 일반적인 형태로 기본 값이다. bold | lighter | bolder : 굵게 | 원래 굵기보다 더 가늘게 | 원래 굵기보다 더 굵게 나타낸다. 100 ~ 900 사이의 수치 : 400은 normal, 700은 bold에 해당하고 세밀하게 굵기를 조절할 수 있다. font-variant 속성 - 작은 대문자로 표시하기 소문자를 작은 대문자로 표시할 때 사용한다. 사과(Apple) / 사과(Apple) 바나나(Banana) / 바나나(Banana) 체리(Cherry) / 체리(Cherry) font-style 속성 - 글자 스타일 지정하기 글자의 스타일을 변경할 수 있다. 애국가 동해물과 백두산이 마르..

IT/HTML 및 CSS 2021. 4. 16. 12:43

font-family 속성 - 글꼴 지정하기 웹 문서에 사용할 글꼴을 font-family 속성으로 지정한다. 텍스트를 사용하는 요소들에서 주로 사용한다. font-family: [, , ] body { font-family: "맑은 고딕", 돋움, 굴림 } } 글꼴이 없는 경우를 대비해서 두 번째나 세 번째 글꼴까지 지정해야 한다. 구글 웹 폰트 사용하기 구글에서 무료로 제공하는 웹 폰트를 사용할 수 있다. 웹 폰트를 직접 다운로드 하지 않고 직접 링크를 이용해 사용할 수 있다. https://fonts.google.com 사이트에 들어가서 원하는 글꼴을 사용할 수 있다. 원하는 글꼴을 선택해서 숫자 1~3 번까지 클릭을 한다. 태그 사이에 넣을 import 부분을 복사한다. @import url('h..

IT/HTML 및 CSS 2021. 4. 15. 17:16

전체 선택자 - 모든 요소에 스타일 적용하기 전체 선택자(uniserveal selector)는 말 그대로 스타일을 모든 요소에 적용할 때 사용한다. 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용한다. * {속성: 속성 값; 속성: 속성 값; ... } 태그 선택자 - 특정 태그를 사용한 요소에 스타일 적용하기 많은 요소에 스타일을 적용하는 태그 선택자(tag selector)는 특정 태그가 쓰인 모든 요소에 스타일을 적용한다. p { font-size: 12px; font-family: 돋움; } 블루베리에 관한 연구 블루베리는 몸에 좋은 연구효과가 있다. 클래스 선택자 - 특정 부분에 스타일 적용하기 같은 태그라도 특정 부분에서만 스타일을 적용할 때 사용하는 것이 클래스 선택자(class ..

IT/HTML 및 CSS 2021. 4. 13. 12:32

웹페이지에서 스타일은 왜 사용할까? 웹 문서에서 스타일(style)이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정한다. 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다. 스타일 형식 p { text-align: center; } p : 선택자 text-align: 스타일 속성 center : 속성 값 태그에 적용될 스타일은 중괄호({, })의 스타일을 적용하겠다는 의미다. 스타일을 표기하는 방법 스타일 규칙은 세미콜론(;)으로 구분해 중괄호({, }) 안에 나열하면 상관없지만 앞에서 본 것처럼 한 줄로 길게 쓰면 속성이 여러 개일 경우, 구별하기 쉽지 않다. 그래서 공백을 최소화시켜 파일 크기를 작게 만들 거라면 한 줄로 표기하지만, 개발자가..

IT/HTML 및 CSS 2021. 4. 12. 12:28

개발 환경 1. 에디터 : Visual Studio Code를 이용 2. node 버전 : 14.16 npm 으로 설치할 것 express socketIO moment : 시간을 불러올 때 사용함 파일 구조 소스 app.js 더보기 const express = require('express'); const http = require('http'); const app = express(); const path = require('path'); const server = http.createServer(app); const socketIO = require('socket.io'); const moment = require('moment'); const io = socketIO(server); app.use(..

IT/Javascript 2021. 4. 11. 20:24

태그 - 버튼 넣기 태그에서 type을 buttn, submit, reset 를 지정하면 해당 기능을 가진 버튼이 표출됐다. 태그 말고도 태그를 이용해서 버튼을 표출할 수 있다. 내용 속성 submit : 폼을 서버로 전송한다. reset : 폼에 입력한 모든 내용을 초기화한다. button : 버튼 형태만 만들 뿐 자체 기능은 없다. 태그 - 계산 결과 태그는 입력하는 값이 계산 결과라는 것을 브라우저에 알려준다. 내용 + = num1.value는 input 태그의 첫 번째 필드에 입력된 값이다. num2.value는 input 태그의 두 번째 필드에 입력된 값이다. 태그 - 진행 상태 보여주기 태그는 작업 진행 상태를 나타낼 때 사용하는 태그다. 작업 시작을 0으로 하고 최종 완료를 최댓값으로 해 얼..

IT/HTML 및 CSS 2021. 4. 8. 19:53