문자열에 대해 알아보자!
·
코딩/JAVASCRIPT
자바스크립트 문자열 간단한 텍스트를 처리하기 위해서는 문자열을 자주 사용하는데 오늘은 문자열을 다루는 방법에 대해 살펴보겠습니다! ❣️문자열에 접근하기 원시 유형과 객체 let str = "hello" str.length //s 자바스크립트에서 number와 boolean, string 유형은 별도로 프로토타입 객체가 만들어져 있습니다. 즉, 숫자는 Number 객체, 문자열은 String 객체라는 식으로 만들어졌는데, 이런 객체를 래퍼객체라고 부릅니다. number나 boolean, string과 같은 원시 유형에서 프로퍼티나 메서드를 사용하면 일시적으로 원시 유형을 해당 객체로 변환합니다. 그리고 프로퍼티나 메서드의 사용이 끝나면 해당 객체는 메모리에서 사라져버립니다. 필요할 때만 임시로 객체로 바꿔..
사이트 만들기1
·
코딩/웹페이지
이제까지 한 레이아웃을 합쳐보겠습니다. 일단 site1에 index.html을 만들어 기본 셋팅을 해주겠습니다. 사이트 만들기 1 index.html 기본 셋팅 head 안쪽에 SEO(검색 엔진 최적화), 파비콘, CSS를 연동시켜 기본 셋팅을 해주겠습니다. 파비콘은 경로에 맞게 저장을 해주셔야 합니다. SEO? SEO란 검색 엔진 최적화(Search Engine Optimization)의 약어로, 웹사이트를 검색 엔진에서 노출시키기 위한 기술적인 작업을 말합니다. 검색 엔진은 웹사이트의 컨텐츠를 수집하고 분석하여 검색 결과에 반영하는데, 이때 SEO는 검색 엔진의 알고리즘에 맞추어 웹사이트의 구조, 컨텐츠, 키워드 등을 최적화하여 검색 엔진에서 상위 노출되도록 하는 것입니다. 이를 통해 검색 엔진에서 ..
퀴즈 이펙트(여섯 번째)를 만들어봅시다!
·
코딩/JAVASCRIPT
이번엔 객관식 문제 중 슬라이드 유형으로 작업해보겠습니다! 자바스크립트 퀴즈 이펙트(여섯 번째) 만들기 영역 지정해주기 ⭕정답⭕ ❌오답❌ 다음 문제 ??점 ?개 yds43557340@gmail.com 퀴즈 이펙트 5번의 구조를 거의 참고했습니다. 다른 점은 desc 밑에 quiz__info(점수)와 quiz__check(맞힌 갯수)를 만들어주겠습니다. 그리고 문제 밑에 총 몇 문제 남았는 지를 알려주기 위해 quiz__question 밑에 h4를 넣어줍니다. 문제 정보 만들기 // 문제 정보 const quizInfo = [ { infoType: "정보처리 기능사", infoTime: "2007년 1회", infoNumber: "20070101", infoQuestion: "8bit를 1word로 이용하..
CSS 원 애니메이션
·
코딩/애니메이션
See the Pen Untitled by YeoDaSeul4355 (@YeoDaSeul4355) on CodePen.
안산 고잔동 에스프레소 맛집! <온뜨>
·
일상/맛집
다들 커피 좋아하시나요?! 커피를 좋아하긴 해도 에스프레소는 안 먹어봐서 이번 기회에 한 번 도전해봤습니다 ㅎㅎ 인스타에서 안산 분위기 좋은 카페라고 소문난 온뜨! 커피는 당연히 맛있다! 안산 에스프레소 맛집 주소 : 경기 안산시 단원구 광덕4로 144 A동 101호 (https://naver.me/FjxUbsnr) 영업 시간 : 11:00 ~ 20: 00 (라스트 오더: 19:40) 연락처: 0507-1351-2160 인스타 : (@ontte_espressobar) https://www.instagram.com/ontte_espressobar/ 휴무일은 매달 인스타와 네이버를 통해 공지한다고 하네요! 참고해주세용 외관 전체적인 톤은 화이트와 블루로 이루어져 깔끔한 느낌이 확 나는 거 같아요! 여름이랑 ..
배너 유형의 페이지를 만들어봅시다~!!
·
코딩/웹페이지
배너 유형 페이지 만들기 피그마에서 만든 디자인을 그대로 코딩해보도록 하겠습니다. 기본 CSS 리셋값 설정하기 CSS리셋 (CSS Reset)은 웹사이트의 스타일링을 일관되게 만들기 위해 사용되는 기술입니다. 초기 설정을 해두면 폰트라던지 마진, 패딩값이 먹혀서 편하겠죠?? /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } img { vertical-align: top; width: 100%; } .blind { position:absolute; clip:rect(0 0 0 0); width:1px; height:1px; margin:-1px; ..
다쭐◠‿◠
쭐코딩