웹(web)/프론트엔드-css
-
크롬으로 Layout(grid, flex) 디버깅웹(web)/프론트엔드-css 2021. 5. 5. 15:35
Styles의 Layout 탭에 대해서 살펴보자 Layout 탭에는 grid와 flex로 선언된 엘리먼트가 나타난다. Overlay display settings에서 show track sizes를 체크하고 grid overlays에서 원하는 요소를 체크해보면 viewport에서 아래 사진처럼 layout 정보를 보여준다. show track sizes에서 1fr - 238px 과 같이 나타나는데 1fr은 사용자가 지정한 값이고 238px은 computed된 px 값이다. grid나 flex는 복수 선택이 가능하며 엘리멘트 옆에 색상 네모칸은 해당 레이아웃을 viewport에서 하이라이팅 해줄 때 색상이다. 가장 오른쪽에 있는 화살표 버튼을 누르면 viewport에서 엘리먼트가 있는 곳으로 바로 이동이 ..
-
크롬으로 CSS 디버깅웹(web)/프론트엔드-css 2021. 5. 5. 15:21
크롬 개발자 도구 Elements 탭에 들어가면 css를 디버깅할 수 있는 방식들이 여러 가지가 있다. 그 중 유용한 기능들을 소개하고자 한다. # box model 바로 수정하기 아래 사진의 가장 좌측 inspector를 누른 후 화면의 요소를 선택한다. 이후 Computed 탭으로 이동하면 다음과 같이 해당 요소의 박스모델을 볼 수 있다. 박스 모델을 바로 수정할 수 있다. - 부분을 더블클릭하면 다음 처럼 수정할 수 있는 상태가 된다. 여기에 숫자를 입력하거나 %, rem, em 등을 입력할 수 있다. 1rem을 입력해보면 16으로 바뀌는데 이는 px 단위로 바뀌는 것이다. px이 아닌 단위도 입력이 가능하고 최종적으로 px로 변환되는 방식이다. 박스 모델에서 값을 변경해보고 싶을 때 Compute..
-
modal by flex웹(web)/프론트엔드-css 2020. 7. 3. 02:05
인스타그램에서 사진을 누르면 다음과 같이 배경이 회색이 되면서 창이 나타나게 된다. 이런 것을 모달이라고 한다. 이런 것을 구현하려면 어떻게 해야할까? 1. modal을 위한 html을 작성한다. 모달 내용 닫기 modal-wrapper 안에 modal을 넣는 것이 핵심! 2. modal-wrapper에 css 적용 .modal-wrapper{ position: fixed; top: 0; left: 0; width:100%; height:100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; } .modal{ background: white; } modal-wrapper에 flex를 쓰면 ..
-
CSS Flex웹(web)/프론트엔드-css 2020. 6. 22. 17:20
블락 엘리먼트를 가로로 배치하려면 어떻게 할까? 레이아웃을 짜다 보면 박스들에 대한 정렬이나 위치 조정이 굉장히 복잡할 때가 있다. 블락 엘리먼트를 가로로 정렬할 때 float을 사용하고 clear해주는 방식을 써봤을텐데 이런 것을 굉장히 쉽게 해주는 것이 flex이다. box 모델에서 block과 inline을 배웠고 flex를 배워보도록 하자. flex 기본 예제 A, B, C가 div인데 가로로 배치된 것을 볼 수 있다. 세로 길이는 꽉 채워진 상태임을 알 수 있다. .box에 display를 flex로 설정하였다. 그러니 자식 요소들은 블락 요소임에도 가로로 배치가 되었다. flex의 자식요소는 item이라고 부른다. 위를 보면 item의 배치는 가로로 배치되며 왼쪽에서 부터 차곡차곡 배치된다. ..
-
CSS ::before 위치 조정웹(web)/프론트엔드-css 2020. 5. 27. 16:50
요소 앞에 가상으로 요소를 만들어 주는 ::before를 사용하는 경우에 위치를 어떻게 조정할 수 있을까? absolute를 사용하여 원하는 위치에 배치할 수 있다. 다만, 아래와 같은 점을 염두하고 사용하는 것이 좋다. before의 display: absolute 사용시 -top/bottom 속성 값이 없는 경우: static 자리에 위치(before가 위치할 자리) -top/bottom 속성 값이 있는 경우: absolute를 사용한 일반 요소처럼 relative인 부모 기준으로 정렬됨 이해하기 위해서 ::before를 사용한 후 위의 속성들을 변경해보면서 위치를 파악해보면 된다.
-
CSS media-query웹(web)/프론트엔드-css 2020. 5. 27. 16:35
화면 크기에 따라 동적으로 디자인을 변경하는 방법을 반응형 페이지라고 한다. viewport의 개념을 이해해야 하는데 viewport 핵심은 보고있는 페이지의 크기이다. pc는 사용자가 보고 있는 웹브라우저 크기를 조절할 수 있으며 mobile은 웹브라우저의 크기를 변경하기가 어렵다. 자세한 설명은 다음 글을 참조(https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts) 화면에 나타나는 크기에 따라서 css를 달리 쓰고 싶을 때에 @media를 사용한다. 이 때, html 파일에 다음과 같은 종류의 코드를 head에 적어야 된다.() @media screen and (min-width: 1280px) and (max-width: 1920px..