해리의 데브로그

Web 04 - CSS의 속성(colors, Font-size, Box Model, Display, Visibility, Position, Backgrounds, Font)

17 Feb 2019 | Web HTML CSS

Colors

  • Color name
  • Color code
  • rgb
  • rgba
    • a(alpha)의 범위는 0.0~1.0 으로 값이 작아 질 수록, 색이 투명해짐.
<head>
    <style>
        /* 1. color name */
        h1 {color: red;}
        
        /* 2. color code */
        h2 {color: #0000ff;}
        
        /* 3. rgb() */
        h3 {color: rgb(0,255,0);}
        
        /* 4. rgba() */
        /* 4. a(alpha): 0.0 ~ 1.0 */
        p {color: rgba(255,0,0,0.5)}   
    </style>
</head>
<body>
    <h1>빨간색</h1>
    <h2>파란색</h2>
    <h3>초록색</h3>
    <p>흐릿한 빨간색(투명도)</p>
</body>

Font-sizes

  • 문서 전체의 단위 길이 적용
<head>
    <style>
        /* 단위 길이(font-size) */
        html {font-size: 10px;}
</head>
  • rem & em
    • 단위 길이를 다른 요소들과 비교하여 상대적으로 정함.
    • rem : Root Element (html)의 폰트 사이즈가 기준이 됨.
      • 1.2 rem ; 10 px(html) * 1.2 = 12 px
    • em : 상위 Element의 폰트 사이즈가 기준이 됨.
      • <li class="em"> 저는 1.2em입니다.</li> 에서, li < ul < body < head 순의 상위 Element 로 이동하여 기준 폰트사이즈 (html: 10px) 를 찾음.
      • 자손 선택자 ul & li (Ul의 자식 선택자)의 폰트 사이즈가 각각 1.2 em인 것을 알 수 있음.
      • 따라서, 최종적으로 10px(html) * 1.2(ul) * 1.2(ul안의 li) = 14.4 px
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* 단위 길이(font-size) */
        html {font-size: 10px;}
        
   		/* rem: html에 정의된 font-size에 비례 */
    	ol {font-size: 1.2rem;}
        /* 10px * 1.2 = 12px */
    
    	/* em: 자신의 상위 요소의 font-size에 비례 */
    	ul {font-size: 1.2em;}
    
        .em {font-size: 1.2em;}
        /* 10px(html) * 1.2(ul) * 1.2(ul li) = 14.4px */
     </style>
</head>

<body>
     <ol>
        <li>저는 1.2rem입니다.</li>
    </ol>
    <ul>
        <li class="em">저는 1.2em입니다.</li>
    </ul>  
</body>

https://www.w3schools.com/css/css_units.asp

  • vh(viewpoint height) & vw(viewpoint height)
    • 사용자가 보고있는 브라우져의 세로,가로 길이 (상대적인 값)
    • 브라우져의 크기를 의도적으로 수정할 경우, 폰트 사이즈의 크기가 자동으로 변경됨.
    • 1vh/vw: 100분의 1 값
      • 브라우저 전체 넓이값이 1000px 일 때, 1vw는 10px
      • 브라우저 전체 높이값이 900 px 일때, 1vh는 9px
<head>
    <style>
        .vh {font-size: 5vh;}
        .vw {font-size: 5vw;}
    </style>
</head>

<body>
    <span class="vh">5vh</span>
    <span class="vw">5vw</span>
</body>

Box Model

모든 HTML 요소들은 박스로 간주 할 수 있으며, CSS Box Model은 문서의 design과 layout을 일컫음.

기본 구성 요소 (참조: https://www.w3schools.com/css/css_boxmodel.asp)

  • Content
  • Padding
  • Margin
  • Border

box-sizing / width / height

  • box-sizing : 박스 크기의 기준을 설정할 수 있음. (기본: content-box )
    • content-box : 박스 크기의 기준이 cotent(내용)임
    • border-box : 박스 크기의 기준은 border이므로, padding 의 공간을 또한 포함함
  • width & height : 박스의 너비 & 높이
<head>
    <style>
        box {
            box-sizing: content-box;
            width: 100px;
            height: 100px;
         }      
    </style>
</head>

padding & margin

  • padding : border 의 안쪽 여백
  • margin : border의 바깥쪽 여백
    • padding: 25px 와 같이, 상/하/좌/우의 여백을 동시에 줄 수도 있으며,
    • padding-top: 25px 와 같이, 개별적으로 여백을 적용 할 수 있다.
      • cf) padding: 25px 20px 15px 10px 처럼, 연속적으로 각각의 여백을 한줄로 표현도 가능.
    • 순서는 위부터 시계 방향(위 / 오른쪽 / 아래 / 왼쪽)
<head>
    <style>
        box {
            /* 안쪽 여백 */
            /* padding: 25px */
            padding-top: 25px; 
            padding-right: 25px;
            padding-bottom: 25px;
            padding-left: 25px;
            /*margin: 25px 20px 15px 10px ; 바깥쪽 여백 */
            margin-top: 25px; 
            margin-right: 25px;
            margin-bottom: 25px;
            margin-left: 25px;
         }      
    </style>
</head>

border

  • border-width : 테두리의 두께
  • border-style : 테두리의 스타일
  • border-color : 테두리 색상
    • cf) border: 2px solid purple; 처럼 또한 연속적으로 테두리에 대한 설정을 할 수 있음
    • 순서는 두께 > 스타일 > 색상 순임.
  • border-radius : 테두리 모서리 둥글기 정도
<head>
    <style>
        box {
            
            /*border: 2px solid purple;*/            
            border-width: 2px;
            border-style: solid;
            border-color: purple;
            
            /* 테두리 모서리 둥글기 정도 */
            border-radius: 20px;            
         }      
    </style>
</head>

Display

Block

  • 기본적으로 full width available 을 차지함. (전체 한 라인)
  • 블록 레벨 속성은 항상 새로운 라인에서 시작함.
  • block 레벨 요소 내에 inline 레벨 요소를 포함 할 수 있음.
    • 예) div, h1~h6, p, ol, ul, li, table, form

Inline

  • 자기자신을 담고 있는 곳 까지만 차지함(as much width as necessary)
  • 새로운 라인에서 시작하지 않으며, 문장의 중간에 들어 갈수 수 있음.
  • width, height, margin(top, bottom) 사용 불가 (상,하 여백은 line-height로 지정함)
    • 예) span, a, strong, em, img, input

inline-block

  • block과 inline 레벨 요소의 특징을 모두 가짐
  • inline 레벨 요소 처럼 한줄에 표시 되면서, block에서의 width, height, margin(top, bottom) 속성을 모두 지정할 수 있음

None

  • 해당 요소를 화면에 표시 하지 않음(공간 조차 차지 하지 않음)

div 태그는 블록 레벨 속성을 갖고 있음. 따라서 컨텐츠 만큼만 디스플레이를 설정하기 위해서는 아래와 같이 display: inline 으로 의도적으로 변경을 해줘야 한다.

<head>
    <style>
        .box2 {
            display: inline;
            border: 2px solid red;
            background-color: gray;
            visibility: visible;
            opacity: 0.3;
        }
    </style>
</head>
<body>
    <div class="box2">
        이것은 박스 2 입니다.
    </div>
    
</body>

Visibility

  • Visibility & Opacity
    • Visibility: 박스를 보이게 하는 설정(기본값: visible)
    • 값을 hidden으로 적용하면 박스를 안보이게 설정 할 수 있음 (공간은 차지)
    • Opacity: 박스의 투명도. 범위는 0.0~1.0으로 작아질수록 투명해짐

Position

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

  • 종류: Static / absolute / relative / fixed

  • top / bottom / left / right 속성을 이용하여 위치 수정 가능

    예) top: 50px / left: 50px : 테두리 내 기준으로 위에서 부터 50px, 왼쪽에서 50px 이동

*각 박스의 위치가 겹치는 경우 z-index 속성을 이용하여 우선순위를 설정할 수 있음. static은 다른 박스와 상호작용을 못하기 때문에 z-index가 안먹힘.

Static (Default)

  • top / bottom / left/ right 속성등에 영향을 받지 않음
  • 위치는 페이지의 일반적인 흐름에 따라 결정됨. (CSS Position의 기본값)
.box-static {
    background-color: gray;
    border: 2px solid red;
    width: 100px;
    height: 100px;}

absolute

  • 좌표(절대값) 기준으로 화면 내 어디로든 자유롭게 이동 가능.
  • 이동할 경우, 기존 위치는 아애 비워져버리므로. static box가 있는 경우, 순차적으로 그자리를 차지해버림. (본가가 이사간다!)
.box-absolute {
    position: absolute;
    background: green;
    width: 100px;
    height: 100px;
    top: 50px;
    left: 50px;
    z-index: 1;}

relative

  • Normal position (기존 위치)를 기준으로 이동(상대적 이동)
  • 이동하여도, Normal position은 다른 content에 의해 차지되지 않음.
  • (본가는 그대로 있고, 자취방을 구한다는 개념!)
.box-relative {
    position: relative;
    background: blue;
    width: 100px;
    height: 100px;
    z-index:2;}

fixed

  • 스크롤 바를 내려도 고정적으로 보이는 부분.
  • 이동할 경우, 기존 위치는 아애 비워져버리므로. static box가 있는 경우, 순차적으로 그자리를 차지해버림. (본가가 이사간다!)
.box-fixed {
    position: fixed;
    background: pink;
    width: 100px;
    height: 100px;
    top: 50px;
    right: 50px;}

응용

  • position을 설정한 태그 안에 추가로 태그를 넣음으로써, 기준점(시작점)을 설정 할 수도 있음.
<body>
	<div class="small-box" id="green">
      <div class="small-box" id="purple"></div> 
        <!-- green 안에 purple -->
    </div>
    <div class="small-box" id="blue">
      <div class="small-box" id="orange"></div> 
        <!-- blue 안에 orange -->
	</div>
</body>

<--! CSS file -->
    
<style>
#purple {
  background-color: purple;
  /* 초록색 기준으로 100 100 만큼 떨어져 있음 */
  position: absolute;
  top: 100px;
  left: 100px;
}

#orange {
  background: orange;
  /* 파란색 기준으로 얼마나 떨어져있는가 */
  position: absolute;
  top: -100px;
  left: 100px;
}
</style>

Background

CSS background의 속성은 선택자의 배경 효과를 설정하는데 사용 The CSS background properties are used to define the background effects for elements.

  • background-color : 배경 색상 설정
  • background-image : 이미지 설정. 예) url(images/minsu.jpg);
  • background-position : 가로 세로 초점 이동 설정
    • 예) background-position: center center ​
  • background-size : 배경의 크기 설정
    • 직접 수치 입력 (예. 200px 200px)
    • contain : 이미지가 완전히 보이도록 배경 이미지 크기 조정
    • cover : 전체 컨테이너를 덮을 수 있도록 배경 이미지 크기 조정
  • background-repeat : 배경 이미지 반복 설정
    • no repeat: 반복하지 않음. (이미지는 1번만 표시)
    • repeat: 가로/세로로 반복. 적합하지 않을 시, 마지막 이미지가 잘림.
    • initial: 속성을 기본값으로 설정
  • background-attachment : 배경 이미지 고정 / 스크롤 여부 설정
    • scroll: 배경이미지가 페이지와 함께 스크롤됨 (기본값)
    • fixed: 배경이미지가 페이지와 함께 스크롤 되지 않음
div {
    height: 200px;
}

.background-color {
    background-color: blue;
}
.background-image {
    background-image: url(images/minsu.jpg);
    /* 가로,세로 초점 이동 */
    /*(left, right, top, bottom, center)*/
    background-position: center center; 
    /* contain & 200px 200px & cover */
    background-size: cover;
    background-repeat: no-repeat;
    /* fixed & scroll */
    background-attachment: fixed;
}

Font

  • font-size : font의 크기 설정
  • font-style : font의 스타일 설정
  • font-weight: font의 굵음의 정도 설정 (일반적으로 100~900 사이)
  • font-family : font 종류를 지정
    • 컴퓨터에 모든 폰트가 들어 있지 않으므로, font-name 중 원하는 폰트를 여러가지 나열하여, (font-stack) 마지막에 generic-family를 적어줌.
    • 이를 통해, 적어도 폰트가 없을 때, 끝에 있는 generic fa,ily에서비슷한 폰트를 브라우저가 찾아서 보여줌.
    • web-safe font 종류: verdana / georgia / times new roman / aria
    • 구글 폰트( https://fonts.google.com/ )를 통해서 다양한 폰트를 적용 할 수도 있음.
  • line-height : 줄 간격 설정
    • font 사이즈에 비례하여 상대적으로 설정하거나 (기준: font size 1)
    • 픽셀 크기로 설정 가능
  • letter-spacing : font의 장평 조절 (플러스로 가면, 장평이커지고 마이너스로 가면 장평이작아짐)
  • text-align : 정렬 위치 설정 (center, end, inherit)
.font {
    font-size: 40px;
    font-style: italic;
    font-weight: 700;
    font-family: 'Times New Roman', Times, serif
    line-height: 1.5;
    letter-spacing: 1px;
    text-align: center;
}

Related Posts

Comments