덴마크 쇼핑몰 'helbak' 의 카피캣을 했다. 저작권에 들어가는 내용을 제외한 기본적 틀을
placeholder image를 사용해서 완성했다.
1) 학습한 내용
덴마크 쇼핑몰 레이아웃 카피캣 작업
이 웹사이트는 자연스러운 반응형 웹사이트의 특징을 가졌다.
'*' {
margin: 0;
padding: 0;
}
모든 html태그의 마진과 패딩값을 각각 0을 적용하겠다는 의미로 해석할수있다
헷갈리는 부분 복습
Box-sizing: border-box
예를 들어 가로 900px 박스 사이즈를 지정했다고 할때
1px 전체 보더를 넣을경우 900px 짜리가 좌우로 1px씩 늘게된다.
가로로 900px 이 902px이상이 되는데
이 값이 900px에서 벗어나지 않도록 고정시킨다.
overflow-x: hidden;
나중에 사이트 안의 내용이 사이트의 크기를 벗어나
스크롤이 생길수있는것을 막을수있다
img{
vertical-align: middle;}
이미지 사이의 미세한 공간들을 제거해주겠다.
y축 중앙정렬 실무에서 자주사용되는 팁(공식)
position: relative;
top: 50%;
transform: translateY(-50%);
실무와 관련된 몇가지 팁
Id - 여러개의 별명이 들어갈수없다.
같은 문서안에서 동일한 id 가 존재해서는 안된다.
A href 와 #id 는 서로 상관관계를 갖고있으며
id는 항상 유일해야한다.
A href 는 class 안되고 id에 적용할수있따.
white-space: nowrap;글자나 어떠한 값을 적고 높이와 너비값에 영향을 받지않을때 사용됨
이때 넘어가는 글자는
Overflow: hidden;
글자가 더 남아있다는걸 말줄임표시로 표현하기위해서는
text-overflow: ellipsis;
하지만 모든 클래스명에 이러한 값이 중복적으로 들어가는 상황이 일어났을때 굉장히 번거롭고 반복적인 작업을 해야하는데
이때 반대로 css파일에 class집합을 만들어 놓고
하나의 집합을 여러개의 class에다가 적용을 하는것이다
그렇게 하면 다양한 class를 만들어서 각각 몇십 몇백개의 css코드를 적어야 할일이
하나의 css집합으로 class 명 뒤에 한번씩만 이어 붙여도 적용되는 것이다.
helbak 만들기
우선 처음으로 helbak은 '반응형 웹사이트' 이다.
사이트 방문자가 봤을때 자연스럽게 연출되는 효과를 보여준다.
이 사이트 또한 미디어 쿼리를 사용했는데, 이번 수업에선 레이아웃에 집중해 수업했다.
- pc 버전
- 모바일 버전
15일차 Github 실습내용
2) 학습내용 중 어려웠던 점
딱히 없었다. 다만 이해하는데는 어려움이 없었는데 만들어 보라고 하면 시간이 많이 걸릴거 같았다.
3) 해결방법
실천
4)학습소감
앞으로 더 열심히 하자!
