CSS의 기초!! 완전 쌩 기초!!!
CSS를 시작해 봅시당!!!
완전 기초 중에 쌩 기초!!! CSS를 알아보도록 할까나영 캬캬캬캬
CSS란 무엇일까요?!
CSS는 Cascading Style Sheets의 약어로 작성한 페이지의 내용이 어떻게 표현되었는지 서술하는 방법을 의미합니다.
쉽게 말해서 꾸미기라고 할수가 있다죠? html은 구조적인 부분으로 브라우저에 내장된 기본 스타일을 사용하여 보여지게 됩니다.
하지만.. 기본스타일은 재미가 없잖아요 ㅋㅋㅋㅋ
예뻐야 만든 보람도 있고 쓸모도 있을 것 같고 그러지 않나요? 저만 그런가여..??????응?????
무튼.. CSS는 웹페이지에 있는 요소가 어떻게 보여 져야 하는지 브라우저에게 알려주는 역할을 수행한다는 것입니다!!
|
|
2014/06/24 - [공부/html/css] - HTML 시작하기! 에 있던 예제에서 CSS를 추가해 보도록 할 겁니다!!!
아주아주아주아주아~~~~주 기본적인 스타일을 추가해 보도록 합시다!
스타일을 추가하기 위해서 새로운 태그(요소)인 <style>이 필요합니다. <style>의 요소는 html의 제목 안에 위치하게 됩니다.
제목 안의 위치라면 어디가 될까요??? 바로 <head>부분의 <title>이 끝나고 나서 그 다음에 들어오면 된다는 얘기!!
<style>도 태그이므로 종료태그가 있다는 것을 잊지 마세요!!!
<style>이라는 태그는 type이라는 속성을 필요로 합니다. 이 속성은 사용하는 스타일의 종류를 브라우저에게 알려주는 역할!!!
저는 CSS를 사용할 것이므로 type은 'text/css'라고 명시를 합니다!! 이건 고정이라네요?!
결론적으로 <style type="text/css"> </style>이 기본적인 틀이 되는 겁니다.
그렇다면 이제 간단한 문구를 만들어 보겠습니당!!
<style type=“text/css”>
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted red;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
<--! basic.html 코드 상동 -->
뭐가 뭔지 아시겠나요??! 전 첨에 저게 뭔가 했어요 ㅋㅋㅋㅋ 전 멍청한 녀자 였으니까영...캬캬캭
딱 보시다 싶이 CSS구문은 html구문과 완전히 다르다는 것을 느낄 수 있습니다..ㅜㅜ
결과화면을 보실까나영?!
CSS를 입히기 전 결과 화면과 완전히 달라졌음을 알 수 있습니다!
하나씩 살펴보면..
|
background-color: #d2b48c; <--! 바탕색을 황갈색으로 설정 --> margin-left: 20%; <--! 페이지마다 왼쪽 바깥 여백 20%로 설정 --> margin-right: 20%; <--! 페이지마다 오른쪽 바깥 여백 20%로 설정 --> border: 2px dotted red; <--! 본문 주위에 점선 형태의 빨간 경계선을 정의 --> padding: 10px 10px 10px 10px; <--! 페이지의 본문 주위에 안쪽 여백을 생성 --> font-family: sans-serif; <--! 텍스트를 사용하기 위해 폰트 정의 --> |
바탕색 설정시 저 알수 없는 번호는 색처럼 보이지 않지만 hex코드라 불리는 방법으로....
아직은 색 표현하는 법을 알기엔 이르다네요 호호호 (그래요.. 저도 몰라요..)
margin은 바깥 여백을 뜻하는데요.. 저 사진 상에서 대체 바깥여백이 어디 있는거야?? 라고 생각 되시죠..
익스에서는 잘 구분을 하지 못합니다. 그래서 크롬에서 확인시작!
오.. 익스보다 캡쳐화면이 깔끔한데요?!!? 앞으로 크롬에서 확인하고 올려야 겠습니다. .ㅋㅋㅋ
자 이제 보이시죠?! 양쪽 바깥쪽에 여백이 생긴 것을!!ㅋㅋ
또한 boder를 사용한 빨간색 점선으로 된 경계선도 확인 할 수 있었습니다! 익스에선 그냥 선으로 나오더라구요 ㅎㅎ
그리고 padding을 사용하여 안쪽 여백을 두었는데요.. ㅎㅎ 앞에 글씨 시작하는 부분에 살짝 여백이 생긴게 보이시나요?ㅋㅋ
직접 작성해서 보면 더 확실히 느낄 수 있답니다!!!
font는 여러개가 있겠지만 저 책에선 깨끗하게 보이기 위해서 저런 폰트를 사용했더라구요..? 하지만 전 느끼지 못했음..
나중에 더 이쁜 폰트를 사용해 보려고 합니다!!! ㅋㅋ
이렇게 CSS에 관한 완전 쌩 기초에 대해서도 포스팅이 끝이 났습니다!! 드디어 1장을 다 배웠다는거!!!
전 이거 금방 올리고 2장 공부하려고 했는데.. 어느새 1시간이 다 되었...........ㅠㅠ 낼부터 학교가서 자야되여ㅠㅠ
얼른 2장도 하고.. 3장도 해서.. 마스터 하고 시프네여!!! 저만 그런가요 ㅋㅋㅋㅋㅋㅋㅋ
뭐 아무튼.. 아무쪼록 여러분도 잘 배우셨음 좋겠네요 ㅋㅋㅋㅋㅋ
'공부 > html&css' 카테고리의 다른 글
| HTML 시작하기! (0) | 2014.06.24 |
|---|---|
| HTML 시작하기전에!! (0) | 2014.06.04 |
