CSS는 무엇인가?

css

CSS란?

  • CSS stands for Cascading Style Sheets
    해석 : CSS는 Cascading Style Sheets의 약자입니다.
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
    해석 : CSS는 HTML 요소를 화면, 종이, 미디어에 표시하는 방법을 설명합니다.
    -> 쉽게 말해서 "HTML 태그를 이쁘게 꾸며주는 것"입니다.
  • 참고1 : 생활코딩
  • 참고2 : W3Schools

사용 예시

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	.test div{
		width:100px;
		height:100px;
		border:10px solid #f00;
		margin:10px;
		padding:10px;
		background:#000;
		color:#fff;
		font-size:20px;
		font-weight:bold;
		text-align:center;
		display:inline-block;
	}
</style>
</head>
<body>
<div class="test">
	<div>상자1</div>
	<div>상자2</div>
	<div>상자3</div>
	<div>상자4</div>
</div>
</body>
</html>
상자1
상자2
상자3
상자4

사용문법

  • 선택자 {속성:값;}
  • div {width:100px;}

자주 사용하는 CSS 속성들

  • width

    • 가로너비
    • width:200px;
    • 예시
  • height

    • 세로너비
    • height:200px;
    • 예시
  • margin

    • 바깥여백
    • margin:10px;
      상하좌우 10px
    • margin:10px 8px;
      상하 10px / 좌우 8px
    • margin:10px 8px 5px;
      상 10px / 좌우 8px / 하 5px
    • margin:10px 8px 5px 3px;
      상 10px / 우 8px / 하 5px / 좌 : 3px
    • 예시
  • padding

    • 안쪽여백
    • 사용법은 margin과 동일
    • 예시
  • border

    • 테두리
    • border:1px solid #000;
      상하좌우 1px의 검정색 직선
    • 예시
  • background

    • 배경
    • background:#000;
      검정색 배경
    • background:rgba(0,0,0,.5)
      50% 투명도의 검정색 배경
    • background:url(이미지 경로) no-repeat center center;
      배경 이미지를 반복없이 상하좌우 가운데로 표기
      left / right / top / bottom / center 혹은 px, % 등의 단위 사용
    • background:url(이미지 경로) repeat-x;
      이미지를 X축으로 반복
    • background:url(이미지 경로) repeat-x;
      이미지를 Y축으로 반복
    • 예시
  • color

    • 글자색
    • color:#000;
      글자색이 검정색
    • 예시
  • font-weight

    • 글자의 두께
    • font-weight:bold;
      두껍게
    • font-weight:normal;
      기본
    • 예시
  • font-size

    • 글자 크기
    • font-size:15px;
    • 예시
  • text-align

    • 정렬
    • text-align:center;
    • text-align:left;
    • text-align:right;
    • text-align:justify;
    • 예시
  • font-family

    • 글자체 (폰트 지정)
    • font-family:"돋움",Dotum,"맑은 고딕","Malgun Gothic",arial;
    • 돋움을 사용 가능하면 돋움 사용, 아니면 맑은고딕, 아니면 arial - - -
    • 예시
  • display

    • 태그의 레이아웃 조절
    • 예시1
    • 예시2
    • display:block;

      • 상자, 박스
      • 한 줄 차지
      • width, height, margin, padding 사용 가능
    • display:inline;

      • 글자
      • width, height, margin, padding 사용 불가능
    • inline-block

      • 글상자
      • 글자처럼 취급하는 상자
      • width, height, margin, padding 사용 가능
  • 위의 내용을 숙지했으면 다시 예시로( Click! )