☁️ 구름 X kakao DeepDive41 [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. [스터디] (11/20) 깃허브 이슈, light house 매일매일 스터디를 하고있는데, 이번에 처음 들어보고 배워보는게 있어서 한번 사용을 해보았다ㅎㅎ깃허브 이슈를 쓰는 방법: 깃허브 자체에서 커뮤니케이트를 할 수 있음.개발자 도구를 열면 오른쪽 상단에 width가 보임.기획에 이슈를 적고(가장 작은 화면 구성. width 몇일때 헤더 사라지는거, width 몇일때 사이드바 사라지는거 하겠다.)차근차근 한 단계씩 발전해나가는 상태로 이슈를 등록하면 된다.그래서 이번 졸업 프로젝트 깃허브에 적용해서 사용중이다.내가 해야할 일들을 쫘악 적고 하나씩 해결해나가니까 뭔가 미션 클리어 하는 느낌.기능 하나도 놓치지 않고 구현할 수 있을것 같고, 내가 이런걸 했구나 하는것도 한 눈에 볼 수 있어 좋은것같다! 개발자도구에 구글에서 제공하는 light house최대한 접근성.. 2024. 11. 22. [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. [CSS] 3일차 CSS (Background-Clip) Background-Clip: 요소 내에서 배경(색상 또는 이미지)가 확장되어야 하는 거리를 정의함.background-clip: border-box; 테두리까지 확장됨background-clip: padding-box; 패딩까지만 확장됨background-clip: content-box; 컨텐츠까지만 background-clip: border-box (this is default): The background extends behind the border. 테두리까지 확장 background-clip: padding-box: The background extends to the inside edge of the border. 엣지까지만 확장 .. 2024. 11. 17. 이전 1 ··· 3 4 5 6 7 다음
