내용
컨텐츠가 중앙정렬되있는 모습
margin: 0 auto; < 중앙정렬 태그.
글자의 공백에 대한 태그: padding 이용. 8px+8px= 16px 글자와 글자사이에는 16px이라는 공백이 생기므로 li태그 안쪽에 margin-right : 16px기입.
#shop-header nav ul {
padding: 13px 0 8px 0; }
#shop-header nav ul li {
margin-right: 16px;}
li태그에서 글자 자체에 이미 margin을 적용했기 때문에 ul태그에는 left,right에 패딩을 적용할 필요가 없어서 0px이고 top,right는 패딩이 적용된 모습이다.
글자들을 x축정렬하고 싶을때는 flex 이용.
이렇게해서 border 색깔찾기!
.w-100 {
width:100%;
}
.h-100 {
height: 100%;
}
css디폴트값 지정해서 css 코드먼저 작성. 그 후에 html가서 동일한 코드를 class에 넣으면 적용완료.
#shop-main .list-item .category-wrap
overflow: hidden;
#shop-main .list-item .category-wrap .category-left {
float: left;
#shop-main .list-item .category-wrap .category-right {
float: right;
자식에 float쓴 경우, 이와 같이 부모에게 overflow: hidden 씀.
color: rgba(255, 255, 255, 0.46); 맨 끝에 0.46은 투명도를 뜻함. 앞에 세자리는 현재 검은색을 의미.
padding 값 확인!
span태그는 inline요소를 갖고있기 때문에, margin이 적용되지 않는다. 그래서 inline요소를 block 요소로 바꿔주기위해서는 display: inline-block 라는 태그를 사용한다.
부모에 입력한 코드는 자식에게도 영향을 주기 때문에, 계속 동일한 코드를 사용한다면 부모에 코드를 입력하면 코드를 간소화시킬 수 있음. ex_ text-align: center;
학습한 내용 중 어려웠던 점 또는 해결못한 것들
flex에서 제거하는 부분 왜 제거하는지 궁금했음!
해결방법 작성
질의응답에 질문 남겼음!
학습 소감
오늘도 무사히!
