doeunn.log

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

▶우선순위와 명시도(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는 그 프로퍼티를 어떻게 바꿀지를 의미하..

▶SEO(Search Engine Optimization) : 검색 엔진 최적화 많은 사람이 이용하길 바라는 서비스를 만들었다면 네이버나 구글 같은 검색 엔진의 상위에 노출시키고 싶을 것입니다. 하지만 이미 시장에는 수많은 경쟁 서비스가 있어 그중에서 검색 결과의 상단에 나오게 하는 것은 매우 어려운 일입니다. 검색 사이트에 상단에 노출시키는 것은 개발의 영역이 아닌 서비스의 인기, 마케팅과 광고의 영역이라 생각할 수 있습니다. 일부는 맞지만, 일부는 아닙니다. 개발자의 몇 가지 노력으로 서비스가 적절한 키워드에 더 많이 노출되도록 할 수 있습니다. 이렇게 우리의 사이트를 찾기 쉽도록 개선하는 여러 노력을 검색 엔진 최적화(SEO, Search Engine Optimization)라고 부릅니다. 구글과 ..

HTML 요소를 어떻게 작성하는 것이 중요할까요? 여러 가지가 있겠지만 제일 중요한 것은 시맨틱(Semantic)하게 작성해야 한다는 것입니다. "Semantic"이라는 단어는 '의미의', '의미론적인'으로 해석됩니다. 즉 의미에 맞는 태그를 사용해 문서를 작성하는 것을 말합니다. 예를 들어 특별한 의미가 없는 태그를 대신해 , , , , 처럼 의미 있는 태그를 상황에 따라 사용하는 것입니다. 시맨틱하게 HTML을 작성하면 요소에 쉽게 의미를 부여할 수 있습니다. 각 요소가 자체적인 의미를 가지기 때문에 개발자 입장에서 가독성이 높아지고 유지 보수가 쉬워집니다. 또한 장치에서 콘텐츠의 계층 구조를 더 쉽게 이해할 수 있습니다. 검색 엔진은 HTML의 계층 구조에 따라 키워드들의 중요도를 파악하기 때문에 ..