[배운내용]
덴마크쇼핑몰 'Helbak' 실습
-
적응형 웹사이트
기본 환경설정
반응형 웹사이트를 만들기 위해 미디어쿼리를 사용할 때는 viewport 메타코드를 디폴트 값으로 사용해주어야 한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">[ * ] : 모든 html태그에 명령코드를 적용시키는 선택자
font-weight : 100~900까지의 값을 입력할 수 있고, 값이 커질수록 글자가 굵어진다.
img{
vertical-align: middle;
}
이미지 하단의 미세한 공백을 없애주는 코드.
nav,ul은 블럭요소의 성격을 가지고 있음.
Y축 중앙정렬 공식~!
#header .buttons li .menu-button img{
position: relative;
height: 20px;
top: 50%;
transform: translateY(-50%);}
position:absolute;를 사용하면 width값을 정확하게 인식할 수 가 없다. 그러므로 %나 px를 사용해서 공간의 범위를 명확하게 규정해주어야한다.
좌우배치를 할때
보통은) flex나 float을 사용하는데
이 사이트에서는
left: 50%;
top: 0;
를 주었고, 이런식으로 창의적인 코드설정을 할 수 있다는 좋은 예시를 보여준다.
Main
Footer
#footer .right-method .payment-icon.one{
background-color: red;
}
이렇게 클래스를 붙여서 입력하게 되면 여러개의 payment-icon중에서 one을 선택한다. 라는 선택자이다. 중복된 클래스를 가진 경우에 사용할 수 있다.
익스플로러에서는 main태그가 인식이 안되기 때문에 role="main"을 입력해주어야한다 !
실무 TIP
1. ID
id는 이름이며, 하나의 속성값만 가질 수 있고, 여러개의 이름을 가질 수도 없다. 하나의 문서안에서 동일한 id가 있어서는 안된다.
- a태그의 href=""에는 3가지가 들어갈 수 있는데
① "http://~~" 형태의 웹 도메인주소
② "ex/page.html" 형태의 새로운 html파일의 경로와 확장자명
③ "#one" 형태의 id값 : 해당 id를 가진 지점으로 이동
이 때, id값을 여러개에 지정할 경우 a태그 클릭시 첫번째 지정한 지점으로 이동하게 되고 두번째부터는 기능을 상실하게 된다.
이러한 이유때문에 id값은 유일해야한다.
※ 이때 a태그안에 class값은 입력할 수 없다.
2. CLASS
예 ① 말줄임 표시하기
.text-box{
width: 200px;
height: 200px;
background-color: paleturquoise;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}
width,height,backgroung-color를 지정하여 공간을 만들어주고, 이 공간을 벗어났을 때 말줄임표시 … 와 함께 뒷내용이 화면에서 사라진다.
이런식으로 말줄임을 해야하는 경우가 많을 수가 있는데, 이때 해당 지점에 모두 위의 코드를 입력해준다면 쓸데없이 코드를 많이 쓰게되어 효율이 떨어진다.
이때는 css파일에 우선 설정을 해준 후, 해당 선택자를 필요한 html코드 안에 넣어주면된다.
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
예 ② 마진값 삽입하기
CSS
.m-b-20{ margin-bottom:20px;}
.m-b-50{ margin-bottom:50px;}
.m-b-100{ margin-bottom:100px;}
html
<h1 class=".m-b-100"> 제목 </h1>위와 같이 스타일을 먼저 지정해준 다음, html문서에서 적용해주면 코드의 길이도 줄이고 추후 관리에도 용이하다.
자주 사용하는 margin,padding값을 지정해주면 좋은데 이때 클래스명은 통상 아래와 같이 단축하여 지정한다.
- 마진 레프트 : .m-l-00
- 패딩 바텀 : .p-b-00
- 패딩 라이트 : .p-r-00
[어려웠던 점]
html문서에서 div, p, a, h1 등 어떤 적절한 태그를 써야할지 아직 감이 안오는 것같다. 수업을 할때도 강의 전 스스로 먼저 해보고 강사님과 비교해 보았는데, 틀리는 경우가 꽤 있었다.
[해결방법]
사실 더 많은 케이스를 만들어보고 연습해서 익숙해지는 방법 밖에는 없다고 생각한다. 지금까지 배운 것들을 한번더 복습하면서 혼자 여러가지 페이지 카피캣을 해봐야할 것 같다.
[학습소감]
키즈가오 페이지를 만들때는 상품을 소개하는 페이지이다보니 양도 많았고 이미지 파일이 다 있어서 하고나니 힘들었는데, 이번에는 짧기도해서 조금 나았던 것도 있었다. 그리고 키즈가오랑은 다르게 모바일 먼저하고, pc버전 미디어쿼리를 주었던 것 등 여러가지 경우를 시도해보아서 이전에 배운것들이 다시 떠올라서 복습이 되는 좋은 기회였다.
