본문 바로가기

728x90

side-project36

[HTML/CSS] 반응형 이미지 img 태그는 인라인 요소 💡 > border로 div 영역 안에 있는 이미지 태그의 원본 크기를 확인 할 수 있다. 💡 >img 가로 너비가 100%로 div부모의 너비 전체를 가지는 형태가 된다. 💡 > 이미지의 사이즈는 변하지 않고 padding을 내부 공간이 생기면서 div 부모 요소로부터 넘쳤다. 💡 > 상하 50px / 좌우 10% 여백 확보 ✔ > 여백을 3가지 지정한다면 위 / 좌우 / 아래 💡 > 패딩이 부여된다면 넘치거나 커지는데 그것을 막아주는 box-sizing 💡 > 부모(div)의 width를 조절해주면 이미지가 부모의 너비에 맞춰서 사이즈가 조절된다. 💡 > but, 원본 이미지 크기보다 작게 조절하면 더이상 줄지 않고 잘려나가는 현상이 일어나기도 한다. ✅ img 가로너비가 .. 2022. 5. 21.

[HTML/CSS] 9:16 비율의 동영상 iframe 삽입하기 Feature 영역의 독립적인 중앙정렬 Problem⭐❔ - FEATURE 영역은 .inner 클래스를 지정하지 않았다. 다른 section 요소들과 같은 라인으로 화면 중간 가운데 정렬이 아닌 독립적으로 중앙정렬을 해야하기에 따로 직접적으로 css를 지정해줬다. Solution ✅❕ inner 클래스를 적용하지 않았기에 padding-top: 66px; 여백을 부여했다. HTML 삽입 미리보기할 수 없는 소스 16 : 9 비율의 비디오, iframe HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1️⃣ height값은 세로 높이를 고정(fix)해버린다. 그래서 height값은 없애고 padding-top으로 높이를 조절할 것이다. 2️⃣ padding에 % 단위를 사용한.. 2022. 5. 13.

[HTML/CSS] 제목(h)과 설명(p)을 다루는 태그 🔥 problem 🔥 - 현재는 section / summary 부분에 제목(title)과 설명(description)을 다루는 텍스트로 h1 / p태그를 사용하지 않고 있다. 💡 solution 💡 - 기능적으로 제목을 의미하는 h태그로 바꿔준다. - h3태그에 특정한 제목 + p태그로 설명을 추가한다. - 기존 summary 영역 제목과 텍스트 How people build software Millions of developers use GitHub to build personal projects, support their businesses, and work together on open source technologies. - h2태그와 p태그로 수정 How people build software.. 2022. 4. 22.

[HTML/CSS] 영역 배치 및 flex 단축 속성 [ flex-basis ] // 기본값이라 생략되어 있는 상태 .section--visual .summary { /* 기본값 */ flex-basis: auto; } 🔥 problem 🔥 - summary 영역이 넓게 차지하는 바람에 form 양식 영역이 어그러진 상태 - summary 영역의 속성 flex-basis: auto; (기본값)을 가지고 있기 때문에 일어난 현상 💡 solution 💡 - flex-basis: 0; // summary 영역이 좁아진다. .section--visual .summary { flex-basis: 0; } [ 가변하는 영역 만들기] 🔥 problem 🔥 - .section--visual #sign-form 영역은 가로너비를 지정했다. - .section--visual.. 2022. 4. 19.

이전 1 2 3 4 ··· 9 다음

728x90

티스토리툴바