D'story

display: inline

display: inline이 지정된 요소는 앞뒤 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치된다.

width, height, 상하의 margin 및 padding은 무시되고, 좌우의 margin 및 padding만 반영된다.

display: block

display: block이 지정된 요소는 앞뒤 줄바꿈이 들어가 한 줄을 모두 차지한다.

width, height, margin, padding 속성이 모두 반영된다.

display: inline-block

display: inline-block이 지정된 요소는 inline 요소처럼 앞뒤 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치되지만,

block 요소처럼 width, height, margin, padding 속성이 모두 반영된다.

참고

CSS 상자 모델(Box Model)

페이지에 띄울 박스를 생성하기 위해 박스의 바깥쪽 여백(margin), 테두리(border), 안쪽 여백(padding), 콘텐츠(contents) 등의 작동 방식을 정의한다.

display 속성이 block인 블록 박스에 적용되며, 인라인 박스에는 일부만 적용된다. 여기에 대해서는 따로 정리하겠다.

표준 CSS 상자 모델(Standard CSS Box Model)

상자의 실제 너비는 CSS에 정의된 width + padding + border-width 이다. width의 값은 border-width와 padding을 제외한, 순수한 콘텐츠 영역의 너비만을 의미한다.

대체 CSS 상자 모델(Alternative CSS Box Model)

box-sizing: border-box를 설정하면 적용된다.

이 모델에서는 width 자체가 padding과 border-width를 모두 포함한 실제 상자의 전체 너비를 의미하므로, 콘텐츠 영역의 너비를 구하려면 width에서 padding + border-width 를 빼야 한다.

여담

• 아래 MDN 페이지에서 제공하는 Interactive Editor 너무 마음에 든다. 코드에 따른 변화를 바로 감지할 수 있다.

참고

1. HTML 마크업을 처리하고 DOM(Document Object Model) 트리 빌드

브라우저가 HTML의 원시 바이트를 디스크나 네트워크에서 읽어 와서, 해당 파일에 대해 지정된 인코딩(예: UTF-8)에 따라 개별 문자로 변환한다.

이 문자열을 다시, W3C HTML 표준에 지정된, 특별한 의미와 고유한 규칙을 가진 토큰으로 변환한다.

토큰은 다시, 해당 속성 및 규칙을 정의하는 객체로 변환된다.

마지막으로, HTML 마크업이 여러 태그 간의 관계를 정의하고 있기 때문에, 생성된 객체들은 상하위 관계에 대한 정보를 포함하는 트리 구조로 연결된다.

2. CSS 마크업을 처리하고 CSSOM(CSS Object Model) 트리 빌드

CSS도 HTML 마크업과 마찬가지의 과정을 통해 CSSOM 트리로 빌드된다.

3. DOM 및 CSSOM을 결합하여 렌더링 트리 형성

DOM 트리의 각 노드에 대해 적절하게 일치하는 CSSOM 규칙을 찾아 적용하는 방식으로 DOM과 CSSOM 트리가 결합하여 렌더링 트리를 형성한다.

이 렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만 포함된다. 예를 들어, display: none이 적용된 노드는 아예 생략된다.

4. 레이아웃을 실행하여 각 노드의 기하학적 형태 계산

레이아웃 단계에서는 각 객체의 정확한 위치와 크기를 계산한다. 뷰포트 내에서 각 요소의 정확한 위치와 크기를 나타내는 '상자 모델(Box-model)'이 출력된다. 이 상자 모델에 대해서는 따로 정리할 예정이다.

5. 개별 노드를 화면에 페인트

마지막 페인팅 단계에서는 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하여 보여준다.

6. 1~5번의 반복

DOM 또는 CSSOM이 수정되는 경우, 화면에 다시 렌더링할 필요가 있는 픽셀을 파악하기 위해 위 과정을 반복한다.

렌더링 최적화는 이 과정에서 걸리는 시간을 최소화하는 프로세스를 의미한다.

참고

오늘 한 일

• 게더에서 항해99 2기의 마지막 공식 행사인 수료식에 참가했다. 다음 주에 있을 모의면접을 간단하게 안내 받았고, 지금까지 있었던 모든 일정들을 마무리하는 시간을 가졌다. 분야(?)별로 시상식도 있었다. 나는 '여기서 나만 정상'을 받았다. 동료평가 평균 6.8점 이상을 받고, 자기평가 점수도 5점 이상(부끄럽게 이건 대체 왜...)인 사람들에게 주는 상이었다. 지금까지 모든 프로젝트들을 돌이켜봤을 때 과연 내가 이런 좋은 평가를 받을 만 했었는지 다시 한 번 생각해보게 되었다.
• 서류 통과 이후의 연락은 오늘도 이어졌다. 두 군데서는 면접 제안, 한 군데서는 과제 안내를 받았다. 아무래도 곧 추석이라 일정이 다음주에 몰리는 것 같다. 서울에 머물 곳이 없는 건 아니지만 서울 소재 회사의 면접을 보려면 일단 지방에서 출발해야 하는 탓에, 항해에서 다음주 화요일에 예정해 놓은 온라인 모의면접은 시간상 취소하는 게 낫겠다는 판단을 내렸다. 모의면접은 집에서 봐야 하고 실제 면접은 서울에서 봐야 하는데, 일정이 빡빡해질수록 모의면접에 시간을 내기가 애매해질 수밖에. 내가 아무리 에너자이저여도 서울에서 볼 면접을 하루에 세 개씩 잡을 수는 없다.. 좋은 기회라 아쉽지만 모의면접을 취소하고 가능하다면 그 날에도 '진짜' 면접에 시간을 할애하는 것이 나을 듯하다.

오늘 배운 것

내일 할 일

• 내일부터는 누군가 일정을 공지해주지 않는, 가이드라인이 없는 나만의 항해를 시작해야 한다. 당분간은 쌓여 있는 면접과 과제 일정으로 딱히 계획을 짜지 않아도 충분히 바쁜 시간을 보내겠지만, 추석 연휴가 지나고 나면 제대로 고민해봐야 할 것이다. 근데 왜 96일에서 끝나요!?

싱글 스레드 언어

자바스크립트는 싱글 스레드 언어이므로 한 번에 한 가지 작업을 처리하지만, 비동기로 동작하면 동시에 여러 작업을 수행할 수 있다.

비동기 동작 원리

call stack에 함수가 추가되어 실행 → 브라우저가 제공하는 web API 호출 → call stack에 추가된 함수는 제거되지만 함수가 전달한 콜백함수가 callback queue에 추가 → event loop는 call stack을 계속 감시하고 있다가 call stack이 빈 것을 보고 callback queue를 확인 → event loop는 callback queue에 추가된 콜백함수를 발견하고 call stack에 추가 → 콜백함수 실행

이벤트 루프(Event Loop)

call stack이 비어 있을 경우, callback queue에서 함수를 꺼내 call stack에 추가한다.

참고

이벤트 버블링(Event Bubbling)

한 요소에 이벤트가 발생하면, 최상단의 조상 요소까지 계속해서 부모 요소들의 핸들러가 동작한다.

거의 모든 이벤트는 버블링 된다.

이벤트가 발생한 가장 안쪽의 요소는 target이며, event.target으로 접근할 수 있다. event.currentTarget(=this)는 핸들러가 실제로 할당된 요소이다.

버블링 중단하기

이벤트 버블링은 target에서 시작해 document 객체 또는 window 객체를 만날 때까지 각 노드에서 모두 발생하며, 그 과정에서 모든 핸들러가 호출된다. 핸들러가 이벤트를 처리한 후에 버블링을 중단하도록 하려면, event.stopPropagation()을 사용한다. 하지만 반드시 필요한 경우가 아니라면 버블링을 막는 것은 권장되지 않는다.

이벤트 캡처링(Event Capturing)

이벤트 버블링 이외에도 이벤트가 하위 요소로 전파되는 단계인 캡처링이 있다.

캡처링 단계에서 이벤트를 잡아내려면 addEventListener capture 옵션을 true로 설정한다. capture 옵션의 값이 false(default 값)일 때에는 버블링 단계에서 동작한다.

elem.addEventListener(..., {capture: true})
// 아니면, 아래 같이 {capture: true} 대신, true를 써줘도 됩니다.
elem.addEventListener(..., true)

// 예를 들면, 이렇게!
elem.addEventListener("click", e => alert(`캡쳐링: ${elem.tagName}`), true);
elem.addEventListener("click", e => alert(`버블링: ${elem.tagName}`));

addEventListener(..., true)로 할당된 핸들러는 removeEventListener(..., true)를 같은 단계에 설정하면 지워진다.

현재 이벤트의 흐름 단계를 알고 싶다면, event.eventPhase로 반환되는 정숫값을 확인하면 된다. (1=캡처링, 2=타깃, 3=버블링)

참고

오늘 한 일

• 공부하자, 공부! 면접에 대비하기 위한 100문 100답을 작성하는 날이라고 해서 구글링해가며 100문을 어떻게든 작성은 했다. 항해 측에서는 100답보다 100문이 더 중요하니 질문 100개를 채우는 데 일단 포커스를 맞추자고는 했었지만, 작성하고 나니 두려움이 물밀듯 밀려왔다. 사실 코드는 돌려봐서 작동하는지 안 하는지 확인하고 나면 그 다음에 취해야 할 액션이 정해져 있기 때문에 확실하게 검증이 된다. 하지만 이론적인 부분이라면 얘기가 달라진다. 이해는 하는데 이걸 말로 설명하라고 한다면? 오마이갓
• 감사하게도 지원 서류가 통과되어 다음 일정을 잡자는 연락은 오늘도 계속 이어졌다. 다음주에만 면접 두 번에 과제가 한 번이다. 생각만 해도 긴장돼서 뱃속이 간질간질하다. 이 긴장을 잊을 수 있는 건 오로지 공부뿐입니다.

오늘 배운 것

• 오늘 배운 것은 따로 정리할 예정이다. 어차피 내일을 기점으로 항해가 끝나고 나면 TIL은 항해가 아닌 다른 메뉴에 넣어야 할 테니까, 오늘부터 미리 그렇게 하는 셈이다.

내일 할 일

• 내일은 항해99 2기 수료식이 있는 날이다. 수료라니? 벌써? 아니 나 수료해도 게더 맨날 출근할 것 같은데?

오늘 한 일

• 오늘은 낮잠을 자지 않았다. 프로젝트 기간은 아니지만 집에 공사가 좀 있어서 아침에도 잠을 3시간밖에 자지 못했다. 그래서 낮에 까무룩 잠들어버릴 줄 알았는데 어쨌든 용케도 잘 버텼다. 대신 자정 넘어서 잤다. 밤잠?
• 서로 계속 타이밍이 엇갈려서 한 자리에 모이기 참 어려웠는데, 드디어 Open door 첫 회의를 가졌다. 다음 주가 지나면 바로 추석이라 지금은 뭔가를 새로 시작하기가 매우 애매한 지점이라는 데 다들 동의하는 분위기였다. 프론트에서는 꼭 한 번 도전해보고 싶었던 타입스크립트를 공부해서 적용해보기로 했다! 첫 회의이기도 하고, 본격적인 방향을 설정하는 자리는 아닌가 싶어서 가만히 있었는데 먼저 제안해 주셔서 너무 좋았다. 오늘 구인공고를 둘러보니, 자격요건에 타입스크립트를 명시한 곳이 꽤 있어서 한 번쯤은 경험해보고 넘어가야 할 것 같았다. 공부할 생각에 벌써부터 설렌다.
• 낮잠이 없어 길었던 낮 시간 동안 로켓펀치와 원티드를 오가며 마음에 드는 회사의 채용공고를 꼼꼼히 읽어보고 이력서를 넣었다. 어제의 30이나 오늘의 15나 들어가는 노력은 만만찮았다. 숫자로만 판단하고 어느 한 쪽이 어떨 것이다 지레짐작한 것은 의미가 없었다.
• 프로젝트 토크부트를 함께한 디자이너님이 며칠 전에 연락 주신 내용을 바탕으로, 프로젝트는 끝났지만 다시 한 번 전체적으로 손을 보려고 간만에 vscode를 켰다. 헤더를 position: fixed로 붙이니 그 위에 잘만 올라가 있던 로그인 버튼이 없어져버리고, 화면 크기에 따라 화질구지가 되기도 하는 확장자 png의 이미지 파일을 svg로 변환해서 넣으니 시꺼멓게(????) 변해버리고, 아주 난리도 이런 난리가 없었다. 아니 왜 처음부터 개선의 의지를 꺾으려고 하는 건데!?...물론 컴퓨터는 아무런 잘못이 없다...

오늘 배운 것

• 로켓펀치와 원티드의 이용방법을 알게 되었다. 처음에는 둘 다 나에게 원하는 게 지나치게 많다고 느꼈지만, 여느 채용플랫폼과 마찬가지로 한 번 기본 세팅을 해놓으면 그 이후의 일은 일사천리로 진행된다. 로켓펀치의 장점은 내가 지원한 회사에서 내 이력서를 확인했는지, 검토 중인지, 뭐라고 답신을 주는지를 전부 실시간으로 알려준다는 것이다. 반면 원티드는 그렇게까지 상세하고 친절한 알림 서비스는 없지만 한 회사에 지원하고 나면 비슷한 채용공고를 올린 다른 회사들의 목록을 보여주면서 한꺼번에 지원할 수 있는 기능을 제공한다.

내일 할 일

• 내일은 면접 준비 과정의 일환으로 100문 100답을 작성해보는 날이다. 내일도 하루종일 정신이 없을 것만 같다.
• vscode를 다시 한 번 켤 용기를 가지고 문제들을 해결해보자.