HTML5와 CSS3를 이용한 간단한 Web페이지 만들기[초기화 코드] -part2-

전 시간에 이어서 할게요

전 시간에는 레이아웃을 행 영역으로 분리를 하고 그 분리한 행 영역의 내부 영역을 또 분리 해 주었어요

이번에는 음..그냥 따라와요ㅋㅋㅋ

먼저 각 부분을 쪼개어서 설명을 할거에요 

WHY?? 공부하는 학생이니까 ㅋㅋㅋ

실제로는 이렇게 style태그를 여러개 만들어서 쪼개지 않는다고 합니다.

그러면 따라와요

이렇게 페이지를 스타일 태그를 이용하여 먼저 쪼개어 줍니다.

이제 본격적으로 들어가기 전에 웹 페이지를 초기화를 가장 먼저 해준다음에 들어갈 거에요

예전에 포스팅했던  CSS3 기본 선택자 -part1-에서 언급한것처럼

HTML태그들은 브라우저에서 설정된 기본 스타일 값을 가지고 있습니다.

그래서! 이런 기본 스타일 값을 없애주어야 하기 때문에 초기화를 가장 먼저 하는 것 입니다.

[해석]

"여기에서 사용된 선택자는 전체 선택자입니다.

전체 선택자를 사용한다는 의미는 HTML태그 전부를 선택하여 그 태그들의 속성들을 설정을 해 주는 것 입니다.

단!!! 이 설정한 값들은 언제든지 변경이 가능합니다."

"전체 선택자를 사용해서 margin:0 과 padding:0 이라는 내용이 사용되어져 있는데요

다시 복습하는 의미로 정리를 해보겠습니다.

margin -> 안쪽 여백

padding -> 밭깥쪽 여백

즉, 이 내용에서는 안쪽 여백과 밭깥쪽 여백을 전부 다 0으로 초기화 해주겠다는 뜻 입니다.

그림으로 설명 드리자면

이제 margin 과 padding가 어느 영역을 담당하고 있는지 아시겠나요? ㅎㅎ

해석하기 전에 하나만 개념정리 하고 갈게요

font-family은 폰트의 속성을 지정하는 스타일 속성 입니다.

[해석]

"body태그에 있는 모든 폰트는 'Times New Roman'로 설정을 할게

근데 만약 사용저 웹상에서 Times New Roman폰트가 존재하지 않는다면 serif(명조체)로 보이도록 하자"

라는 뜻 입니다 참..쉽죠잉?

[해석]

list-style:none; 을 적용하기 전에는 이렇게 이런 스타일로 출력이 됩니다.

그치만 list-style:none를 적용하면 이처럼 리스트 스타일이 없음으로 설정이 되어서

이렇게 출력이 됩니다.

해석

"a태그에 있는 글자의 데코레이션은 없음으로 선택해줄게"

해석

"이미지를 올릴때 테두리를 없음으로 설정을 해줄게"

※img 파일을 a태그 내부의 img태그를 사용할때 img에 기본적으로 테투리가 생성이 됩니다.

이 테투리를 border:0; 을 해주므로서 없애준것입니다.

이번 -part2-에서 완성됭 코드

[참고] 전 세계적으로 초기화 코드를 많이 사용하는 홈페이지 사이트

1. http://meyerweb.com/eric/tools/css/reset/

2. http://html5doctor.com/html-5-reset-stylesheet/

3. http://yuilibrary.com/yui/docs/cssreset/

원하는 reset code의 홈페이지에서 코드를 복사하고 HTML 페이지에 붙여넣기 하면 됩니다.

초기화 코드는 모두 비슷하므로 아무거나 사용해도 되요