계산기 이렇게 생긴 계산기를 Html, CSS, JS를 이용해서 만들어보자. 유튜버 수코딩님의 강의 영상을 보고서 따라 했다. https://www.youtube.com/watch?v=rWFAR1mql8Q 클론 코딩을 하면서 배운 점을 정리해보자. 1. 파일 보관 중인 Github 주소 : https://github.com/ramen4598/clone_calculator index.html style.css :root{ /* color */ --red-color : #ea6d5a; --orange-color: #f4b23e; --green-color: #2f6d1c; --background-color: #1f1f1f; --calculator-color: #ccc; --black-color: #333; /..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 JS 코드 설명 main.js const moreBtn = document.querySelector('.info .metadata .moreBtn'); const title = document.querySelector('.info .metadata .title'); moreBtn.addEventListener('click', ()=>{ moreBtn.classList.toggle('clicked'); title.classList.toggle('clamp'); }); 람다식으로 작성된 코드다. 동적으로 moreBtn과 title에 class 값으로 clicked과 clamp를 추가하고 삭제한다. style.css ..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 flex 각각의 flex의 item들이 컨테이너에서 차지하는 크기를 설정할 수 있다. 아래는 3개의 item들의 각기 다른 범위를 차치하는 상황이다. flex-grow flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정한다. 기본값은 0이다. 그래서 따로 값을 설정하기 전까지는 아이템이 늘어나지 않는다. 설정된 flex-grow의 값에 비례해서 여백 부분을 할당받는다. .upNext .item .img { flex-grow: 1; } .upNext .item .info { flex-grow: 1; } .upNext .item .moreBtn { flex-grow: 1; } 해당 예시에..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 CSS calc() CSS 코드에서 사칙 연산을 이용하는 방법. .actions button i { margin-bottom: calc(var(--padding) / 2); } —padding은 이전에 :root에서 정의한 변수다. +와 `` 연산자는 좌우에 공백이 있어야 한다. calc(50% -8px)은 백분율 값과 음수 길로 해석하여 유효하지 않지만, calc(50% - 8px)은 백분율과 길이의 뺄셈으로 해석한다. 마찬가지로, calc(8px + -50%)는 길이와 음의 백분율 간의 덧셈으로 처리한다. *와 / 연산자는 좌우 공백을 요구하지 않지만, 그래도 추가하는 편이 일관성을 유지하기에 좋다. 출처 :..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 flex 잘 정리해둔 글이 있어서 링크를 남긴다. 추가로 flex에 이어서 grid에 대한 설명도 있으니 필요하면 찾아서 사용하자. flex에 대한 설명 : https://studiomeal.com/archives/197 grid에 대한 설명 : https://studiomeal.com/archives/533 지금 당장 알아야 할 것은... flex-direction으로 배치의 방향(가로축 row, 세로축 column)을 선택한다는 사실. 선택한 축 방향으로 정렬하고 싶으면 프로퍼티로 justify-content:를 사용한다. 선택한 축의 수직 방향으로 정렬하고 싶으면 프로퍼티로 align-items:를 사용한다..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 CSS Pseudo-classes 가상 클래스, 의사 클래스로 번역되어 사용되고 있다. A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있다. :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를 롤오버 했을 때 :active - 마우스를 클릭했을 때 :focus - 포커스 되었을 때 (input 태그 등) :first - 첫번째 요소 :..

유튜브 클론 코딩 참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 유튜브를 클론 코딩하면서 배운 Html, CSS, JS를 사용해보자. 빠르게 태그 만들기 vscode에선 이렇게 작성한 다음 tab을 누르면 빠르게 태그를 생성해준다. .는 해당 태그의 id 값을 뜻한다. header 태그, id가 player인 section 태그, id가 info인 section 태그 그리고 id가 upNext인 section 태그를 생성한다. li*3 li 태그 3개를 빠르게 만드는 방법이다. .hashtags . 앞에 아무것도 없으면 div 태그가 기본값으로 설정되어있다. 태그안에 태그 빠르게 button 태그를 안에 포함하는 li 태그 5개를 빠르게 생성하는 방법 Fon..