[JAVA_Back-End]

[CSS] 웹 서버 정리 + HTML 디자인 본문

Programming/HTML+ CSS + JAVASCRIPT

[CSS] 웹 서버 정리 + HTML 디자인

너굴위 2023. 8. 4. 17:33
728x90
반응형

 

[웹 서버 정리]

html /css/js   => 웹사이트 화면 구현
웹사이트 => 원격(도메인/IP:컴퓨터)에서 자료(html문서, 이미지, 동영상)를 공유
공유를 위한 준비 - 웹서버(요청에 의해서 특정위치의 자료를 공유하는 프로그램)

웹 클라이언트 (로컬)
웹 서버(리모트)  -> 보안에 어울리는 프로그램들을 깔아야 의미가 있음
- 단순 웹서버  (Apache, NGINX)(정적)
- 어플리케이션 웹서버 (프로그램 실행 기능, Apache Tomcat(JSP)). IIS(ASP.net)(동적)

Apache Tomcat
1. JDK 설치
2. Apache Tomcat 압축 해제

시작
bin/catalina.bat run- 테스트용 bat파일
bin/startup.bat - 서비스용 bat파일

bin/shutdown.bat - 웹서버 종료 bat파일

 

* 암기- <윈도우 명령 프롬프트의 명령어>


1. dir :디렉토리 내부의 리스트를 보여줌
2. dir /w : 목록을 세분화하여 볼 수 있음
3. dir 디렉토리: 특정 디렉토리 내부의 리스트를 보여줌
4. ipconfig: 컴퓨터의 현재 IP를 확인할 수 있도록 하는 명령어

5. cd 절대경로/상대경로 (Tab키로 자동완성 가능, 폴더이름에 공백있으면 자동으로 " "붙음)

6. cls : 화면 로그 삭제

 

< IP >
-> loopback:127.0.0.1
-> 인터넷 접속 
             -> 고정IP: 업체에 의해 고정
             -> 유동IP: 공유에 의해서 제공(리부팅에 의해서 변경 가능)

 

HTML- 문서의 구조

-> <form> :사용자의 입력과 연관되어있기 때문에 잘 기억해두기

CSS- 문서의 디자인  -> 리뉴얼(디자인이 쉬워짐)

       selector - 위치찾기

       디자인의 종류와 속성

JS - 문서의 기능

CSS Zen Garden: The Beauty of CSS Design    -->css디자인에 사용되는 유용한 사이트

//해당 사이트에서 css제거하고 내용적인 부분만 보고 싶다면 개발자 도구 콘솔에서 다음의 명령어를 입력!

$( 'style,link[rel="stylesheet"]').remove()

 

* css를 적용시키는 방법

1) 셀렉터 적용

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"> <!--셀렉터 적용하기-->
    <style type="text/css">  
        body{background-color: red;}
    </style>
</head>
<body >  
    Hello css
</body>
</html>
 

 

2) style 사용

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body style="background-color: blue;">  
<!--
    style사용: css를 준다
    inline style
-->
    Hello css
</body>
</html>

 

3) 외부 css파일 만들어 적용

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">     <link rel="stylesheet" type="text/css" href="./default.css"/>   <!--link로 type을 지정하고 href로 외부 css파일을 적용할 수 있다.-->
</head>
<body>  
    Hello css
</body>
</html>
<!--css-->
body {background-color: blueviolet;}

 

*암기

CSS style 속성

1) background-color :배경색

2) color: 전경색(글자색)

 

4) 태그 사용

 <style type="text/css">
    /*태그 선택자*/
        p {color:red;}
        div {color: purple;}
    </style>

- 이런 식으로 body에 있는 각 태그마다 다르게 스타일을 적용시킬 수 있다.

- 누적조건이기 때문에 각 태그마다의 스타일 적용 속성이 다르면 각각 쌓여서 적용되게 된다.

- 같은 태그의 같은 스타일 적용 속성이면 순차적으로 적용이 된다. (위에서 아래로)

 

5) 클래스 사용

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"> 
    <style type="text/css">
    /*클래스 선택자
    다른 태그 안에 같은 클래스를 생성 후 같은 클래스 별로 속성을 줄 수 있다.
    같은 태그 안에 다른 클래스를 참조하여 세부적으로 속성을 부여할 수도 있다.*/
      .c1{color: blue;}
      .c2{color: brown;}
      div.c2{color: rebeccapurple;}
      div.c3{background-color: aqua;}
    </style>
</head>
<body>  
    <p class="c1">Hello css</p>
    <div class="c1">Hello CSS</div>
    <p class="c2">Hello css</p>
    <div class="c2">Hello CSS</div>
    <p class="c3">Hello css</p>
    <div class="c3">Hello CSS</div>

</body>
</html>

 

6) 아이디 사용

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"> 
    <style type="text/css">
    /*
    아이디 선택자
    태그 별로 id를 1개만 줄 수 있다.
    */
    #i1 {background-color: aqua;}
    </style>
</head>
<body>  
    <p id="i1">Hello css</p>
    <div id="i2">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>

 

7) 자손/후손/아우선택자

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    /*
      자손 선택자 (> 사용하여 표현): 자식
      후손 선택자 (> 없이 표현): 자식...손자..
    */

    /*자손 선택자*/
    div > p {color: red;}

    /*후손선택자*/
    /* div p {color: red;} */

    /*아우선택자*/
    div + p {color: blue;}
    div ~ p {color: blue;}
    </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>

 

8) 링크에 대한 속성

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        /*
        태그에 대한 속성 선택자
        */

        /*
        링크에 대한 속성
        */
        a:link {color:#ff0000}  /*기본링크 표현 색상*/
        a:visited {color: #00ff00}  /*방문한 곳일 때*/
        a:hover {color:#ff00ff}   /*마우스 올렸을 때*/
        a:active {color:#0000ff}   /*클릭했을 때*/
    </style>
</head>
<body>  
 
    <a href="https://m.naver.com">모바일 네이버</a> <br />
    <a href="https://m.nate.com">모바일 네이트</a> <br />

</body>
</html>

 

9) 속성의 값을 가지고 찾아내어 적용

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        /* 태그에 대한 속성 선택자 */
        a[target=_blank] {background-color: yellow;}   /*target을 보유한 a 태그만 적용*/
        a[target=_top] {background-color: gray;}
   
    </style>
</head>
<body>  
 
    <a href="https://m.naver.com">모바일 네이버</a> <br />
    <a href="https://m.naver.com" target="_blank">모바일 네이버</a> <br />
    <a href="https://m.naver.com" target="_top">모바일 네이버</a> <br />
   

</body>
</html>

 

속성 선택자 모음

 

10) 여러가지 css태그 이미지 적용

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
   
    body{
        /*background-color: blue;*/
    /* background-color: #00ff00;*/
    /*background-color: rgb(255,0,0);*/
    /*background-image: url('./images/paper.gif');   /*이미지 삽입*/
    /*background-repeat: no-repeat; /*이미지를 반복하지 않도록 함*/
    /*background-position: right top; /*오른쪽 맨 위에 그림이 위치할 수 있도록 설정 */
    background: rgb(0, 255, 0) url('./images/paper.gif') no-repeat right top;   /*한꺼번에 다 적용 가능*/
    }
    </style>
</head>
<body>  

</body>
</html>

 

11) 테이블 내용 색상 지정하기

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
   
    body{ background-color: red;}
    table {background-color: gray;}
    td {background-color: blueviolet;}
    </style>
</head>
<body>  
    <table width="800" height="300">
        <tr>
            <td>내용 1</td>
            <td>내용 1</td>
            <td>내용 1</td>
        </tr>
        <tr>
            <td>내용 1</td>
            <td>내용 1</td>
            <td>내용 1</td>
        </tr>
    </table>
</body>
</html>

 

 

12) 여러가지 이미지 위치 지정해서 삽입하기

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">

    #i1{
        padding: 15px;
       /* background-image: url(./images/img_flwr.gif), url('./images/paper.gif');
        background-repeat: no-repeat, repeat;
        background-position: right bottom, left top;  /*파라미터 순서에 맞게 작성*/
        background: url(./images/img_flwr.gif) no-repeat right bottom, url(./images/paper.gif) repeat left top;
    }
    </style>
</head>
<body>  
   <div id="i1">
    <h1>타이틀</h1>
    <p>내용 1</p>
    <p>내용 2</p>
    <p>내용 3</p>
   </div>
</body>
</html>

 

13)텍스트의 위치 조정하기

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        #i1 {text-align: center;}  /*텍스트의 위치 조정하기*/
        #i2 {text-align: right;}
        #i3 {text-align: left;}

    </style>
</head>
<body>  
   <div id="i1">This is some text</div>
   <div id="i2">This is some text</div>
   <div id="i3">This is some text</div>
</body>
</html>

+) 수직 위치조정

<style type="text/css">
       #i1{vertical-align: baseline;}   /*수직(vertical) 위치 바꾸기*/
       #i2{vertical-align: super;}    /*super=text_top*/
       #i3{vertical-align: sub;}   /*sub=text_bottom*/

    </style>

 

+) 글자 대소문자 변경

<style type="text/css">
       #i1 {text-transform: uppercase;}   /*작성한 글자의 대소문자를 변환하도록 함*/
       #i2 {text-transform: lowercase;}
       #i3{text-transform: capitalize;}   /*단어의 첫글자만 대문자 작성*/
    </style>

 

+) 자간 간격 변경

<style type="text/css">
      /*높이 / 넓이
      px/ % / em(배율) */
       
      #i1{letter-spacing: 3px;}    /*자간 조정*/
      #i2{letter-spacing: -3px;}

      #i1{line-height: 3px;}
      #i2{line-height: -3px;}

      #i1{word-spacing: 5px;}
      #i2{word-spacing: -5px;}
    </style>

 

14) 텍스트 오버플로우 대처하기

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    #i1{
        background-color: #eeeeee;
        width: 200px;
        height: 300px;

        /*overflow: hidden;   /*오버플로우 된 값을 보여주지 않도록 하는 것*/
        overflow: scroll;  /*오버플로우 되었을 때 스크롤 할 수 있도록 하는 것*/
        overflow-x: hidden;    /*오버플로우 스크롤에서 가로 이동 스크롤을 삭제하는것*/
    }
    </style>
</head>
<body>  
   <div id="i1">This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</div>

</body>
</html>

 

< CSS 폰트 변경 >

1) 경로 지정

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
   
   @font-face {
    font-family: myFont1;
    /*src: url('./font/sansation_light.woff');*/
    src: url('./font/gabia_bombaram.ttf');    /*폰트를 다운받은 후 파일의 경로를 지정해서 적용*/
   }
   #i1{
    font-family: myFont1;
    font-style: 25px;
   }
 
    </style>
</head>
<body>  
  <div id="i1">Hello world</div>
 
</body>
</html>

 

<본문에 따라 커서의 모양이 바뀜>

<body>  
  <div style="cursor:default;">default</div>
  <div style="cursor:auto;">auto</div>
  <div style="cursor:crosshair";>crosshair</div>
  <div style="cursor: e-resize;">e-resize</div>
</body>

 

* 커스텀 하여 목록 만들기

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        ul.a{list-style-type: circle;}  /*css타입으로 편집가능*/
        ul.b{list-style-type: square;}
       
        ol.a{list-style-type: upper-roman;}

        ul.c{list-style-image: url('./images/purple.gif');}  /* 이미지로 점 선택할 수 있음 */
    </style>
</head>
<body>  
 <ul class="a">
  <li>사과</li>
  <li>참외</li>
  <li>수박</li>
  <li>딸기</li>
 </ul>

 <ul class="b">
  <li>사과</li>
  <li>참외</li>
  <li>수박</li>
  <li>딸기</li>
 </ul>

 <ol class="a">
  <li>사과</li>
  <li>참외</li>
  <li>수박</li>
  <li>딸기</li>
 </ol>
 
 <ul class="c">
  <li>사과</li>
  <li>참외</li>
  <li>수박</li>
  <li>딸기</li>
 </ul>
</body>
</html>

 

*본문 테두리 설정하기(round형으로)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
      p.normal {
        border: 2px solid red;
        padding: 5px;
      }
      p.round1 {
        border: 2px solid red;
        border-radius: 5px;
        padding: 5px;
      }
      p.round2 {
        border: 2px solid red;
        border-radius: 8px;
        padding: 5px;
      }
      p.round3 {
        border: 2px solid red;
        border-radius: 12px;
        padding: 5px;
      }
    </style>
</head>
<body>  
    <p class="normal"> Normal border</p>
    <p class="round1"> Normal border</p>
    <p class="round2"> Normal border</p>
    <p class="round3"> Normal border</p>
</body>
</html>

 

*div내용 숨기기/ 영역 숨기기

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
      .div1{
        width: 300px;
        height:100px;
        border: 1px solid blue;

        /*영역이 없어짐
        영역이 없어지면서 박스모델2가 위로 올라옴*/
        /*display: none;

        /*내용만 없어짐*/
        visibility: hidden;
      }

      .div2{
        width: 300px;
        height:100px;
        border: 1px solid red;
       
      }
    </style>
</head>
<body>  
    <div class="div1">박스모델1</div>    <br />
    <div class="div2">박스모델2</div>
</body>
</html>

 

*메뉴 만들기

- 커서가 올라가면 해당 박스의 배경색이 바뀜

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
      ul{     /*기본 바 배경색과 크기*/
        list-style-type: none;
        margin:0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
      }

      li{     /*li들의 위치*/
        float:left;
      }

      li a {    /*li a 태그의 글자 색과 id*/
        display: block;
        color:white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      li a:hover{   /*마우스 커서가 올라가면 색이 변함*/
        background-color: #111;
      }
    </style>
</head>
<body>  
  <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</body>
</html>

 

 

*단순 정보 나타낼 때 본문 표현법(사진+글 배치)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
      img{   /*테이블과 같은 배치효과를 얻을 수 있다 */
        width: 170px;
        height: 170px;
        margin-right: 15px;
        float:left;

        /*margin-left: 15px;
        float:right; */
      }
     
    </style>
</head>
<body>  
  <img src="./images/pineapple.jpg" />
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</body>
</html>

 

*div를 사용하여 레이아웃을 겹치게 구현하기

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
   <style type="text/css">
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;    /*임의로 위치를 정하여 div의 레이아웃을 겹치게 만들 수 있다*/
    }

    #i1{
      position:absolute;
      top:0px;
      left: 0px;
      background-color: red;
      z-index: 3;    /*쌓이는 순서도 다르게 할 수 있다. 해당 코드는 3번째로 쌓이기 때문에 맨 위에 올라와 있는 것처럼 보이는 것임*/
     
    }

    #i2{
      position:absolute;
      top:50px;
      left:50px;
      background-color: green;
      z-index: 2;
     
    }

    #i3{
      position:absolute;
      top:100px;
      left:100px;
      background-color: blue;
      z-index: 1;
     
    }

   </style>
</head>
<body>  
  <div id="i1">Layer1</div>
  <div id="i2">Layer2</div>
  <div id="i3">Layer3</div>
 
</body>
</html>

 

*위와 같은 코드로 상대적 위치로 설정

<style type="text/css">
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;     /*layer1에 따라서 배치가 된다(상대적 위치)*/
    }

    #i2{
      position:relative;
      top:50px;
      left:50px;
      background-color: green;
      z-index: 2;
     
    }

    #i3{
      position:relative;
      top:100px;
      left:100px;
      background-color: blue;
      z-index: 1;
     
    }

   </style>

 

 

 

######################### ex34, ex35 코드 이해 부족... 해당 코드 다시 살펴보기 ###########################

 

 

 

 

 

 

 

 

728x90
반응형

'Programming > HTML+ CSS + JAVASCRIPT' 카테고리의 다른 글

[JAVASCRIPT] 제어문 (if, else, else if, switch, while, for)  (0) 2023.08.09
[JAVASCRIPT] HTML 동작 구현  (0) 2023.08.08
[CSS]HTML 디자인2  (0) 2023.08.08
[HTML] 웹 서버 구동 + HTML 태그/기능  (0) 2023.08.04
[HTML] 기본지식 + 태그모음  (0) 2023.08.03
'Programming/HTML+ CSS + JAVASCRIPT' Related Articles more