👇 복습하고 넘어가기 * "이미지와 배경" * > #### 💡 웹페이지에 이미지를 추가하는 2가지 방법 * HTML 📖 * 태그로 이미지 넣기 -포털사이트에서 이미지 검색에 노출이 필요한 경우 -웹페이지에서 중요한 역할을 하는 경우 ✨ 이미지가 로드 되지 않았을때, alt 속성 안의 값으로 대체 표현됨(background-image는 ...
✅ Flexbox 이전의 웹 페이지의 레이아웃은 CSS display, float, position과 같은 속성을 사용해 구현했지만, 이 속성들은 구현 방법이 복잡하고 표현할 수 있는 레이아웃에 한계가 있다 flexbox는 이전 레이아웃 구현방식의 단점을 보완한 방식으로 화면의 크기가 동적으로 변할때에도 요소의 크기와 순서를 ✨유연하게 배치✨할 수 있다...
👇 복습하고 넘어가기 Block과 Inline ✅ Margin auto 기본적으로 block요소는 자기자신이 가로폭을 100%차지하기 때문에, CSS에서 width값을 지정하면 그 크기만큼 가로폭을 차지하게 된다 이때, margin에 auto를 지정하면 요소를 가운데 정렬할 수 있다 ✨ > 👇 Margin이 헷갈린다면? [Margin과 Paddin...
✅ Block Elements 문서의 틀(Frame) 가로폭을 자신이 100% 차지해 기본적으로 세로정렬처럼 보인다 width, height, margin, padding 속성을 모두 반영한다 ⭕️ 🙆♀️ ⭕️ * 대표적인 요소 * , , , ~ , , , , , ✅ Inline Elements 틀 안의 내용(Contents) 자기자신의 크기만큼 ...
✅ 이미지(Image) 📌 속성 src : source의 약자로 이미지 파일의 경로또는 url주소를 표시한다 alt : 이미지를 불러올 수 없을 때 대신 보여줄 텍스트(대체글)를 표시한다 >💡 이미지를 볼 수 없는 사용자들을 위한 설명문(descriptive text) >1. 시각 장애자인 경우 시각 장애가 심한 사용자들은 alt 텍스트(대체 텍스트)...
✅ 선택자 📌 기본 선택자 1. 전체 선택자 *(별표) : HTML문서 내의 모든 요소들을 선택한다 2. 태그 선택자 tag : 태그명을 가진 요소를 선택한다 3. id 선택자 #name : id명을 요소에 지정해 일치하는 요소를 선택한다 id명은 유일한 식별자로 중복이 불가하다 ❌ 🙅♀️ ❌ , border가 모두 더해진 값으로 계산된다 아래 예시는 width는 같지만, padding값의 유무로 크기가 다르게 보인다 디자인을 할때는 대략적인 크기만 작성했는데 실제 코딩으로 옮기게 되면 굉장히 귀찮아진...
✅ Box Model 이해하기 "상자모델", 디자인과 레이아웃에 대해 이야기할때 사용 기본적으로 모든 html요소를 감싸는 상자를 말한다 여백(padding, margin), 테두리(border), 실제 콘텐츠(content)로 구성된다 1. content : 텍스트나 이미지 등이 표시되는 내용 2. padding : content 안쪽 여백 3. bo...