JH 개발 블로그

문자열 기본 자바스크립트는 작은 따옴표, 큰 따옴표, 백틱( ` ) 다 사용 가능하다. 짝을 맞추지 않으면 에러가 난다. 하지만 백틱은 짝을 안맞추면 결과가 에러 나지 않고 빈 칸 나온다. 백틱의 특성은 줄바꿈을 할 수 있다는 것! typeof '문자열' -> 'string' typeof `문자열 ` -> 'string' typeof '' -> 'string' "'" '"' `"` 'how're you?' , ""정말" 그랬니?"(강조표현) 를 사용할 수 있는 방법은... '"정말" 그랬니?' 와 같이 따옴표를 반대되는 것끼리 써주는 것이거나, 역슬래시를 사용하는 방법이다. ex. 'how\'re you?' 역슬래시를 두 개 사용하면 역슬래시 한 개를 사용할 수 있다. (쉬프트 + 엔터를 누르면 엔터를 ..

이런 효과를 만들고 싶어 구글링하다 보니 어떤 외국 사람이 만든 게시물에서 도움을 얻었다. 출처 : https://webdesign.tutsplus.com/ko/tutorials/create-a-css-grid-image-gallery-with-blur-effect-and-interaction-media-queries--cms-32287 CSS 그리드 이미지 갤러리 제작하기 (Blur 효과와 인터랙션 미디어 쿼리 이용) 이 튜토리얼에서 다수의 일반 섬네일 링크를 가져와서 흐린 hover 효과를 이용한 반응형 CSS 그리드 갤러리로 변신시키겠습니다. 터치 스크린 사용자들도 놓치지 않도록 훌륭한 CSS 트릭도 사용합 webdesign.tutsplus.com 내가 만들 결과물은 아래와 같다. 전부 다 마라탕으..

아래와 같은 애니메이션을 만들 것이다. rec cir wrap 안에 rec 와 cir 이 있다. wrap 에다가 position: relative 로 지정한 까닭은 -> cir 이 position: absolute 로 지정해주기 위함이다. 2021.09.21 - [html , css] - CSS - 수직 가운데 정렬, position 속성 애니메이션 속성을 지정하려면 @keyframes 이름 이렇게 써야 한다. 이번엔 이런 애니메이션을 만들어 볼 것이다. lnb01 lnb02 lnb03 lnb04 lnb05 rec 전체는 wrap 으로 감싸고 있고, 그 안에 lnb 와 rec 가 존재한다. animation-direction : alternate -> 역방향으로도 진행할 수 있게 한다. 이 속성을 지정한..

이렇게 간단한 div 태그가 있다고 하자. rec 에 transition-duration : 3s 를 설정하면 변화하는데 3초가 걸리게 된다. 그래서 마우스를 올리고 있으면 빨강 사각형 -> 초록 사각형으로 3초 동안 천천히 변한다. (마우스를 떼도 마찬가지) :active 는 사용자가 활성화한 요소(버튼 등)를 나타낸다. 즉 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미. hover 와 active 를 활용하여 간단한 버튼을 만들어 보았다. 여기서는 transition-duration 을 설정하지 않았다. ▼ #wrap .rec { width: 50px; height: 40px; border-radius: 25px; background-color: pink; box-shadow: 1px 4px 0..

오늘은 flexbox 부분을 다시 복습했고 grid 에 대해서 공부 및 정리를 하였다. 특히 grid 는 5년 전 강의와 최신 강의를 둘 다 봤는데 역시 최신 기술로 인해서 좀 더 편하게 HTML, CSS 를 짤 수 있게 된 것 같다고 느꼈다. 옛날엔 하나하나 다 계산을 했구나... 내일은 rem 단위 같은 것들을 공부해야겠다. -> 유튜브 드림 코딩! 그리고 CSS 애니메이션, transition 공부해야지

item1 item2 item3 item4 item5 item6 item7 item8 item9 위의 코드로 기본 세팅을 해주자. 감싸고 있는 부모 container 에게 다음과 같은 속성을 추가하였다. .container { display:grid; grid-template-columns:4fr 6fr; grid-gap:1rem; background-color:lightgray; } 40% 60% 로 나눠진 모습이 보이며, 간격은 1rem 씩이다. %보다 fr 쓸 것을 권장한다. .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; background-color: lightgray; } repeat 를 사용해..

중간의 공백 칸은 각 2%씩 이며(11칸), 양 끝의 공백 칸은 각 1%씩(1% * 2칸 = 2%)이다. 따라서 24% 가 공백이 되겠고, 총 100% - 24% = 76% 가 칸의 공간이 된다. 초록칸은 총 12칸이다. 76% / 12 = (각 초록칸의 크기 : 6.3%) 1칸과 공백 x -> 6.3% 2칸과 공백 2% -> 14.6% 3칸과 공백 4% -> 22.9% ......이렇게 해석하면 된다. 이전 시간에 고정형 그리드는 px 단위를 썼지만 화면 창을 줄이면 컨텐츠들이 움직이지 않았다. (어떠한 액션도 없었다.) 그러나 이번에는 % 단위를 써서 가변형 그리드를 만드는 것이다. 이것은 화면 창을 줄이면 컨텐츠들이 비율을 유지하며 크기가 줄어든다. GNB1 GNB2 GNB3 GNB4 GNB5 LO..

오늘은 자기소개 웹사이트를 한번 만들어 보았다! 그리고 1년 전에 만들었던 유튜브 드림 코딩의 유동적인 상단 헤더바 만들기 영상을 다시 보고 따라 만들었다. 하나도 기억 안난다...★ 개발은 꾸준히 하지 않으면 감을 잃는 것 같다. 나 자신 좀 더 분발하자 Today 자기소개 웹 사이트 만들기 깃허브로 웹 호스팅하기 Tomorrow 유튜브 반응형 웹 만드는 방법 알아보기 자기소개 웹 사이트 최종본 만들기 그리드 사용법 공부해보기

header { } header .gnb { width:100%; background-color:#353535; } header .gnb ul { overflow:hidden; width:1000px; height:30px; line-height:30px; margin:0 auto; } /* line-height 같이 지정해야 수직 가운데로 정렬 된다! */ header li{ float:left; list-style:none; margin-left:50px; font-size:.9em; } float 속성이 너무 어렵다고 생각 되었는데 오늘 어디서 주워듣기론 새로운 기술인 flex 속성을 사용하면 더 편하게 사용할 수 있다고 한다. 순간 급 의욕이 떨어졌다.... 그래도 다음 사이트를 소스 검사 해보니..

이번 시간은 강사님이 한거 보고난 뒤 안보고 스스로 야후 사이트(언제적 야후 사이트냐....) 를 만들어보기로 했다. 강사님이 만든 것↓ header 의 경계가 살짝 헷갈렸는데 강사님은 search 창까지 묶어주었다! 상단 header_nav 부분에서 리스트와 FireFox 부분 모두 각각 div 로 묶었다. 그리고 리스트는 그대로 냅두고 FireFox 부분을 float: right 속성을 주었다. 상단 div id=header_info 부분에서 야후 로고 이미지, 검색창, 서비스 모두 div class 로 묶었다. -> div 로 다 묶어주는구나.... 또한 로고 이미지에 float : left 속성을 주고, 서비스는 float..