doeunn.log

▶flex를 이용한 레이아웃 만들어 보기 레이아웃을 잡는 방법은 과거부터 다양하게 존재했습니다. 을 이용하는 방법부터 아직도 많이 사용되는 float 프로퍼티와 position 등을 이용하는 방법이 존재합니다. 모던 웹 브라우저에서는 보다 유연한 레이아웃 방식이 필요했고, CSS3가 등장하며 이에 맞는 flex와 grid 레이아웃 방식이 등장했습니다. 현재는 대부분의 모던 브라우저에서 flex나 grid 프로퍼티를 지원하기 때문에 레이아웃을 배치하기 위해 이 두 가지 방법을 가장 많이 사용합니다. 이번 글에서는 두 방법 중 flex에 대해 알아보고 flex를 상요해 레이아웃을 작성해 보겠습니다. ▷기본 개념 살펴보기 flex는 디바이스나 디스플레이의 크기에 다라 컨테이너에 들어 있는 콘텐츠의 너비, 높이..

▶박스 모델 브라우저의 렌더링 엔진은 각 요소를 나타낼 때 CSS 박스 모델에 맞춰 그립니다. 박스 모델은 4가지 영역으로 이뤄지는데 cotent 영역, padding 영역, border 영역, margin 영역으로 구분됩니다. content 영역은 텍스트나 하위 박스 모델 등을 나타내며 padding, border, margin은 순서대로 content 영역을 둘러싸는 영역입니다. 둘러싼 영역들은 margin, padding, border CSS 프로퍼티로 너비를 지정합니다. 박스 모델을 이해하기 위해 반드시 알아야 하는 CSS 프로퍼티가 존재합니다. 바로 box-sizing입니다. box-sizing 프로퍼티는 요소의 너비와 높이를 계산하는 방식을 지정합니다. content-box, border-bo..

▶우선순위와 명시도(Specificity) 한 요소를 가리키는 여러 선택자의 스타일이 한 번에 적용되어 적절한 스타일을 적용하는 데에 어려움을 겪은 적이 있을 것입니다. 선택자가 여러 개이고, CSS를 여러 파일에 작성했다면 이런 문제는 더 자주 발생합니다. 이제부터 각 스타일이 한 요소에 중첩되는 상황에서 어떤 스타일이 우선순위로 적용되는지 살펴보겠습니다 :) ▷마지막에 작성된 스타일이 적용된다 div { color: blue; color: red; } 위의 코드처럼 한 선택자에 같은 스타일 프로퍼티를 지정하면 상단에 작성된 스타일은 상쇄되어 제일 마지막에 작성된 스타일이 우선순위로 적용됩니다. 즉 여기서는 color가 red로 적용됩니다. 혼란을 야기하지 않도록 위의 코드처럼 불필요한 스타일 프로퍼티..

▶상속 스타일을 작성하다 보면 요소에 직접 부여하지 않은 스타일이 적용되어 당황스러울 때가 있습니다. 대부분 이런 상황은 상속에 의해 발생합니다. CSS의 프로퍼티 중에서 상위요소(부모, 조상)에서 적용되었지만, 자식 요소까지 상속되는 프로퍼티들이 있습니다. 대표적으로 font 관련 프로퍼티나 색상, 정렬 방식의 프로퍼티가 상속됩니다. parent child 이 코드의 실행 결과는 다음과 같습니다. 반대로 width, height, margin, display, border처럼 상속되지 않는 프로퍼티 또한 존재합니다. parent child 코드 실행 결과는 다음과 같습니다. border(테두리)가 상속되는 프로퍼티라면 child가 작성된 p 영역 또한 테두리 선이 나타나야 하지만 아무런 변호가 없습니다..

▶ CSS란? CSS는 Cascading Style Sheets의 약자로 문서를 표시하는 방법(스타일이나 레이아웃)을 지정합니다. CSS를 사용해 사이트를 레이아웃을 만들고 텍스트의 색상을 변경하며 애니메이션을 넣어 시각적으로 아름답게 표현합니다. 당분간 CSS 작성 방법과 작성 시에 주의할 점, flex를 사용한 레이아웃 작성법 등 기본적인 내용을 살펴봅시다. CSS에서 반드시 알아야 할 작성 방법과 특징, 레이아웃 작성법 등에 대해서 알아봅시다 :) ▶작성 방법 스타일링을 작성하는 방법은 매우 간단합니다. '"A"의 "B"를 "C"로 하겠다.' 이 문장에 맞춰 스타일을 작성합니다. 여기서 A는 대상을 가리키는 선택자 그리고 B는 그 대상의 프로퍼티를 의미하며 C는 그 프로퍼티를 어떻게 바꿀지를 의미하..