프론트엔드

CSS 작성 방법론 중 하나인 BEM 방법론이란?

BEM 방법론 (BEM Methodology) 이란? 대규모 프로젝트에서 CSS 코드를 관리하는 방식 중 하나이다. BEM 은 Block, Element, Modifier 의 약자이다. Block 하나의 엔티티로 그 자체로 의미가 있다. ex) header, container, menu, checkbox, input Element 그 자체로는 의미가 없으나, block 에 묶여 의미를 가지게 되는 요소이다. ex) menu item, list item, checkbox caption, header title Modifier Block 이나 Element 에 들어가는 flag 이다. 외관이나 행위를 변경하기 위해 사용한다. ex) disabled, highlighted, checked, fixed, siz..

HTML 메타 태그란? meta tag

메타 태그 메타 태그란 해당 HTML 페이지에 어떠한 내용이 들어있는지 미리 알려주는 것이다. 브라우저가 페이지를 해석하는데 도움도 주고, 검색엔진이 페이지를 읽을 때도 이 부분을 가져간다. 또한 SNS 에 공유할 때 나오는 썸네일 등도 이 부분에서 가져온다. 인코딩 정보 크롬과 같은 브라우저에서는 utf-8 을 사용하지 않아도 자동으로 인코딩을 고쳐주는 경우도 있다. 그러나 모든 사람이 크롬 브라우저만 사용하는 것은 아니므로 안정적인 동작을 보장해주기 위해서 위의 charset="utf-8" 을 적어주는 것이 좋다. 페이지의 저자와 내용 name 에 메타태그의 종류(name, description 등)를 입력하고, content 에 내용을 입력한다. og: 태그 og 태그는 Open Graph Data..

HTML 최상단 !DOCTYPE html 의 의미

개요 은 HTML 문서의 최상단에 작성되어야 한다. 브라우저가 문서를 렌더링 할 때 quirks mode (en-US)로 바뀌지 않도록하는 것이 유일한 목적이다. HTML 문서가 quirks mode 로 인식되면, 렌더링 과정에서 W3C 표준을 지원하지 않으므로 작성할 때 예상했던 결과와 다른 결과가 나올 수 있다. quirks mode 는 오직 옛날에 W3C 표준을 지키지 않은 HTML 문서들을 정상적으로 보여주기 위해 남아있는 호환용 모드이다. 파이어 폭스에서는 Page Info 에서 Render Mode 를 보여준다. 위의 Render Mode 항목이 Standards compliance mode 로 설정되어 있는 것을 볼 수 있다. 레퍼런스 MDN DocType 파이어폭스 Page Info Win..

flex 엘리먼트 꽉 채웠을 때 자동 줄넘김되게 하기

문제 flex 레이아웃을 사용하는데, flex-direction: row 를 사용하면 강제로 부모 엘리먼트의 크기에 맞춰서 자식 엘리먼트의 크기를 줄여버린다. 원본 크기 그대로를 사용하면서 줄넘김이 될 수는 없을까? 해결 flex-wrap: wrap 속성을 사용하면 된다. 레퍼런스 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

img 태그 사용시 아래의 4px 의 미묘한 빈공간이 생기는 이유

문제 img 태그 이미지에 테두리를 주었을 때, 아래쪽에 미묘한 4px 의 빈 공간이 생긴다. 원인 이는 img 태그의 기본 display 속성이 inline 이어서 그렇다. inline 의 기본 vertical-align 은 baseline 이다. 이는 알파벳의 특성 때문에 설정되어 있는 부분인데, 'abc'와 다르게 'gjy'와 같은 알파벳은 기준선을 기점으로 아래쪽으로 튀어나와 있다. 이를 내림 영자 (descenders) 라고 한다. 해결 방법 vertical-align 을 middle 혹은 top 과 같은 다른 속성으로 바꾼다. 혹은 display 를 block 으로 바꿔준다. 다만 이 방법은 img 태그 자체가 display: block 을 따르게 되기 때문에 vertical-align 이 사..

CSS display 속성의 특징

display 속성의 특징 CSS 에서 display 속성은 해당 엘리먼트와 내부 엘리먼트가 어떤 모양을 가질지를 결정한다. 복잡해보이지만 실제 엘리먼트의 display 속성은 block 혹은 inline 두가지만 존재한다고 보면 된다. 참고: block or inline element flex, grid 와 같은 속성은 사실상 block 과 같은 속성인데, 자식 엘리먼트를 보여주는데만 그 차이가 있다. 자식 엘리먼트를 보여주는 방식도 보통 아래 3가지 중 하나를 따른다. 참고: flow layout, grid, flex display 속성을 모르면 삽질하기 쉬운 부분들 html 의 다양한 태그들에는 '기본 display 속성' 이 부여되어 있다. 이를테면 span 태그에는 inline 속..

CSS 접기 펴기 애니메이션 만드는 방법 (height: auto 일 때 문제 해결)

접기, 펴기 애니메이션 만드는 방법 CSS transition 을 이용하여 애니메이션 효과를 입힌다. JS 를 이용해 height 값을 동적으로 조정해준다. div { transition: 3s; height: 500px; /* -> 50px 와 같이 변경하면 애니메이션이 적용된다. */ } 그런데 위의 방법의 경우, height 값이 auto 일 때 애니메이션이 적용되지 않는 문제가 생긴다. 해당 엘리먼트에 들어올 값이 유동적이어서 height 값이 auto 여야 하는 경우엔 max-height 을 이용해줌으로써 애니메이션을 적용할 수 있다. 주의! height 쓰지 말고 오직 max-height 만을 이용해서 크기를 제어해야 애니메이션이 먹힌다. 레퍼런스 https://stackoverflow.com..

CSS Box-sizing (박스 사이징) 이란?

Box-Sizing 이란? box-sizing 은 width 와 height 이 계산되는 방식을 지정한다. box-sizing: content-box 의 의미 box-sizing: content-box 인 상태에서 width:100% 를 지정한다면, 이는 부모 엘리먼트의 border 와 안쪽 너비를 포함한 공간을 의미한다. 부모 엘리먼트의 경계선과 안쪽 여백에 대한 고려를 하지 않는 방식이다. 이 때문에, 아래에 추가적으로 설정된 10px 는 부모 엘리먼트를 뚫고 나온다. #childContainer { box-sizing: content-box; width: 100%; border: solid #5b6dcd 10px; padding: 5px; } box-sizing: border-box 의 의미 이는 ..

CSS Functional Notation 이란?

CSS Functional-notation 이란? CSS 값 의 일종으로 특별한 데이터 처리 혹은 계산을 하거나 복잡한 데이터 값을 표현하는데 이용된다. 문법 selector { property: functional-notation([argument]? [, argument]!); } 함수의 종류 애니메이션 타임라인 아직은 scroll() 밖에 존재하지 않는다. 이마저도 Experimental 이다. scroll() 변환 요소의 모양을 변환시키는 함수들이다. matrix() ... 수학 수학적인 계산을 도와준다. calc() 필터 이미지 등에 필터를 걸거나 색상을 변경하는데 유용하다. blur() 색상 다양한 기준을 통해 특정 색상을 잡는데 유용하다. hsl() 이미지 태그가 유효할 때..

CSS @keyframes (키 프레임) 란?

@keyframes 란? CSS At-rules 의 일종이다. 애니메이션의 시퀀스를 정의할 수 있다. transitions 으로 정하는 것보다 더 세부적으로 제어가 가능하다. 예제 from, to 사용 @keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } } 퍼센티지 사용 @keyframes identifier { 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } 100% { top: 100px; left: 100%; } } 주의사항 @keyframes 내부의 !important 키워드는 무시된다.

CSS At-Rules (@import, @font-face 등) 란?

CSS At-rules 란? (@import, @namespace 등) CSS 의 At-rules 란 CSS Statement(CSS 문) 의 한 종류이다. CSS 문은 CSS 가 어떻게 동작할지에 대해 지시한다. At-rules 는 At 기호 ('@', U+0040 COMMERCIAL AT) 으로 시작하여 다음 세미콜론 (';', U+003B SEMICOLON) 혹은 다음 CSS 블록이 나오기 전까지 내용이 포함된다. 문법 내부 블록을 활용하지 않는 At-rules /* General structure */ @identifier (RULE); /* Example: tells browser to use UTF-8 character set */ @charset "utf-8"; ..

CSS 핵심 개념 요소들

CSS 핵심 개념 요소들이란? CSS 가 해석됨에 있어서 그 근간이 되는 개념들이다. 알아놓으면 CSS 의 구동 원리를 파악하는데 큰 도움이 된다. CSS Syntax (문법) Comments (주석) Specificity (구분법) CSS Selector 와 같은 구분자에 대해 세세하게 설명하는 개념이다. Inheritance (상속) Box model (박스 모델) Layout mode (레이아웃 모드) Visual formatting models (비주얼 양식 모델) Margin Collapsing (마진 붕괴) 값 Initial values (초기 값) Computed values (계산 값) Used values (사용된 값) Actual values (실제 값) Value definition ..