[WEB]CSS: 기초 font, position, display 속성 등등

[WEB] CSS 

 <css의 크기단위>
   *퍼센트 단위: %
   ->기본 설정된 크기에서 상대적으로 크기를 지정
   ->참고로 100% 가 초기에 설정된 크기
   ->반응형으로 모양 달라진다.
   
   *배수 단위:em
   -1배 =1em =100%, 1.5배 =1.5em= 150%, 2배= 2em=200%
   -상대적으로 크기를 지정
   
   *픽셀 단위:px
   -절대적으로 크기를 지정.
   -p태그의 기본 font-size 속성:16px.

<style type="text/css">
        /*px(pixel)단위 지정*/
        p:nth-child(1) {font-size:8px;}
        p:nth-child(2) {font-size:16px;}
        p:nth-child(3) {font-size:24px;}
        p:nth-child(4) {font-size:32px;}
        p:nth-child(5) {font-size:40px;}
        /*배수단위:em*/
        p:nth-child(1) {font-size:0.5em;}
        p:nth-child(2) {font-size:0.6em;}
        p:nth-child(3) {font-size:0.7em;}
        p:nth-child(4) {font-size:0.8em;}
        p:nth-child(5) {font-size:0.9em;}
        /* % 단위 지정*/
        p:nth-child(1) {font-size:50%;}
        p:nth-child(2) {font-size:100%;}
        p:nth-child(3) {font-size:150%;}
        p:nth-child(4) {font-size:200%;}
        p:nth-child(5) {font-size:250%;}
    
    </style>

<박스 모델의 구성요소> 
    -padding : 박스 내부의 구성 내용(이미지, 텍스트 등)과 border사이의 공간
    -border: 외곽선 자체
    -margin: 외곽선과 다른 개체 사이의 공간

 <style type="text/css">
        .box01{
            width:170px;
            height:100px;
            border:10px solid blue;
            margin-bottom:30px;
            padding-top:30px; /*보더와 글자 구성내용 등 사이의공간*/
            padding-left:30px;
          
            /*padding값은 전체 크기에 합산됩니다.따라서 .box의 실제크기는 width=200px,height=130px로 봐야합니다.*/
        }
    </style>

<배경 속성> 
 - 특정 태그의 배경 이미지 또는 색상을 지정하는 스타일 속성.
 - 종류
  1) background-image 속성 
            - 배경에 넣을 그림을 지정하는 스타일 속성.
   - 속성에는 URL 단위 또는 그레이디언트를 입력.
  2) background-size 속성
            - 그림 크기를 조절할 때 사용하는 스타일 속성.
   - CSS3에서 추가된 기능.
   - 키워드 : contain/cover
    . contain:너비를 100%로 지정한 것과 같은 효과.
    . cover: 높이를 100%로 지정한 것과 같은 효과. 
        3) background-repeat 속성
      - repeat:이미지가 패턴을 이룸.
   - 키워드:no-repeat/repeat/repeat-x/repeat-y/round/space
   - repeat-x : x축 방향으로 이미지가 반복.
   - repeat-y : y축 방향으로 이미지가 반복.
        4) background-attachment 속성
      - 배경 이미지를 어떠한 방식으로 화면에 붙일 것인지를 지정하는 스타일  속성.
      - 키워드:fixed/scroll
   - 속성의 기본 키워드 : scroll
   - fixed : 스크롤을 이동해도 배경이미지 고정.
  5) background-position 속성
      - background-position:x축 위치;
   - background-position: x축 위치 y축 위치;

 <style type="text/css">
        body{margin:10px; padding:0px; border:1px solid black;}
        body *{margin:10px; padding:0px; border:1px solid black;}
        body{
        background-image:url(images/BackgroundFront.png);
      
    
        background-size:cover;
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position : 0 0px;}
    </style>

<Position>

* position 속성 : 웹 문서 안의 요소들을 자유자재로 배치해 주는 속성(양/음수 모두 사용 가능).
 - HTML 태그의 위치 설정 방법을 변경할 때 사용.
 
 - 상대적 위치 좌표 사용 시 키워드
  . static : 요소를 문서의 흐름에 맞추어 배치. (top / right / bottom / left 이용 배치 변경 불가). float 속성을 이용해 좌우로 배치할 수 있음.
  . relative : 현재 위치를 기준으로 위치 지정. 이전 요소에 자연스럽게 연결해 배치. 위치를 지정할 수 있음.
   
    - 절대적 위치 좌표 사용 시 키워드
  . absolute : body 또는 컨테이닝 박스를 기준으로 위치를 지정할 수 있음. 원하는 위치를 지정해 배치. 요소를 감싸는 <div> 태그를 만들고 position을 relative로지 정해 놓고 사용해야 됨.
  . fixed : 스크린을 기준으로 위치 고정. 지정한 위치에 고정해 배치. 화면에서 요소가 잘릴 수도 있음.
* z-index 속성 : default 값 : auto
 - HTML 페이지의 뒤에 입력한 태그가 상위에 위치하는 순서를 변경 시 사용.
 
 - position 속성인 relative, absolute가 적용된 상태에서 적용해야 됨.
 
* overflow 속성
 - 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할지 지정하는 속성.
 - 키워드
  . hidden : 영역을 벗어나는 부분을 보이지 않게 만듦.
  . scroll : 영역을 벗어나는 부분을 스크롤로 만듦.
  . auto : 영역을 벗어날 때 스크롤바 생기고, 벗어나지 않을 때 스크롤바 숨겨짐.

<style type="text/css">
        .box1{
            width:100px;
            background:blue; 
            padding:20px; 
            color:white;
            font-weight:bold;
            float:left;
        }
        /* static : 별도의 position 속성지정 없이 사용하면 상대적 위치 및 static 으로 인식되어 사용됩니다 */
        .box2{
            width:300px;
            background:red;
            padding:20px;
            color:white;
            font-weight:bold;
            float:left; 
            }
            /*left:-20px; static 은 left로 조정이 되지 않습니다*/
        .temp {
            clear:both;
            height:50px; 
        } /* 현재태그에 사용된 float 값 left와 right 를 해제하는 속성입니다.*/
       
        .box3{ 
            width:100px;
            background:yellow;
            padding:20px;
            float:left;
        }
        
        .box4{
            
            position:relative;
            left:-50px;
            top:30px;
            width:300px;
            background:green;
            padding:20px;
            float:left;
            color:white;
        }
        .box0{
            position:relative;
            background:yellow;
            width: 300px;
            float:left;
        }
        .total{
            background-color: aqua;
            width: 100%;
            height: 100px;
            
        }
       
        #wrap {
            position:relative;
            width:300px;
            height:300px;
            border:1px solid black;
            overflow : scroll;
            background: white;
            z-index:1; 
        }
        .box5{
            position:absolute;
            width:50px;
            height:50px;
        }
     #abs1{top:0;left:0;background: red;}
     #abs2{top:50px;left:50px;background: blue;}
     #abs3{top:100px;left:100px;background:red;}
     #abs4{top:150px;left:150px;background:blue;}
     #abs5{top:200px;left:200px;background:red;}
     #abs6{top:250px;left:250px;background:blue;}
     #abs7{top:300px;left:300px;background:red;}
       
        #fixed{position:fixed; top:1px; left:5px; width:100px; height:100px;background:silver; z-index:10;}
    </style>

* 가시 속성
- 태그가 화면에 보이는 방식을 지정하는 속성.
- display 속성
 . none : 태그를 화면에서 보이지 않게 만듦.
 . block:태그를 block 형식으로 지정. width/height/margin 속성을 적용할 수 있음.
 . inline:태그를 inline 형식으로 지정. width/height/margin 속성이 적용되지 않음.
 . inline-block:태그를 inline-block 형식으로 지정. width/height 속성을 적용할 수 있음. margin 속성이 div 태그의 상하좌우 지정됨.

 

  * 폰트 속성 :글자와 관련된 스타일 속성 
   1. font-size속성
   -글자의 크기를 지정하는 스타일 속성. 참고) h1태그:32px, p태그:16px
   2. font-family 속성
   -폰트를 지정하는 스타일 속성
   -일반적을 한 단어로 이루어진 폰트는 따옴표를 사용하지 않음. 하지만 두 단어 이상으로 이루어진 단어는 따옴표를 반드시 적용
   3. font-style 속성
   -폰트의 기울기 지정하는 스타일 속성. 키워드: italic 등
   4. font-weight속성
   -폰트 두께를 지정하는 스타일 속성.
   -키워드:700/800/900/bold..
   -일반 폰트 두께:400, 두꺼운 폰트 두께:700
   -두께를 지원하지 않는 폰트는 font-weight 속성을 사용해 두께를 조정할 수 없다.
   5. line-height(줄 높이) 속성
   -글자의 높이를 지정, 글자를 수직 중앙 정렬할 때 사용. div height와 같은 값을 주면 가운데 정렬이 됨!
   6. text-alingn 속성: 글자의 정렬과 관련된 스타일 속성. 왼쪽, 오른쪽, 가운데 정렬에 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .font_arial{font-family: Arial,sans-serif;}
         .font_roman{font-family: 'Times New Roman',serif;}
         .font_roman{font-family: 굴림;}
        
        .font_big{font-size:2pm;}
        .font_italic{font-style:italic;}
        .font_bold{font-weight:bold;}
        
        a{font-weight: bold; text-decoration: none; color:white;}
/*  글자크기는 굵게 text-decoration: none;텍스트의 꾸밈 없음, 밑줄등의 스타일을 다 제거해줌.      */
/*sans-serif 대체 폰트 넣기 만약없다면        */
        .button{
            width:170px; height:80px; background: red; border:10px solid white; text-align:center; line-height:80px  font-size:200%;box-shadow: 5px 5px 5px #888888;
            
            text-shadow: 2px 2px 2px #333333; border-radius: 30px; color:white; font-weight: bold;
        
        } 
/*      그림자 효과 box-shadow: 5px 5px 5px; 16진수 */
/*        박스 쉐도우: 박의에 그림자 효과 넣기 첫번째값:좌우 그림자 크기, 두번째 값:상하 그림자 크기, 세번째 값: 번짐의 정도, 네번쨰 값: 그림자의 색깔  , 쉐도우 효과는 박스 말고 text에도 같은 방법으러 넣을 수 있습니다.
        
        */
        
        input[type=button]{ width:170px; height:80px; background: red; border:10px solid white; text-align:center;  font-size:200%;box-shadow: 5px 5px 5px #888888;
            
            text-shadow: 2px 2px 2px #333333; border-radius: 30px; color:white; font-weight: bold;}
    </style>
</head>
<body>
   <h1 class="font_arial">test</h1>
    <p class="font_roman">test</p>
    <h1 class="font_gulim">test</h1>
    <p class="font_italic font_big font_bold">test</p>
<!--css로 버튼생성-->
<div class="button"><a href="#">click</a></div>
<br/>
<hr />
<input type="button" value="click"/>
</body>
</html>