김숭늉 마음대로

1. 만약에 desk first인 경우는 max-with(desk first)를 정해주고 브레이킹 포인트를 작성한다! @media (max-width: 768px) { 최대 768px인 경우 = 스크린의 최대 넓이가 최대 768px 보다 작다는 의미 #latest-products ul { grid-template-columns: 100%; } } 2. 미디어쿼리는 css의 순서 속성에 영향을 받는다! 그리서 미디어쿼리의 작성위치는 매우 중요! 3. h1 글씨작게, grid 위아래 일렬 배열 하기 (픽셀 768 아래일때) @media (max-width: 768px) { main h1 { font-size: 1.5rem; } #latest-products ul { grid-template-columns: ..

만들고자 하는 웹사이트가 desktop first 인지, mobile first 인지!? 반응형 웹디자인을 위해서는 CSS코드에 미디워쿼리를 추가하는것이 전부! 장치 유형이 어떤 기준에 부합하면 미디어쿼리안에 정의해뒀던 코드가 그게맞게 실행된다.\

사용자가 사용하는 장치는 컴퓨터일수도있고, 패드기기 일수도있고 모바일폰등등 다양할수 있는데, 우리는 사용자가 웹사이트를 들어올때 어떤장치를 사용하는지 알수가 없고... 개발자로서, 사용자가 어떤 장치를 사용하던 예쁘게 보여줘야하는게 목적이고, 이 개념이 바로 반응형 디자인이다. 1. 먼저 윈도우의 경우 ctrl 버튼을 누른상태로 -.+ 를 적용해서 화면비율이 100%인지 부터 먼저 확인을 한다. 2. 브라우저 ... 을 클릭해서 setting-appearance에서 글꼴 등을 수정하여 볼수가있는데 px값을 사용하는게 사실 잘못이라고 까지는 아니지만,, 사용자의 옵션을 빼앗기때문에 적응형 디자인에 적용하기 맞지 않다. 이게 바로 px를 사용하는 가장 커다란 단점이라고 할수 있습니다. 3. CSS에서 사용하..

text-align:center; span,a,label,image,normal text 등 각종 비 정형화/텍스트 객체에 적용가능하다. align= center; div,table 등의 정형화 및 공간 객체에 적용가능하다 출처 : https://ekadia.tistory.com/515?category=447195

single flex item을 바꾸는 방법에는 어떤 방법이 있을까? 1. order property 2. align-self property. flex-direction은 row기준으로 적용되지만 align-self는 cross라인 기준으로 적용됨! 3. MDN 문서 참고! https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox 4. flex property (grow) flex-grow에 1이 기준점이 되어서 이후 숫자가 커지면 커질수록 1의 x배가 된다. 5. flex property (shrink) 5. flex property (flex-basis) ***중요 - depend..

1. 자 TRAVEL GOAL로 돌아와서 GRID를 직접 적용해보자! display: grid; grid-template-columns: 1fr 1fr; 그리드를 어떻게 구성할건지 정하기! 지정하고자 하는 element에 width가 지정된게 있는지 다시한번 체크하고 불필요하면 지우기 gap 으로 20px 씩 간격을 좀 주고 그다음 nth-of-type으로 1개의 요소가 2개의 행을 차지한다고 넣기 2. 유니코드 (텍스트 이모티콘! 사용) ㄴ 전세계적으로 작동하고 사용하는 유니코드! -> html이 가진 표준 문자열임 브라우저 html의 특정문자들을 어떤기기나 플랫폼에서도 보이게 해준다! https://en.wikipedia.org/wiki/Arrows_(Unicode_block) ㄴ 유니코드 확인가능한..

1. 카드 만들기 body { background: linear-gradient(30deg, rgb(77, 77, 77), rgb(58, 58, 58)); } header { position: static; } main ul{ width: 800px; margin: 0 auto; } main li { display: flex; background-color: white; } main li img { width: 300px; height: 280px; } .item-content { padding: 24px; } 2. 아래를 보면 text 영역에만 border-radius가 적용되고, 이미지 영역에는 적용되지 않은상태인데 이건 특정 속성으로 해결할수있음! -> overflow : hidden (컨테이너 자..

1. 마진 겹침현상은 인접요소에서만 일어나지않고 부모 자식간에도 나타난다! ㄴ 화면에 하얀 빈공간..? 해결! (자식요소에 padding을 더해서 해결!) 2. 배경에 선형 그라디언트(그라데이션) 추가하기! (자동으로) CSS 기능(function)으로 해결가능해! ^_^ background: linear-gradient(45deg, rgb(227, 255, 253), rgb(202, 243, 240) ); background: linear-gradient(각도, 적용할 색상, 적용할색상) ㄴ 각도를 0으로 하면 시작하는 색깔이 아래로감! ㄴ 색깔변화는 미세하게 주는게 좋대요! 3. 푸터! a태그에 텍스트가 아닌 img로 추가하기 ! 4. 푸터 스타일링 시작하기! :) 푸터는 shared.css로 작업하..

1. %단위 작업 position : absolute ; 로 설정한다는 의미는 ㄴ 문서작성 흐름에서 빼겠다는 의미! width : 100% ; ㄴ 이렇게 적용하면 부모요소에 상대적으로 % 너비가 적용되는데, 부모 요소에 상대적으로 너비를 적용하고싶지않으면 아래와 같은 방법이 있다 box-sizing이라는 css기능을 사용하면 된다! 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다. box-sizing : content-box ; (default 값) box-sizing : border-box ; -> 테두리를 기준으로 크기를 정한다 (패딩크기까지 모두 포함됨) 2. 헤더에 absolute를 정상적으로 지정하기 ! header { display: flex ; justify-content: sp..

1. text/item 정렬하기 text-align : right ; align-items: center; 2. 아래와 같이 헤더영역 완료! body { font-family: "quicksand", sans-serif; margin: 0; } ul { list-style: none; -> 일반적요소가 생기면 위로 올려 margin: 0px; padding: 0; } header { display: flex ; - 세 justify-content: space-between; - 트 align-items: center; padding: 15px 60px; } #page-logo a { padding: 10px; font-family: "Oleo Script", sans-serif; color: rgb(24..