2017-04-27-P

HTML로 캘린더를 만드는 과정

처음 body 부분에 48~95까지의 부분을 채워준다 이때 div로만 작성을해서 채워준다.

그다음 자신이 만들고자 하는 이미지 대로 채워 넣어준다.

첫번째로 8~16까지의 소스와 같이 작성을해서 float 으로 배치하고

테두리를 만들고 둥글기와 폰트를 정해서 만들어준다

그런다음 week 라는 클래스를 각 57,65 등등에 넣어준다음 week를 바꿀려고하는걸

26~28 소스와 같이 만들어준다 그러면 빨간색으로 나오고 칸이 바껴서 아래로 나오게 된다.

그런다음 title 이라는 클래스도 똑같이 만든후 요일에 적용을 시키고 18~24번줄과 같이

바꾸어 준다

그런다음 따로 SUN과 SAT 부분에 아이디를 넣고 그 값을 33번 34번줄과같이 해서 

배경색을 넣어준다

마지막으로 h1의 값을 36~42번과 같이 지정해주게 되면

이런 캘린더가 나오게 되는것이다.

배운 내용을 활용해서 약간에 홈페이지 같은 걸 만들어본다.

제일먼저 bootstrap 페이지에 들어가서 bootstrap 파일을 다운받고 압축을 풀어준후에

이런식으로 bootstrap/css/안에 넣어준다 그럼다음

코드를 이런식으로 작성해준다.

바디 부분에 w3school 에 가서 참고해서

29번과 31 32 35 36 44 100 109 110 부분을 먼저 작성을하고 레이아웃을 나눈후에

그 안에 글을 적고 style 에 맞춰서 효과를 주고 만들어 준다 여기서

xs 는 모바일 크기이고 뒤에 나오는 숫자값은 가중치 값이 된다.

text-decoration 은  href="">래드벨벳 의 밑줄을 없애준다. 25번 문은 커서가 가면 hover로 활성화가 되는 문장이다.