매일 조금씩

10/29 - CSS 본문

빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정

10/29 - CSS

mezo 2020. 10. 29. 19:29
728x90
반응형

 

  • IP번호 127.0.0.1 : 네트워크만 있다면 내걸 내가 테스트할 수 있는 ip. 다른 컴퓨터에서 안열림
  • 내  IP번호 192.168.0.XXX : 내가 ROOT 폴더 안에 개발한게 다른 컴퓨터에서 열림

 

웹 서버 구동 항상 먼저 해라! 

그러면 html을 보여줄수 잇는 웹 서버가 시작된다!

 

이화면 나오면 웹 서버 잘 실행되고 있는거

 

 

 

 

 CSS(Cascading Style Sheet) 

  • html 구조표현 
  • css 디자인
  • javascript 기능

F12 : 개발자도구 

www.csszengarden.com  (같은 html로 여러 css로 표현해놓은 곳)

 

css는 "어느위치"에 "디자인 뭐"를줄건지 이 두가지를 생각하는 것이다.

 

이제까진 파일을 먼저 만들고 위치를 정했지만

이젠 위치를 정하고 들어가서 파일을 만든다.

VS Code > File > Open file > ROOT > css 오픈

 

ex01.html로 파일 생성

 

 

style을 주는 방법은 여러가지가 있다.

 

  •  <body>에 주기 (직접쓰는 방법)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"  />
    </head>
    <!-- inline style -->
    <body style="background-color: green;">

    </body>
</html>

 

  •  <head> 에 주기
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css">
        body {background-color:blue;}
    </style>
</head>
<body></body>
</html>

 

 

  •  css 파일을 따로 만들어서 적용하기
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css">
        /*body {background-color:blue;} */
    </style>
    <link rel="stylesheet" type="text/css" href="./default.css" />
</head>
<body></body>
</html>

 

 

 

 

 

 

 Selector 

tag selector

tag 를 중심으로 선택할때 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css">
    /* tag selector 
        background : 배경
        foreground : 전경(글자색) : color
    */
    p   {color:#ff00ff;} /* 16진수로 써도 상관없다 */
    div {color:blue;}
    </style>
</head>
<body>
    <p>Hello CSS</p>
    <div>Hello CSS</div>
    <p>Hello CSS</p>
    <div>Hello CSS</div>
    <p>Hello CSS</p>
    <div>Hello CSS</div>
</body>
</html>

 

 

class selector

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css">
    /* class selector */
    .p1 { color:red;}
    .p2 { color:blue;}
    .p3 { color:yellow;}
    .p4 { color:green;}

    </style>
</head>
<body>
    <p class="p1">Hello CSS</p>
    <div class="p1">Hello CSS</div>
    <p class="p2">Hello CSS</p>
    <div class="p2">Hello CSS</div>
    <p class="p3">Hello CSS</p>
    <div class="p4">Hello CSS</div>
</body>
</html>

<style>에 이걸 추가하면

 p   {background-color: purple;}

 

덮어씌워진다.

 

 

 

id selector

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css">
    /* class selector */
        .c1 {background-color: purple;}
        #i1  {color:red;}
        #i2  {color:blue;}
    </style>
</head>
<body>
    <p id="i1" class="c1">Hello CSS</p>
    <div id="i2" class="c1">Hello CSS</div>
    <p id="i3">Hello CSS</p>
    <div id="i4">Hello CSS</div>
    <p id="i5">Hello CSS</p>
    <div id="i6">Hello CSS</div>
</body>
</html>

 

all selector

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css">
    /* class selector */
        *    {color:red;}
    </style>
</head>
<body>
    <p>Hello CSS</p>
    <div>Hello CSS</div>
    <p>Hello CSS</p>
    <div>Hello CSS</div>
    <p>Hello CSS</p>
    <div>Hello CSS</div>
</body>
</html>

 

 

'F12'눌러서 개발자 도구로 css 수정해서 테스트 해볼 수 있다. 

실제 코드가 바뀌는 건 아니다.

 

 

group selector

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css">
        p, div  {color:blue;}
    </style>
</head>
<body>
    <p>Hello CSS</p>
    <div>Hello CSS</div>
    <p>Hello CSS</p>
    <div>Hello CSS</div>
    <p>Hello CSS</p>
    <div>Hello CSS</div>
</body>
</html>

 

 

 

 

 

 

 Combination 

CSS Combinators

  • div > p  

자식 ( div 속의 직속 p를 가리킴)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
        /* 자식 (div 속에 지명된 거)*/   
        div > p{background-color: red;}
        /* 후손 (div 속에꺼 다) */
        /* div p{background-color: red;} */
        /* 아우 (div랑 같은 계층 바로 밑에 꺼 하나)*/
        /* div + p{background-color: red;} */
        /* 아우 (div랑 같은 계층 바로 밑에 꺼 전부다)*/
        /* div ~ p{background-color: red;} */
    </style>
</head>
<body>
    <p> Hello CSS1</p>
    <div>
        <p>Hello CSS2</p>
        <span>
            <p>Hello CSS3</p>
        </span>
        <p>Hello CSS4</p>
    </div>
    <p>Hello CSS5</p>
    <p>Hello CSS6</p>
</body>
</html>

 

  • div  p 

후손 (div 속 p 전부 다)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
        /* 자식 (div 속 직속 p)*/   
        /* div > p{background-color: red;}*/
        /* 후손 (div 속에 p 전부 다) */
         div p{background-color: red;} 
        /* 아우 (div랑 같은 계층 바로 밑에 꺼 하나)*/
        /* div + p{background-color: red;} */
        /* 아우 (div랑 같은 계층 바로 밑에 꺼 전부다)*/
        /* div ~ p{background-color: red;} */
    </style>
</head>
<body>
    <p> Hello CSS1</p>
    <div>
        <p>Hello CSS2</p>
        <span>
            <p>Hello CSS3</p>
        </span>
        <p>Hello CSS4</p>
    </div>
    <p>Hello CSS5</p>
    <p>Hello CSS6</p>
</body>
</html>

 

 

  • div + p 

아우 (div랑 같은 계층 바로 밑에 p 하나)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
        /* 자식 (div 속 직속 p)*/   
        /* div > p{background-color: red;}*/
        /* 후손 (div 속에 p 전부 다) */
        /* div p{background-color: red;} */
        /* 아우 (div랑 같은 계층 바로 밑에 꺼 하나)*/
         div + p{background-color: red;} 
        /* 아우 (div랑 같은 계층 바로 밑에 꺼 전부다)*/
        /* div ~ p{background-color: red;} */
    </style>
</head>
<body>
    <p> Hello CSS1</p>
    <div>
        <p>Hello CSS2</p>
        <span>
            <p>Hello CSS3</p>
        </span>
        <p>Hello CSS4</p>
    </div>
    <p>Hello CSS5</p>
    <p>Hello CSS6</p>
</body>
</html>

 

 

  • div ~ p

아우들 (div랑 같은 계층 밑에 꺼 전부다)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
        /* 자식 (div 속 직속 p)*/   
        /* div > p{background-color: red;}*/
        /* 후손 (div 속에 p 전부 다) */
        /* div p{background-color: red;} */
        /* 아우 (div랑 같은 계층 바로 밑에 꺼 하나)*/
        /* div + p{background-color: red;} */
        /* 아우 (div랑 같은 계층 밑에 꺼 전부다)*/
         div ~ p{background-color: red;} 
    </style>
</head>
<body>
    <p> Hello CSS1</p>
    <div>
        <p>Hello CSS2</p>
        <span>
            <p>Hello CSS3</p>
        </span>
        <p>Hello CSS4</p>
    </div>
    <p>Hello CSS5</p>
    <p>Hello CSS6</p>
</body>
</html>

 

 

 

 

 

 

 Pseudo 

 Pseudo Class

: <- pseudo class 라고 한다.

링크일때, 방문상태 확인.

내 흔적을 확인할 수 있다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
       /* uninvisited link */
       a:link { background-color: #ff0000;}
       /* visited link */
       a:visited { background-color: #00ff00;}
       /* mouse over link */
       a:hover{ background-color: #ff00ff;}
       /* selected link */
       a:active { background-color: #0000ff;}
    </style>
</head>
<body>
    <a href="https://www.naver.com">네이버 바로가기</a>
</body>
</html>

 

  • 방문 전 

:link

 

  • 방문 후 

:visited

 

  • 마우스 올렸을 때

:hover

 

  • 클릭할 때

:active

 

 

 

 Pseudo Class - :first-child

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
        p:first-child {
            color : blue;
        }
    </style>
</head>
<body>
    <p>This is some text.</p>
    <p>This is some text.</p>
    <p><b>Note:</b>For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>
    
</body>
</html>

첫번째 <p>에만 적용된다.

 

 

 

 

 Pseudo Elemet 

::  <-이걸  pseudo element 라고 한다.

background 하고 다 나열해도 되고, background-color이런걸로 다 따로 줘도 됨.

 

  • ::first-line

첫째 줄만 color 적용

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
         div::first-line {color:red;} 
    </style>
</head>
<body>
    <div>
    Notice the double colon notation - ::first-line versus :first-line

    The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

    The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.

    For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.
	</div>
</body>
</html>

 

 

  • ::first-letter

첫번째 글자만 color 적용

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
        /* div::first-line {color:red;} */
        div::first-letter {color:red;}
        
    </style>
</head>
<body>
    
    <div>
    Notice the double colon notation - ::first-line versus :first-line

    The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

    The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.

    For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.
    </div>
</body>
</html>

 

  • ::selection

드래그 했을 때 색깔 주고 싶을 때  (원래 되긴 하는데 다르게 하려면)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
        /*div::first-line {color:red;} */
        /*div::first-letter {color:red;} */
        
        ::selection{
            color: red;
            background: yellow;
        }
        
    </style>
</head>
<body>
    <!--
     <div>
    Notice the double colon notation - ::first-line versus :first-line

    The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

    The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.

    For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.
    </div>
    -->
   
    <h1>Select some text on this page:</h1>

    <p>This is a paragraph.</p>
    <div>This is some text in a div element.</div>


</body>
</html>

 

 

 Backgroun  Image 

이미지 첨부는 반드시 url 사용

영역이 있는 곳은  background를 다 줄 수 있다. body. table, tr, td 등...

반드시 url 사용

 

 

 

 

이렇게 'images'폴더 만들어서 사진 파일 넣어둔 후,

 

 

  • <style> 안에 여러줄로 넣기
body {
    background-image: url('./images/paper.gif');
    background-repeat: no-repeat;
    background-repeat: repeat-x;
    background-position: right top;
}

 

 

  • <style> 안에 한줄로 넣기
body{
    background: yellowgreen url('./images/paper.gif') no-repeat right top;
}

 

 

 

  • <body> 의 <table> 에 넣기
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
            /*
        body {
            
            background-image: url('./images/paper.gif');
            background-repeat: no-repeat;
            background-repeat: repeat-x;
            background-position: right top;
            
        }
        */

        /*
        body{
            background: yellowgreen url('./images/paper.gif') no-repeat right top;
        }
        */

        td{
            background: yellowgreen url('./images/paper.gif') no-repeat right top;
        }
        
    </style>
</head>
<body>
    <h2>Hello CSS</h2>
    <table border="1" width="400" height="200">
        <tr>
            <td>1</td>
        </tr>
    </table>
</body>
</html>

 

 

 

  • background image 여러개 겹쳐서 주기 (이제 가능해짐)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
    #i1{
        /* 맨앞에 쓴 url이미지가 맨 앞에 옴 */
        background-image:  url('./images/img_flwr.gif'), url('./images/paper.gif');
        background-position: right bottom, left top;
        background-repeat: no-repeat, repeat;
    }
    </style>
</head>
<body>
    <div id="i1">
        Hello CSS<br />
        Hello CSS<br />
        Hello CSS<br />
        Hello CSS<br />
        Hello CSS<br />
        Hello CSS<br />
        Hello CSS<br />
        Hello CSS<br />
        Hello CSS<br />
        Hello CSS<br />
        Hello CSS<br />
    </div>
</body>
</html>

 

 

 

 

 

 Text 

  • text-align

center, left, right  로 정렬 설정 가능

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
    h1{
        text-align: center;
    }
    h2{
        text-align: left;
    }
    h3{
        text-align: right;
    }
    </style>
</head>
<body>
    <h1>Heading 1 (center)</h1>
    <h2>Heading 2 (left)</h2>
    <h3>Heading 3 (right)</h3>

</body>
</html>

 

 

  • text-decoration (밑줄효과)

overline : 윗줄

line-through : 가운데줄

underline : 밑줄

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
        #i1 {text-decoration: overline;}
        #i2 {text-decoration: line-through;}
        #i3 {text-decoration: underline;}
        
        /*링크에 나오는 언더라인 없애기*/
        a:link{ text-decoration: none;}
        /*마우스 올리면 언더라인*/
        a:hover{ text-decoration: underline;}
    </style>
</head>
<body>
    <h4 id="i1">Hello CSS</h4>
    <h4 id="i2">Hello CSS</h4>
    <h4 id="i3">Hello CSS</h4>

    <a href="https://www.naver.com">네이버 바로가기</a>
</body>
</html>

 

  • text-transform

uppercase : 전부 대문자로

lowercase :  전부 소문자로

capitalize : 단어 앞글자만 대문자로

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
    p.uppercase {   /* 전부 대문자로 */
        text-transform: uppercase; 
    }

    p.lowercase{    /* 전부 소문자로 */
        text-transform: lowercase;
    }

    p.capitalize{   /* 단어마다 앞글자만 대문자로 */
        text-transform: capitalize;
    }

    </style>
</head>
<body>

    <p class="uppercase">This is some text.</p>
    <p class="lowercase">This is some text.</p>
    <p class="capitalize">This is some text.</p>
   
</body>
</html>

 

 

  • text-shadow
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
    h1{
        text-shadow: 2px 2px 5px red;
    }
    </style>
</head>
<body>
    <h1>Text-shadow effect!</h1>
</body>
</html>

 

 

 

 

 Font 

폰트는 사용자 중심으로 생각해야 한다.

 

 

  • font-size
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
    /* 기본 16px */
    #i1 {font-size: 12px;}
    /*    #i2 {font-size: 20pt;} */
    /* em, % : 배율 */
    /* #i2 {font-size: 2em;} */
    #i2 {font-size: 200%;}
    </style>
</head>
<body>
    <div id="i0"> Hello CSS</div> <!--기본-->
    <div id="i1"> Hello CSS</div>
    <div id="i2"> Hello CSS</div>
</body>
</html>

 

 

 

  • font-family :  폰트의 종류

 

ex) 폰트가 없을 때를 대비해서 여러개를 적어준다. 앞에서부터 없으면 다음 걸 쓴다.

.serif {
  font-family: "Times New Roman", Times, serif;
}

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
    
    #i1 { font-family: '궁서체'}
    #i2 { font-family: '굴림체'}
    </style>
</head>
<body>
    <div id="i0"> Hello CSS 한글 </div> 
    <div id="i1"> Hello CSS 한글</div>
    <div id="i2"> Hello CSS 한글</div>
</body>
</html>

 

 

 

  • font-style
  1. normal - The text is shown normally
  2. italic - The text is shown in italics
  3. oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
  • font-weight

    폰트 굵기

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
    
    #i1 { font-style: italic; font-weight:bold;}
    #i2 { font-style: oblique; font-weight:bolder;}
    </style>
</head>
<body>

    <!--
        https://fonts.google.com     <- 폰트 제공용 사이트
    -->
    <div id="i0"> Hello CSS 한글 </div> 
    <div id="i1"> Hello CSS 한글</div>
    <div id="i2"> Hello CSS 한글</div>
</body>
</html>

 

 

 

 

※  font : 안에 한번에 줄수도 있다.

p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}

 

 

 

  • font pushing(내 폴더에 있는 폰트 쓰기) 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <style type="text/css"> 
     @font-face {
         font-family: myfont;   /* 폰트 이름을 내가 정의 */
         /* src: url('./fonts/sansation_light.woff'); */
         src: url('./fonts/gabia_bombaram.ttf');
     }

     #i1 { font-family: myfont; font-size: 20px; }
         
    </style>
</head>
<body>
    <div id="i0"> Hello CSS 한글</div> 
    <div id="i1"> Hello CSS 한글</div>
    <div id="i2"> Hello CSS 한글</div>
</body>
</html>

 

 

  • font pushing(구글 폰트 쓰기) 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
    <style type="text/css"> 
        body{
            font-family: "Sofia";
            font-size: 22px;
        }
     
    </style>
</head>
<body>
    <h1>Sofia Font</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elilt.</p>
</body>
</html>

 

 

 

 

 

 Icon 

https://kit.fontawesome.com/a076d05399.js

에서 제공하는 icon을

<head>에 <script>에  src로 링크를 걸어서 쓴다.

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  />
    <script src="https://kit.fontawesome.com/a076d05399.js">
    </script>
    <style type="text/css"> 
    </style>
</head>
<body>
    <p> Some Font Awesome icons:</p>
    <i class="fas fa-cloud"></i>
    <i class="fas fa-heart"></i>
    <i class="fas fa-car"></i>
    <i class="fas fa-file"></i>
    <i class="fas fa-bars"></i>

    
    <p> Styled Font Awesome icons (size and color):</p>
    <i class="fas fa-cloud" style="font-size:24px;"></i>
    <i class="fas fa-cloud" style="font-size:36px;"></i>
    <i class="fas fa-cloud" style="font-size:48px; color:red;"></i>
    <i class="fas fa-cloud" style="font-size:60px; color:lightblue;"></i>
</body>
</html>

 

 

 Cursor 

커서 모양을 바꿀수 있다. 

<!DOCTYPE html>
<html>
<head>
    <title>CSS 연습</title>
    <meta charset="utf-8"  />
    
    <style type="text/css"> 
    </style>
</head>
<body>
    <div>basic</div>
    <div style="cursor: auto;">auto</div>
    <div style="cursor: crosshair;">crosshair</div>
    <div style="cursor: help;">help</div>
</body>
</html>

글자 위에 커서 올렸을 때 커서 모양이 각각 바뀜

 

 

 List 

<!DOCTYPE html>
<html>
<head>
    <title>CSS 연습</title>
    <meta charset="utf-8"  />
    
    <style type="text/css"> 
    ul.a {
        list-style-type: circle;
    }
    ul.b {
        list-style-type: square;
    }
    ol.c {
        list-style-type: upper-roman;
    }
    ol.d {
        list-style-type: lower-alpha;
    }
    </style>
</head>
<body>
    <h2>Lists</h2>
    <p>Example of unordered lists:</p>
    <ul class="a">
        <li> Coffee</li>
        <li> Tea</li>
        <li> Coca Cola</li>
    </ul>

    <ul class="b">
        <li> Coffee</li>
        <li> Tea</li>
        <li> Coca Cola</li>
    </ul>

    <p>Example of unordered lists:</p>
    <ol class="c">
        <li> Coffee</li>
        <li> Tea</li>
        <li> Coca Cola</li>
    </ol>

    <ol class="d">
        <li> Coffee</li>
        <li> Tea</li>
        <li> Coca Cola</li>
    </ol>
</body>
</html>

 

 

 

  • 내가 가지고 있는 이미지를 list 로 만들기
<!DOCTYPE html>
<html>
<head>
    <title>CSS 연습</title>
    <meta charset="utf-8"  />
    
    <style type="text/css"> 
    /* ul.a {
        list-style-type: circle;
    }
    ul.b {
        list-style-type: square;
    } */

    ul.a{
        list-style-image: url('./images/purple.gif');
    }
    
    </style>
</head>
<body>
    <h2>Lists</h2>
    <p>Example of unordered lists:</p>
    <ul class="a">
        <li> Coffee</li>
        <li> Tea</li>
        <li> Coca Cola</li>
    </ul>

    <ul class="b">
        <li> Coffee</li>
        <li> Tea</li>
        <li> Coca Cola</li>
    </ul>

   
</body>
</html>

 

 

 Layout 

div + css 로 table로 만드는 것처럼 똑같이 만들 수 있다. (table은 구식)

div + css = box model

 

 

width, height는 px로 많이 나타낸다.

border : 외곽선

 

border-style 여러가지 있다. dotted, solid, dashed 등..

width, height로 영역을 주고 border 로 외곽선을 만들어 주면 하나의 영역이 보인다.

이걸 크게 만들면 된다.

 

border로 한번에 줄땐 순서 top, right, bottom, left로 시계 방향.

 

  • border-style
  • border-width
  • border-height
  • border-radius

div의 height를 줄여서 버튼을 만들수 있다. (:hover, :active 등을 사용해서)

 

  • padding : 글자와 border 사이 간격이 넓어짐
  • margin : margin이 넓어짐(border 바깥쪽)

 

  • border 디자인
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"  />
    
    <style type="text/css"> 
    div{
        background-color: tomato;
        width: 200px;
        height: 200px;

        /* border-width: 3px; 
        border-style: dotted;
        border-color: black;  */

        border: 2px dotted black;
    }

    p{
        background-color: tomato;
        width: 200px;
        height: 200px;
    }
   
   
    </style>
</head>
<body>
    <!-- block tag => 내용 + 줄바꿈 -->
   <div>Hello CSS</div>
   <p>Hello CSS</p>
</body>
</html>

 

 

 

  • border-width 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"  />
    <style type="text/css"> 
    p.one {
        border-style: solid;
        border-width: 5px 20px;
    }

    p.two {
        border-style: solid;
        border-width: 20px 5px;
    }

    p.three {
        border-style: solid;
        border-width: 25px 10px 4px 35px;
    }
    </style>
</head>
<body>
    <p class="one">Some text.</p>
    <p class="two">Some text.</p>
    <p class="three">Some text.</p>
</body>
</html>

 

  • border-radius, padding, margin
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"  />
    <style type="text/css"> 
    span{
        background-color: tomato;
        width: 200px;
        height: 50px;
        border: 2px solid black;
        border-radius: 15px;
        /* 글자와 border간격이 넓어짐 (padding) */
        padding: 20px; 
        /* margin이 넓어짐(border 바깥쪽) */
        margin: 20px;
    }

    /* div를 버튼처럼(마우스 올렸을 때 색 변화) 효과 주기  */
    span:hover {
        background-color: red;
    }
    
    </style>
</head>

<body>
    <br /><br />
    <div> 
        <span>Hello CSS</span>
        <span>Hello CSS</span>
    </div>

    <br /><br />
    <div> 
        <span>Hello CSS</span>
        <span>Hello CSS</span>
    </div>

</body>
</html>

 

 

 

 

 Table 

table로 만들때도 선은  border로한다. 테두리는 항상 border.

 

  1. border-collapse : 중복된 선이 있으면 겹쳐줌.

  2. :nth-child(even) : 짝수번째만 디자인 적용.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"  />
    <style type="text/css"> 
        table {
            width: 100%;
            border: 1px solid black;
            border-collapse: collapse;
        }

        th, td{
            border: 1px solid black;
        }

        th {
            height: 50px;
            background-color: #4caf50;
        }
        
        /* 원하는 곳만 지정해서 디자인을 줄수 있다. */
        tr:nth-child(even){
            background-color: #f2f2f2;
        }

        /* 마우스 올리면 해당 row색 바뀜 */
        tr:hover {
            background-color:  #848583;
        }
    </style>
</head>

<body>
    <table>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
        </tr>
        <tr>
          <td>Peter</td>
          <td>Griffin</td>
        </tr>
        <tr>
          <td>Lois</td>
          <td>Griffin</td>
        </tr>
        <tr>
            <td>Peter</td>
            <td>Griffin</td>
          </tr>
          <tr>
            <td>Lois</td>
            <td>Griffin</td>
          </tr>
      </table>

      
</body>
</html>

 

 

 

 Block & Inline 

※ div와  span의 차이는?

 -> 거의 비슷하지만 div는 마지막에 enter키가 들어가있고 span은 없다.

 

 

display를 통해 정렬 변화 가능

display : inline

display : block

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"  />
    <style type="text/css"> 
        /* 원래 반댄데 이렇게 css로 바꿔줄수 있다. */
        div { display: inline; }
        span { display: block; }

        /* 원래는 아래로 나열되는 걸 한줄에 표현되게함 */
        li { 
            display: inline;
            width: 200px;
            height: 50px;
         }
    </style>
</head>

<body>
    <!--block / inline : 엔터키 -->

    <!-- div는 원래 block -->
    <div>Hello CSS</div>
    <div>Hello CSS</div>
    <div>Hello CSS</div>
    
    <!-- span 은 원래 inline -->
    <span>Hello CSS</span>
    <span>Hello CSS</span>
    <span>Hello CSS</span>

    <ul>
        <li><a href="test1.html">test1.html 바로가기</a></li>
        <li><a href="test2.html">test2.html 바로가기</a></li>
        <li><a href="test3.html">test3.html 바로가기</a></li>
    </ul>
</body>
</html>

 

 

 

 

 

 "Display : none"  vs  "visibility : hidden" 

 

display: none -> 아예 사라짐

visibility: hidden -> 안보이지만 빈공간으로 남아있음

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css"> 
       div { width: 200px; height: 50px; border: 1px solid red; }
       /* 아예사라짐 */
       /* #d1 { display: none; } */
       /* 빈공간으로 남아있음 */
       #d1 { visibility: hidden; }
    </style>
</head>

<body>
   <div> Hello CSS1 </div>
   <div id="d1"> Hello CSS2 </div>
   <div id="d2"> Hello CSS3 </div>
   <div> Hello CSS4 </div>
</body>
</html>

 

 

 

 

 Position 

absolute, relative 많이 쓴다.

position을 쓰면 top하고 left를 써야한다.

 

z-index를 사용하여 겹치는 순서를 바꿀수도 있다.

z-index : 낮은 숫자부터 그린다.

            ex) 1, 2, 3 일때 3이 제일 위에 있음.

 

절대기준점은 왼쪽 위가 (0,0)이다.

 

* z-index가 적용된 코드*

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css"> 
    div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }

    #d1 {
        position: absolute;
        top: 0px; 
        left: 0px;
        background-color: red;
        z-index: 3;
    }
    
    
    #d2 {
        position: absolute;
        top: 50px; 
        left: 50px;
        background-color: green;
        z-index: 2;
    }

    #d3 {
        position: absolute;
        top: 100px; 
        left: 100px;
        background-color: blue;
        z-index: 1;
    }
    </style>
</head>

<body>
   <div id="d1"> Hello CSS1 </div>
   <div id="d2"> Hello CSS2 </div>
   <div id="d3"> Hello CSS3 </div>
   <div> Hello CSS4 </div>
</body>
</html>

 

 

 

 

 

 

 전체 배운거 실습 

Website Layout

  • float : html 에서 공간은 차지 하되 다른 요소의 배치에 영향을 안주는 요소

 

  • overflow : 해당 영역의 크기보다 내부값이 커질 경우 어떻게 할 것인지.

        - visible : 기본 값입니다. 넘칠 경우 컨텐츠가 상자 밖으로 보여집니다.

        - hidden : 넘치는 부분은 잘려서 보여지지 않습니다.

        - scroll : 스크롤바가 추가되어 스크롤할 수 있습니다.(가로, 세로 모두 추가 됩니다.)

        - auto : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정됩니다.

           ( 필요에 따라 가로, 세로 별도로 추가될 수도 있습니다.)

 

 

  • :after : content 내용을 마지막에 추가함.

 

  • clear : 해당 영역에 아무것도 없게 한다.

        - none (기본값) : clear 속성을 설정하지 않은 것과 같다.

        - left : 왼쪽으로 붙는 float 정렬을 취소 한다.

        - right: 오른쪽으로 붙는 float 정렬을 취소 한다.

        - both : 왼쪽, 오른쪽 모두 붙는 float 정렬을 취소한다.

 

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css"> 
    * {
        box-sizing: border-box;
    }

    body{
        font-family: Arial;
        padding:10px;
        background: #f1f1f1;
    }

    .header {
        padding: 30px;
        text-align: center;
        background: white;
    }

    .header h1{
        font-size: 50px;
    }

    .topnav {
        overflow: hidden;
        background-color: #333;
    }

    .topnav a{
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    .topnav a:hover{
        background-color: #ddd;
        color: black;
    }

    .leftcolumn {
        float: left;
        width: 75%;
    }

    .rightcolumn{
        float: left;
        width: 25%;
        background-color: #f1f1f1;
        padding-left: 20px;
    }

    .fakeimg {
        background-color: #aaa;
        width: 100%;
        padding:  20px;
    }

    .card {
        background-color: white;
        padding: 20px;
        margin-top: 20px;
    }

    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    .footer {
        padding:20px;
        text-align: center;
        background:  #ddd;
        margin-top: 20px;
    }

   
    </style>
</head>

<body>
    <div class="header">
        <h1>My Website</h1>
        <p>Resize the browser window to see the effect.</p>
    </div>

   <div class="topnav">
       <a href="#"> Link</a>
       <a href="#"> Link</a>
       <a href="#"> Link</a>
       <a href="#" style="float:right"> Link</a>
   </div>

   <div class="row">
       <div class="leftcolumn">
           <div class="card">
               <h2>TITLE HEADING</h2>
               <h5>Title description, Dec 7, 2017</h5>
               
               <div class="fakeimg" style="height:200px;">Image</div>
               <p>Some text..</p>
               <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            </div>
            <div class="card">
                <h2>TITLE HEADING</h2>
                <h5>Title description, Sep 2, 2017</h5>
                
                <div class="fakeimg" style="height:200px;">Image</div>
                <p>Some text..</p>
                <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            </div>
       </div>
       <div class="rightcolumn">
           <div class="card">
               <h2>About Me</h2>
               <div class="fakeimag" style = "height:100px;">Image</div>
               <p>Some text about me culpa qui officia deserunt mollit anim..</p>
           </div>
           <div class="card">
               <h3>Follow Me</h3>
               <p>Some text..</p>
           </div>
       </div>
   </div>
   
   <div class="footer">
       <h2>Footer</h2>
   </div>
  

</body>
</html>

 

728x90
반응형

'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' 카테고리의 다른 글

11/03 - Javascript (3) : 변수/ 함수/ 배열  (0) 2020.11.03
11/02 - Javascript(2) : 제어문 / 라이브러리  (0) 2020.11.02
10/30 - CSS 마무리, Javascript (1) : 자료형 / 연산자 / 조건문  (0) 2020.10.30
10/28 - HTML(2) : 개발 환경 ( filezilla, ApachTomcat, JDK ) 설치, html  (0) 2020.10.28
10/27 - HTML(1)  (0) 2020.10.28
'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' Related Articles more