12강 : CSS 속성3

티스토리 뷰

Web/HTML & CSS

12강 : CSS 속성3

개발을해보자 2020. 3. 1. 15:15

12-1. font-family, font-size 속성

글꼴 및 폰트 사이즈 관련 속성이다.

font-family : 글꼴을 정해준다.

font-size : 폰트의 사이즈를 정해준다.

font-family는 여러개의 글꼴을 나열해주고 먼저 명시한 것부터 우선순위를 갖게 된다.

font-size는 앞에서도 많이 사용했던 속성이므로 생략한다.

12-2. font-style, font-weight, line-height 속성

font-style은 글자 모양을 적용하는 속성으로 주로 italic (기울임)을 많이 사용한다.

font-weight는 글자 굵기를 적용하는 속성으로 주로 bold (굵게)를 많이 사용한다.

line-height는 줄 높이를 정하는 속성이다. 1.0일때 위아랫줄이 딱 붙게 되고 커질수록 줄간격이 떨어지게 된다.

+α 로 알아가기 : a 태그의 밑줄 제거하기

a 태그의 속성으로 text-decoration: none; 을 주면

밑줄이 기본으로 되어있던 a 태그의 밑줄이 사라지게 된다.

12-3. text-align, text-decoration 속성

글자에 대한 정렬과 간단한 글꼴모양의 속성이다.

text-align: center를 통해 가운데 정렬을 해준다.

image에도 적용이 가능하고, text를 감싸는 태그에 적용해주면 된다.

text-decoration은 위에서 설명했으니 생략한다.

12-4. position 속성

중요!!

position 속성은 요소의 위치를 설정해주는 속성이다.

상황에 맞게 알맞은 속성을 부여하며 페이지를 꾸며나가면 된다.

position: absolute - 감싸고 있는 태그의 좌상단 기준으로 위치 설정(top, left에 값을 주어서 설정한다.)
position: fixed - 브라우저 영향 없이 항상 화면에 고정되어 있다. (스크롤해도 계속 같은 위치에 있다.)
position: static - default의 값 (div는 block type이므로 아래로 붙어서 나열된다.)
position: relative - 감싸고 있는 태그의 좌하단 기준(top, bottom, left, right에 값을 주어서 이용한다.)
relative와 absolute 같이 이용 - z-index값이 클수록 더 상단, 안쪽 요소에 absolute가 있으면 밖에 감싸고 있는 태그는 relative 속성을 주면 된다.

먼저 모든 태그들의 position은 static이 기본이다. block type이면 block type을 따르고 inline type이면 inline type을 따른다.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <style>
        div:nth-child(1) {
            width:100px; height:100px;
            background-color:red;
            position:static;
            top:0; left:0;
        }

        div:nth-child(2) {
            width:100px; height:100px;
            background-color:green;
            position:static;
            top:50px; left:50px;
        }

        div:nth-child(3) {
            width:100px; height:100px;
            background-color:blue;
            position:absolute;
            top:100px; left:100px;
        }
    </style>

</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

기본값에 약간의 margin이 들어가있기 때문에 빨간 박스와 초록 박스는 margin이 약간 들어가있는 상태고,

파란 박스는 position 속성이 absolute이므로 자신을 둘러싼 body 태그의 좌상단을 기준으로 설정된 만큼 떨어져 위치하게 된다.

margin의 차이 때문에 파란 박스가 옆의 박스들과 딱 붙어있지 않는 형태를 보인다.

다음으로 absolute와 fixed에 대해서 보자.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <style>
        div {
            width:100px; height:100px;
            opacity:0.7;
        }

       div:nth-child(1) {
           background-color:#ff0000;
           position:fixed;
           top:0;
           left:0;
       }

       div:nth-child(2) {
           background-color:#00ff00;
           position:absolute;
           top:50px;
           left:50px;
       }

       div:nth-child(3) {
           background-color:#0000ff;
           position:absolute;
           top:100px;
           left:100px;
       }

       #wrap {
           width:300px; height:300px;
           position:fixed;
           top:300px; left:300px;
           background-color:yellow;
           opacity:1.0;
       }

       #wrap .content {
           width:100px; height:100px;
           position:absolute;
           top:100px; left:100px;
           background-color:red;
           opacity:1.0;
       }

    </style>

</head>
<body>
    <div></div>
    <div></div>
    <div></div>

    <div id="wrap">
        <div class="content"></div>
    </div>

</body>
</html>

사진에서 확인하기는 힘들지만 가장 좌측 상단에 있는 빨간 박스와 우측 하단에 있는 노란 박스는 fixed 속성이 부여되어 있어서 스크롤 여부와 상관없이 항상 특정 위치에 고정되어 있다.

이외의 박스들은 absolute 속성이 부여되어 있는데 각각의 박스들을 둘러싼 태그의 좌측상단 기준으로 위치가 정해진다. 둘러싼 태그가 없을 시에는 body 태그를 기준으로 한다.

다음은 relative 속성에 대해 보자.

static일 때의 위치를 기준으로 움직인다.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <style>
        #red {
            width:100px; height:100px;
            background-color:red;
        }

        #yellow {
            width:400px; height:400px;
            background-color:yellow;
            position:relative;
            top:100px; left:100px;
        }

        #green {
            width:100px; height:100px;
            background-color:green;
            position:relative;
            top:0; left:100px;
        }

        #blue {
            width:100px; height:100px;
            background-color:blue;
            position:relative;
            top:100px; left:100px;
        }
    </style>

</head>
<body>
    <div id="red"></div>
    <div id="yellow">
        <div id="green"></div>
        <div id="blue"></div>
    </div>
</body>
</html>

노란 박스의 경우는 원래 위치가 빨간 박스의 밑에 붙어야 한다.

하지만 relative 속성을 부여하여 원래 들어가야하는 곳인 빨간 박스 좌하단을 기준으로 top, left 100px씩 떨어진 위치에 자리잡게 된다.

초록 박스와 파란 박스의 경우는 원래 같았으면 노란 박스 좌상단을 기준으로 아래로 붙어야 한다.

하지만 relative 속성을 부여하여 초록 박스의 경우는 left 100px만큼, 파란 박스의 경우는 top, left 각각 100px 씩 떨어지기 때문에 위 사진과 같이 자리를 잡게 된다.

마지막으로 relative 속성과 absolute 속성을 혼합하여 사용해보자.

안쪽 요소에 absolute가 있으면 이를 감싸고 있는 태그에는 relative 속성을 주면 된다.

또한, z-index값이 클수록 더 상단에 위치하게 된다.

z-index는 태그들이 겹칠 때 어떤 태그가 더 상단에 올지 설정해주는 속성이다. (기본값은 0, 커질수록 우선순위 높아진다.)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #contain {
            width:800px;
            margin:0 auto;
            border:1px solid #cccccc;
        }

        #header {
            height:50px;
            background-color:#cccccc;
        }

        #wrap {
            height:200px;
            position:relative;
        }
        #content1 {
            width:100px; height:100px;
            background-color:red;
            border:2px dashed green;
            position:absolute;
            top:10px; left:10px;
            z-index:20;
        }

        #content2 {
            width:100px; height:100px;
            background-color:yellow;
            border:2px dashed green;
            position:absolute;
            top:50px; left:50px;
            z-index:10;
        }

        #footer {
            height:50px;
            background-color:#cccccc;
        }
    </style>
</head>
<body>
    <div id="contain">
        <div id="header">HEADER</div>
        <div id="wrap">
            <div id="content1">content1</div>
            <div id="content2">content2</div>
        </div>
        <div id="footer">FOOTER</div>
    </div>
</body>
</html>

content1에 해당하는 빨간 박스의 z-index가 content2에 해당하는 노란 박스보다 크기 때문에 더 상단에 위치한다.

또한, absolute 속성을 부여받은 content1과 content2를 둘러싸는 wrap이라는 div에 relative 속성을 주고 있다.

출처

https://www.inflearn.com/course/html-css-%EA%B0%95%EC%A2%8C#

인프런 실전 HTML & CSS 강좌

'Web > HTML & CSS' 카테고리의 다른 글

23강 : CSS 변형 (0)	2020.03.01
13강 : CSS 속성4 (0)	2020.03.01
11강 : CSS 속성2 (0)	2020.03.01
10강 : CSS 속성1 (0)	2020.02.29
9강 : CSS 기본4 (0)	2020.02.29

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

글 보관함

웹개발 한 번 해보겠습니다..

티스토리 뷰