HTML/CSS

✅ Box Model 이해하기 "상자모델", 디자인과 레이아웃에 대해 이야기할때 사용 기본적으로 모든 html요소를 감싸는 상자를 말한다 여백(padding, margin), 테두리(border), 실제 콘텐츠(content)로 구성된다 1. content : 텍스트나 이미지 등이 표시되는 내용 2. padding : content 안쪽 여백 3. bo...

✅ Box-sizing 이전에 공부했던 box model에 의하면 요소의 전체너비는 width를 포함한 양쪽 여백(margin, padding), border가 모두 더해진 값으로 계산된다 아래 예시는 width는 같지만, padding값의 유무로 크기가 다르게 보인다 디자인을 할때는 대략적인 크기만 작성했는데 실제 코딩으로 옮기게 되면 굉장히 귀찮아진...

✅ 선택자 📌 기본 선택자 1. 전체 선택자 *(별표) : HTML문서 내의 모든 요소들을 선택한다 2. 태그 선택자 tag : 태그명을 가진 요소를 선택한다 3. id 선택자 #name : id명을 요소에 지정해 일치하는 요소를 선택한다 id명은 유일한 식별자로 중복이 불가하다 ❌ 🙅‍♀️ ❌ ![](https://velog.velcdn....

✅ 이미지(Image) 📌 속성 src : source의 약자로 이미지 파일의 경로또는 url주소를 표시한다 alt : 이미지를 불러올 수 없을 때 대신 보여줄 텍스트(대체글)를 표시한다 >💡 이미지를 볼 수 없는 사용자들을 위한 설명문(descriptive text) >1. 시각 장애자인 경우 시각 장애가 심한 사용자들은 alt 텍스트(대체 텍스트)...

✅ Block Elements 문서의 틀(Frame) 가로폭을 자신이 100% 차지해 기본적으로 세로정렬처럼 보인다 width, height, margin, padding 속성을 모두 반영한다 ⭕️ 🙆‍♀️ ⭕️ * 대표적인 요소 * , , , ~ , , , , , ✅ Inline Elements 틀 안의 내용(Contents) 자기자신의 크기만큼 ...

👇 복습하고 넘어가기 Block과 Inline ✅ Margin auto 기본적으로 block요소는 자기자신이 가로폭을 100%차지하기 때문에, CSS에서 width값을 지정하면 그 크기만큼 가로폭을 차지하게 된다 이때, margin에 auto를 지정하면 요소를 가운데 정렬할 수 있다 ✨ > 👇 Margin이 헷갈린다면? [Margin과 Paddin...

✅ Flexbox 이전의 웹 페이지의 레이아웃은 CSS display, float, position과 같은 속성을 사용해 구현했지만, 이 속성들은 구현 방법이 복잡하고 표현할 수 있는 레이아웃에 한계가 있다 flexbox는 이전 레이아웃 구현방식의 단점을 보완한 방식으로 화면의 크기가 동적으로 변할때에도 요소의 크기와 순서를 ✨유연하게 배치✨할 수 있다...

👇 복습하고 넘어가기 * "이미지와 배경" * > #### 💡 웹페이지에 이미지를 추가하는 2가지 방법 * HTML 📖 * 태그로 이미지 넣기 -포털사이트에서 이미지 검색에 노출이 필요한 경우 -웹페이지에서 중요한 역할을 하는 경우 ✨ 이미지가 로드 되지 않았을때, alt 속성 안의 값으로 대체 표현됨(background-image는 ...