✔ TODAY
네이버 쇼핑페이지 제작 실습 중 상단~리스트 일부영역을 했다. 이 번 수업에는 구조에 집중해서 강의를 들었다.
✔ 학습한 내용
shop - header
- body에 id를 부여하여 해당문서에만 별도의 배경색을 지정할 수 있다. ( 여러 html문서에 하나의 css를 사용하는 경우)
shop - main
- 2개의 클래스를 넣어서 활용하는 법
<div class="list_wrap">
<div class="list_item">
<div class="categroy-wrap shop-border">
shop-border는 테두리를 넣을 때 사용한다.
#shop_main .list_item{
width: 308px;
#shop_main .list_item .category-wrap .category-left{
float: left;
width: 124px;
height: 100%
#shop_main .list_item .category-wrap .category-right{
float: right;
width: 182px;
height: 100%;
.shop-border{
border: solid 1px #ced2d7;
}-
category left와 right의 합이 306인 이유는 양쪽 볼더 값(1px+1px)을 더하면 308이기 때문이다.
-
볼더 값을 무시하고 넣으면 레이어가 어긋나게 된다.
div를 볼때는 설계도면를 보는 것과 같다고 보면 된다.
-
a태그에 display ;block 속성넣기.
여백에도 전체 활용할 수 있게 된다. -
span태그는 inline요소라서 margin를 사용할 수 가 없다.
사용하기 위해서는 display : inline-block 요소를 넣어준다.
#shop_main .list_item .category-wrap .category-right-top .category-info .headline{
display: inline-block;
font-size: 12px;
border: solid 1px #00ab33;
color: #00ab33;
margin-bottom: 7px;
}- 이미지정렬
#shop_main .list_item .category-wrap .category-right-top img{
margin: 0 auto;
margin-left: -70px;
}가능은 하지만, margin-left 값을 세세하게 조정해야된다.(볼더값등 도 고려대상)
#shop_main .list_item .category-wrap .category-right-top .img{
text-align: center;
}안됨
💥기본!! 💥✔
text-align는 텍스트를 정렬방향을 정하는 속성.
1. block요소에만 text-align 속성을 적용할 수 있다는 점
2. 정렬되는 것은 block안에 있는 inline요소가 정렬되는 점
#shop_main .list_item .category-wrap .category-right-top .img-wrap{
text-align: center;
}💖해당 이미지를 서랍에 넣어야 하는 이유?
text-align: cetner를 적용하시기 위해서는 부모 태그가 block 요소여야함. 그래야 그에 속한 inline 요소가 정렬이 된다.
-
같은 부모 밑이 자식에서 같은 속성을 부여하는 경우.
부모에게 부여하면, 자식들에게 넣을 필요가 없다. 즉,코드 분량을 줄일 수 있다. -
width: auto;
안의 컨테츠로 위드값을 대처
글자가 길어지면 위드값이 계속 늘어나기때문에, max-width(최대값)을 설정한다.
#shop_main .list_item .category-wrap .category-right-bottem .tag-wrap .tag{
display: inline-block;
width: auto;
max-width: 76px;
height: 24px;
background-color: #e8eef4;
margin: 6px 1px 0 1px;
padding: 0 5px;
line-height: 26px;
font-size: 12px;
color: #666;
vertical-align: top;
}
💀tag부분에서 일부 테그의 글자가 영역을 벗어나고+열이 바꾸어 나타났다.
💊max-width의 값을 1 증가해서 해결함.
- vertical-align: top;의 이유를 잘 모르겠음
적용을 안시키거나 다른 속성값을 넣어도 동일하게 출력이 됨.💊vertical-align는 inline 또는 inline-block 요소를 수직정렬할때 사용되는 속성.
가로의 수직 정렬임으로 한 줄의 정렬이라고 보면 되다.
<div class="list_wrap">
<div class="list_item">
<div class="category-wrap w-100 h-100 shop-border">
.W-100{width: 100%;}
.h-100{height: 100%;}- css에서 만든 클래스 속성을 html에 적용시키는 방법
<div class="list_item banner ">
<img src="http://via.placeholder.com/150" >
</div>- 위의 방법으로 list_item banner에서 img를 100%채우는 방식을 적용해 보았다.
div class="list_item banner 에 w-100 h-100에 넣어도 이미지가 풀로 체워지지는 않는다.maybe- w-100, h-100는 공간을 설정하는 것으로, 하위의 이미지에 적용하는 것은 아니다.(이미지의 고정값을 이미 가지고 있기때문)
<div class="list_item banner ">
<img src="http://via.placeholder.com/150" class="w-100 h-100" >
이미지에 클래스를 만들어서 넣었으나 원하는 비율이 나오지 않는다....
💥추가 학습이 필요함..
#shop_main .list_item.banner img{
width: 100%;
height: 100%;}위의 방법으로 css에 속성을 넣어서 해결
✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들
- 블록요소와 인라인요소의 개념이 부족해서 관련 속성값에 대한 활용이해도가 떨어졌다.
- 이미지에 대해 추가 학습이 필요했다.
- 각 속성들간의 관계에 대한 학습이 필요하다.
✔ 해결방법작성
- 완성본 코드와 동일함에도 해결이 나오지 않는 것은 구글 개발자도구로 통하여 문제의 속성을 찾을 수 있었다.(그리고 값을 수정하여 해결했다.)
- 학습도중 필요한 블록과 인라인요소에 관한 개념은 구글링을 통해 보다 더 잘 알 수 있었다.
--
학습소감
실습전 학습했던 개념들을 너무 쉽게 넘어간것 같다... 주말에는 기본 개념에 대해 공부해야 될 것 같다 ㅜㅜㅜ
