개발78

• 

  시계 만들기 JS를 이용해서 시계를 만들어 보겠다. html 에서 h2 엘리먼트를 하나 만들어준다. 00:00 시간 함수 만들기 JS에서 querySelector로 선택자를 지정해주고 함수를 만들어준다. const clock = document.querySelector("h2#clock"); function getclock() { const date = new Date(); const hour = date.getHours() const minute = date.getMinutes() const seconde = date.getSeconds() clock.innerText = `${hour}:${minute}:${seconde}`; } new Date() : 현재 시간을 알려준다. getHours(), getMinut.. 개발/개발일지 2023. 7. 15.

• 

  html/css 코딩애플과제 - 어려웠던 것들(2) sidebar 코딩애플 html/css 최종과제 사이드바 부분이다. 왼쪽에 fix로 붙어있고 마우스를 올렸을 때 width가 늘어나면서 애니메이션을 추가하였다. 오늘 이걸 만들기 위해서 내가 어려웠던 부분들을 정리하고자 한다. HTML 우선 html을 이렇게 짜보았는데 처음에는 div로 만들었지만 시멘틱하게 aside로 만들어보았다. Home Service Alerts State sidebar 만드는 순서 처음에는 sidebar를 작게 만들고 커서를 갖다대면 크게 만들려고했다. 그렇게하면 애니메이션을 어떻게 넣어야할지 감이 잡히지 않았다. 그래서 width를 크게 잡아 만들고 transform: translateX(-100px)를 넣어서 작은부분도 처리하였다. hover가 되면 transform: tra.. 개발/개발일지 2023. 6. 28.

• 

  html/css 코딩애플과제 - 어려웠던 것들 (1) 코딩애플 최종과제를 하면서 생각보다 많은 부분에서 어려움을 느껴서 정리해본다. 내가 헤맸던 부분을 위주로 정리를 해본다. PC사이즈와 모바일 사이즈 처음에는 Bootstrap을 사용하려고 했는데 기본설정때문에 내가 원하는대로 만들어지지 않아서 scss만을 이용해서 만들어보았다. PC사이즈부터 만들고 모바일을 만들어보자. 기본설정 우선 기본설정을 해주었다. * { box-sizing: border-box; margin: 0; border: 0; padding: 0; outline: 0; } header전체 그다음에 header 전체 부분을 태그를 이용해서 설정해주었다. header { width: 100%; height: 60px; position: fixed; top: 0px; display: flex;.. 개발/개발일지 2023. 6. 27.

• 

  SASS 초기에 프로젝트를 진행하면서 sass라는 것은 들어봤는데 정확히 무엇인지 몰라서 아주 아주 간단하게 정리해보았다. 나는 JS랑 같이 사용할 수 있는 styled component를 선호하긴한다. SASS 사용법 vscode extension에서 Live Sass compiler를 설치한다. (5.0.0 버전이상) 그럼 하단에 Watching 또는 Watch Sass라는 글이 뜬다. .scss 파일을 만들면 알아서 .css파일로 만들어준다. (.sass파일로도 만들 수 있는데 안 좋다.) html에서 link연결은 .css파일로 연결하면 된다. SASS 기능들 1). 값을 저장해놓고 쓰는 '변수' 프로젝트를 진행하면서 공통적으로 사용해야하는 색, 크기와 같은 스타일들을 있는데 이를 변수로 저장해서 사용할 .. 개발/CSS 2023. 6. 25.

• 

  animation 속성들 transition속성으로 Animation 구현 단순한 애니메이션을 구현할 때 Transition 속성을 이용해서 구현한다. 아래의 스탭에 따라 애니메이션을 구현한다. 1. 시작스타일 정하기 2. 최종스타일 정하기 3. 언제 최종스타일로 변할지 트리거 주기 (대부분 마우스 올렸을 때임) 4. transition 으로 서서히 동작하게 만들기 transition-delay: 1s; /* 시작 전 딜레이 */ transition-duration: 0.5s; /* transition 작동 속도 */ transition-property: opacity; /* 어떤 속성에 transition 입힐건지 */ transition-timing-function: ease-in; /* 동작 속도 그래프조정 */ 예시 .b.. 개발/CSS 2023. 6. 25.

• 

  미디어쿼리 미디어쿼리(Media Query)란? 조건에 따라서 스타일을 적용하고 싶을때 사용한다. @media로 시작하는 미디어 쿼리의 기본적인 문법 구조는 아래와 같다. /* css파일 */ @media (조건) { 스타일 } 조건에 맞으면 스타일이 적용된다. 미디어 쿼리 타입 여러가지 미디어 쿼리 타입이 있지만 대체로 이 4가지만 사용된다. all : 기본값. 모든 미디어 장치에 사용 됨 print : 프린터에 사용 screen : 컴퓨터 스크린, 테블릿, 스마트폰 등 speech : 페이지를 읽어주는 화면 낭독기 /* 일반 화면(screen)과 인쇄장치 별로 서로 다른 style을 지정하는 예 */ @media screen { * { color: red; } } @media print { * { color: .. 개발/CSS 2023. 6. 22.

• Pseudo-class 셀렉터 :pseudo-class Pseudo-class 셀렉터 상태에 따라서 스타일을 줄 수 있는 셀렉터를 말한다. .btn:hover { background : chocolate; /*마우스를 올려놓을 때*/ } .btn:focus { background : red; /*클릭 후 계속 포커스 상태일 때*/ } .btn:active { background : brown; /*클릭 중일 때*/ } /* hover, focus, active 스타일 넣을 때 순서는 꼭 이렇게 선언해야 잘 작동한다. */ :any-link /*방문 전, 방문 후 링크 한번에 선택할 때*/ :playing /*동영상, 음성이 재생중일 때*/ :paused /*동영상, 음성이 정지시*/ :autofill /*input의 자동채우기 스타일.. 개발/CSS 2023. 6. 22.

• 

  Bootstrap 개념과 세팅 Bootstrap이란 웹페이지에 필요한 버튼, 메뉴, 탭, 모달, 카드 등 필수 요소들을 모아놓은 일종의 CSS파일이다. 이걸 사용하면 편하게 복붙해서 CSS개발이 가능하다. Bootstrap 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기 getbootstrap.kr 사이트에 들어가서 npm install을 하거나 HTML 파일에 첨부하면 된다. 사용법 컴포넌트 사이트에 들어가서 버전을 확인 후에 문서 탭에 들어가서 복붙해서 사용하면 된다. 예를들어 버튼을 만들고자 할 때 버튼을 검색해서 맘에 드는 버튼이 있으면 아래 코드를 복붙하면 사용.. 개발/CSS 2023. 6. 19.

• 

  CSS 선택자(Selectors) 문법 기본 선택자 결합 선택자 요소간의 계층 관계를 결합하여 특정 요소나 하위 요소를 선택한다. 일치 선택자 E와 F를 동시에 만족하는 요소 선택 #EF{ margin: 0 auto; width: 1080px; } 자식 선택자 E의 자식 요소 F를 선택 #E>F{ margin: 0 auto; width: 1080px; } 자손 선택자 E의 자손(자식,손자, 등등 안에 있는 모든 태그들) 요소 F를 선택. 자식은 자손에 포함되어있다. 그러므로 자식 선택자를 E F로 써도 가능 #E F{ margin: 0 auto; width: 1080px; } 동위 선택자 동위 관계란 HTML 요소의 계층 구조에서 같은 부모 요소를 가지고 있는 요소들을 의미한다. 이러한 동위 관계에 있는 요소들을 형제(sibling) 요소라고.. 개발/CSS 2023. 6. 10.

• 

  시매틱(Semantic) 태그의 쓰임새 🏷️ HTML 시맨틱(Semantic) 태그의 쓰임새 시맨틱 태그 (Semantic Tag) 사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록(=의미가 통하는, semantic) 만든 태그들이다. semantic 태그가 나오기 이전 아래 그림과 같이 태 inpa.tistory.com 본 글은 Inpa Dev님의 블로그 내용을 제가 보기편하도록 가져온 것 입니다. 시맨틱 태그 (Semantic Tag) 사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록(=의미가 통하는, semantic) 만든 태그들이다. 시맨틱 태그 구성 요소 시맨틱 태그 설명 header 페이지의 머리글, 제목, 로고, 메뉴, 검색 관련, 유틸, 작성자의 이름 등등으로 구성 nav 페이지.. 개발/HTML 2023. 6. 10.