오봉이와 함께하는 개발 블로그

CSS 속성 본문

FE/CSS

CSS 속성

오봉봉이 2021. 12. 3. 18:02
728x90

FrontEnd_day2 정리 (2021.12.03 금요일)

CSS속성

  • 텍스트속성
  • 배경 색상 / 이미지 관련 속성
  • 테두리 속성
  • 여백 속성
  • display 속성 : inline / block / inline-block
  • float 속성
  • 목록 관련 속성
  • 위치 관련 속성
  • 겹침 (레이어)
  • overflow
  • visibility / opacity
  • 그림자

텍스트 속성

  • font-family : "굴림", "맑은 고딕"; /* 1순위 2순위, ... */
  • font-size : 40px;
  • color : blue; /* 글자색 */
  • font-style : italic;
  • font-weight : bold; /* 굵게 */
  • text-decoration : underline;
  • letter-spacing : 3px; /* 글자 사이 간격 */
  • word-spacing : 5px; /” 단어 사이 간격 */
  • line-height:10px; /* 줄 간격 */
  • text-align : center;
  • text-shadow : 2px 2px 2px black; /*(가로 세로 크기 색상) */

배경 색

  • background-color : #00ff00;
  • background-color : #333;
  • background-color : rgb(0,255,0);
  • background-color : green;

배경 이미지 / 반복

  • background-image : url(back.png);
  • background-repeat : repeat;
  • background-repeat : no-repeat;
  • background-repeat : repeat-x;
  • background-repeat : repeat-y;

테두리 속성

  • border:solid 1px red;
  • border-style : solid;
  • border-width : 3px; /* thin medium thick */
  • border-left : dotted;
  • border-right : double;
  • border-bottom : dashed;
  • border-top : solid;
  • border-color : red:;
  • border-radius : 10px; /* 모서리 둥글게 */
  • border-bottom-right-radius : 50px;

여백 속성

display 속성

  • display 속성이 없으면 block이 기본 값이 된다.
  • block
    • 행으로 배치
    • 옆으로 나란히 배치 안 됨
    • 여백 있음

  • inline
    • 옆으로 나란히 배치
      • 여백 없이 내용물 만큼만 공간 차지

  • inline-block
    • 인라인, 블록의 성격 모두 포함
    • 옆으로 나란히 배치되면서 여백도 있음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .greenbox {
            /* display속성이 없으면 block이 디폴트(행으로 배치, 여백 있음) */
            /* display: block;  디폴트 */
            /* display: inline; 옆으로 배치, 내용만큼만 공간 차지 */
            display: inline-block; /* 옆으로 배치, 여백 있음 */
            width: 150px;
            height: 75px;
            margin: 10px;
            border: solid 3px #73AD21;
        }
    </style>
</head>
<body>
    <h2>dispaly 속성 (block/inline/inline-block)</h2>

    <div class="greenbox">박스 1</div>
    <div class="greenbox">박스 2</div>
    <div class="greenbox">박스 3</div>
    <div class="greenbox">박스 4</div>
</body>
</html>

float 속성

  • 해당 요소를 떠 있게 만든 속성
  • 기본 레이아웃 흐름에서 벗어나 왼쪽이나, 오른쪽으로 이동하는 것을 의미
  • left : 왼쪽에 배치
  • right : 오른쪽에 배치
<style>
        .greenbox {
            /* display속성이 없으면 block이 디폴트(행으로 배치, 여백 있음) */
            /* display: block;  디폴트 */
            /* display: inline; 옆으로 배치, 내용만큼만 공간 차지 */
            /* display: inline-block; 옆으로 배치, 여백 있음 */
            float: right;
            width: 150px;
            height: 75px;
            margin: 10px;
            border: solid 3px #73AD21;
        }
    </style>

목록 관련 속성

/*
...
*/
 <style type="text/css"> 
    /* ul{list-style-type: none;} */
    ul li {display: inline;}
    </style>
</head>
<body>
    <ul>
        <li>봄</li>
        <li>여름</li>
        <li>가을</li>
        <li>겨울</li>
    </ul>
</body>
</html>

위치 관련 속성

  • position 속성

  • static

    • 디폴트
    • 다른 요소와 겹치지 않게 배치
    • 위치를 지정하지 않으면 static 적용

  • relative

    • static의 원래 위치를 기준으로 위치 계산

  • absolute

    • 가장 가까운 상위 요소(부모)를 기준으로 배치
    • 상위 요소가 static인 경우에는 브라우저 화면 기준

    • 상위 요소가 static이 아닌 경우 부모를 기준으로

    • 정리
      • div를 parent내에 위치시키기 위해서는 parent의 position을 설정(absolute or relative 상관 없음)
      • absolute과 relative의 차이는 약간의 여백
        • 문서 전체에서 margin을 0px로 설정하면 여백이 사라짐.
          • body{margin:0;} 또는 {margin:0;}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #parent {
            /* 위치 지정하지 않음 */
            position: absolute;
            top: 0px;
            left: 0px;
            width: 200px;
            height: 300px;
            border: solid 5px #000000;
        }
        #boxA, #boxB, #boxC {
            width: 80px;
            height: 80px;
        }
        #boxA {background-color: #ff0000;}
        #boxB {background-color: #00ff00;}
        #boxC {background-color: #fff000;}

        #boxB {
            /* relative : static에 해당되는 원래 위치를 기준으로
            20, 30 만큼 이동 */
        /* position: relative;  */
        /* absolute : 상위 요소 위치 지정 안했기 때문에 브라우저 기준으로 20, 30만큼 이동 */
        position: absolute;
        top: 20px;
        left:30px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="boxA">A</div>
        <div id="boxB">B</div>
        <div id="boxC">C</div>
    </div>
</body>
</html>
  • fixed
    • 브라우저 화면을 기준으로 고정 위치에 배치
    • 스크롤 시에도 고정되어 있음.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #fixedBox {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: blue;
            top: 50px;
            left: 50px;

        }
    </style>
</head>
<body>
    <div id="fixedBox"></div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    문서 끝
</body>
</html>

겹침(레이어) 표현 속성

  • z-index 속성
    • 요소들이 겹칠 때 순서 지정
    • 나중에 배치하는 것이 위에 놓임
    • z-index 값이 클수록 위에 놓임

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #outBox {
            margin: 0 auto; /* 브라우저 화면의 가운데 정렬 */
            width: 1020px;
            position: relative;/* absolute인 경우 가운데 정렬 안 됨 */
        }
        #box1{
            position: absolute; /* 부모 박스 기준으로 배치 */
            left: 25px;
            top: 181px;
            z-index: 1;
        }
        #box2{
            position: absolute; /* 부모 박스 기준으로 배치 */
            left: 187px;
            top: 155px;
            z-index: 2;
        }
        #box3{
            position: absolute; /* 부모 박스 기준으로 배치 */
            left: 369px;
            top: 129px;
            z-index: 3;
        }
        #box4{
            position: absolute; /* 부모 박스 기준으로 배치 */
            left: 603px;
            top: 155px;
            z-index: 4;
        }
        #box5{
            position: absolute; /* 부모 박스 기준으로 배치 */
            left: 795px;
            top: 181px;
            z-index: 5;
        }
    </style>
</head>
<body>
    <div id="outBox">
        <div id="box1"><img src="image/img1.png"></div>
        <div id="box2"><img src="image/img2.png"></div>
        <div id="box3"><img src="image/img3.png"></div>
        <div id="box4"><img src="image/img4.png"></div>
        <div id="box5"><img src="image/img5.png"></div>
    </div>
</body>
</html>

Overflow

  • 자식 요소가 부모 요소의 범위를 벗어났을 때
  • 어떻게 처리할 것인지 지정
  • hidden : 부모 영역을 벗어나는 부분은 보이지 않게 처리
  • scroll : 스크롤바 표시 (가로 / 세로)
  • auto : 자동으로 필요한 부분에만 스크롤바 표시
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 175px;
            border: 1px black;
            /* overflow: hidden;
            overflow: scroll;
            overflow: auto; */
        }
    </style>
</head>
<body>
    <div>
        <img src="image/fashion1.png">
        <img src="image/fashion2.png">
        <img src="image/fashion3.png">
    </div>
</body>
</html>

투명도 / 가시성

  • 투명도
    • opacity
      • 0 ~ 1 사이의 값 지정
      • 0 = 투명
      • 1 = 불투명
      • 0.5 = 반투명
  • 가시성
    • visibility
      • hidden = 숨김
      • visible = 보임
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 마우스 올렸을 때 */
        #f1:hover {opacity: 0.5;}
        /* 마우스 클릭했을 때 */
        #f1:active {opacity: 1;}
        /* 마우스 클릭했을 때 */
        #f2:active {visibility: hidden;}
    </style>
</head>
<body>
    <img id="f1" src="image/fashion1.png">
    <img id="f2" src="image/fashion2.png">
</body>
</html>

그림자 효과

  • box-shadow
  • none : 그림자 없음
  • x-position : 가로 위치에 그림자 표시(양수-오른쪽, 음수-왼쪽)
  • y-position : 세로 위치에 그림자 표시(양수-아래쪽, 음수-위쪽)
  • blur : 흐릿하게 표시 값이 클수록 더 흐림
  • color : 그림자 색상
  • inset : 그림자를 요소의 안쪽에 표시
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.polaroid { 
            width: 300px;
            height: 300px;
            background: white;
            box-shadow: 10px 4px 8px 0 rgba(0, 0, 0, 0.3);
            margin-bottom: 15px;
        }
        div.container {
            text-align: center;
            padding: 5px 5px;

        }
        img {
            width: 100%;
            height: 230px;
        }
    </style>
</head>
<body>
    <div class="polaroid">
        <img src="image/pic1.jpg">
        <div class="container">
            <p>카드놀이 하는 사람들</p>
        </div>
    </div>

    <div class="polaroid">
        <img src="image/pic2.jpg">
        <div class="container">
            <p>길가의 집</p>
        </div>
    </div>
</body>
</html>
728x90
저작자표시

'FE > CSS' 카테고리의 다른 글

CSS - 반응형 웹  (0) 2021.12.06
CSS 예제  (0) 2021.12.06
외부 CSS 파일 HTML에 적용  (0) 2021.12.03
CSS 선택자  (0) 2021.12.03
CSS 개요  (0) 2021.12.03
'FE/CSS' Related Articles more
Comments