CSS10 [퍼실리테이터] 공부할게 너무 많은 CSS.. 리액트 공부중에 이런 방식으로 CSS를 작성하는 예시를 보게 되었다.그냥 css를 파일로만 따로 만들어서 사용했던 나는 이 방식을 처음 보았고오호, 이거 현업에서도 사용하는건가? 협업할때 불편한거 아닌가?실제 현업에서는 무엇을 사용할까? 싶어서 프론트퍼실님을 찾아갔다. 그래서 알게 된 사실1. 순수 CSS (그냥 CSS 파일 따로 파서 작성하는거)는 현업에서 잘 사용하지 않는다.2.. 위의 경우... 보통은 버튼별, 검색창별로 스타일 컴포넌트로 빼놓거나 modul.css 자주 사용한다.3.. 현업에서는 modul.css 또는 styled component (CSS in JS)Tailwind Css (라이브러리) *부트스트랩은 별로 추천하지 않는다고 하심. https://tailwindcss.com/ Ta.. 2024. 12. 4. [CSS] Box-sizing을 어디에 사용하는데? : 패딩을 넣었는데 화면이 잘릴때! 인스타그램 클론코딩을 하고 있었다. 헤더에 position: fixed;를 주고, 헤더 크기가 작길래 width: 100%를 주었더니.header{ height: 60px; width: 100%; padding: 0 16px; /* ...생략... */ position: fixed; top: 0; left: 0;}아니 글쎄, 헤더 이미지가 잘려버리는것이다.margin을 줘도 먹지않았다.. 이럴때 쓰는게 바로 box-sizing 이라는 것인데,어떻게 해야하는지 머리를 쥐어뜯다가 알아낸 내용이라 공유한다. 👇Box-sizing 속성에 대한 설명 정리 글은 여기, 내 블로그에 포스팅되어있다.👇https://s2ej1n.tistory.com/35 [CSS] Box Siz.. 2024. 11. 23. [CSS] Box Sizing 속성 box-sizing 속성: 말 그대로 박스의 크기를 어떤 것을 기준으로 계산할지 정하는 속성.box-sizing: content-box | border-box | initial | inheritcontent-box : 콘텐츠 영역을 기준으로 크기를 정한다콘텐츠 박스 자체에 300테두리 10픽셀⇒ 총 320border-box : 테두리를 기준으로 크기를 정한다테두리까지 합해서 300콘텐츠는 280픽셀이 됨initial : 기본값inherit : 부모 요소 속성값 상속받음사용해본 결과 box-sizing을 사용하지 않았을 때의 기본 값은 content-box인것 같다. 2024. 11. 23. [CSS] 이미지에 그라디언트 효과를 주고싶어! mask-image: linear-gradient 넷플릭스 클론코딩을 하는데 메인 광고 이미지가 그라디언트 효과로 사라지는것을 구현하고 싶었다. 위의 화면은 내가 html/css만으로 구현한 화면인데, 메인 이미지의 아래 부분을 보면 이미지가 서서히 사라지는것이 보일것이다. 구글링을 통해 mask-image 속성중 linear-gradient를 사용하면 된다는것을 알게되었고, 이번에 공부한 내용을 공유하고자 포스팅을 작성한다.mask-image포토샵을 다뤄봤다, 또는 영상 처리를 공부해보았다. 하는 사람은 '마스크'를 들어보았을것이다.이미지 합성을 할때 사용한다 생각하면 쉬울건데, 정확한 정의는" 요소의 마스크를 정의하여 보이는 영역과 숨겨지는 영역을 결정한다. "라고 보면 된다. : linear-gradient그중 linear-gradient 속성은.. 2024. 11. 20. [CSS] Flexbox(2) - Item속성 안녕하세요? 아이템 속성들입니다.딱히 어려운건 없었어요.✨Flex 아이템 속성들 자세히 알아보기✔️order: flex 컨테이너에 나타나는 순서를 제어함order2 가 order 1보다 크므로 뒤로감,order-1이 0보다 크므로 뒤로 감 ✔️flex-grow: 너비를 자동으로 늘어나도록 함.=> 180 픽셀을 나눠가짐. ✔️flex-shrink: 너비를 자동으로 줄어들도록 함.주로 레이아웃을 벗어난 아이템 너비를 분배해서 줄이는데 사용함.flex-wrap: wrap; 속성이 부여된 경우 적용되지 않음 (당연함. 아래로 내려버리기 때문에.)flex-wrap 속성을 적용하지 않거나 nowrap으로 해야함.✔️flex-basis: flex 아이템의 기본 사이즈를 지정하는 속성한꺼번에 또는 하나씩 정의 가능 .. 2024. 11. 18. [CSS] Flexbox(1) - Flex와 Container속성 이번 시간에는 레이아웃을 짜는데 사용되는 Flex에 대해 배웠다.그냥 막연하게 사용하기만 하였는데, 이번 기회에 제대로 짚고 원리까지 알고 넘어가보자.이번 포스팅은 컨테이너 속성에 대해 다루고, 다음 포스팅은 아이템 속성에 대해 다루도록 한다.내용이 좀 길 수 도 있다.그럼 킵고잉~~✨Flexbox - 자주 쓰이기 때문에 중요함!: 주로 레이아웃 만들 때 사용. (반응형)반응형 웹사이트를 디자인 할 때 요소의 변화를 위해 사용함.웹사이트를 사용하는 장치 유형에 따라 너비, 높이, 해상도, 방향 등과 같은 동작에서 변경될 때 사용.1차원 레이아웃을 제공함참고로, Grid는 이차원임.Flexbox Components 구성요소Felx Container: display를 flex, 또는 inline-flex로 .. 2024. 11. 18. 이전 1 2 다음
