<LINK>
a:link : 방문한적없는일반링크 
a:visited : 한번방문한적있는링크 
a:hover : 마우스가링크위에올라와있는경우 
a:active : 클릭된순간

<LIST>
ul : none, disc(까만 동그라미), circle(흰 동그라미), square
ol : decimal, upper-alpha, upper-roman, lower-alpha, lower-roman…

<BORDER> : 테두리 굵기
border-width : 굵기
border-style : 종류
border-color : 색
border : width style color; 이렇게 한번에 나열도 가능합니다.



※ 위 그림은, 경희대학교 컴퓨터공학과 신수용 교수님 수업자료에서 따왔습니다.



margin : 바깥여백
padding : 안 여백

'컴퓨터공학 > 웹프로그래밍(HTML, CSS, Javascript)' 카테고리의 다른 글

[CSS]홈페이지를 stylish하게 꾸며보자!(Text, Font)  (0) 2017.07.05
[CSS]홈페이지를 stylish하게 꾸며보자!(Background)  (0) 2017.07.05
PHP와 MySQL을 통한 Database(DB) 연동하기  (9) 2017.07.05

이번에 소개해 드릴 내용은 Text와 Font입니다!

1. TEXT
color: #FF4E00; 
글자 색깔을 지정할 수 있습니다! red, yellow, blue, green 이런 식으로 직접 입력해도
되지만, 색깔 표에서 볼 수 있는 #XXXXXX 형식도 지원합니다.

text-align: center, left, right, justify
글자 정렬에 관한 건데요! 가운데, 왼쪽, 오른쪽 그리고 양쪽 정렬에 대한 속성입니다.

text-decoration: none, overline, line-through, underline 
줄치기! 줄 없음, 글자 위에, 가운데에, 아래에 줄 치는 속성입니다.

text-transform: UPPERCASE, lowercase, Capitalize 
영어 문장에서 모두 대문자, 모두 소문자, 첫 글자만 대문자로 지정하는 속성입니다.

text-indent: 20px;
문장을 쓸 때, 들여 쓰기에 대한 속성입니다.

line-height: 300%;
문단이 있을 때, 줄 간격을 지정해주는 속성입니다.

이 속성들 중 몇 가지를 이용해보겠습니다!
저번 background 편에서 설명드렸던 html을 이용해서 css 파일에 코딩하겠습니다.




2. FONT
font-family: 폰트 이름 1, 폰트 이름 2, ...
적용하고 싶은 폰트 이름을 쓰는데 우선순위 별로 씁니다.
상대방의 PC에 폰트가 적용이 안될 수도 있으니.

font-style: normal, italic 
기울인 꼴로 쓰고 싶을 경우

font-size: 20pt
폰트의 크기를 지정해줍니다.

font-weight: normal, bold
폰트를 굵게 지정해주고 싶을 때!



이상! 글자 CSS에 관련된 포스팅이었습니다 :)


'컴퓨터공학 > 웹프로그래밍(HTML, CSS, Javascript)' 카테고리의 다른 글

[CSS]홈페이지를 stylish하게 꾸며보자!(Link, List, Border)  (0) 2017.07.05
[CSS]홈페이지를 stylish하게 꾸며보자!(Background)  (0) 2017.07.05
PHP와 MySQL을 통한 Database(DB) 연동하기  (9) 2017.07.05

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

BE THE FIRST PENGUIN

티스토리툴바