반응형 웹-3일차

학습한 내용

실습 1. full screen

background에서 주석과 같이 하나하나 -을 주고 지정해줄 수도 있지만, background:~~ 로 한 번에 작성할 수도 있다.
하지만, background-size는 따로 작성해주어야 한다.

position과 translate를 이용하여 중앙에 배치 적용

html파일에서 대문자 및 소문자를 작성함으로 써 적용할 수도 있지만,
uppercase - 대문자 lowercase - 소문자
capitalize - 첫 글자 대문자로 이용할 수 있다.

미디어쿼리를 이용하여 700px이하에서는 배경 이미지와, h1의 폰트 사이즈를 줄여보기로 하였다.

다음과 같이 잘 적용되는 것을 확인할 수 있다.

실습2. 2단 블로그 작성
먼저 필요한 style.css, 웹 폰트, 파비콘 적용을 해준다.

header영역 작성

큰 기준으로는 div영역 안에 section영역과 2단으로 나누어질 aside영역으로 구별한다.
다음 section영역 안 각 항목이 들어갈 article영역을 작성해준다.

여기서 blockquote는 인용구를 작성할 때 사용한다.
다음으로 aside에 배치될 div영역 3개로 나누어 작성한다.

form태그에서 따로 제출하는 것이아니라 action은 빼주었다.
마지막으로 footer영역을 작성함으로서 html파일을 완성해준다.

다음으로 css파일이다.

전체 태그를 이용하여 리셋을 할 수도 있지만, 처리 속도가 느리다는 단점이 있기에 각 태그들을 지정해서 리셋을 해준다.

해더 영역에 들어갈 h1, p태그들을 스타일 적용해준다.

title의 사선 모양을 넣기 위해 linear-gradient를 이용하였다.
border-radius에서 / 뒷 부분은 y축에 해당하는 영역이다.

article영역도 스타일 적용해주고 목록 ul ol li등을 꾸며준다.

다음으로 인용문 스타일 적용을 해준다.

웹 페이지에서 확인해 보면
먼저 header영역

다음으로 linear-gradient이용하여 사선을 나타낸 부분

다음으로 section안 article 영역들

학습한 내용 중 어려웠던 점 또는 해결못한 것들

section, article, aside 등의 영역을 바로바로 나누는게 어렵다.
내일 할 내용은, 2단으로 나누어질 aside와 footer영역 css적용 및 미디어 쿼리를 사용하여 2단으로 나누어 보기.

해결방법 작성

영역 나누기는 페이지를 많이 뜯어보는 것이 중요한 것 같다. 실제 페이지들을 보면서 따라 만들어 보거나 개발도구를 이용해 영역을 파악해야 한다.

학습 소감

오늘은 새로운 기능보다는 이때까지 했던 내용들을 이용하여 css적용하는 것이라 크게 어렵지는 않았다. 하지만,페이지 영역을 바로바로 나누어 div적용하는 것이 쉽지는 않았다. 거의 모든 웹 사이트들이 참조 페이지이므로 평소에 보면서 한 번씩 뜯어봐야 겠다.