front-end65 자바스크립트, 객체 2 저 혼자 독학을 하기 위한 정리용 블로그이긴 했지만, 혹시라도 검색을 통해 들어오실 분들을 위해서 글을 정리해놓는 습관을 들이고 있었습니다. 그런데 오늘 배운 내용은 너무 어려워도 저도 아직 뭐가 뭔지를 모르겠네요. 일단 강의 영상과 소스 코드들을 올려두겠습니다. 지난 포스트 자바스크립트, 객체 1 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 자바스크립트, 함수의 활용 이 포스팅은 PC로 작성되었습니다. 모바일 gogogameboy.tistory.com 객체(Object)와 반복문 Object Create Iterate 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(.. 2021. 2. 24. 23:18 CSS 박스의 안쪽에 그림자 넣기 지난 포스트에서 다룬 태그 등으로 만든 박스에 그림자 효과를 주는 또다른 방법입니다. 이번에는 박스의 안쪽에 그림자를 넣어서 박스가 안으로 들어간 것처럼 보이게 만들겠습니다. box-shadow: inset shadow 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(복사)는 불가능합니다. box-shadow: 속성의 가장 앞에 inset을 넣어주시면 그림자가 박스의 안쪽에 생깁니다. inset 다음으로 들어가는 속성 값 다섯가지는 지난 포스트와 동일합니다. a는 그림자가 오른쪽으로 얼마나 이동할 것인가, b는 그림자가 아래쪽으로 얼만큼 이동할 것인가, c는 그림자의 부드러운 정도, d는 그림자의 확장량, e는 그림자의 색상입니다. shado.. 2021. 2. 19. 11:33 CSS 박스에 그림자 넣기 태그 등으로 만든 박스에 그림자 효과를 주는 방법을 알아보겠습니다. box-shadow: shadow 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(복사)는 불가능합니다. box-shadow: 속성으로 박스에 그림자 효과를 줄 수 있습니다. 안에 들어가는 속성 값은 box-shadow: a b c d e 다섯가지로, a는 그림자가 오른쪽으로 얼마나 이동할 것인가, b는 그림자가 아래쪽으로 얼만큼 이동할 것인가, c는 그림자의 부드러운 정도, d는 그림자의 확장량, e는 그림자의 색상입니다. shadow 위의 소스 코드로 이렇게 박스에 그림자가 생기면서 입체감이 생기게 되었습니다. 이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서 빨간.. 2021. 2. 17. 11:20 CSS 박스의 모서리를 둥글게 라운딩 처리하는 방법 태그 등으로 만드는 박스의 모서리를 둥글게 라운딩 처리하는 방법을 알아보겠습니다. border-radius: radius 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(복사)는 불가능합니다. CSS 박스의 배경에 그라데이션 넣기 태그로 만든 박스의 배경을 한가지의 단색이 아닌, 두가지의 색을 이용해서 그라데이션 효과를 주는 방법을 알아봅시다. background: linear-gradient( ) gradation 위의 소스 코드는 PC에서 드 gogogameboy.tistory.com 이 포스트에서 올린 코드에서 살짝 변형을 줬습니다. 박스의 CSS 스타일에 border-radius: 를 추가해서 픽셀 값을 넣어주시면 됩니다. radius.. 2021. 2. 14. 23:17 CSS 박스의 배경에 그라데이션 넣기 태그로 만든 박스의 배경을 한가지의 단색이 아닌, 두가지의 색을 이용해서 그라데이션 효과를 주는 방법을 알아봅시다. background: linear-gradient( ) gradation 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(복사)는 불가능합니다. CSS에 background: linear-gradient( )를 넣어서 그라데이션 효과를 줄 수 있습니다. 처음에 넣어준 값인 90deg는 각도를 뜻합니다. 90 대신에 0, 45, 180, 225, 270 등등.. 다양한 값을 넣을 수 있습니다. gradation 위의 소스 코드로 이와 같은 그라데이션 효과가 적용이 된 박스가 만들어졌습니다. background: radial-gra.. 2021. 2. 12. 10:33 HTML 웹페이지의 핵심이 되는 콘텐츠는 <main> 태그로 웹페이지의 핵심이 되는 콘텐츠는 태그로 감싸줘야 합니다. 하지만 태그를 사용할 시에는 간단한 법칙을 지켜줘야 합니다. 지금부터 그 내용을 알아보겠습니다. 태그 의미론적 태그 semantic element 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 meta 태그 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게 gogogameboy.tistory.com 위의 포스트와 연관이 되어있는 내용입니다. 하지만 위의 포스트에는 태그에 대해서는 나와있지 않습니다. 태그는 페이지의 핵심이 되는 콘텐츠를 감싸는 태그입니다. 다만 태그는 한 가지 주의해야 할 점이 있습니다. HTML 기술소개 기본문법 하이퍼텍스트와 속성 리스트와 태그의.. 2021. 2. 11. 12:31 CSS, 같은 페이지의 특정 위치로 링크시에 컬러 변화 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 HTML, 같은 페이지의 특정 위치로 링크를 거는 태그 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 아래의 4개의 메뉴 목록들을 클릭해보시기 바랍니다. 이승환 개요 데뷔 음악 음반 gogogameboy.tistory.com 위의 포스트에서 이어지는 내용입니다. 이 페이지에서 CSS 적용을 하기 힘드니 적용한 결과는 아래의 파일을 다운로드해서 확인해주세요. :target {background: pink;} 이승환 개요 데뷔 음악 음반 목록 개요 대한민국의 가수·프로듀서다. 1989년 10월 15일 1집 《B.C 603》으로 데.. 2021. 2. 10. 10:37 HTML, 같은 페이지의 특정 위치로 링크를 거는 태그 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 아래의 4개의 메뉴 목록들을 클릭해보시기 바랍니다. 이승환 개요 데뷔 음악 음반 목록 개요 대한민국의 가수·프로듀서다. 1989년 10월 15일 1집 《B.C 603》으로 데뷔했으며, '어린 왕자'라는 별명으로 유명하다. 1990년대의 대표적인 뮤지션 중 한 명이었고, 그의 콘서트에 대한 열정, 생동감 넘치는 콘서트 등으로 '공연의 신'이라는 별칭을 가지고 있다. 한창 절정의 인기를 자랑하던 2~3집 시기(1990~1992년)에는 아이돌로 봐도 무리가 없을 정도로 10대들에게 엄청난 인기를 받았었고 대학가에서 인기가 많았던 시기였다. 데뷔 가수로 데뷔하기 위해 온갖 음반사를 다녔으나 데뷔는커녕 물만.. 2021. 2. 9. 11:01 CSS 리스트 태그의 번호 디자인 변경 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 리스트(목록) 태그 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 링크 태그 (feat. 하이퍼텍스트) 이 포스팅은 PC로 작성되었습니다. 모바 gogogameboy.tistory.com 예전에 배웠던 리스트(목록) 태그를 CSS로 꾸며보겠습니다. 은 번호가 없는 리스트였고, 은 번호가 매겨지는 리스트였죠. 기본 태그 NASTYONA 아홉가지 기분 (2007) 아홉가지 기분 돌이킬 수 없는 바늘 어쩌면 처음부터 정해져 있던 이야기 Empty 사라지지 않는, 밤 Tete Judith 요단강 To my grandfather 꿈속에.. 2021. 2. 8. 09:00 이전 1 2 3 4 ··· 8 다음
