공부의 기록/자바 풀 스택 : 수업내용정리

자바 풀 스택 11/29 오전 기록 007-1

파티피플지선 2024. 11. 29. 14:34

8:40

8:05에 학원 도착해서 잠깐 쉬면서 딴짓하다가 공부할 준비 세팅함

9:10부터 15분간 잠깐 엎어져서 푹 잤당

 

<9:30 1교시>

코드 작성 팁과 선택자 입력 방법

<!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>
    div.aaa <!--엔터-->
    <div class="aaa"></div>

    div.aaa.bbb<!--엔터-->
    <div class="aaa bbb"></div>

    div#one<!--엔터-->
    <div id="one"></div>

    div.aaa#one<!--엔터-->
    <div class="aaa" id="one"></div>

    div#one.aaa<!--엔터-->
    <div id="one" class="aaa"></div>

    div*5<!--엔터-->
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    div{div입니다} <!--Ctrl+Space 눌렀다 관련창 뜨면 엔터-->
    <div>div입니다</div>

    div{div}*5<!--엔터-->
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>

    div{div$}*3<!--엔터-->
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>

    ul>li<!--엔터-->
    <ul>
        <li></li>
    </ul>

    ul>li*3<!--엔터-->
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</body>
</html>

 

■ ul 의 활용

더보기
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>step03_ul.html</title>
    <style>
      .my-ul{
        list-style-type : none;
        padding: 0;
        margin: 0;

      }
      /*.my-ul 의 자식 중에 li 선택*/
      .my-ul > li{
        display: inline;
      }
      .my-link{
        list-style-type:none;
        padding:0;
        margin:0;
    
      }


      .my-link a{
        text-decoration: none;
        color: green;
      }

      .my-link a:hover{
        text-decoration: underline;
        color: rgb(3, 61, 3)
      }
    </style>


</head>
<body>
    <h1>순서 없는 목록(Unordered list) ul 요소</h1>
    <h2>친구목록입니다</h2>
   <ul>
    <li>친구1</li>
    <li>친구2</li>
    <li>친구3</li>
    <li>친구4</li>
    <li>친구5</li>
   </ul>

   <ul class="my-ul">
    <li>친구1</li>
    <li>친구2</li>
    <li>친구3</li>
    <li>친구4</li>
    <li>친구5</li>
   </ul>
    

   <h2>바로가기 목록입니다.</h2>
   <ul class="my-link">
    <li> <a href="https://daum.net">daum</a></li>
    <li> <a href="https://naver.com">naver</a></li>
    <li>  <a href="https://gmarket.co.kr">gmarket</a></li>
   </ul>
  
  
 
</body>
</html>

 

 

부모요소 밑에는 자식요소와 자손요소가 존재할 텐데, 자식과 자손의 차이가 있다.

사람에 적용되는 것처럼 부모의 바로 밑의 자손은 자식이고, 그 자식의 자식부터는 부모의 자손이 되는 것이다.

이걸 기호로 표기할 때도 약간의 차이가 있다.

.my-ul>li

라고 쓰거나

.my-ul li

라고 쓰는데, 꺽쇠는 바로 밑의 자식에 대해서만 입력할 때 쓰고,

그냥 부모 밑의 아무 자손을 입력할 때는 스페이스로 한칸만 띄우고 자식요소를 쓰면 된다고 한다.

후자의 경우 때문에 전자를 입력할 때도 그냥 스페이스 한칸만 띄우고 하면 된다.

 

지난 시간에 배운 블럭요소와 인라인요소는 서로 상호전환이 불가능한게 아니라 디폴트값이 블럭이고 디폴트값이 인라인인 것 뿐이라는 내용을 들어 지난 시간에 작성한 글에 추가했다.

보통 anchor요소는 inline요소로 그냥 작성하면 한줄 위에 주욱 연결되어 작성되는데, 

링크를 보기 좋은 구조로 짤 때 li를 활용해서 inline의 내용들을 원하는 모양으로 만들고는 한다.

네이버 같은 홈페이지에서 여러 링크 기능들이 ul과 li로 묶여 있는 모습을 확인할 수 있다.

 

 

anchor 요소도 css 작업이 가능하다.

 

 

■ ol의 활용

더보기
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>step03ol</title>
    <style>
        ol{
            list-style-type: none;
            padding:0;
            margin:0;

        }
        ol li {
            display : inline;
            padding:5px 10px;
        }
        ol li a{
            text-decoration:none;
            color:#000;
        }
        ol li:hover{
            background-color: #999;
            
        }
        ol li a:hover, ol li a:focus{
            background-color: #999;
            color: #fff;
        }/*focus는 탭을 눌렀을 때 웹페이지의 그 부분에 초점이 맞춰지는 기능*/

    </style>
</head>
<body>
    <h1>순서 있는 목록</h1>

    <h2>공부할 순서입니다</h2>
    <ol>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ol>

    <h2>링크</h2>
    <ol>
        <li><a href="#">html</a></li>
        <li><a href="#">css</a></li>
        <li><a href="#">javascript</a></li>
    </ol>
    <button>버튼</button>
    <!--버튼도 포커스가 오는 이벤트가 일어났다가 포커스를 잃은 것은 blur라는 이벤트가 일어남-->
</body>
</html>

 

 

 

<10:30 2교시>

 ■ focus

웹브라우저 페이지에서 tab 키를 누르면 웹브라우저에서 focus 될 수 있는 UI들에 초점이 맞춰진다. 

이 기능은 모니터를 보며 마우스를 클릭할 수 없는 시각장애인들이 tab키와 엔터만을 눌러 자신에게 필요한 웹브라우저 탐색을 가능하게 하는 역할을 한다.(텍스트는 음성 출력을 해주고, 이미지의 경우는 이미지를 설명한 텍스트를 추가하여 이 설명을 음성으로 출력해준다고 한다)

그렇기 때문에 시각장애가 있는 경우를 고려해서라도 개발자들은 이 기능을 추가해줄 필요가 있고, 더군다나 우리나라에서는 장애인 차별 금지법이 있기도 해서 필수적으로 개발해야 하는 기능이다.

focus가 사라진 반대 상황은 blur라고 한다.

 

 

■ 컨테이너 영역 만들기

div요소로 정의한 Container class는 웹 페이지에서 전체 콘텐츠를 담을 용기를 만드는 부분이다.

경우에 따라 고정된 영역의 창을 가진 Container(ex.네이버)와 전체 창의 폭을 다 쓰는 Container(ex.기타 소규모 사이트 등)가 있다.

폭이 바뀜에 따라 레이아웃도 반응해서 크기가 바뀌는 반응형 레이아웃이 있는데 우리가 만들 목표로, PC든 모바일이든, 사용자 화면의 창의 크기에 맞게 저절로 조절되는 특징이 있다.

더보기
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>step3 dl</title>
    <style>
        /*html{font-size: 10px} <-이 픽셀값이 rem으로 적용되는데, 디폴트 값은 16px임*/
        .container{
            border: 1px dotted green;
            max-width: 768px;/*가운데 정렬하기 전에 폭이 결정되어야 함*/
            /*max-가 붙으면 최대 길이상태에서 더 작아지면서 레이아웃이 반응할 수 있음*/
            margin: 0 auto; /*위아래 마진은 0, 좌우 마진은 auto로 가운데 정렬*/
        }
        dt{
            font-weight: bold;
            font-size: 1.2rem;
            color :#333;
            margin-top: 20px;
        }
        dd{
            font-size: 1rem;
            color: #555;
            margin-left: 20px;
            margin-bottom : 10px;
        }

    </style>

</head>
<body>
    <div class="container">

        <h1>정의형 목록(definition list) dl 요소</h1>
        <dl>
            <dt>제목</dt>
            <dd>자세한 내용..</dd>

            <dt>html</dt>
            <dd>Hyper Text Markup Language의 약자</dd>

            <dt>css</dt>
            <dd>Desing요소 결정</dd>

            <dt>javascript</dt>
            <dd>language적 요소 담당</dd>
        </dl>

    </div>
</body>
</html>

div는 정의되면 자식요소가 부모요소의 폭을 그대로 다 가질 뿐, 높이는 자식요소에게 필요한 만큼만 차지한다.

 

 

■ 테이블 만들기

더보기
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>step3 table</title>
    <style>
        container{
            max-width: 768px;
            margin: 0 auto;
        }
        table{
            width: 100%;
            border: 2px solid;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);/*그림자*/
            border-collapse: collapse;
            /*테두리 겹침 제거 by 선을 붕괴 default seperate*/
        }
        th{
            background-color: rgb(33, 112, 33);
            color: white;
            padding: 10px 15px;

        }
        td{
            padding: 10px 15px;
            border-bottom: 2px solid rgb(33, 112, 33);
            text-align: center;
        }
        tr:nth-child(odd){
            background-color: #90b996;
        }
        tr:nth-child(even){
            background-color: #9fd4b5;
        }

    </style>

</head>
<body>
    <div class="container">
        <h1>표(table)형식으로 정보를 출력하기</h1>
        <table>
            <tr>
                <th>번호</th>
                <th>이름</th>
                <th>주소</th>
            </tr>           
            <tr>
                <td>1</td>
                <td>나</td>
                <td>경기</td>
            </tr>
            <tr>
                <td>2</td>
                <td>너</td>
                <td>서울</td>
            </tr>
            <tr>
                <td>3</td>
                <td>우리</td>
                <td>서울</td>
            </tr>
        </table>
    </div>
</body>
</html>

<11:30 3교시>

■rem의 개념

html 요소의 font-size는 디폴트 값이 16px이다.

별도로 html에서 폰트 사이즈에 변형을 주지 않으면, 1rem=16px에 해당되며, 이 배수로서 글자의 크기 비율 등을 조절하게 된다.

만약, html에서 폰트 사이즈에 변형을 줬으면, 1rem=변형주며 정의한 값이 되고, 그것은 10px이 되어도 되고 20px이 되어도 된다. 그렇다면 rem의 배수에 맞게 글자 크기 비율이 조절된다.

 

 

■테이블 요소

테이블 요소는 우리가 사용 중인 웹페이지들에서도, 우리가 만들게 될 웹페이지들도 게시판 등 매우 다양하게 활용되고 있다.

테이블 요소에서 사용하는 단어들의 약자는 다음과 같다.

tr : table row

th: table head

td: table data

tfoot : tablefoot

tbody: table body

 

■ 테이블 스타일 적용하기

더보기
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table2</title>
    <style>
        .tb-member caption{
            text-align:left;
            font-weight: bold;
            font-size: 1.3rem;
        }

    </style>

</head>
<body>
    <div class="container">
        <table class="tb-member">

            <caption>회원 목록</caption>
            <!--caption은 표의 제목을 나타내서 
            테이블 데이터가 뭔지 알게 해줌-->
            <thead>
                <tr>
                    <th>번호</th>
                    <th>이름</th>
                    <th>주소</th>
                </tr>   
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>나</td>
                    <td>경기</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>너</td>
                    <td>서울</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>우리</td>
                    <td>서울</td>
                </tr>
            </tbody>

        </table>
        <h1>tfoot 이 있는 table</h1>
        <table border="1" class="my-table">
            <caption>GS25 현금, 카드 매출 내역</caption>
            <colgroup><!--칼럼의 폭 결정-->
                <col width="200">
                <col width="100">
                <col width="100">
            </colgroup>
            <thead>
                <tr>
                    <th>상품명</th>
                    <th>현금</th>
                    <th>카드</th>
                </tr>
            </thead>
            <!--구조적으로 tfoot이 tbody보다 위에 있는 것은 역시
            시각장애인들 배려 용으로, 
            알고 싶은 정보가 테이블 row보다 한참 밑에 있게 된다면
            그걸 다 내려가보기가 불편할 것이므로
            tfoot 같은 걸로 알고 싶은 합계 정보를 미리 정리해놔 주는거-->
            <tfoot>
                <tr>
                    <th>합계</th>
                    <td>4,300원</td>
                    <td>800원</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>삼각김밥</td>
                    <td>800</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>도시락</td>
                    <td>3,500</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>박카스</td>
                    <td>0</td>
                    <td>800</td>
                </tr>
            </tbody>
        </table>

    </div>


</body>
</html>

 

 

border radius 요소는 표의 모서리를 둥글게 굴리는 기능을 하는데, border radius가 작을수록 뾰족하게 둥근 모서리가 되고, border radius가 클수록 뭉툭하게 둥근 모서리가 된다.

 

overflow: hidden;을 입력하면, 입력된 css 요소가 자기거보다 더 큰 사이즈의 보더 값이 정의된 요소의 사이즈가 커서 넘친 부분을 숨김으로써 표를 둥굴릴 수가 있다.

 

 

 

■ tfoot의 활용 : 주석 안의 내용이 핵심

 

 

 

■ anchor 활용

더보기
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>anchor</title>
</head>
<body>
    <div class="container">
        <h3>a(anchor)요소는 하이퍼링크, 책갈피, javascript 등을 수행할 때 사용한다</h3>
        <a href="hello.html">안녕</a>
        <br>
        <a href="https://daum.net">daum으로 이동</a>
        <br>
        <a href="https://daum.net" target="_blank">새로운 탭에서 daum으로 이동</a>
        <br>
        <!--이미지에 링크 걸기-->
        <a href="#"><img src="https://picsum.photos/id/237/200/300" alt="멍멍이이미지"></a>
    </div>
</body>
</html>

 

 

<12:30 4교시>

node.js에 대해 간단히 살펴보고 각자 복습하는 시간이라 블로그 작성 마저 하는 중

■ node.js(설치 링크 바로 가기)

우리가 크롬에서 사용하던 검사 > 콘솔 창에서 입력하는 것은 실시간으로 크롬 웹페이지에서 응답하고 프로그래밍 되는데, 이런 콘솔창의 프로그래밍 기능을 활용해서 javascript 언어로 프로그램을 개발할 수 있는 node.js라는 프로그램이 있다.

node.js를 설치하면 우리가 크롬 콘솔창에서 보던 기능들을 그대로 명령프롬프트에서 node에 접속해서 사용할 수 있다.

우리도 나중에 이 node.js 환경에서 돌아가는 react를 만들 예정이라고 한다.

 

 

 

 

<오전 수업에서 다룬 것 마무리>

우리가 그동안 배운 DB에서의 데이터 입력과 조회는 앞으로 우리가 배울 웹서버 앱이 할 내용들이고, 웹페이지에서는 이 데이터들을 불러와서 유저에게 보여주는 역할을 함.

 

우리가 지금 하고 있는 html은 웹페이지에서 데이터를 불러올 틀(그릇)을 만드는 것)

 

ex) 뉴스 기사 사이트에서 DB 업데이트로 신문 기사 내용을 추가하면, 뉴스 기사 사이트에서는 원래 사용하던 UI 그대로 전달되는 내용의 DATA 값만 바뀌는 꼴