⏳ 2023. 5. 8. - 2023. 5. 14. DOM API? Document Object Model : div, span 등 html의 여러 가지 도큐먼트 모델 Application Programming Interface : 웹 사이트를 동작시키기 위해 사용하는 프로그래밍 명령 DOM API는 자바스크립트에서 html을 제어하기 위한 여러 가지 명령들이라고 할 수 있다! 기본적으로 코드를 위에서 아래로 읽기 때문에.. 자바스크립트가 실행될 때 html의 내용을 정상적으로 찾지 못할 수 있다. 그럴 때 해결책이 두 가지 있는데, 먼저 하나는 단순하게 script를 아래 작성하는 것이다. 그러나 이 방법은 권장하지 않는다!! 그렇다면 어떻게? defer를 사용하여 페이지 구성이 끝날 때까지 스크립트..

⏳ 2023. 5. 8. - 2023. 5. 14. 표기법 dash-case(kebab-case) 단어와 단어 사이 -를 사용하여 구분 snake_case 단어와 단어 사이 _를 사용하여 구분 camelCase 처음 단어의 첫 문자는 소문자, 다음 단어의 첫 문자는 대문자 PascalCase camelCase와 유사하지만, 처음 단어의 첫 문자가 대문자! 데이터 종류 String let myName = "iam454"; // 큰 따옴표 사용 let email = 'realseogy@gmail.com'; // 작은 따옴표 사용 let hello = `Hello, ${myName}!`; // 백틱을 이용한 보간법 (보간법이라고 하는구나.. 이름도 모르고 쓰고 있었다. 😱) Number 정수, 실수 구분하지 ..

⏳ 2023. 5. 1. - 2023. 5. 7. 배운 것을 써먹자. html, css는 물론, git과 마크다운 문법에 익숙해지자! https://github.com/iam454/overwatch-hero-selector-vanilla GitHub - iam454/overwatch-hero-selector-vanilla Contribute to iam454/overwatch-hero-selector-vanilla development by creating an account on GitHub. github.com 마크다운 문법.. 잘 몰라서 몇 번이나 업데이트했다.. 껄껄

⏳ 2023. 5. 1. - 2023. 5. 7. 전환 transition transition: transition-property transition-duration transition-timing-function transition-delay; transition-timing-function 전환 효과의 타이밍(Easing) 함수를 지정 transition-timing-function: ease; -> 느리게-빠르게-느리게 타이밍 함수에 대해 더 자세히 알아보려면? https://easings.net/ Easing Functions Cheat Sheet Easing functions specify the speed of animation to make the movement more natural. ..

⏳ 2023. 5. 1. - 2023. 5. 7. flex flex는 주 축(main-axis)과 교차 축(cross-axis) 중 주 축을 기준으로 요소들을 정렬하기 위한 방법이다. 보통 수평으로 정렬하기 위해 사용된다. flex-direction flex-direction: row; -> 행(좌 => 우) row-reverse : 행(우 => 좌) column : 열(위 => 아래) column-reverse : 열(아래 => 위) flex-wrap flex-wrap: nowrap; -> 줄바꿈 없음 wrap : 여러 줄로 묶음 justify-content 주 축의 정렬 방법 jusify-content: flex-start; align-content 교차 축의 여러 줄 정렬 방법 align-conte..

⏳ 2023. 5. 1. - 2023. 5. 7. 글꼴과 문자 line-height 한 줄의 높이. 행간과 유사하다. line-height: normal; -> 브라우저의 기본값 사용 1.4 : 글꼴 크기의 1.4배 text-indent 문자 첫 줄의 들여쓰기. 음수를 사용한다면 내어쓰기가 된다. 배경 background-image div { width: 300px; height: 300px; background-color: orange; background-image: url("https://heropy.blog/css/images/logo.png"); } background-size div { width: 300px; height: 300px; background-color: orange; backg..

⏳ 2023. 4. 24. - 2023. 4. 30. CSS 속성(Property) 한글로는 같은 속성이지만 html의 속성은 attribute, css와 js에서의 속성은 property를 의미한다. 정말 다양한 css 속성이 있는데, 그 중 몇 가지를 알아보자! width & height width와 height의 기본값은 auto(브라우저가 값을 계산)이다. 인라인 요소와 블록 요소에서의 브라우저의 계산 방법이 다르니 알아두자. padding & margin 요소는 기본적으로 다음과 같은 구조를 가진다. padding은 요소의 내부 여백을 의미하며, 사용하면 콘텐츠의 크기가 커진다. margin은 요소의 외부 여백을 의미하며 특이하게도 음수값을 사용할 수 있다. 개별적으로 값을 주기도 하지만, 단축..

⏳ 2023. 4. 24. - 2023. 4. 30. 상속 스타일을 적용했을 때, 적용된 내용이 하위 요소까지 영향을 미치는 것을 스타일 상속이라고 한다. 자연스럽게 상속되는 css 속성들은 모두 글자/문자 관련 속성들이다.(모든 속성은 아님주의!) 강제 상속 코드의 유지 보수 측면에서, 상위 요소의 값을 변경하면 하위 요소의 값도 그에 따라 자동으로 바뀌는 것이 유리한데, 그때 inherit을 사용할 수 있다. .parent { width: 400px; height: 400px; background-color: red; } .child { width: 300px; height: inherit; background-color: orange; } child 요소는 parent 요소의 height 값을 따른..