html6 JavaScript 코드를 HTML보다 밑에 작성해야 하는 이유는 무엇인가요? 👩🏻💻 JavaScript 코드를 HTML보다 밑에 작성해야 하는 이유는 무엇인가요? 알림창 Open 💁🏻♀️ 요약하자면 , 페이지 로딩 속도를 향상시킬 수 있고, DOM 조작 및 이벤트 처리가 효율적으로 이루어질 수 있기 때문입니다. 1. 로딩 순서 웹 브라우저는 HTML 문서를 위에서 아래로 파싱하며 로딩하는데, HTML 문서 내에 있는 요소들을 만나면 해당 요소들을 순서대로 처리하게 됩니다. 따라서 HTML 문서에 포함된 JavaScript 코드도 순차적으로 처리됩니다. 만약 JavaScript 코드가 HTML보다 위에 위치한다면, HTML 파싱 중에도 JavaScript 코드를 만나게 됩니다. 이 경우 브라우저는 JavaScript 코드를 실행하려면 HTML 파싱을 중단하고 코드를 처리해야 하.. 2023. 8. 29. [CSS 우선순위] 부트스트랩을 사용했는데 왜 스타일 적용이 안되지? 🛠️ 구현할 화면 빨강색으로 표시한 부분을 구현하고자 했다. 처음에는 일일이 만들기 번거로워서 부트스트랩 이라는 프레임워크를 활용했고, 그 중 Card 라는 컴포넌트를 사용했다. 이를 그대로 사용하지는 않고, 아래와 같이 커스텀을 했다. 🧐 잘못 쓴 코드 예시 그런데 코드를 쓰다보니 아래와 같은 두 가지 문제가 있었다. 1. 막상 만들고 보니, 카드의 형태가 아니기에 커스텀을 넘어서 그냥 내가 직접 만든 꼴이 되어 버린 것 2. 부트스트랩 클래스에 이미 적용된 스타일때문에 내가 커스텀한 스타일이 묻히는 것 최저가 /* CSS 파일 */ .card { border: none !important; display: flex !important; justify-content: space-between !impo.. 2023. 8. 24. HTML의 id 속성과 class 속성의 차이에 대해서 설명해 주세요. 👩🏻💻 id 속성과 class 속성의 차이에 대해서 설명해 주세요. 💁🏻♀️ 요약하자면 , 고유성의 차이 입니다. id는 고유한 값이므로, id를 가진 요소들 또한 고유하기 때문에 하나의 HTML 요소에만 사용할 수 있습니다. 이에 반해 class는 고유하지 않으므로 같은 class name을 여러 요소에 사용하는 것이 가능합니다. 더 자세히 설명하자면, id란 identification 즉 구별/식별 하고자 하기에 해당 요소가 '유일함'을 확인할 수 있는 수단입니다. 우리에게 주어지는 주민등록번호(identification number)과도 같다고 생각하면 됩니다. 마치 getElementById 메소드는 있어도 getElementsById는 없는 것처럼 말입니다. 협업 시에도 중요 id 값이 같은.. 2023. 3. 12. 일반적으로 CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요? 👩🏻💻 일반적으로 CSS를 불러오기 위해 요소를 💁🏻♀️ 요약하자면 , CSS 요소가 head 요소의 자식 요소일 때 전반적인 UX(user expression)을 향상시키기 때문이며, 요소가 요소가 끝나기 직전에 위치하는 경우, HTML과 CSS 로딩이 끝난 직후에 JavaScript를 로딩하기 때문에 DOM 렌더링 후 JavaScript 적용까지의 시차를 최소화할 수 있습니다. CSS 일반적으로 HTML과 CSS 정보가 담긴 정보들이 우선적 점진적으로 렌더링되기 때문에 유저에게 최대한 빠르게 정보가 담긴 화면을 전달할 수 있습니다. 만약 CSS 요소를 document의 위가 아닌 아래에 위치시킨다면, 몇몇 브라우저는 스타일이 변경될 때 페이지 요소를 처음부터 다시 그리는 것을 피하기 위해 점진적 .. 2023. 3. 12. HTML의 속성 이름과 속성 값의 차이는 무엇일까? 아래의 코드를 통해 HTML의 기초적인 구조를 알아보자. 1. 이 중 HTML 태그는 아래 두 가지다. HTML 요소의 태그는 보통 opening tag와 closing tag로 구성되어, 태그 사이에 컨텐츠를 넣어 구조를 표현한다. 여기서 주의할 점은 위에 표시 ‘HTML 요소’ 전체가 HTML 요소라고 판단하면 안 된다. 2. 이 중 HTML 속성 이름 (attribute name)은 ‘class’ 다. HTML의 속성(attribute)은 크게 두 가지로 구성되는데, 위의 이미지에서 속성 이름(attribute name)은 ‘class’ 다. 이는 속성 값(attribute value)인 ‘paragraph’와 분명히 구분되어야 한다. attribute name: 속성 이름 attribute val.. 2023. 2. 27. HTML, CSS, JavaScript 차이점 간단히 알아보기 웹 페이지 제작을 집을 만든다고 가정해 봅시다. 1. HTML (Hyper Text Markup Language) 웹 페이지의 구조를 짜는 마크업 언어다. 집을 짓기 위해 도면을 그린다고 생각하면 된다. 마크업 언어란? 태그는 원래 텍스트와는 별개로 원고의 교정부호나 주석을 표현하기 위한 것이었으나, 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 마크업 언어라고 하는데, 일반적으로 데이터를 기술하는 정도로만 사용 되기 때문에 자바스크립트와 같은 프로그래밍 언어와는 구별된다. (참고: 위키피디아) 예를 들어, 웹사이트 상의 로그인 페이지를 만든다고 해보자. 그렇다면 기본적으로 아이디와 비밀번호를 입력할 수 있는 입력폼이 필요하겠다. 또한 로그인으로 이어지는 버.. 2023. 2. 27. 이전 1 다음
