본문 바로가기

전체 글99

CSS box model에 대해서 설명해 주세요. 👩🏻‍💻 CSS box model에 대해서 설명해 주세요. 💁🏻‍♀️ 요약하자면 , HTML 요소는 박스 영역의 형태로 되어 있는데, 이를 디자인적으로 표현하기 위해 box model 이라는 명칭을 붙여 놓은 것입니다. 이 박스는 content, padding, border, margin 총 4가지 요소로 구성됩니다. Content 요소의 텍스트나 이미지 등 HTML 태그 사이에 담긴 내용이 표현되는 영역입니다. width, height 프로퍼티를 갖습니다. Padding 테두리 안쪽에 위치하는 요소의 '내부 여백' 영역이며, border와 content 사이에 위치합니다. 기본적으로 투명색입니다. Border 테두리 영역으로, 박스의 경계를 표시하는 역할을 합니다. Margin 테두리 바깥에 위치하는 .. 2023. 3. 13.
HTML의 id 속성과 class 속성의 차이에 대해서 설명해 주세요. 👩🏻‍💻 id 속성과 class 속성의 차이에 대해서 설명해 주세요. 💁🏻‍♀️ 요약하자면 , 고유성의 차이 입니다. id는 고유한 값이므로, id를 가진 요소들 또한 고유하기 때문에 하나의 HTML 요소에만 사용할 수 있습니다. 이에 반해 class는 고유하지 않으므로 같은 class name을 여러 요소에 사용하는 것이 가능합니다. 더 자세히 설명하자면, id란 identification 즉 구별/식별 하고자 하기에 해당 요소가 '유일함'을 확인할 수 있는 수단입니다. 우리에게 주어지는 주민등록번호(identification number)과도 같다고 생각하면 됩니다. 마치 getElementById 메소드는 있어도 getElementsById는 없는 것처럼 말입니다. 협업 시에도 중요 id 값이 같은.. 2023. 3. 12.
HTML의 <li> 요소는 왜 <ul> 요소의 자식 요소여야만 하나요? 👩🏻‍💻 요소는 왜 요소의 자식 요소여야만 하나요? home1 home2 home3 home4 💁🏻‍♀️ 요약하자면 , 요소는 말 그대로 list의 item들을 보여주기 위한 요소 이기에, 목록을 담는 요소의 자식 요소여야 합니다. 구슬과 주머니 요소는 주머니고, 요소는 주머니에 담긴 구슬들이라고 보면 됩니다. 따라서 주머니 안에 구슬인 가 담겨야 합니다. 협업 시 특히 중요 화면 상으로는 문제가 없어 보이더라도, 요소와 요소 각각의 의미에 맞게 sementic하게 HTML을 작성해야 협업 시 다른 개발자가 보더라도 쉽게 이해할 수 있기 때문에 위와 같은 규칙을 지키는 것이 중요합니다. 📎 내용 참조 - velog: 기술 면접 준비 - velog: Section 1 회고 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.
undefined와 null의 차이를 설명해 보세요. 👩🏻‍💻 undefined와 null의 차이를 설명해 보세요. 코딩을 하다보면 불분명한 값으로 추정되는 undefined와 null이 등장합니다. 그런데 이 둘의 의미는 각각 무엇이며, 각각 어떨 때 출력되는 것일까요? 차이점을 명확하게 설명해 주세요. 💁🏻‍♀️ 요약하자면 , undefined는 변수를 선언하고 값을 할당하지 않은 상태이며, null은 변수를 선언하고 빈 값을 할당한 상태 입니다. JavaScript에서 undefined와 null 둘 모두 개별적으로 아무 것도 나타내지 않는다는 공통점이 있으나, undefined는 암시적이고, null은 명시적이라는 것이 가장 큰 차이점입니다. undefined는 아무것도 모르는 경우를 암시적으로 나타내고, null은 "값 없음"을 명시적으로 딱 나타.. 2023. 3. 5.
커밋이 안되는 이유는 권한 때문일 수도 있다. 🤔 오늘의 삽질 : 커밋이 왜 안되지? VScode 터미널에 git push를 입력하고 커밋을 하려고 했더니, 아래와 같은 fatal error를 만났다. Git: fatal: Unable to create '/Users/yeonsuchoi/TIL/.git/index.lock': Permission denied 찾아보니, 커밋을 하고자 하는 repository의 권한을 변경해 주어야 한다고 하여, sudo 명령어를 사용했다. 위키백과에 따르면, sudo는 'superuser(root user) do' 혹은 'substitue user do'의 줄임말로, 주로 우분투, 리눅스, 맥에서 볼 수 있는 명령어라고 한다. 따라서 sudo 를 입력하면 관리자 권한을 부여해 명령어를 실행하기에, password를 입.. 2023. 3. 4.
JavaScript 원시 자료형과 참조 자료형에 대해 쉽게 이해해 보자. 1. 원시 자료형과 참조 자료형이란? number, string, boolean, undefined, null과 같은 자료형은 고정된 저장 공간을 차지한다. 이런 특징을 가진 자료형을 원시 자료형(primitive data type)이라는 이름으로 분류한다. 반면에 대량의 데이터를 다루기에 적합한 배열과 객체, 함수 등의 자료형은 참조 자료형(reference data type)이라고 분류한다. 원시 타입 데이터는 각 변수간의 원시타입 데이터를 복사할 경우, 데이터 값이 복사되기 때문에 기존의 데이터에 영향이 가지 않음. 참조 타입 데이터는 주소를 복사한다. 때문에 복사한 데이터에서 원소를 변경하게 된다면 주소 안에 있는 데이터가 변경이 되는 것이기에 기존의 데이터에도 영향이 가는 것이다. 쉽게 설명하자.. 2023. 3. 2.
JavaScript 객체 기초 개념 - 구분, 조회, 객체 다루기 1. 객체란? 자, 배열을 배웠다면 이제 객체를 배울 시간이다. 비유하자면, JavaScript에서의 객체는 게임 캐릭터와 비슷하다고 할 수 있다. 사용자들의 캐릭터는 동일하게 직업과 능력을 가지고 있지만, 각각 세부적인 내용은 다르다. 누군가는 Ella라는 ID와 마법사라는 직업을 가지고 있지만, 다른 누군가는 Chloe라는 ID와 전사라는 직업을 가지고 있다. 마찬가지로 사용자가 웹사이트에 가입할 때 입력할 항목은 모두 같지만, 입력하는 정보는 사용자마다 다르다. 이렇게 각기 다른 값을 가질 수 있지만, 입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있다. 이렇듯, 공통적인 속성을 가지는 경우 객체를 사용해야 한다. 웹사이트에 가입한 회원 주소록을 만든다고 가정.. 2023. 3. 1.
JavaScript 배열 기초 개념 - 인덱스, 반복, 메소드 1. 배열이란? 순서(index)가 있는 값(element)의 집합이다. 이때, 순서는 1이 아니라 0부터 번호를 매기며, 대괄호 [ ] 를 이용해 배열을 만들고, 각각의 원소(element)는 쉼표(,)로 구분해 준다. a. 배열의 인덱스 값 구하기 let myNumber = [73, 98, 86, 61, 96]; // myNumber 라는 배열의 3번째 인덱스 값은? myNumber[3]; // 61 let myNumber = [73, 98, 86, 61, 96]; // myNumber 라는 배열의 5번째 인덱스 값은? myNumber[5]; // undefined : 이 배열은 4번째 인덱스 값 까지 밖에 없다. b. 배열 안에 있는 배열의 인덱스 값 구하기 let myNumber = [[13, 3.. 2023. 2. 27.
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 <div>태그와 <span>태그의 차이점 이해하기 HTML을 공부하다보면 태그들 사이에 차이점이 궁금한 것들이 있다. 대표적으로 와 인데, 표면적으로는 그게 그거 같아서 헷갈릴만하다. 가장 쉽게 이해하는 방법은 구글 크롬의 개발자 도구를 켜서 보는 것이다. 1. 한 줄 전체를 차지하는지 여부 차이 개발자 도구에서 영역에 마우스를 갖다 대면 한 줄 전체를 차지하고 있는 것을 볼 수 있다. 개발자 도구에서 영역에 마우스를 갖다 대면 한 줄 전체가 아닌, 컨텐츠(글자 수와 여백 등 포함)의 크기만큼만 차지하고 있는 것을 볼 수 있다. 2. 줄바꿈 가능 여부 차이 div 태그 영역 1 div 태그 영역 2 span 태그 영역1 span 태그 영역2 코드에서 두 단어를 과 태그로 똑같이 작성했는데 결과 화면을 보니 는 병렬적으로 배열되고, 은 한 줄에 나란히 배.. 2023. 2. 27.
HTML, CSS, JavaScript 차이점 간단히 알아보기 웹 페이지 제작을 집을 만든다고 가정해 봅시다. 1. HTML (Hyper Text Markup Language) 웹 페이지의 구조를 짜는 마크업 언어다. 집을 짓기 위해 도면을 그린다고 생각하면 된다. 마크업 언어란? 태그는 원래 텍스트와는 별개로 원고의 교정부호나 주석을 표현하기 위한 것이었으나, 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 마크업 언어라고 하는데, 일반적으로 데이터를 기술하는 정도로만 사용 되기 때문에 자바스크립트와 같은 프로그래밍 언어와는 구별된다. (참고: 위키피디아) 예를 들어, 웹사이트 상의 로그인 페이지를 만든다고 해보자. 그렇다면 기본적으로 아이디와 비밀번호를 입력할 수 있는 입력폼이 필요하겠다. 또한 로그인으로 이어지는 버.. 2023. 2. 27.

티스토리툴바