JavaScript & HTML & CSS Project

Heading >각 글에는 제목이 있고, 중요도에 따라 글씨의 크기가 달라진다. > Heading tag에는 6가지의 크기가 있다. h1 태그입니다. h2 태그입니다. h3 태그입니다. h4 태그입니다. h5 태그입니다. h6 태그입니다. Paragraph >문단,

Anchor >웹페이지에서 특정한 위치로 이동할 때 쓰이는 태그를 Anchor 태그라고 한다. Anchor태그는 현재 위치에서 다른 맥락, 위치로 이동할 때 쓰인다. > ``를 사용해서 여러가지 동작을 제어할 수 있다. > a태그에는 attribute, 속성을 추가해서

body에는 기본적으로 여백이 들어가 있다.개발자 도구에서 body태그를 찾아보면, 모든 방향으로 margin이 8px씩 들어가있는것을 확인할 수 있다.그래서 css파일에서 기본적으로 스타일을 적용하기 전체 body태그에 margin: 0, padding: 0을 설정해

각각의 콘텐츠들에는 태그들만이 가진 고유한 영역이 존재한다. > 아래는 각 콘텐츠들을 크게 나눠서 구별해보았다 > 모든 콘텐츠는 각자의 영역을 가지고 있고, element로 묶이는 콘텐츠가 하나의 영역(박스)를 가지게된다. > 박스의 모양은 사각형이고 width, h

태그를 사용해서 페이지를 만들면, 브라우저 상에서 웹페이지에 태그들에 맞게 내용을 표시해준다.HTML은 브라우저에서 실행 가능한 가장 기본적인 실행 파일이다.HTML은 markup언어로 구조적으로 태그들을 이용해서 보여진다.HTML 상위 태그 안에는 head, body

display block vs inline > block level의 대표적인 div와 inlin level의 대표적인 span 태그 비교하기 > 위의 코드를 실행시켜보면, div 태그의 박스들은 잘 표시되는데, span 태그들은 크기가 잡혀있지 않은 것을 확인할 수

nav 태그를 사용해서 ul태그 밑에 li들을 만들어서 메뉴를 구현하려고 코드를 작성하였다.css에서 해당 li태그에 마우스를 올렸을 때 동작을 어떻게 구현할 까 생각했다.사용자에게 클릭이 가능하다는 것을 알려주기 위해 cursor: pointer 를 주었다. hove

css에서 background 속성을 사용해서 url로 해당 경로의 이미지를 지정해 준 후 이미지를 반복하지 않으려고 no-repeat를 추가적으로 설정해주었는데 또 하나가 생각대로 잘 되지 않았다.이미지가 반복되지 않는 것은 잘 적용되었지만, 화면크기를 키우고 줄일

menu 구현하기 화면에서 스크롤을 하면, 보통 화면 상단에 위치한 메뉴가 사라질까? 사라지게 구현한다면, 스크롤 시 메뉴를 사라지게 했다가 마우스를 화면의 상단으로 가져가면, 메뉴가 나타나도록 구현할 수 있을 것이다. 이번에 구현하려고하는 기능은 메뉴가 상단에

메뉴가 클릭되면 값을 가져와서 addEventListener에 등록한 함수를 실행시킨다.들어온 event 객체의 target에 접근해서 해당 이벤트가 일어난 요소를 가져온다.메뉴의 요소를 가지고 와서 클릭 이벤트가 일어났을 때의 동작을 처리하기 위해 먼저 그 요소를 가

웹 페이지의 메뉴를 빼면 제일 상단을 home부분으로 만들어 놓았다.우선 Element.getBoundingClientRect()를 이용해서 home영역의 크기를 구하기또 window.scrollY의 값을 구해서 위에서 구한 home 영역을 이용해서 이벤트를 걸기hom

우선 화면에서 스크롤을 할 때 그 화면의 높이가 홈 화면의 높이를 넘어가게 되면, 이벤트를 적용할 버튼을 보이게 하고, 스크롤 이벤트를 적용하는 코드를 작성했다.그런데, 우선 화면 영역에 따라 버튼을 보이고, 감추는 것은 잘 적용되었으나,스크롤 이벤트를 따로 정의해 놓

메뉴에 마우스가 올라갔을 때 border와 background-color를 변하도록 지정했더니, 기존 사이즈에서 border가 적용되어서 사이즈가 바뀌면서 메뉴들이 움직이는 에러를 발견했다.평소에는 border: transparent;를 주고,마우스 hover일 때는

구현할 때 필요한 것 생각해보기기능1-1. 사용자가 입력창에 목록을 입력하고 Enter key 또는 +버튼을 클릭했을 때 화면에 쇼핑 리스트를 추가한다.1-2. 목록 오른쪽에는 휴지통 아이콘이 있는데 이것을 클릭하면,해당 쇼핑 목록이 리스트에서 지워진다.UI2-1. 사

구현 화면2021.05.11});

현재 리액트를 공부하면서 자바스크립트도 더 깊게 공부하고 있는 중이다.리액트를 이용하면 html의 기본적인 코드를 하드코딩하지 않아도 되지만, 기본적인 것은 만들 수 있어야 되기 때문에 자바스크립트와 html 구조를 짜는것에 많은 시간을 투자하고 있는중이다.💻 실력있

HTML이 모두 로드되기전에 자바스크립트 영역에서 HTML을 참조하는데 addEventListener에서 HTML태그를 참조하지 못해서 계속 에러가 발생했다.보통 body 태그가 끝나기 바로 위에 부분에 script의 위치를 옮겨서 사용하는 방법을 많이들 사용하는데나는

구현할 때 필요한 것 생각해보기제한된 시간안에 당근을 없애서 승리해야되는 게임을 만들것이다기능setInterval을 이용해서 타이머 기능 구현하기당근을 제한시간안에 다 없애면 승리벌레를 클릭할 경우 게임이 끝난다제한된 시간을 사용자에게 보여주고, 남은 당근의 개수를 보

게임영역을 잡아야되는데 부모 박스에 display: flex를 주고 게임 영역에도 동일하게 주었는데 그럴 필요가 없이부모 박스에 아래의 속성만 주어도 내가 원하는 대로 잘 위치를 잡을 수 있었다.\--> 내가 알게모르게 부모 태그에는 display: flex만 주려하고

기존 코드 > 버튼 클릭시 각각의 이벤트 핸들러를 통해 기능이 동작된다. 게임 시작 게임 멈춤 게임 승, 패에 따라 그 안에서 각각 알림 소리와 알림창을 다르게 설정한다. 게임 시간을 초기화한다. 남은 게임 시간을 보여주는 함수 남은 목표 개수를 보여주는 함수 버튼 숨

태그의 용도와 웹 표준에 맞게 작성하고, HTML과 CSS의 중요성을 알기 때문에 웹을 처음부터 똑바로, 제대로 만들기 위해서 HTML을 깊게 복습하고 있습니다.의미가 같기때문에 아무거나 사용해도 됨em: strong: a태그: 다른 곳으로 이동하기 위한 태그attri