💡 학습한 내용
덴마크 쇼핑몰 실습 https://www.helbak.com/
✅ 상단 영역 작업
✅ 메인영역작업
✅ 하단 영역 작업
✅ 기타 html,css 실무팁
✔️ defalt값
💨 아래와 같은 태그들은 기존 margin, padding값을 가지고 있는 것들이 많기 때문에 단축기(*)로 defaul값을 설정한다. < html, body, h1, h2, h3, p >* { margin: 0; padding: 0; }
💨 body태그의 전체영역을 개발자가 확인할 수 있기 때문에 default로 넣어주면 좋다.
html, body { width: 100%; height: 100%; }
✔️ 폰트의 굵기
▶ 폰트의 굵기는 100단위로 올라간다. (100~900)
h1 ,h2, h3, h4, h5, h6, p {
font-weight: 400;
}✔️ y축 중앙정렬 공식 (⭐️⭐️⭐️⭐️⭐️)
▶ top 값을 설정해야 하므로 position: relative으로 설정
position: relative;
top: 50%;
transform: translateY(-50%);✔️ position: absolute; 사용시 주의법
position: absolute;를 사용하면 width값을 정확하게 인식할 수 없으므로 width, 픽셀단위를 사용하여 공간의 크기를 명확하게 규정해야 한다.
✔️ #header .buttons (helbak 의 메뉴부분) 좌우배치 방법
💨 레이아웃 파트에서 배운 float, flex와 같은 css 속성들 외에도 창의적인 방법을 사용하여 좌우 배치를 할 수 있다.
#header .buttons { left:50% }
↓
left: 50%
top: 0;
✔️
#footer { position: relative; background-color: yellow; ▼ padding-bottom 66px를 설정해줬기 때문에 그 공간에 들어갈 수 있다.``` padding-bottom: 66px; } #footer .to-top-button { position: absolute; display: block; 💨 width: 66px; 💨 height: 66px; background-color: green; bottom: 0; left: 50%; margin-left: -33px; }▼ 공간을 만들어 주지 않으면 아래와 같이 침범하게 된다.
❗️❕ Tip! ❗️❕
태그들이 inline요소인지 block 요소인지 파악하고 있어야 어느 속성들을 기입해야 적용되는지 알 수 있다.
❗️ 실무 Tip!
① href의 속성값으로는 url주소, 다른 파일명, id속성값(class는 x)이 들어 갈 수 있다.
▷ 중복된 id 속성값을 사용할 수 없다. (같은 이름 사용 x)
② 특정 역할을 담당하는 class를 css에 만들어준 다음 필요할 시 html에 class으로 기입하는 방법
white-space: nowrap;: 줄바꿈을 하지 않고 한 줄로 출력할 수 있다.
overflow: hidden;: 정해진 공간을 벗어나는 글자가 표시되지 않게 한다.
text-overflow: ellipsis;: 공간을 벗어나는 글자를 말줄임 표시로 나타낸다.위와 같은 태그를 쓸때 마다 기입하는 것이 아닌 간단하게 적용할 수 있다.
- 새로운 클래스를 만들어 3가지 속성을 적용시킨다.
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
- 원하는 태그에 들어갈 class이름을 위에서 만든 class 이름으로 설정한다.
<p class="text-box ellipsis"> <h2 class="ellipsis">💨💨 이유 : 어떠한 역할을 담당하는 class를 미리 css에서 세팅한 다음 그 class를 html 문서안에다 추가하는 방식을 적용하면 유지 / 보수할 때 수월하다.
예시) CSS ▼ 개발자가 한눈에 알아 보기 쉽게 class 명을 설정하는 것이 좋다. (ex)p-b-100 = padding-bottom=100px) .m-b-100 { margin-bottom: 100px; }html <h1 class="ellipsis m-b-100">안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요</h1>
🙅♀️ 학습한 내용 중 어려웠던 점/ 해결방법
강의를 통해서 내가 어느 부분이 부족한지 알 수 있었다. position 부분에서는 개념적으로나 사용하는 형태에 대해서도 헷갈리는 부분들이 있고 아직 설계작업을 하는 부분에서도 부족한 것 같다. 내가 어느부분이 부족한지 알았으니 그 부분을 velog를 통해 복습하거나 구글링을 통해 추가정보를 공부하여 해결하였다.
🙋♀️ 학습소감
이전에는 키즈가오에 대해서 강의를 들었는데 오늘은 덴마크 쇼핑몰 실습을 진행했다. 요즘 강의 러닝타임이 평소보다 긴편이라 듣는데 시간이 오래 걸리긴 하지만 이때까지 배운 개념에 대해서 다시 되짚어 볼 수 있는 시간인 것 같다.
