210716 개발일지
1) 학습한 내용
덴마크 쇼핑몰 실습 github
(미디어쿼리로 모바일 버전이 아닌 pc버전에 대한 디자인)
반응형 웹사이트 설정 + html, css 파일을 연동, 미디어쿼리를 사용할 수 있도록 아래 메타태그가 디폴트!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
* {
margin: 0;
padding: 0;
box-sizing: border-box; 공간크기 달라지는 것 방지 하기 위해 사용
} 젤 앞 *표시는 마진, 패딩 값을 가진 html 속성에 0을 적용 하는 것
html, body {
width: 100%;
height: 100%;
} body영역, 개발자가 확인 가능하므로 넣어주면 좋음, 웹브라우저의 사이즈에 맞게 html, body영역이 꽉차도록 설정 됨
img { vertical-align: middle; } : 이미지가 수직정렬->중앙정렬
h1, h2, h3, h4, h5, h5, p {
font-weight: 400; 폰트굵기는 100~900 100단위로 숫자가 클수록 굵음
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
vertical-align: middle;
}
span {
display: block;
}li태그의 공간의 크기를 nav가 인식 못해서 최종적으로 header의 크기가 h1 공간 크기 만큼만 인식된다는 것이 문제, 우린 헤더의 높이가 세 개의 메뉴 버튼이 높이까지 포함된 수치로 전환하고프면,
buttons 부분->
#header .buttons ul {
overflow: hidden; 자식 높이 값을 부모가 인식 가능. <ul>태그가 자식관계의 높이에 영향을 받기 위해 overflow: hidden으로 설정하는 것.
} nav는 결과적으로 65px 헤더는 65+65 130px 확보하게 됨-
text-align: center;는 inline, inline-block요소에만 적용됨
#header .buttons li .menu-button img { position: relative; height: 20px; top: 50%; transform: translateY(-50%); ->공간안에서 Y축 중앙정렬 됨.(실무많이사용) -
top: 50%; transform: translatetY(-50%);는 Y축 중앙정렬 공식
-
1em = 16px;
@media (min-width: 47em) { #header { position: fixed; width: 100%; height: 80px; top: 0; left: 0; z-index: 99999; ->스크롤 내려도 항상 젤 앞쪽, 젤위에 있어야 하니까 높은값 줌(fiexd, z-index) }
<main role="main" class="main-content"</main> main태그는 익스플로러에서 인식이 안되므로 <role> 속성을 추가해서 main을 같이 꼭 입력해야함!
먼저나온 3차원 형제, 레이어는 뒤쪽으로 들어가게 됨 padding-top을 사용해 공간사이의 공백을 키워 넣음으로서 레이어 겹치는 문제 해결
#footer .right-methods .payment-icon.one {
background-color: black;
}
띄워쓰기는 payment 안에 있는 자식인 "one"클래스를 선택
붙이면 여러개 payment 사이 아이콘 중 "one" 갖고 있는 class icon을 선택해라의 의미.
class를 "payment-icon one"으로 설정했지만, css에서 띄어쓰기는 다르게 인식 하므로 "payment-icon.one"으로 입력
#footer ul, #footer li {
display: inline-block;
vertical-align: middle;
} Y축 선 중앙으로 맞춰짐실무팁
id속성
1. 이름, 하나의 속성값만 들어가야함 여러개 넣을 수 없음!
2. 문서안에서 동일한 아이디가 있어선 안됨
3. href 속성값으로 다음이 들어갈 수 있다. (url주소, html파일문서, id속성값)
4. 만약 같은값 두 개 넣으면 가장 먼저 나오는 id로 이동 됨(but,잘 못 쓴게 되므로 사용하지 않기) 따라서 중복된 아이디 값이 없는지 확인후 id 만들어야함
- a태그에 결합, 속성값은 id만 됨, class되면 파일을 액세스 할수 없다며 에러뜸.
<말줄임표>
.text-box {
widows: 200px;
height: 200px;
background-color: yellow;
white-space: nowrap;} 원래 200pxx200px yellow부분인데 글이 많아서 벗어나서 나타남. 넘어갔을 때 줄바꿈 현상이 일어나는데, 줄바꿈 현상을 없애려면 white-space: nowrap; 사용->
한줄로만 나타나며 x축 스크롤도 발생하게 됨.
벗어나는 부분 감추고싶으면 overflow: hidden; 사용 그러나 뚝 짤림
말줄임표는 사용하고플 땐
.text-box {
widows: 200px;
height: 200px;
background-color: yellow;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}
사용함
위의 코드를 간소화 하려면 css에
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;} 만들어둔뒤 html파일에서 한줄로 만들고 싶은 태그에 class(="ellipsis")붙여서 적용하면 코드도 줄이고 효율적임. (아래예시)
<p class="text-box ellipsis">
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라만세
</p>
<h1 class="ellipsis">
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라만세
</h1>.m-b-10 {
margin-bottom: 10px;
}
.m-b-15 {
margin-bottom: 15px;
}
.m-b-20 {
margin-bottom: 20px;
}
.m-b-100 {
margin-bottom: 100px;
}
마진 바텀값을 css에 만들어놓고 html에서 위와 동일히 클래스로 사용하면 됨.
<h1 class="ellipsis m-b-100">
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라만세
</h1>장점: 문서만 보고 빠르게 알수있음
- .p-t/b/r/l-100 패딩값도 동일하게 사용 가능. 이러한 것들이 많이있음
2) 학습내용 중 어려웠던 점
display의 활용이 계속나와 이론적으로는 알고있으나 막상 바꿔가며 실습 해보니 어려웠다.
3) 해결방법
https://aboooks.tistory.com/85
정의를 다시한번 생각해보며 연습
4) 학습소감
키즈가오와 비슷하지만 pc, mobile 버전의 형식을 다르게 적용하는 게 색달랐다. 사이트마다 어디서 시작하느냐에 따라 코드의 큰 틀도 달라지는게 어려우면서 호기심이 생긴다.
