Web/CSS12

• 

  [CSS] Pseudo-Element 중 ::before와 ::after에 관해 알아보자 서론 CSS를 사용하다보면, 다양한 Pseudo-Element를 사용하여 스타일링 해야 할 때가 있습니다. 오늘은 CSS Pseudo-Element(수도) 중 ::before와 ::after 관해 알아보는 시간을 갖도록 하겠습니다. Pseudo-Element란 Pseudo-element란 HTML element의 특정 부분에 스타일을 지정할 수 있도록 selector에 추가되는 키워드입니다. selector 만으로 원하는 element를 지정할 수 없을 때 사용합니다. 잠깐, selector에 대해서 모르신다구요? 대표적인 selector가 class selector죠. 아래 예시의 .box와 같이요. selector에 대해서 더 알고 싶으신 분들은 아래 링크를 참고 부탁드립니다. box .box { w.. Web/CSS 2023. 6. 4.

• 

  [CSS] 마우스 오버(hover) 이벤트로 메뉴 화면 보이기/감추기 서론 대상독자 HTML과 CSS 만으로 화면에서 태그를 감췄다 보였다 처리해주고 싶은 개발자 본론 구현방법 먼저, 정답은 아주 간단합니다! CSS 가상선택자 :hover 속성을 활용하면 충분히 구현할 수 있습니다. 우선 먼저, css에서 label 태그로 마우스 오버 대상 태그를 생성하고 보여줄 목록을 ul 태그로 설정합니다. 메뉴에 대한 기본 속성을 display : none으로, :hover 상태를 display: block 등으로 지정해주면 됩니다. 이게 끝입니다!! 만약 리액트와 같은 UI 라이브러리를 사용한다면, 컴포넌트 onMouseEnter와 onMouseLeave 속성을 사용하면 됩니다. 리액트에서의 방법은 추후 다뤄보도록 하겠습니다. 실제 코드 See the Pen Untitled by .. Web/CSS 2023. 4. 19.

• 

  [CSS] 마진 상쇄(marign Collapsing)와 해결방법 서론 형제 태그 간 marign 간격이 중복되어, 의도치 않은 방식으로 간격 조정이 될 때가 있습니다. 그럴 때 의심해볼만한 것은 마진병합. 오늘은 이에 대해서 알아보도록 하겠습니다. 본론 마진 상쇄란? In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin. (W3C) 일반적으로 마진 병합(마진 병합 현상), 마진 겹침 등으로 더 .. Web/CSS 2022. 4. 20.

• 

  프론트엔드 면접 질문 정리 ③ CSS 질문 박스 모델에 대하여 설명해보세요 CSS에 포함되는 모든 요소의 외장은 박스이며 주어진 태그의 특성에 따라, 블록 박스와 인라인 박스로 나뉜다. 블록 박스의 대표적인 태그는 div이며, 인라인 박스의 대표적인 태그는 span이다. CSS box는 콘텐츠/패딩/테두리/여백 총 4가지 영역으로 구성되는데, 블록 박스는 해당 영역이 모두 적용되어 구성되며, 인라인 박스는 컨텐츠 영역만으로 구성된다. 또한 블록 박스는 줄바꿈이 일어나며, width와 height을 지정해줄 수 있고 padding/margin/border 영역이 적용된다. 인라인 박스는 세 특징들 모두 해당되지 않는다. padding은 border와 콘텐츠 영역 사이에 위치하며, margin은 박스 주변의 여백을 지정하며 border는 박스 여백과.. Web/CSS 2021. 5. 17.

• 

  [CSS3] Animated Sidebar 만들기 이 효과 역시도, :checked를 활용하면 간단하게 만들 수 있다. 기본정보 1. Animation과 연관된 속성으로 transition과 tranform이 있다. 2. Transform은 화면 상에서의 위치, 크기, 회전각도 등을 조절한다. 각각 translate(X, Y), scale, rotate를 사용함으로써 가능하다. 그 외에도 matrix, matrix 3d, perspective, perspective-origin, transform-origin, transform-style를 사용할 수 있다. 3. Transform이 변화를 주는 요소였다면, Transition은 변화가 일어나는 속도, 변화시킬 요소, 움직이는 방법을 결정할 수 있다. 1) :checked 이전 사이드바로 활용할 요소를 .. Web/CSS 2020. 11. 12.

• 

  [CSS] 버튼 클릭으로 메뉴 화면 보이기/감추기 서론 대상독자 HTML과 CSS 만으로 화면에서 태그를 감췄다 보였다 처리해주고 싶은 개발자 본론 구현방법 먼저, 정답은 아주 간단합니다! CSS 가상선택자 :checked 속성을 활용하면 충분히 구현할 수 있습니다. 우선 먼저, css에서 input의 type을 checkbox을 생성하고 유동적으로 화면에 보여줄 HTML 태그에 대해, 기본 속성으로 display : none을, :checked 상태에서 display: block 등으로 지정해주면 됩니다. 이게 끝입니다!! 또 display: none 처리된 Input 태그를 클릭하기 위해 label 태그를 추가해주고 속성으로 for에 input에 대한 name을 추가하면 됩니다. 그럼 label 태그를 클릭할 때마다, 보여주고 싶은 영역이 사라졌다 .. Web/CSS 2020. 11. 11.

• 

  [CSS3] display : grid ① Grid, 배우면 뭐가 좋을까? 먼저 Flex와의 차이점에 대해서 알아보자. 우리는 Flex가 가로나 세로로 HTML 요소들을 정렬하는데 활용된다는 사실을 알고 있다. 이에 반해, Grid를 사용하면 가로와 세로를 포함한 면적에 대한 레이아웃을 짤 수 있게 된다. 기존에 Grid를 배우지 않은 상태에서는 float를 써서 화면을 구성해주어야 한다. 아래의 화면 레이아웃은 float를 활용한 레이아웃을 구성한 것이다. float를 써서 화면 레이아웃을 구성하는 것이 어려운 일은 아니다. width를 px 단위가 아니라, %로 주면 쉽게 해결할 수 있다. See the Pen 일반적인 HTML-CSS 레이아웃 설정 by joonho lee (@goldycoder) 비교를 위해 같은 작업을 Grid을 활용하여, 레이아웃을 짜보자. 각 태그에.. Web/CSS 2020. 10. 18.

• 

  [CSS] Position 속성 활용시, 주의하여야 할 점 1. Static & Relative - Position 속성이 정해지지 않으면, 기본적으로 지정되는 값이다. Static이란 말은 '정적인'이란 뜻으로 움직이지 않는 것을 의미한다. Relative와 비슷한 속성을 갖으며, 별다른 특성을 가지지 않는다. 2. Absolute - Absolute는 자신에게 적용된 정렬에 영향을 받지 않는다. 위치지정 역시, left/right/top/bottom 등을 활용하여 지정해주어야 한다. 또한, Absolute 포지션을 활용할 때에는 항상 상위 박스의 Position을 점검하는 습관을 갖아야한다. 왜냐하면 Position은 Static이 아닌, 부모 박스를 찾아 해당 박스 안에 속하여 위치가 지정되기 때문이다. See the Pen WNwgaLW by joonho.. Web/CSS 2020. 9. 18.

• 

  [CSS3] display : flex ② Flex 아이템에 적용되는 속성들 지난 시간에는 'Flex 컨테이너에 적용되는 속성들'에 대해서 알아보았다. 이번에는 컨테이너의 자식 요소인 아이템에 적용되는 속성들을 알아보자. 정해진 비율만큼 크기를 늘려, 여백 채우기 : flex-grow display: flex에 적용된 것을 보면, 여백이 채워지지 않는 모습을 볼 수 있다. 이는 flex-grow의 기본 값이 0이기 때문이다. 만약 다음과 같이 아이템 박스 1에 flex-grow: 1을 지정하면, 나머지 여백의 100% 비율에 맞춰 크기를 늘리는 모습을 볼 수 있다. 이 상태에서 아이템 박스 2에 flex-grow: 1을 지정하면, 나머지 여백의 박스1과 박스2가 각각 1:1의 비율로 크기를 늘리는 모습을 볼 수 있다. See the Pen KKzePBg by joonho lee .. Web/CSS 2020. 9. 15.

• 

  [CSS3] display : flex ① Flex 컨테이너에 적용되는 속성들 반응형 웹페이지를 만들기 위해선, 박스모델들의 너비 비율을 유지한 채 박스모델들을 한 줄로 정렬하는 작업이 필수적이다. 그러나 이는 position이나 float로 처리하기 꽤나 까다롭다. (원래 그러한 목적으로 만들어진 기능들도 아니다. float의 경우, 이미지 주변에 글귀들을 두기 위해 사용되는 속성이다. 또한 Position의 경우, HTML 요소에 차원을 부여하고 위치를 지정하기 위해 생성된 기능이다) 이럴 때 아주 유용하게 쓸 수 있는 기능이 있는데, 바로, display : flex이다!! 다만, 비교적 최근에 나온 기능이라 크로스 브라우징을 고려했을 때 고민하는 분들이 더러 있을 것 같다. 그러나 거의 모든 브라우저는 display : flex를 지원한다. (뿐만 아니라, align-con.. Web/CSS 2020. 9. 14.

• 

  [CSS] display : inline, block, inline-block 에 대해서 알아보자 웹 페이지 클론 작업을 하다보니, CSS 레이아웃에 대한 이해가 낮다는 걸 스스로 알 수 있었다. 밀접하게 관련이 있는 display에 대해 명확하게 설명하지 못하고, 그저 활용할 줄만 알고 있었기 때문이다. 각설하고, 세 요소들 간의 관계에 대해서 자세히 알아보자. 1. display란? [HTML] 인라인 요소(inline element)와 블록 요소(block element)에 대한 친절한 설명 먼저 display에 대해서 알기 전에, 인라인 요소와 블록 요소가 각각 무엇이며, 어떤 관계인지 알지 못한다면 필자가 쓴 다음 글을 참고하자. Display 속성과 각각의 요소들은 밀접한 관계를 갖고 있기 때문이다. display 속성을 통해 레이아웃에 HTML의 요소가 블록과 인라인 요소 중 어느 쪽으로.. Web/CSS 2020. 9. 11.

• 

  [CSS] Position : fixed를 활용하여, 메뉴바를 화면 상단에 고정시키는 방법 서론 윅스의 고객센터 홈페이지 웹페이지들을 살펴보다 보면, 다음과 같이 페이지의 상단에 메뉴 바가 고정된 형태의 웹페이지들이 종종 있다. 이는 홈페이지를 보는 사용자에게도 분명 큰 이점을 주는 듯 하다. 스크롤을 내려도, 메뉴바가 보이기 때문에, 자신이 원하는 영역으로 빠르게 이동할 수 있기 때문이다. 어떻게 하면, 메뉴바를 고정할 수 있을까? CSS의 Position : fixed를 활용하면 됩니다. 참고로 position:fixed는 부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표 프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동시킵니다. 그래서 스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치가 고정(fixed)됩니다. 본론 fixed 속성은.. Web/CSS 2020. 9. 10.