겨리의 개발일기

JavaScript를 HTML에 링크하는 방법 1. script 태그가 head에 위치한 경우 ✅ script 태그가 보이면 HTML 파싱을 멈추고 스크립트 파일을 실행한다. ✅ 단점 : 파일이 크면 느려진다. 2. script 태그가 body 내 끝 부분에 위치한 경우 ✅ 페이지가 완성된 후 스크립트 파일을 패칭한다. ✅ 장점 : HTML 컨텐츠를 빨리 노출시킬 수 있다. ✅ 단점 : JavaScript에 의존적인 페이지인 경우 사용자가 저상상적인 페이지를 보기 전까지 오래 걸릴 수 있다. 3. head 태그 안에 script 태그를 넣되 async 옵션을 사용한 경우 ✅ 브라우저가 HTML을 파싱하다가 script 파일을 병렬로 받도록 명령만 해놓고 파싱 후에 JavaScript 파일이 다운이 완료되..

Programming/JavaScript 2023. 4. 25. 00:21

display 속성 ✅ 모든 요소는 자기가 기본적으로 가지고 있는 display값이 있다. ✅ Display값에 따라 블록레벨, 인라인레벨 등 렌더링 박스의 유형이 결정된다. ✅ Display 속성으로 해당 요소의 렌더링 박스의 유형이 결정되고 렌더링 여부 또한 결정할 수 있다. 속성 값 none 요소가 렌더링 되지 않음 inline inline level 요소처럼 렌더링 block block level 요소처럼 렌더링 inline-block inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐 cf) height 나 width 등과 같은 박스모델 속성을 적용할 수 있음 ✅ 이외에도 list-item, flex, inline-flex, table, table-cell 등..

HTML&CSS 2023. 4. 16. 23:07

https://school.programmers.co.kr/learn/courses/30/lessons/178871 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Q.얀에서는 매년 달리기 경주가 열립니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 때 추월한 선수의 이름을 부릅니다. 예를 들어 1등부터 3등까지 "mumu", "soe", "poe" 선수들이 순서대로 달리고 있을 때, 해설진이 "soe"선수를 불렀다면 2등인 "soe" 선수가 1등인 "mumu" 선수를 추월했다는 것입니다. 즉 "soe" 선수가 1등, "mumu" 선수가 2등으로 바..

Programming/Algorithm 2023. 4. 14. 00:20

가상클래스(Pseduo class) ✅ 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스 ✅ 직접 요소에 클래스를 선언하는 것이 아니다. ✅ 약속된 상황이 되면 브라우저 스스로 클래스를 적용해준다. ✅ 가상클래스는 :(콜론)기호를 써서 나타낸다. 문서 구조와 관련된 가상 클래스 :first-child - 첫 번쨰 자식 요소 선택 :last-child - 마지막 자식 요소 선택 앵커 요소와 관련된 가상 클래스 :link - 하이퍼 링크이면서 아직 방문하지 않은 앵커 :visited - 이미 방문한 하이퍼 링크를 의미 사용자 동작과 관련된 가상 클래스 ✅주로 태그에 많이 쓰인다. :focus - 현재 입력 초점을 가진 요소에 적용된다. - 현재 선택 받는 것을 의미한다. :hover - 마우스 포..

HTML&CSS 2023. 4. 13. 17:39

https://school.programmers.co.kr/learn/courses/30/lessons/161989 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Q. 어느 학교에 페인트가 칠해진 길이가 n미터인 벽이 있습니다. 벽에 동아리 · 학회 홍보나 회사 채용 공고 포스터 등을 게시하기 위해 테이프로 붙였다가 철거할 때 떼는 일이 많고 그 과정에서 페인트가 벗겨지곤 합니다. 페인트가 벗겨진 벽이 보기 흉해져 학교는 벽에 페인트를 덧칠하기로 했습니다. 넓은 벽 전체에 페인트를 새로 칠하는 대신, 구역을 나누어 일부만 페인트를 새로 칠 함으로써 예산을..

Programming/Algorithm 2023. 4. 12. 15:43

문제는 아니고 정답 해설이지만 two pointer 알고리즘을 사용해서 푸는 방법을 다시 익힐겸 정리해본다. https://leetcode.com/explore/learn/card/fun-with-arrays/511/in-place-operations/3255/ Account Login - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 중복 값이 아닌 원소만 체크하는 문제에서 two-pointer 알고리즘을 사용하면 간단하게 풀 수 있다! /** * @param..

Programming/Algorithm 2023. 4. 10. 23:41

✅ 자손 선택자 div span { color: red; } /* : 의 자손 요소인 를 선택하는 선택자 자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분 */ ✅ 자식 선택자 div > h1 { color: red; } /* : 의 자식 요소인 를 선택하는 선택자 자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣는다. 꺽쇠 기호와 선택자 기호 사이에는 공백은 있거나 없어도 상관없음 */ ✅ 인접 선택자 div + p { color: red; } /* 선택자 사이에 + 기호를 넣는다. 자식 선택자와 마찬가지로 공백은 있거나 없어도 상관 없음 인접 형제 선택자는 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자이다. */ ✅ 문서 구조 관련 선택자는 위의 선택자들을 조합하여 ..

HTML&CSS 2023. 4. 10. 00:14

CSS구문 h1{color:yellow; font-size:2em;} ✅ CSS 파일은 여러 개의 규칙으로 이루어져있다. ✅ 선택자와 선언부 사이, 선언과 선언 사이는 앞뒤로 개행을 해도 상관이 없지만 속성 이름과 속성 값 사이에는 개행을 하면 안 된다. CSS 적용하는 방법 네 가지 Inline ✅해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법 ✅ 해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않게 되고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 된다. ✅ 코드의 재활용이 되지 않기 때문에 자주 사용 X 내용입니다 Internal ✅ 문서에 External ✅ 외부 스타일 시트 파일을 이용한 방법 ✅ 외부 스타일 시트는 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식 ✅..

HTML&CSS 2023. 4. 10. 00:09