프도

CSS-in-JS란? CSS-in-JS는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 대표적으로는 styled-components, emotion 등의 라이브러리가 있으며, 이것을 import하여 활용한다. 기존 웹사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, React나 Vue, Angluar와 같은 모던 자바스크립트 라이브러리가 인기를 끌고 컴포넌트 기반 개발 방법이 주류가 됨에 따라 한 컴포넌트에 HTML, CSS, JavaScript를 모두 포함하는 패턴이 많이 사용되고 있는 추세다. 특히 이러한 부분 때문에 CSS-in-JS가 더욱 각광받고 있다. 기존 방식(css, scss 등)의 단점 몇..

와이어프레임(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..

CSS는 스타일링을 위한 도구입니다 - Cascading Style Sheets의 약자로 웹 문서의 스타일을 지정하고 꾸미는 데에 사용되는 언어이다. - 기존의 웹 페이지 제작 언어인 HTML과 별개로 CSS라는 언어를 도입했다. - 현재 CSS는 HTML 언어와 함께 동작하며 HTML로 작성된 정보를 human-friendly하게 바꿔주는 역할을 한다. 앞서 설명한 것처럼 HTML, CSS, 그리고 JS는 웹 어플리케이션을 만드는 세가지의 주축입니다. 그 중에서도 CSS는 스타일링을 담당합니다. 같은 구조와 로직을 사용한 두 웹 어플리케이션이 있습니다. 첫 번째 웹 어플리케이션에는 CSS를 사용하지 않았고, 다른 웹 어플리케이션에는 CSS를 이용해 스타일링했습니다. 어느 웹 어플리케이션을 좋은 웹 어플..

CSS 내용 분해하기 CSS의 문법 구성은 다음 그림에 잘 나타나 있습니다. 셀렉터는 태그이름이나 id, 또는 클래스를 선택합니다. 셀렉터로 특정 요소를 선택했다면, 중괄호 안에서 이 요소에 적용할 내용을 작성합니다. 요소에 적용할 수 있는 내용을 속성이라고 합니다. 색상, 글자크기 등 다양한 속성이 있습니다. 속성에 적용할 적절한 값을 입력하여 스타일을 표현합니다. 그림에 나타나있는 color: red;는 이 요소의 색상을 빨간색으로 스타일링합니다. 속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분합니다. 하나의 속성만 존재할 때에는 세미콜론을 붙이지 않아도 무방하지만, 속성과 값을 작성한 다음 세미콜론을 적는 습관을 들이는 것이 좋습니다. CSS 파일 추가 여러분은 위에서 HTML 파일과 CSS..