프도

body 엘리먼트의 자식 엘리먼트(element)는 총 몇 개인가요? body 엘리먼트의 자식 엘리먼트는 총 3개입니다. id가 nav, news-contents, footer 인 3가지 엘리먼트입니다. [그림] body 요소의 자식 요소는 3개입니다. 그림으로 표현하면, 쉽게 이해할 수 있습니다. 그러나 컴퓨터에게는 이 사실을 어떻게 전달할까요? 자바스크립트에서 DOM은 document 객체에 구현되어 있습니다. 브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 document 객체를 조회할 수 있습니다. 한번, body를 찾아보겠습니다. [그림] 크롬 개발자도구에서 document.body를 조회합니다. DOM 구조를 조회할 때에는 console.dir 이 유용합니다. console.dir 은..

[그림] HTML과 DOM의 구조 이번 유닛에서는 HTML을 바라보는 또 다른 관점, DOM(Document Object Model)을 학습합니다. DOM은 프로그래머 관점에서 바라 본 HTML 입니다. DOM을 이해하고 조작할 수 있으면, HTML을 단순한 문서에서 웹 앱으로 업그레이드할 수 있습니다. DOM은 브라우저 환경에서 자바스크립트를 이용해 HTML을 조작할 수 있습니다. HTML 문서에 이미 작성되어 있는 엘리먼트에 접근하거나, 새로운 엘리먼트를 생성 또는 삭제할 수 있습니다. 이번 유닛을 통해 DOM을 이해하고, HTML과 자바스크립트를 연결하는 방법을 알아봅니다. 처음으로 DOM을 학습할 때에는 코드로 DOM을 조작하는 일이 낯설 수밖에 없습니다. 이번 유닛의 콘텐츠를 따라 학습하면, 코..

자바스크립트에서 원시 타입의 데이터(primitive data types; 원시 자료형)는 객체가 아니면서 method를 가지지 않는 6 가지의 타입 string, number,bigint, boolean, undefined, symbol, (null) 을 말합니다. 이 중에서 자주 사용하는 4 (+1)가지 원시 자료형 string, number, boolean, undefined, (null) 을 살펴보겠습니다. 이 데이터를 유심히 볼까요? 모두 어떤 종류의 데이터인가요? 왜 원시 자료형이라고 부르나요? 'string', 42, true, false, undefined // 데이터가 "하나"의 정보를 담고 있습니다. 원시 자료형은 모두 "하나"의 정보, 즉, 데이터를 담고 있습니다. 옛날에 어떻게 코드..

grow: 자식 박스는 얼마나 늘어날 수 있을까요? target 클래스에서, flex-grow 속성의 값을 1로 변경합니다. target 클래스를 가지고 있는 첫 번째 자식박스는, 부모 박스의 가로 길이 중에서 남은 빈 영역만큼 늘어납니다. 위 설명대로라면 전체 자식요소가 가진 grow 값의 합은 1+0+0 = 1이므로, target 클래스를 가지고 있는 자식 박스의 가로 크기는 1/1 = 100% 입니다. 그러나 다른 자식 박스 안에 이미 콘텐츠가 존재하므로, 다른 자식 박스안의 콘텐츠가 담긴 길이를 제외한 나머지 가로 길이가 target 클래스를 가진 자식박스의 가로 길이입니다. .target { flex: 1 1 auto; }// target 클래스에 flex-grow 속성의 값을 1로 설정 [그림..

Flexbox로 레이아웃 잡기 flex(flexible)는 "잘 구부러지는, 유연한"이라는 뜻입니다. flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법입니다. 여러분은 query-selector 스프린트를 통해 flex라는 CSS 속성을 본 적이 있습니다. 이번 챕터에서는 flex 속성이 무엇을 뜻하는지 구체적으로 학습합니다. display: flex 분석하기 부모 박스요소에 display: flex를 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성방법입니다. 기본값으로, display: flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치됩니다. box1 box2 box3 "display: flex"를 적용시키는 예시를 위해 작..

대부분의 경우 콘텐츠의 흐름은 좌에서 우, 위에서 아래로 흐릅니다. CSS로 화면을 구분할 때에는 수직분할과 수평분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행합니다. [수직분할] 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치합니다. [수평분할] 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치합니다. 수평으로 구분된 요소에 height 속성을 추가하면, 수평분할을 보다 직관적으로 할 수 있습니다. 다음과 같이, VS Code와 비슷한 레이아웃을 적용한다고 가정합니다. [그림] 레이아웃을 적용하기 위해 VS Code의 레이아웃을 참고합니다. 실제 VS Code의 레이아웃을 분석해 큰 틀에서 추상화하면, 다음과 같이 영역을 나..

모든 콘텐츠는 고유한 영역이 있습니다. [그림] HTML 문서의 레이아웃 모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 엘리먼트(요소)들이 하나의 박스가 됩니다. 박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가집니다. CSS를 이용해 속성과 값으로 그 크기를 설정합니다. 다음 예제에 width, height 속성을 넣어 테스트해보세요. * 박스가 차지하는 영역을 시각적으로 확인하기 위해 배경색을 꼭 넣으세요! Basic document flow I am a basic block level element. My adjacent block level elements sit on new lines below me. By default we span 100% of..

색상 글자의 색상을 변경하는 속성은 color 입니다. 속성에 삽입할 수 있는 값은, HEX (16진수로 RGB; Red Green Blue가 표현된 값) 또는 주요 색상의 이름을 사용할 수 있습니다. .red { color: #ff0000; }//red class의 color 속성에 #ff0000 값을 할당합니다. 배경 색상이나, 이후에 나올 박스 테두리 색상을 적용할 수도 있습니다. .box { color: #155724; /* 글자 색상 */ background-color: #d4edda; /* 배경 색상 */ border-color: #c3e6cb; /* 테두리 색상 */ }// 글자, 배경, 테두리의 색상은 각기 다른 속성을 가지고 있습니다. 글꼴 글꼴의 속성은 font-family입니다. .e..

CSS를 별도의 파일로 분리하지 않고, HTML 태그에 직접 CSS 속성을 추가하는 방법도 있습니다. 그러나 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 권장하지 않습니다. 관심사 분리를 여기에 적용하면 HTML 파일에서는 웹 페이지의 구조만 신경쓰고, CSS 파일에서는 디자인만 신경쓸 수 있도록 구현하는 걸 말합니다. 가끔은 파일로 굳이 구분하지 않아도 될만큼 적은 CSS를 사용하는 경우도 있습니다. 이런 특수한 경우를 위해, 직접 CSS 속성을 추가하는 방법은 함께 안내하니 참고하기 바랍니다. CSS 스타일을 적용할 수 있는 방법은 3가지가 있습니다. 그 방법은 같은 줄에서 스타일을 적용하는 인라인 스타일, CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 styl..

//example // 이 문서가 html 문서임을 명시함 // html 시작 태그로, 문서 전체의 틀을 구성 // head 태그는 문서의 메타데이터를 선언 Page title // 문서의 제목, 브라우저의 텝에 보여짐 // body태그는 문서의 내용을 담는 곳 Hello world // heading을 의미하며, 크게에 따라서 h1 ~ h6까지 있음 Contents here // content division을 의미하며, 줄바꿈 됨 Here too!// 줄 바꿈이 없는 content 컨테이너 Self Closing Tag // (/) image는 생략이 가능하다. 이미지 삽입 이미지는 닫는 태그가 필요가 없습니다. Most Used Tags In Html 1) div vs span -> 가장 큰 차이는..