[WEB] Javascript를 이용해서 html 글 변경 및 폰트 사이즈 변경하기

[WEB] Javascript를 이용해서 html 글 변경 및 폰트 사이즈 변경하기

Javascript를 이용해서 html 글 내용 변경하기 Javascript 를 사용하는 곳과 방법은 다양하다 html 조작, 서버와 통신 , 클릭-타이핑 감지 , 비동기 처리 , 자료 다루기 등이 가능하게 해준다 html에서 javascript를 사용하기 위해서 html 을 하나를 만들어 작성해준다 안녕하세요! document.getElementById()를 사용해서 아이디의 이름을 가져오는 셀렉터이고 innerHTML 속성은 HTML안에있는 id 값을 변경 해주는 코드이다 이렇게 자바스크립트를 작성하는 방법을 알고 Java Script를 사용해서 다양한 동작을 만들수 있다 폰트 사이즈 변경하는 방법 font size : 20px 안녕! 폰트의 사이즈를 변경하기 위해서는 다음과 같은 코드로 변경해주어야..

  • format_list_bulleted Frontend Dev📚
  • · 2023. 9. 11.
  • textsms
실업인정 절차

실업인정 절차

제도 및 절차 개관 실업급여 실업급여 제도, 실업 인정 절차 이해 경영상 해고 등 부득이한 사유로 이직시 적극적 재취업활동 구직활동 지원금(구직급여) 실업인정 실업인정 대상 기간중에 실업상태였는지 여부와 재취업활동 여부 확인하고 구직급여 지급 여부를 결정 1~4주 단위로 실업 인정 받아야 구직 금여 지금 인정 받지 못하면 구직 급여 소멸 고용보험 수급 자격증 확인 사항 실업 인정 담당자 이름 소정 급여 일수 1/2 시점 = 조기 재취업 수당 기간을 알고 있으면 됨 구직 번호 구직 신청서 작성 후 제출 미 제출시 실업급여 지급 x 구직 등록 정보 비공개 원칙 알선을 원할 경우 공개 전환(구직 활동 모니터링됨 ) 소정 급여 일수 만료일(실업급여를 받을 수 있는 기간) 소정 급여 일수(사람마다 다른데 수급기간..

  • format_list_bulleted ETC📌
  • · 2023. 9. 11.
  • textsms
[WEB]HTML, @keyframes 로 animaiton 만들기

[WEB]HTML, @keyframes 로 animaiton 만들기

HTML, @keyframes 로 animaiton 만들기 @keyframes 애니메이션 명 { 0% { 애니메이션 시작 } 50% { 애니메이션 시작하고 50% } 100% {애니메이션 끝! } } @keyframes move_title { 0% { transform: translateX(0px); } 30% { transform: translateX(-50px); } 60% { transform: translateX(50px); } 100% { transform: translateX(0px); } } 0~100% 완료 될 때 까지의 동작을 수치 상으로 만들어 주면 된다 .menu-text-title:hover { animation-name: move_title; animation-duration: 2..

  • format_list_bulleted Frontend Dev📚/🔖HTML
  • · 2023. 9. 6.
  • textsms
[WEB]HTML, transform사용하기

[WEB]HTML, transform사용하기

transform 사용하기 transform:roate(회전정도 값 deg) transform: rotate(180deg); transform: traslateX(이동 값) / traslateY(이동 값) / traslateZ(이동 값) transform: translateX(10px); transform: translateY(10px); transform: translateZ(10px); translate(X,Y,Z)를 하면 값이 동시에 적용되지 않는다 값을 동시에 적용받아 위치를 이동하고 싶은 경우에는 transform: translate3d(X이동값, Y 이동값, Z이동값) 을 사용해서 이동 시켜야한다 transform: translate3d(60px, 10px, 30px); transform: s..

  • format_list_bulleted Frontend Dev📚/🔖HTML
  • · 2023. 9. 6.
  • textsms
[HTML]HTML 안에 Video, Audio 적용하는 방법

[HTML]HTML 안에 Video, Audio 적용하는 방법

HTML, Video 적용하는 방법 html 파일을 하나 만들어주고 를 넣어준다 넣어주면 화면에 영상이 뜨는 것을 확인 할 수 있다 video만 작성하면 재생을 할 수가 없는데 재생을 하는 방법은 video 태그안에 속성 값을 넣어주어야한다 video 태그안에 속성 값 controls 재생 바를 보여줌 autoplay 자동으로 재생 - 재생이 안되는 경우 뒤에 muted를 넣어준다 loop 영상을 반복 재생 poster="경로" 시작전 썸네일 이미지를 지정해준다 preload="auto" 페이지가 로드 될 때, 전체 파일을 같이 로드 해줌 preload="metadata" 페이지가 로드 될 때, 파일의 메타데이터만 로드 해줌 preload="none" 페이지가 로드 될 때, 파일을 불러오지 않는다 (미리..

  • format_list_bulleted Frontend Dev📚/🔖HTML
  • · 2023. 9. 6.
  • textsms
[HTML]SASS, @use 문법

[HTML]SASS, @use 문법

SASS, @use 문법 CSS를 사용하다 보면 계속 사용하는 파일들을 복사 붙여넣기 하기 귀찮을 때,다른 파일에 있는 내용을 가져오고 싶을 때사용하는 방법 새로운 .scss 파일을 하나 만들어준다 그리고 파일 안에 기본적으로 적용할 파일들을 넣어준다 작성해준 파일을 불러오는 방법은 @use'파일경로' 의 형태로 작성을 해준다 CSS 파일을 확인하면 상단에 'defalut'에 작성한 내용이 들어가 있는 것을 확인 할 수 있다 @minxin. $변수도 가져와서 재활용 할 수 있다 다른 파일 안에 있는 @mixin 을 사용하기 위해서는 @include mixin이름 앞에 파일명을 적어주면된다

  • format_list_bulleted Frontend Dev📚/🔖CSS
  • · 2023. 9. 6.
  • textsms
[HTML]Sass, @Mixin 사용하기

[HTML]Sass, @Mixin 사용하기

@Mixin()사용하기 @Mixin은 함수와 같은 기능을 한다 사용 하는 방법은 @expend와 비슷하지만 %임시변수가 아닌 @mixin font_void() { width: 200px; height: 200px; padding: 20px; } .box-green { @include box_size(); } .box-blue { @include box_size(); } .box-red { @include box_size(); } @mixin 함수명(){} 함수를 불러오는 방법은 @include 함수명(); 을 사용해서 불러온다 위와 같이 코드를 작성하면 @expend를 사용하는 것과 같은데 @mixin() 을 사용하면 코드를 가변적으로 만들수 있다 박스의 크기가 동일하게 나와버린다 각각의 사이즈를 다르게..

  • format_list_bulleted Frontend Dev📚/🔖CSS
  • · 2023. 9. 5.
  • textsms
[HTML]SASS 변수, Nesting, @Extend 문법사용하기

[HTML]SASS 변수, Nesting, @Extend 문법사용하기

SASS 변수, Nesting, @Extend 문법사용하기 Nesting 문법 사용하기 .col-bg h1 { font-size: 16px; } .col-bg button { color: aquamarine; } 태그 안의 태그에 접근하기 위해서는 위와 같이 사용했는데 SASS를 사용하면 하나의 큰 태그 안에 여러 태그를 넣어서 사용 하는 방법을 nesting 문법이라고 한다. .col-bg { h1 { font-size: 16px; } button { color: aquamarine; } } @Extend 문법사용하기 .btn-aquamarine{ width: 100px; height: 100px; padding: 20px; color:aquamarine; } .btn-red{ width: 100px;..

  • format_list_bulleted Frontend Dev📚/🔖CSS
  • · 2023. 9. 5.
  • textsms
[HTML]SASS 셋팅하기 & 변수 값 지정하는 방법

[HTML]SASS 셋팅하기 & 변수 값 지정하는 방법

SASS 셋팅하기 프로그래밍스러운 문법이 존재한다 개발환경 셋팅하기 VScode 설치하기 확장프로그램에서 Live Sass Complier를 설치해준다 ver 5 이상을 설치 해주어야 한다 Sass를 사용하기 위해서는 새로운 파일을 만들어서 뒤에 확장자 명을 .scss로 지정해주면 SASS 파일이 만들어 진다. .sass도 똑같이 SASS 파일이 생성되는데 둘의 차이점은 괄호를 쓰냐 안쓰냐의 차이이다 웹 브라우저는 SCSS 파일을 읽지 못하기 때문에 이 SCSS 파일을 CSS 파일로 변환을 시켜주어야한다 SCSS를 CSS로 보기 위해서 Live Sass Complier 기능을 사용해야한다 하단의 탭에 Watch Sass를 눌러주면 자동으로 두 개의 CSS 파일이 생성된 것을 확인 할 수 있다 .map 파..

  • format_list_bulleted Frontend Dev📚/🔖CSS
  • · 2023. 9. 5.
  • textsms
[WEB]Bootstrap 사용 해서 쉽고 빠르게 디자인 하기

[WEB]Bootstrap 사용 해서 쉽고 빠르게 디자인 하기

Bootstrap 사용 해서 쉽고 빠르게 디자인 하기 Bootstrap은 HTML CSS 개발을 쉽고 빠르게 하기 위해서 사용한다 https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. getbootstrap.com 사이트가 열리면 상단의 탭중에 Docs 탭을 선택해준다 사용하기 전에 우측 상단에 버전에 맞춰서 번경도 해준다 자신이 사용하고 있는 버전..

  • format_list_bulleted Frontend Dev📚/🔖CSS
  • · 2023. 8. 14.
  • textsms
728x90