이진욱의코딩

css속성에 대해 알아봅시다. 본문

HTML

css속성에 대해 알아봅시다.

Crucifi 2019. 9. 27. 19:22

이번 시간에는 css의 여러 가지 속성에 대해 알아보도록 하겠습니다.

 

목차

 

1. 단위크기

2. 단위 색상

3. 단위 url

4. 박스

5. margin, padding

 

 

1. 단위 크기

 

일반적으로 css로 스타일을 줬을 때

기본적으로 설정된 h1태그의 폰트 사이즈는 32px이고, p태그의 폰트사이즈는 16px입니다.

 

h1{font-size: 32px;}
p{font-size: 16px;}

 

style태그에서 변화를 줬을 때 css는 부모 폰트의 크기를 기준으로 설정합니다. 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 기본설정된사이즈입니다.
        h1{font-size: 32px;}
        p{font-size: 16px;} */

        body{font-size: 40px;}
        h1{font-size: 32px;}
        p{font-size: 16px;}
        p:nth-of-type(2){font-size: 20px;}
        
        /* 부모폰트크기를 기준으로 설정한다. */
        p:nth-of-type(3){font-size: 100%;}
        p:nth-of-type(4){font-size: 2em;}
        /* html을 기준으로 한다. 예를들어 모바일같은.. */
        p:nth-of-type(5){font-size: 1rem;}


    </style>
</head>
<body>
    <div>
        <h1>Lorem, ipsum.</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
</body>
</html>

2. 단위 색상

 

우리가 앞서 백그라운드 컬러를 지정할 때는 

 

h1{ background-color:red;}
p { color:blue;}

이런 식으로 단색으로만 표현을 했다면 이제는 좀 더 세세하게 설정할 수 있습니다.

3 가지 색의 값을 따로 지정해서 연하게 또는 진하게 할 수도 있고 

color picker을 이용해서 정확한 색을 표현할 수도 있습니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h1{background-color:rgb(255, 150, 150)}
        h2{background-color: rgba(255, 150, 150, 0.5);
           color: rgb(39, 57, 59);
        }
        h3{background-color:#dbc51f;}
        /* color picker를 검색 */
        h4{background-color:hsl(185, 90%, 50%)}
        h5{background-color:hsla(185, 70%, 50%, 0.5) }

    </style>
</head>
<body>
    <h1>header - 1</h1>
    <h2>header - 2</h2>
    <h3>header - 3</h3>
    <h4>header - 4</h4>
    <h5>header - 5</h5>

</body>
</html>

 

3. 단위 url

 

쉽게 말해 body태그에 background에 이미지를 적용하는 방법입니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* body태그에 background-image 속성을 적용합니다.  */
        body{background-image: url(images/sunset.jpg)}
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit.</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</body>
</html>

 

4. 박스

 

앞서 포스팅했던 인라인 요소와 블락 요소에 대해서 좀 더 추가한 내용입니다.

인라인 요소는 자신이 적은 글자 이상의 넓이, 높이가 적용이 되지 않습니다. 인라인 요소를 블락 요소처럼 보이게 만들기 위해서는 display속성을 block으로 적용하는 것입니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{background-color: #64dd22; width: 500px; height: 300px;}
        span{background-color: #36c9c9; width: 500px; height: 300px; display: block;}
    </style>
</head>
<body>
    <div>블락 그룹태그.</div>
    <span>인라인 그룹태그</span>
</body>
</html>

 

5. margin, padding

 

margin과 padding속성은 각각 바깥쪽 여백, 안쪽 여백을 의미합니다.

width, height속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적습니다.

margin과 padding는 border을 경계로 나뉩니다.

 

 

방향마다 여백을 다르게 설정할 수 있습니다.

  • margin: 20px 같은 표현은 상하좌우 모두 20px을 의미합니다
  • margin: 30px 10px은 상하 30px, 좌우 10px을 의미합니다.
  • margin: 30px 10px 20px 50px은 위 30px, 오른쪽 10px, 아래 20px, 왼쪽 50px을 의미합니다.
  • margin: 30px 10px 40px은 위 30px, 좌우 10px, 아래 40px을 의미합니다.

즉 top을 기준으로 시계방향으로 회전하여 위-> 오른쪽-> 아래-> 왼쪽 순서로 설정합니다.

 

 

 

사용법 코드입니다.

 

#box{ margin: 10px; padding: 20px }

 

예제입니다.

 

<html>
<head>
<style>
	.box-container{
		display: inline-block;
		background-color: #d2f4ff;
		border: 2px solid #09c;
		margin: 5px 15px;
	}
	.box-container div{
		width: 120px;
		height: 80px;
		background-color: #fde6ff;
		border: 2px solid #90C;
		font-size: 15px;
	}
	#box1{ margin: 10px;  padding: 0; }
	#box2{ margin: 5px 25px; padding: 0; }
	#box3{ margin: 0;  padding: 10px 30px 5px; }
	#box4{ margin: 10px; padding: 10px 20px; }
	#box5{ margin: 10px 30px 0 50px; padding: 30px 0 }
</style>
</head>

<body>
	<div class="box-container">
		<div id="box1">m: 10<br>p: 0</div>
	</div>
	<div class="box-container">
		<div id="box2">m: 5 25<br>p: 0</div>
	</div>
	<div class="box-container">
		<div id="box3">m: 0<br>p: 10 30 5</div>
	</div>
	<div class="box-container">
		<div id="box4">m: 10<br>p: 10 20</div>
	</div>
	<div class="box-container">
		<div id="box5">m: 10 30 0 50<br>p: 30 0</div>
	</div>
</body>
</html>

 

m은 margin, p는 padding입니다.

 

'HTML' 카테고리의 다른 글

html의 테두리에 대해 알아봅시다.  (0) 2019.10.02
html의 box-sizing, display, visibility속성에 대해 알아봅시다.  (0) 2019.10.02
섹션(section)요소에 대해 알아봅시다.  (0) 2019.09.22
오디오, 비디오태그, 기타택스트관련태그, 특수기호에 대해 알아봅시다.  (0) 2019.09.19
폼(form)태그응용, (블락,인라인)요소, 이미지그룹화에 대해 알아봅시다.  (0) 2019.09.19
'HTML' Related Articles more