본문 바로가기

전체 글

 (32)
2022-10-27 [새싹 프론트엔드] display: flex; flex란? - 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고, 자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다. “컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”이라고 생각하시면 됩니다. - 부모요소에 width를 주면 작동하지않는다 - flex는 items 의 개별크기보다 flex자체의 기능을 더 중요하게 생각하기 때문에container의 width가 100%; items의 width가 100px 이라할때 가로 사이즈가 줄어들면 자동으로 100px보다 작아진다.items의 크기를 무시한다. 단, 부모에 너비값을 줬을땐 무시하지않는다 -items의 heigh..
2022-10-26 [새싹 프론트엔드] 반응형 웹 2022-10-26 강의 내용 반응형 웹 뷰포트 미디어 쿼리 반응형 웹이란? pc, TV, 스마트폰 등 다양한 기기에 맞춰 반응하는 웹 사이트 사용자가 접속하는 기기,환경에 맞춰 화면크기가 자동 조절된다. 사용자가 굳이 확대하거나 스크롤 막대를 옮기거나 하는 수고를 최대한 줄일 수 있음 반응형 웹 사이트 예시 이전부터 많이 사용하던 사이즈였지만 요즘엔 더 다양한 스마트기기가 출시되어 더 다양한 사이즈를 고려해야한다. 반응형 웹의 장점 기기의 화면 크기나 해상도에 영향을 받지 않음 화면 변화에 즉기 반응 어느 기기에서도 사이트 주고가 동일 유지 관리가 편함 반응형 웹의 단점 사이트 디자인이 단순함 반응형 웹은 브라우저의 너비값에 따라 레이아웃을 변경하기 때문에 사이트의 디자인이 단순한 경우가 많다. 뷰포트..
2022-10-25 [새싹 프론트엔드] form 태그 , button&form 차이점 강의 내용 폼 태그 폼 꾸미기 폼 요소란? , , 등등.... 사용자가 입력하거나 입력을 받는 걸 모두 폼이라고 부른다 input을 사용할때는 무조건 상황에 맞는 type을 사용해야한다. input의 유형 https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input#%3Cinput%3E_%EC%9C%A0%ED%98%95 input의 속성 https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input#%EC%86%8D%EC%84%B1 form작성 label과 input은 짝꿍이다 이름 나이 제출 초기화 form안엔 네모칸 안에 할 수 있는 요소와 들이 들어간다. h(n) p태그와 같은 다른 태그도 들어갈 수 있다..

티스토리툴바