CSS란? HTML에서 코딩과 style적용 코드를 분리해서
좀 더 용이하게 관리해주는 기능인데요.
Basic한 기능 몇가지에 대해 실습해보겠습니다!
우선, 꾸미려는 HTML파일이 있어야겠죠?
메모장으로도 만드실 수 있으나 전문 에디터를 사용하시는걸 권장합니다.
저는 Atom을 사용했습니다.
New File하신 뒤, 파일 이름 뒤에 ".html" 혹은 ".htm"을 추가하시면 html파일이 생성됩니다.
따라하기 쉬우시라고, 텍스트 파일로도 첨부하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>CSS 실습하기</title>
<link rel="stylesheet" type="text/css" href="css/2011103991.css" />
</head>
<body>
<h1>
<a href="http://blog.naver.com/01064132170">
범이 블로그
</a>
</h1>
<img src="이미지 주소">
<ul>
<li>학력사항</li>
<ul>
<li> 군자초등학교 졸업 </li>
<li> 군자중학교 졸업 </li>
<li> 시흥고등학교 졸업 </li>
<li> 경희대학교 재학 </li>
</ul>
<li> 인삿말:
<blockquote>
안녕하세요! 블로그를 찾아주신 여러분들!<br>
지금은 CSS에 관해 소개드리고 있습니다.<br>
항상 행복하세요 :)
</blockquote>
</li>
<li>유튜브 채널:
<a href="https://www.youtube.com/channel/UCWnXzQikhdXq2NNW_C0i4dA" target="blank">
개인 영상 모음
</a>
</li>
<li>
앨범
<ol>
<li><a href="https://www.instagram.com/justgoforit217/">인스타그램</a></li>
<li><a href="https://www.facebook.com/yongbum.kim2">페이스북</a></li>
</ol>
</li>
</ul>
</body>
</html>
이렇게 작성하시고 html파일을 실행시키면! 아래와 같은 화면을 웹 브라우저에서 확인할 수 있습니다.
음..그치만 뭔가 2% 부족한느낌?정도가 아니라
ㅋㅋ많이 휑하지요..
간단한 CSS문법을 통해 조금의 변화를 줘보겠습니다!
.css파일을 별도로 만드셔야합니다.
1. Background 이용
이렇게 3줄만 추가하셔도!
배경색이 바뀌어서 신선하네요, 이걸 응용해서 원하는 사진으로도 할 수 있습니다.
저는 아이스크림 사진으로 배경을 바꿔보겠습니다 ㅎㅎ
사진이 반복되는게 싫으시다면
background-repeat:no-repeat; 를 추가하시면 됩니다.
한 방향으로만 이미지를 반복하게 하고 싶으시면!
background-repeat:repeat-x;
background-repeat:repeat-y;
이런 코드를 추가해 주시면 됩니다.
'컴퓨터공학 > 웹프로그래밍(HTML, CSS, Javascript)' 카테고리의 다른 글
| [CSS]홈페이지를 stylish하게 꾸며보자!(Link, List, Border) (0) | 2017.07.05 |
|---|---|
| [CSS]홈페이지를 stylish하게 꾸며보자!(Text, Font) (0) | 2017.07.05 |
| PHP와 MySQL을 통한 Database(DB) 연동하기 (9) | 2017.07.05 |