퍼블리싱(44)
-
[css] BEM - Block Element Modifier : css naming convention
Block__element--modifier : simply speaking, code style guide Block is a stand alone entity that consists of elements independent UI element, meaningful on its own a single contained block or component on the page one whole structure / component block make sense whereas inside or outside ( ex. button can be a block ) the outermost parent element Element an element or part of a block they depend o..
2021.07.28 -
[css] rem 의 정의와 사용법, 픽셀보다 권장하는 이유
픽셀 사용을 추천하지 않는 이유 픽셀은 고정된 절대값이므로 접근성에 저해될 수 있다. 즉, 유저 입장에서 볼 때 브라우저의 기본 폰트값을 변경하더라도 픽셀값은 변하지 않는다. 물론 유저가 ctrl +/- 를 이용하여 줌 하는 경우에는 접근성을 해치진 않는다. REM Represents the font-size of the root element (typically ). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this). https://developer.mozilla.org/e..
2021.07.27 -
[css] margin과 padding 적재적소에 사용하는 법 (feat. margin-collapsing 마진병합현상/마진상쇄현상)
margin과 padding의 차이점? 아니, margin 과 padding 의 정확한 사용법! 어느덧 코딩한지 8개월차, (학원 다닌 기간 포함) 마진과 패딩의 차이점을 이론적으로는 충~분히 알고 있다. 그런데 실전에서 적용하려고 하니 그 사용 대상이 애매해지는 경우가 많았다. 생각하기에 따라 margin 과 padding을 적용하는 곳이 달라진다. 물론 이것 또한 일종의 방법론이긴 하나 적절하게 나누어서 사용하는 것이 제일이다. 예를 들면, B 박스 안에 A 박스가 있을 때, A 박스의 위치를 잡기 위해서는 어떻게 코딩하느냐. 나는 B 박스에 패딩을 줘서 A 박스의 영역을 잡곤 했는데, 물론 이것도 틀린 방법은 아니다. 박스를 어떻게 볼지 그 관점에 따라 달라지는 것인데, 아래의 그림을 참고하자. 다..
2021.07.20 -
[css] transition 이해하기
transition의 필수 조건 - CSS 속성 지정 - 효과 유지 시간 transition:all 1s; 지금까지의 작업은 대체로 hover 했을 때 transition을 사용하였는데, 이를 응용하여 해당 페이지에 들어가면(도달하면) transition 효과가 나타나도록 할 수 있다. hover 하지 않고 바로 효과가 나오는 것에 대해 이해가 조금 힘들었는데, 다음 그림을 참고하였다. 일반적으로 hover로 transition을 사용할때는 다음과 같다. div{ width:100px; height:100px; background-color:red; transition: all 1s; } div:hover{ background-color:blue; } 자동으로 transition 효과가 나타나게 하려면 ..
2021.04.28 -
[css] background 속성 축약 순서 (shorthand property)
background : color image repeat position / size attachment 실무에서 가장 많이 쓰이는 아래의 네가지 속성을 background-image: url(../img/img.jpg); background-repeat:no-repeat; background-position:center top; background-size: 100%; 한 줄로 축약하면 이렇게 된다. background: url(../img/img.jpg) no-repeat center top / 100%; position과 size 는 일부 값의 단위를 공유하므로 꼭 슬래시로 구분해야 하고, size만 사용할 경우(축약형에서)에도 position 값을 꼭 명시해주어야 한다. 참고사이트: lifea.c..
2021.04.21 -
[css] flex 이해하기
flex 속성 justify-content : flex-start, flex-end, center, space-between, space-around 요소 가로 정렬 * space-between : 요소 사이에 동일한 간격 * space-around : 요소 주위에 간격 align-items : flex-start, flex-end, center, space-between, space-around, stretch 컨테이너 안에서 요소 세로정렬 지정 align-content 여러 줄들의 간격 지정, 한 줄인 경우 해당x align-self 지정한 요소에만 적용 (ex. 이미 전체 요소에 align-items가 사용된 경우) flex-direction : row, row-reverse, column, col..
2021.04.16