목록전체 글 (158)

김숭늉 마음대로

Udemy section 7 (19일) - 오버플로우, 카드, 그리드

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 (컨테이너 자..
IT/웹개발 (100일 도전) 2023. 2. 24. 23:08
Udemy section 7 (18일) - 마진겹침현상, 선형그라디언트, 푸터만들기, 카드콘텐츠, position: static; , 카드룩

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로 작업하..
IT/웹개발 (100일 도전) 2023. 2. 24. 22:59
일반동사의 의문문, 영어로 질문하기, 영어로 문장 연결하기~!

1. 일반동사의 의문문 1) Do you ~? Does she/he ~? ㄴ 평소에/일반적으로 ~~을 하는지/안하는지에 대한 질문 2) Did you ~? Did you ~? ㄴ 과거에 ~을 했는지에 대한 질문 3) Are you going to ~? ㄴ 앞으로 ~을 할건지에 대한 질문 2. 의문사 + 일반동사의 의문문 What are you going to eat? 너 '뭐' 먹을거야? What are you going to do this weekend? 이번주말에 뭐할거야? What did you do yesterday? 어제 뭐했어? What do you do on a weekend? 주말에 뭐해? 3. be동사의 의문문 Is it fun? Was it fun? Is it good? Was it g..
English/Studying English 2023. 2. 24. 21:36
Udemy section 7 (17일) - %단위, 헤더(box-sizing), 하이라이트 섹션

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..
IT/웹개발 (100일 도전) 2023. 2. 23. 10:53
이전 Prev 1 ··· 32 33 34 35 36 37 38 ··· 40 Next 다음