본문 바로가기
개발일지

frontend 2일차

by 태운콩즙 2024. 1. 10.
728x90
반응형

오늘은 frontend 에 table,list, margin,padding, form, js를 배웠다

 

<table>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*복합 선택자: 여러 개의 요소를 한 번에 지정*/
        table , tr , td , th{
            border: 1px solid black;
            border-collapse: collapse;
            /*상하 좌우 모두 10px의 여백*/
            padding: 10px;

        }
        td{
            text-align: center;  /* 글자를 중앙으로 정렬*/
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>
                항목1
            </th>
            <th>
                항목2
            </th>
            <th>
                항목3
            </th>
            <th>
                항목4
            </th>
        </tr>
         <tr> <!--한줄 추가 -->
        <td> <!-- 한칸 추가 -->
            html
        </td>
        <td>
            css
        </td>
        <td>  
            javascript
        </td>
        <td rowspan="2"> <!--위아래 1칸 이상의 칸을 합칠때 -->
            vs code
        </td>
        </tr>
        <tr>
            <td>
                java
            </td>
            <td colspan="2"> <!--양옆 1칸이상의 칸을 합칠때 -->
                database
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <img src="../images/다운로드.png" width="50" height="30" alt="">
            </td>
        </tr>
    </table>

</body>
</html>

 

<list>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style-type: none;
        }
        ol{
            list-style: none;
        }
    </style>
</head>
<body>
    <!-- 
        ul(unordered list): 순서가 없는 리스트
        ol(ordered list): 순서가 있는 리스트
     -->
    <ul>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ul>
    <ol>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ol>
</body>
</html>

 

<image>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            /* background-color: dodgerblue; */
            background-image: url("../images/고양이.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            /* height: 3000px; */
        }
        h2{
            color: white;
        }
    </style>
</head>
<body>
    <!-- <img src="../images/고양이.jpg" width="500" height="800" alt=""> -->
    <h2>안녕하세요</h2>
</body>
</html>
  1.  margin(마진),padding(패딩)
    1. 여백을 지정하는 방법
    2. margin
      1. 바깥쪽 여백
      2. 다른 요소와의 여백
    3. padding
      1. 안쪽 여백
      2. 테두리를 기준으로 안쪽 여백
    4. 사용방법
      1. 위(top),아래(bottom),좌(lefr or start),우(right or end) 여백을 각각 지정하거나 한번에 지정할수있음
      2. 4방향을 번에 적용: 값 하나만 작성
        1. margin:10px
          1. 4방향 모두 10px 의 마진을 적용
          2.  #container1{
                    border: 5px solid red;
                    margin: 10px;
            1. 위 아래, 좌우를 각각 적용: 값 두개 작성
              1. margin: 10px 20px
                1. 위아래 10px 좌우 20px margin 적용
                2. #container2{
                          border: 5px solid green;
                          margin: 10px 20px;
            2. 위,좌우,아래를 각각 적용: 값 3개 작성
              1. margin: 10px 20px 30px
                1. 위 10px 좌우 20px 아래 30px margin 적용
                2. #container2{
                          border: 5px solid green;
                          margin: 10px 20px 30px;
            3. 4방향을 각각 적용: 값 4개 적용
              1. margin: 10px 20px 30px 40px
                1. 위 10px 우 20px 아래 30px 우 40px (시계방향)
                2. #container2{
                          border: 5px solid green;
                          margin: 10px 20px 30px 40px;
            4. margin-top,margin-lefe,margin-bottom,margin-right 와 같이 각각을 따로 지정할 수 있는 속성도 있음
  2. position 속성
    1. 요소를 배치할 때 사용하는 속성
    2. 종류:static(기본),relative,fixed,absolute,sticky
    3. static
      1. position 속성 값을 별도로 주지 않아도 기본으로 설정되는 값
      2. 요소 배치할 때 는 static으로 사용 불가
    4. relative
      1. 원래 있어야 할 위치로 부터의 배치
      2. 이 속성을 지정하면 원래 해당 요소가 있어야 할 공간은 비워짐
      3. relative로 배치할 때 사용하지 않음
      4. 자식 요소를 배치할 때는 부모 요소에 relative 속성을 지정해야함
      5. <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <style>
             *{
                box-sizing: border-box;
            }
            body{
                border: 5px solid black;
            }
            div{
                width: 100px;
                height: 100px;
            }
            #container1{
                border: 5px solid red;
                position: relative;
                bottom: 50px;
                left: 50px;
            }
            #container2{
                border: 5px solid green;
            }
            #container3{
                border: 5px solid blue;
                position: relative;
                top: 50px;
            }
            #container4{
                border: 5px solid yellow;
            }
        </style>
        <body>
            <div id="container1">div1</div>
            <div id="container2">div2</div>
            <div id="container3">div3</div>
            <div id="container4">div4</div>
        </body>
        </html>
    5. absolute
      1. 부모 요소를 기준으로 위치를 잡음
      2. 부모 요소에 relative 속성을 주고 자식 요소는 absolute를 지정하여 배치에 활용
      3. 자신의 직접적인 부모가 relative 속성을 가지고 있지 않으면 더 상위 부모를 찾게 되고 그래도 없으면 body를 기준으로 위치를 잡음
      4. <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <style>
            *{
               box-sizing: border-box;
           }
           body{
               border: 5px solid black;
           }
           div{
               width: 200px;
               height: 200px;
           }
           #container1{
               border: 5px solid red;
               
           }
           #container2{
               border: 5px solid green;
               position: relative;
           }
           #container3{
               border: 5px solid blue;
               position: absolute;
               bottom: 150px;
               right: 100px
               
           }
           #container4{
               border: 5px solid yellow;
           }
           #child{
            border: 2px dashed yellow;
            background-color: violet;
            width: 50px;
            height: 50px;
            position: absolute;
            top: 30px;
            left: 50px;
           }
        </style>
        <body>
           <div id="container1">div1</div>
           <div id="container2">
            div2
            <div id="child1">
                child1
            </div>
        </div>
           
           <div id="container3">div3</div>
           <div id="container4">div4</div>
        </body>
        </html>
    6. fixed
      1. 브라우저 기준으로 위치를 지정
      2. 헤더(메뉴바),배너 등을 고정시킬 때 활용
      3. <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <style>
             *{
                box-sizing: border-box;
            }
            body{
                border: 5px solid black;
            }
            div{
                width: 100px;
                height: 100px;
            }
            #container1{
                border: 5px solid red;
               
            }
            #container2{
                border: 5px solid green;
            }
            #container3{
                border: 5px solid blue;
                position: fixed;
                bottom: 100px;
                right: 0px;
            }
            #container4{
                border: 5px solid yellow;
            }
        </style>
        <body>
            <div id="container1">div1</div>
            <div id="container2">div2</div>
            <div id="container3">div3</div>
            <div id="container4">div4</div>
        </body>
        </html>
    7. sticky
      1. 스크롤과 함께 사용하는 경우 많음
      2. 스크롤 내릴 때 메뉴바가 화면 상단에 고정되는 상황을 구현하고자 할 때 활용
      3. <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <style>
             *{
                box-sizing: border-box;
            }
            body{
                border: 5px solid black;
                height: 3000px;
            }
            div{
                width: 100px;
                height: 100px;
            }
            #container1{
                border: 5px solid red;
               
            }
            #container2{
                border: 5px solid green;
                position: sticky;
                top: 0px;
            }
            #container3{
                border: 5px solid blue;
               
            }
            #container4{
                border: 5px solid yellow;
            }
        </style>
        <body>
            <div id="container1">div1</div>
            <div id="container2">div2</div>
            <div id="container3">div3</div>
            <div id="container4">div4</div>
        </body>
        </html>

<porm>

-input-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <input type="text" placeholder="입력해주세요">
    <input type="text" maxlength="10" placeholder="최대 10자 입력가능">
    <br>
    <label for="email">E-mail</label>
    <input type="text" id="email" placeholder="이메일을 입력해주세요">
</body>
</html>

 

-action-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        사용자로 부터 입력받은 내용을 어딘가(서버) 로 보낼 때 사용
        action: 목적지(값을 받아주는 서버의 주소)
        method: 전송방식(http request method)
            get: 입력값이 주소창에 노출(주로 검색어)
            post: 입력값이 노출되지 않음(회원가입,로그인 정보 등)
            http://127.0.0.1:5500/login
            http://127.0.0.1:5500/member-login?email=qwer&password=qwer
            input 태그 name 속성: 입력값을 담아주는 변수 이름의 역할
            
     -->
     <form action="/member-login" method="post">
        <label for="email">E-mail</label>
        <input type="text" id="email" name="email" placeholder="이메일을 입력해주세요"><br>
        <label for="password">Password</label>
        <input type="password" id="password" name="password" placeholder="비밀번호를 입력해주세요">
        <input type="submit" value="login">
        <!-- form 태그 안에 작성한 button 태그는 전송(submit)의 역할을 함 -->
        <button>버튼 login</button>
        
     </form>
</body>
</html>

-select , option-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    사는지역:
    <!-- city = "Incheon" -->
    <select name="city">
        <option value="Incheon">인천</option>
        <option value="Seoul">서울</option>
        <option value="Jeju">제주</option>
    </select>
    <br>
    <!-- gender = "female" -->
    성별:
        남: <input type="radio" name="gender" value="male">
        여: <input type="radio" name="gender" value="female">
        <br>
        좋아하는 프로그래밍 언어 <br>
        <!-- type=["java","pyton","javascript"] -->
        <input type="checkbox" name="type" value="java">Java
        <input type="checkbox" name="type" value="python">Pyton
        <input type="checkbox" name="type" value="javascript">Javascript
        <input type="checkbox" name="type" value="c">c
        <input type="checkbox" name="type" value="kotlin">Kotlin
</body>
</html>

 

<js>

기본 사용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    console.log("hello javascript!!");
    console.log('hello javascript!!');
    console.log('hello javascript!!');
    // 변수 선언
    var num1 = 10;

    let num2 = 100;
    console.log(num2);
    let str1 = "안녕하세요";
    console.log("str1",str1);
    let bool1 = true;
    console.log(`bool1: ${bool1}`);
    console.log(typeof bool1); // boolean
    bool1 = "오늘은 수요일";
    console.log(`bool1: ${bool1}`); //string

    const var1 = 100;
    // var1 = 200;
    
    const var2 = 10;
    const var3 = "10";
    //  ==:값이 같은지 비교(필요시 알아서 형변환 하고 값을 비교함)
    // ===: 값 타입이 모두 같은지 비교
    if(var2 === var3){
        console.log("둘이 같아요");
    }else{
        console.log("둘이 달라요");
    }

    let arr1 = [1,10,100,1000];
    arr1.push(10000);
    // for문으로 배열이 담긴 값 출력
    for (let i = 0; i < arr1.length; i++) {
        console.log(arr1[i]);
    }
    let arr2 = [10, "안녕", true, 0.1234,"ㅎㅎㅎㅎ"];
    for (let i=0; i<arr2.length; i++);
    console.log(arr2[i]);
</script>
</html>

js 는 java 처럼 엄격하지 않아서 형변환을 알아서 시켜주고 변수의 타입을 지정을 안해주어도 가능하다

728x90
반응형

'개발일지' 카테고리의 다른 글

SpringLegacy(MVC)  (0) 2024.02.02
frontend -3-  (1) 2024.01.11
db 마무리 ,Frontend 시작  (1) 2024.01.09
개발일지 -db 응용-  (2) 2024.01.08
개발일지 -alter ERD-  (0) 2024.01.05

관련글

티스토리툴바