💻 더 나은 개발자 되기 69

배치할 방향 : flex-direction 정렬하기 : justify-content, align-items 요소가 넘칠 때 : flex-wrap 요소 간격 : gap 크기 늘이거나 줄이기 : flex-grow, flex-shrink, flex-basis, flex-direction display : flex - 요소가 세로로 정렬 (따로 적어주지 않아도 flex-direction : row 가 default로 적용) - flex-direction : column - 위에서 아래로 정렬. 보이기로는 같아 보이나 일반 디스플레이 블록과 차이가 있다. - flex-direction : row-reverse - 오른쪽에서부터 왼쪽으로 세로정렬 - flex-direction : column-reverse - 아래..

position속성 default = static : 따로 설정하지 않아도 원래 있어야 하는 곳에 있음. relative : 기본 위치에서 상대적위치로 변경. 단, 원래 있던 공간은 그대로 차지한 채 배치 -> margin이랑 다른 점. 마진은 해당 기준에 맞춰 주변 요소들도 이동이 되는데, relative는 해당 속성에 해당 되는 부분만 이동 된다는 것 absolute : 가장 가까운 조상의 포지셔닝(static이 아닌 경우)을 기준으로 배치. 원래 자리는 차지하지 않은채 배치. fixed : 브라우저 화면 기준으로 고정. 원래 자리는 차지 하지 않은 채 배치. -> 네비게이션을 만들 거나 할 때 사용하고, 고정이 됨으로 인해 겹치는 부분은 마진을 주어 보이도록 배치해줘야 함 sticy : 원래 자리에..

데이터를 웹사이트로 전송 할 때 사용하는 것. ex) 회원가입 페이지 내 내용을 적을 수 있는 공간 인풋, 라벨, 버튼 등으로 구성되어 입력을 받을 수 있음 이메일 form 안에 다른 입력 태그들을 넣을 수 있음 첫번째 쪽 라벨처럼 인풋을 감싸서 라벨 클릭 시 인풋박스에 커서가 생기도록도 할 수 있고, 두번째 쪽 처럼 인풋박스의 id와 라벨의 for안을 동일하게 하면 첫번째와 같은 결과를 낼 수 있다. name - 인풋의 데이터에 이름을 부여해주는 것 - 인풋박스에 네임을 준 뒤 값을 입력 후 엔터를 하면 주소에 값이 넘어가는 걸 볼 수 있음 ex ) "테스트" 입력 후 엔터. -> 주소창 주소 ?뒤에 "name값=테스트" 값으로 넘어감 type password : 작성시 *** 과 같이 보여짐 emai..

🌱 이미지 src : 이미지 주소를 정해줌 alt : 사진에 대한 정보를 텍스트로 적을 수 있음 1. 코드만 보고도 어떤 사진인지 알 수 있음 2. 시각장애인을 위해 해당내용에 있는 내용을 읽어줌 3. 이미지 로딩 실패시 화면에 어떤 사진이었는지 유추할 수 있음 width, height 를 통해 이미지 사이즈 조절이 가능(단위 없이 써도 px로 인식). css를 통해서도 변경 가능 🌱 비디오 autoplay : 자동재생 - 크롬에선 동작x, 사파리에서는 자동 재생 - 사용자에게 불쾌감을 줄 수 있으므로 꼭 muted와 함께 사용. muted : 음소거 - 크롬에서 autoplay옵션을 넣고 싶을때는 꼭 함께 사용해야 함. controls : 프로그래스 및 재생버튼들 노출 width, height 를 통해..