프도

와이어프레임(Wireframe) 웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 합니다. 와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것입니다. 와이어프레임은 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도입니다. 전환 효과나, 애니메이션, 사용자 테스트같은 스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아닙니다. 특히 이번에 우리가 그려볼 와이어프레임의 가장 큰 목적은, 화면의 영역을 구분하는 일입니다. 그래서 인터페이스를 그림으로 표현하는 와이어프레임이 아니라, 각 영역에서 사용할 주요 태그를 메모하는 형식으로 와이어프레임을 작성하세요. 예제를 하..

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 -> 가장 큰 차이는..

HTML 기본 구조 다음은 HTML 문서의 기본적인 구조를 보여주는 그림입니다. : 현재 문서가 HTML5 문서임을 명시합니다. : HTML 문서의 루트(root) 요소를 정의합니다. : HTML 문서의 메타데이터(metadata)를 정의합니다. - 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미합니다. - 이러한 메타데이터는 , , , , , 태그 등을 이용하여 표현할 수 있습니다. : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용됩니다. - 웹 브라우저의 툴바(toolbar)에 표시됩니다. - 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 됩니다. - 검색 엔진의 결과 페이지..

HTML이란? HTML은 HyperText Markup Language의 약자입니다. 웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성됩니다. 각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용됩니다. 예제 제목 1 제목 2 제목 3 단락 1 단락 2 HTML 태그(tag) HTML 태그는 태그 이름을 꺾쇠 괄호()로 감싸서 표현합니다. 문법 1. // 시작 태그 2. // 종료 태그 HTML 태그는 보통 시작 태그(start tag, opening tag)와 종료 태그(end tag, closing tag)의 한 쌍으로 구성됩니다. 종료 태그는 시작 태그와 전부 똑같지만, 태그 이름 앞에 슬래시(/)가 존재합니다. 태그에 따라 시작 태그만 있고 종료 태그가 없는 태그도 ..