1.  자바 스크립트

👩🏻‍🚀  자바 스크립트는 프로그램을 실행하는 도중에 변수에 저장되는 데이터 타입이 동적으로 바뀌는 동적 타입 언어

 

1) 웹 문서 안에 <script> 태그로 자바스크립트 작성

 

🍯  소스 코드가 짧을 경우 웹 문서에서 자바스크립트를 실행할 위치에 바로 코드 작성 가능

🍯  <script></script> 태그 사용

🍯  가급적 이미지나 텍스트 등의 요소를 다 표시한 후에 실행

🍯  영어 대소문자를 구별함

<body>
    <!-- 글자색 바꾸기 -->
    <h1 id="heading">자바스크립트</h1>
    <p id="text">위 텍스트를 클릭해 보세요</p>
    
<script>
    let heading = document.querySelector('#heading');
    heading.onclick = function() {
        heading.style.color = 'red';
    }
</script>
</body>


 

2) 외부 스크립트 파일로 연결해서 작성

 

<script src="외부 스크립트 파일 경로"></script>

 

🍯  CSS 처럼 자바스크립트 소스도 따로 파일로 저장한 후 웹 문서에 연결해서 사용 가능

🍯  외부 자바스크립트 파일은 <script> 태그 없이 소스만 작성하고 확장자는 *.js로 저장

<body>
    <!-- 글자색 바꾸기 -->
    <h1 id="heading">자바스크립트</h1>
    <p id="text">위 텍스트를 클릭해 보세요</p>

    <!-- css 처럼 외부 파일로 만들어서 실행 가능. -->
    <script src="js/change-result.js"></script>

</body>

 


 

2.  자바스크립트 용어와 기본 입출력 방법

1) 식 espression과 문 statement

 

🐝  '식'은 표현식이라고도 함. 어떤 값을 만들어 낼 수 있다면 모두 식이 될 수 있고, 식은 변수에 저장됨

🐝  '문'은 명령과 비슷. 문의 끝에는 세미콜론(;)을 붙여서 구분  ex. 조건문, 제어문

inch * 2.54 // 연산식은 식
"안녕하세요?"; // 문자열도 식
5           // 숫자도 식

 


2) 간단한 입출력 방법

 

(1) 알림 창 출력

alert(메시지)

 

🐝  알림창을 만드는 방법은 alert()를 입력하고 괄호 안에 따옴표와 함께 메시지를 넣어주면 된다.

 

<script>
    alert('안녕하세요!');
    alert(10 * 30);
</script>

 


 

(2) 확인 창 출력

confirm(메시지)

 

🐝  알림 창은 단순히 메시지를 보여주는 기능만 하지만, 확인 창은 사용자가 [확인], [취소] 버튼 중에서 직접 클릭

🐝  확인을 눌러야 이후의 코드가 실행(alert()함수가 종료)이 됨

<script>
    var reply = confirm('정말 배경 이미지를 바꾸겠습니까?')
</script>


 

(3) 프롬프트 창에서 입력받기

prompt(메시지) 또는 prompt(메시지, 기본값)

 

🐝  프롬프트 prompt 창은 텍스트 필드가 있는 작은 창

🐝  텍스트 필드 안에 간단한 메시지를 입력할 수 있으며 그 내용을 가져와 프로그램에 사용 가능

🐝  기본값을 지정하지 않으면 빈 텍스트 필드로 표시

 

<script>
    var name = prompt("이름을 입력하세요.", "홍길동");
</script>


 

(4) 브라우저 화면에 출력을 담당하는 document.write()문

 

🐝  결과값을 확인하는 용도로 많이 쓰임

🐝  괄호 안에 결과값이 저장된 변수나 html 태그를 따옴표 안에 넣을 수도 있다.

<script>
    document.write('<h1>환영합니다.</h1>')
</script>

 


 

(5) 콘솔 창에 출력하는 console.log()문

 

🐝  괄호 안의 내용을 콘솔 창에 표시. 콘솔 창은 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간이다.

🐝  콘솔 창에서 소스 코드의 오류를 발견하거나 변숫값을 확인할 수도 있다.

🐝  괄호 안에 변수, 따옴표 사이에 표시할 텍스트를 넣을 수 있다. but! html 태그는 불가

 

주의점 : 자바 스크립트가 각각의 문장을 구별하는 방법
    1) 문장의 끝에 ;(세미 콜론)  2) 줄 바꿈 둘 중 하나
다른 언어로의 확장(파이썬, 코틀린을 제외한 대부분의 언어가 세미 콜론 사용, 즉 1번 사용) 및
명료성을 위해 세미 콜론을 붙이는 것이 좋음. (해당 라인을 작업 중인지 완료 했는지 구분)

 

<script>
    console.log('안녕하세요')
    console.log(10*30)
</script>

 

콘솔 에러 확인하기 - 빨간색 메세지로 나온다.
ReferenceError : 단어 오탈자 / SyntaxError : 기호에서 오탈자 
<script>
    aler('안녕하세요!'); /* Uncaught ReferenceError: aler is not defined */
</script>

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]


1.  position 속성

 

🥑  배치 방법을 지정하는 속성
🥑  각 요소의 위치를 정하는 방법

상대 위치 좌표 : 태그 요소를 입력한 순서를 통해 상대적으로 위치를 지정
절대 위치 좌표 : 태그 요소로 만들어진 x좌표와 y좌표를 설정해 절대 위치를 지정

💡 함께 적용가능한 속성
     top - y축 상단기준
     bottom - y축 하단기준
     left - x축 좌측기준
     right - x축 우측기준
     z-index - 요소의 쌓임 순서를 정의. 값이 클 수록 앞쪽에 배치 된다.

 

종류 설명
static 문서의 흐름(위에서 아래로 순서대로 배치)에 맞춰 배치. 기본값.
relative 상대 좌표와 함께 위치를 지정 (상대위치 지정방식)
태그가 만들어진 순서대로 나열
absolute 절대 위치 좌표를 설정. 부모 박스 기준으로 좌표를 설정
단, 부모 요소가 static일 경우 부모 요소로 인식하지 않음
fixed 고정된 상태로 위치가 지정

 


 

 

static

위치지정불가 ) top, left, right, bottom의 영향을 받지 않음

 

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            border: 4px solid black;
            margin-left: 30px;
            font-size: 30px;
            line-height: 300px;
            text-align: center;
        }

    </style>
</head>
<body>
    <div>static-1</div>
    <div>static-2</div>
    <div>static-3</div>
</body>

 


 

 

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            border: 4px solid black;
            margin-left: 30px;
            font-size: 30px;
            line-height: 300px;
            text-align: center;

            /* position 속성을 지정하지 않은 상태 : static */
            left: 100px; /* 좌표 인식이 안됨 */
            top: 100px; /* 좌표 인식이 안됨 */
        }
    </style>
</head>
<body>
    <div>static-1</div>
    <div>static-2</div>
    <div>static-3</div>
</body>

 


relative

위치지정가능) 부모박스의 역할로 주로 사용 
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            border: 4px solid black;
            margin-left: 30px;
            font-size: 30px;
            line-height: 300px;
            text-align: center;

            position : relative; /* 상대좌표 */
            top : 100px;
            left : 100px;
        }

    </style>
</head>
<body>
    <div>relative-1</div>
    <div>relative-2</div>
    <div>relative-3</div>
</body>

 


absolute

html 화면(x, y)을 기준으로 위치가 지정.
만들어진 순서대로 위쪽에 배치 (위치지정 가능) top, left, right, bottom의 영향을 받음.
기준이 되는 위치는 가장 가까운 부모 요소나 조상 요소 중 position 속성이 relative인 요소
absolute를 사용하려면 그 요소를 감싸는 <div>를 만들고 position 속성을 relative로 지정해 놓고 사용해야 함

 

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .movie { /* 부모 요소 */
            width: 700px;
            height: 500px;
            border: 2px solid gray;
            background-color: darkslateblue;

            position: relative; /* 상대 좌표 */
        }

        /* 자식 요소 */
        /* 버튼 */
        .movie div {
            width: 120px;
            height: 120px;
            border: none;
            border-radius: 120px;
            background-color: antiquewhite;
            text-align: center;
            line-height: 120px;
            font-size: 30px;

            position: absolute;
        }

        .prev {
            top: 50%; /* top으로의 위치 */
            left: 10px; /* left로의 위치 */
            margin-top: -60px; /* 반지름 값만큼 빼줘야 중앙 정렬이 됨 */
        }

        .play {
            top: calc(50% - 60px);
            left: calc(50% - 60px);
        }

        .next {
            top: calc(50% - 60px);
            right: 10px;
        }

    </style>
</head>
<body>
    <!--부모 요소 relative -->
    <div class="movie">
        <!--자식 요소 absollute -->
        <div class="prev">PREV</div>
        <div class="play">▶</div>
        <div class="next">NEXT</div>
    </div>

</body>

 


fixed

스크롤과 상관없이 html화면기준 좌측상단을 기준으로 좌표고정
top,left, right, bottom의 영향을 받음

 

<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 3000px; /* 스크롤 바를 나타내기 위해 문서의 높이를 임의의 크기로 지정 */
        }

        div {
            width: 300px;
            height: 300px;
            border: 4px solid black;
            margin-left: 30px;
            font-size: 30px;
            line-height: 300px;
            text-align: center;
        }

        div:nth-of-type(1) { /* div 박스 중에서 첫 번째 박스 */
            background-color: red;
            left: 100px; /* 왼쪽 좌표 */
            top: 100px; /* 상단 좌표 */
            position: absolute;
        }

        div:nth-of-type(2) { /* div 박스 중에서 두 번째 박스 */
            background-color: orangered;
            right: 100px; /* 오른쪽 좌표 */
            bottom: 100px; /* 하단 좌표 */
            position: fixed;
        }

    </style>
</head>
<body>
    <div>absolute</div>
    <div>fixed</div>
</body>

 

스크롤 밑으로 내렸을 때

 


z-index

 

<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 300px;
            height: 300px;
            margin-left: 30px;
            font-size: 30px;
            line-height: 300px;
            text-align: center;

            position: absolute; /* 절대 좌표 */
        }

        div:nth-of-type(1) { /* div 박스 중에서 첫 번째 박스 */
            background-color: indianred;
            left: 100px; /* 왼쪽 좌표 */
            top: 100px; /* 상단 좌표 */
            z-index: 5;
        }

        div:nth-of-type(2) { /* div 박스 중에서 두 번째 박스 */
            background-color: lightgoldenrodyellow;
            left: 250px; /* 왼쪽 좌표 */
            top: 250px; /* 상단 좌표 */
            z-index: 3; /* 우선 순위 변경 */
        }

        div:nth-of-type(3) { /* div 박스 중에서 세 번째 박스 */
            background-color: teal;
            left: 400px; /* 왼쪽 좌표 */
            top: 400px; /* 상단 좌표 */
        }

    </style>
</head>
<body>
    <div>box-1</div>
    <div>box-2</div>
    <div>box-3</div>
</body>

 

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]


 

1.  표 만들기

🌻  표는 웹 페이지에서 자료를 정리할 때 자주 사용하는 요소

      실제는 게시판이나 회원 가입 페이지의 레이아웃을 만드는데 주로 사용

 

1) 표 구성요소 

 

🍯 tablerowcolumn 그리고 cell 로 이루어진다.

 

table 구조

   -  table > tr > td

 

 table 관련태그


   - table                       :  table 전체를 감싸는 태그

   - caption                  :  표에 제목을 붙일 때 <table> 태그 바로 다음에 사용. 표의 위쪽 중앙에 표시

   - tr("table row")   :  테이블의 행을 의미하는 태그. 자손으로 th나 td가 반드시 있어야 한다.
   - td("table data") :  테이블의 일반 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다.
                                           base style - 왼쪽정렬 (text-align:left)
   - th("table header") : 테이블의 제목 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다.
                                           base style - 중앙정렬(text-align:center), 두껍게(font-weight:bold)

    <style>
        table {
            border: 2px solid red;
        }
        td,th {
            border: 2px solid black;
            width: 200px;
        }
    </style>
</head>
<body>
    <caption>표의 제목1</caption>
    <table>
        <!-- 행의 시작 -->
        <tr>
            <!-- 열의 시작 -->
            <th>제목1</th>
            <th>제목2</th>
        </tr>
        <!-- 행의 시작 -->
        <tr>
            <!-- 열의 시작 -->
            <td>내용1</td>
            <td>내용2</td>
        </tr>
        <!-- 행의 시작 -->
        <tr>
            <!-- 열의 시작 -->
            <td>내용3</td>
            <td>내용4</td>
        </tr>

</table>


 

colspan, rowspan


   - 표를 만든 후 표의 행이나 열을 합치는 속성으로 셀을 만드는 <td>,<th> 태그에서 사용


       🥕 colspan="합쳐지는 열의 개수" : 가로의 병합
       🥕 rowspan="합쳐지는 행의 개수" : 세로의 병합

<head>
    <style>
        td, th {
            border: 2px solid black;
        }
    </style>
</head>
<body>
<!--colspan-->
<table>
    <caption>colspan</caption>
    <tr>
        <th colspan="2">코리아교육그룹</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

</body>


 

col, colgroup

 

   -  '특정 열'에 배경색을 넣거나 너비를 바꿀 때 사용. 반드시 <caption> 태그 다음에 써야 함

    -  <col> 태그는 열을 1개만 지정, <colgroup> 태그는 <col>태그를 2개 이상 묶어서 사용 

    -  <colgroup> 태그 안에 표 전체 열 개수 만큼 <col> 태그를 작성해야 함

 

<caption>선물용과 가정용 상품 구성</caption>
<colgroup>
  <col style="background-color:#eee;">
  <col>
  <col style="width:150px">
  <col style="width:150px">
</colgroup>

 


 

2) 표 구조

 

🍯  표의 구조는 head, body, foot 으로 구분

 thead : 표의 제목 부분
 tbody : 표의 본문 부분
 tfoot : 표의 요약 부분

 

<head>
    <style>
        td, th {
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <table>
        <caption>공지사항</caption>
        <!--표의 제목 부분-->
        <thead>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>날짜</th>
        </tr>
        </thead>

        <!--표의 본문 부분-->
        <tbody>
        <tr>
            <td>001</td>
            <td>코리아교육그룹 2020 대한민국 교육브랜드 대상</td>
            <td>2020-07-01</td>
        </tr>
        <tr>
            <td>002</td>
            <td>청년학당 WE-GO</td>
            <td>2020-06-29</td>
        </tr>
        </tbody>

        <!-- 표의 요약 부분 -->
        <tfoot>
        <tr>
            <td>250</td>
            <td>10개의 게시물</td>
            <td>2020-07</td>
        </tr>
        </tfoot>
    </table>
</body>

 

 

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

 


 

1.  목록 스타일

🍋  목록 태그에 스타일을 지정하는 방법으로 순서가 없는 항목(ul), 순서가 있는 항목(ol) 태그에 적용

 

1)   list-style-type 속성

 

  🥑  순서가 없는 항목 태그와 순서가 있는 항목 태그 앞에 나오는 블릿과 번호 스타일을 변경 

종류 설명 예시
disc 채운 원 모양
circle 빈 원 모양
square 채운 사각형 모양
decimal 1부터 시작하는 10진수 1, 2, 3...
decimal-leading-zero 앞에 0이 붙는 10진수 01, 02, 03...
lower-roman 로마 숫자 소문자 i, ii, iii ...
upper-roman 로마 숫자 대문자 I, II, III ...
lower-alpha 또는 lower-latin 알파벳 소문자 a, b, c...
upper-alpha 또는 upper-latin 알파벳 대문자 A, B, C...
none 불릿이나 숫자를 없앰  

 

순서 없는 태그 사용 예
<head>
    <style>
        .bullet_circle {
            list-style-type: circle; /* 빈 원으로 표시 */
        }
        .bullet_none {
            list-style-type: none; /* 블릿을 표시하지 않음 */
        }
    </style>
</head>
<body>
    <!--블릿 변경하기-->
    <ul class="bullet_circle">
        <li>회사소개</li>
        <li>생산설비</li>
        <li>제품소개</li>
        <li>온라인문의</li>
        <li>커뮤니티</li>
    </ul>
    <!--블릿 없애기-->
    <ul class="bullet_none">
        <li>회사소개</li>
        <li>생산설비</li>
        <li>제품소개</li>
        <li>온라인문의</li>
        <li>커뮤니티</li>
    </ul>
</body>

 

출력 결과


순서 있는 태그 사용 예
<head>
    <style>
        .style-num01 {
            list-style-type: lower-alpha; /* 알파벳 소문자 */
        }
        .style-num02 {
            list-style-type: upper-latin; /* 알파벳 대문자 */
        }
    </style>
</head>
<body>
    <!--블릿 변경하기-->
    <ol class="style-num01">
        <li>회사소개</li>
        <li>생산설비</li>
        <li>제품소개</li>
        <li>온라인문의</li>
        <li>커뮤니티</li>
    </ol>
    <!--블릿 없애기-->
    <ol class="style-num02">
        <li>회사소개</li>
        <li>생산설비</li>
        <li>제품소개</li>
        <li>온라인문의</li>
        <li>커뮤니티</li>
    </ol>
</body>

출력 결과


 

2) list-style-position 속성

 

list-style-position: inside | outside;

 

  🥑  전체 선택자(*)를 지정해서 마진과 패딩 값을 0으로 초기화하는 이유
         ▶️ 브라우저마다 기본 패딩값과 마진 값이 달라서 0으로 초기화 해서 사용

        ▶️ 이런 경우 블릿이나 번호타입을 지정해도 화면에 보이지 않음 

 

 🥑  list-style-position 속성 : 항목 번호가 보이지 않는 경우 들여쓰기 스타일 사용

  inside : 블릿이나 숫자를 안쪽으로 들여씀
  outside : 블릿이나 숫자를 밖으로 내어씀

 

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .style-num01 {
            list-style-type: lower-alpha;
            list-style-position: inside;
        }

    </style>
</head>
<body>
    <ol class="style-num01">
        <li>회사소개</li>
        <li>생산설비</li>
        <li>제품소개</li>
        <li>온라인문의</li>
        <li>커뮤니티</li>
    </ol>

</body>

출력 결과


 

2.  표 스타일

1)  제목 위치를 정해주는 caption-side 속성

caption-side: top | bottom

 

top  :  캡션을 표 윗부분에 표시. 기본값
bottom :  캡션을 표 아랫부분에 표시.

 


 

2) 표 테두리를 그려 주는 border 속성

 

<head>    
    <style>
          table {
             caption-side: bottom;  /* 표 캡션 위치 */
             border:1px solid black;  /* 표 테두리는 검은 색 실선으로 */
          }
          td, th {
             border:1px dotted black;  /* 셀 테두리는 검은 색 점선으로 */
             padding:10px;  /* 셀 테두리와 내용 사이의 여백 */
             text-align:center;  /* 셀 내용 가운데 정렬 */
          }
       </style>
    </head>
    <body>    
       <h2>상품 구성</h2>
       <table>
          <caption>선물용과 가정용 상품 구성</caption>
          <thead>
             <tr>
                <th>용도</th>
                <th>중량</th>
                <th>갯수</t>
                <th>가격</th>
             </tr>
          </thead>
          <tbody>
             <tr>
                <td rowspan="2">선물용</td>
                <td>3kg</td>
                <td>11~16과</td>
                <td>35,000원</td>
             </tr>
             <tr>
                <td>5kg</td>
                <td>18~26과</td>
                <td>52,000원</td>
             </tr>
             <tr>
                <td rowspan="2">가정용</td>
                <td>3kg</td>
                <td>11~16과</td>
                <td>30,000원</td>
             </tr>   
             <tr>
                <td>5kg</td>
                <td>18~26과</td>
                <td>47,000원</td>
             </tr>
          </tbody>        
       </table>
    </body>

 


 

3)  셀 사이 여백을 지정하는 border-spacing 속성

 

🍯  table 태그와 border 속성을 사용했을 때 테두리와 셀들의 간격을 지정

border-spacing: 수평거리 수직거리

 

<head>
    <style>
        table {
            border: 2px solid black;
            border-spacing: 20px 40px;
        }
        td {
            padding: 15px;
            border: 1px dotted black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <caption>표 스타일</caption>
        <tr>
            <td>시네마천국</td>
            <td>벤허</td>
        </tr>
        <tr>
            <td>11:00~14:30</td>
            <td>16:00~19:00</td>
        </tr>
    </table>
</body>

 

 

 


 

4)  표와 셀 테두리를 합쳐 주는 border-collapse 속성

 

🍯  표의 바깥 테두리와 셀의 각 테두리가 떨어져 있는 것을 합칠 것인지 그대로 둘 것인지 조정 가능
🍯  table과 td사이의 선값의 결합 유무를 결정하는 속성

collapse  :  표와 셀의 테두리를 합쳐 하나로 표시
separate  :  표와 셀 테두리를 따로 표시. 기본값 

 

<head>
    <style>
        table {
            border: 2px solid black;
            border-collapse: collapse;
        }
        td {
            padding: 15px;
            border: 1px dotted black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <caption>표 스타일</caption>
        <tr>
            <td>시네마천국</td>
            <td>벤허</td>
        </tr>
        <tr>
            <td>11:00~14:30</td>
            <td>16:00~19:00</td>
        </tr>
    </table>
</body>

separate 인 경우
collapse 인 경우

 


 

5) empty-cells 속성 

 

🍯  table 태그에서 내용이 없는 빈 셀들의 표시 여부를 지정

 show : 빈 셀의 주위에 테두리를 표시하여 빈 셀을 나타냄. 기본값.
 hide : 빈 셀에 테두리를 그리지 않고 비워 둠
<head>
    <style>
        table {
            border: 2px solid black;
            empty-cells: hide;
        }
        td {
            padding: 15px;
            border: 1px dotted black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <caption>표 스타일</caption>
        <tr>
            <td>시네마천국</td>
            <td>벤허</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>11:00~14:30</td>
            <td>16:00~19:00</td>
        </tr>
    </table>
</body>

 

hide로 지정한 경우

 


 

6)  width, height
        

🍯  표의 넓이와 높이를 지정. 
🍯  셀 / 전체 표의 넓이에 스타일 지정 가능 ▶️ 높이와 넓이를 지정하지 않으면 셀의 내용만큼 차지


 

 7)  table-layout 속성


🍯  콘텐츠에 맞게 셀 넓이를 지정
🍯  셀의 width 값을 지정하면 해당 크기에 맞게 화면에 맞춰 표시
       ➡️  영문을 띄어쓰기 없이 길게 입력을 하면 셀의 width 값은 무시되고, 내용이 한줄로 표시 됨

 

fixed : 셀 넓이를 고정하여 셀 내용에 따라 셀의 넓이가 달라지지 않음
auto : 기본값. 셀의 내용에 따라 넓이가 달라짐

 

<head>
    <style>
        table {
            border: 2px solid black;
            border-collapse: collapse;
            width: 400px;
            table-layout: fixed;
            word-break: break-all; /* 셀의 내용이 벗어나지 않도록 함 */
        }
        td {
            width: 200px;
            height: 40px;
            padding: 15px;
            border: 1px dotted black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <caption>표 스타일</caption>
        <tr>
            <td>cinemacinemacinemacinemacinemacinemacinema</td>
            <td>벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허</td>
        </tr>
        <tr>
            <td>11:00~14:30</td>
            <td>16:00~19:00</td>
        </tr>
    </table>

</body>

 

 

 

 

 

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]


 

1.  글꼴 관련 스타일

font-family: <글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]

 

🍒  font-family : 웹 문서에서 사용할 글꼴을 지정

        ➡️  2개 이상 지정할 때 이름 사이에 쉼표(,)를 넣어 구분

 


font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>

 

🍒  font-size : 글자 크기 지정. 단위는 px(픽셀) 이나 pt(포인트) 등으로 지정할 수 있고 백분율도 가능

 

키워드 사용하여 글자 크기 지정
xx-small < x-small < small < medium < large < x-large < xx-large

 

단위 사용하여 글자 크기 지정
1em = 16px, 12pt
em   : 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정
rem  :  문서 시작 부분에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정
ex     :  해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정
px     :  모니터의 1픽셀을 기준(1px)으로 한 후 비율값을 지정
pt      :  포인트라고 하며, 일반 문서에 많이 사용

 


font-style: normal | italic | oblique

 

🍒  font-style : 글자를 이탤릭체로 표시할 때 사용

 


font-weight: normal | bold | bolder | lighter | 100 | ... | 900

 

🍒  font-weight : 글자 굵기를 지정. 100~900사이에서 400은 normal, 700은 bold에 해당

 


 

2.  웹 폰트 사용

 

웹 폰트 업로드하고 사용하기

 

  🍒  컴퓨터에서 사용하는 글꼴은 트루타입(TrueType)이고 파일 확장자는 *.ttf

          ▶️  파일 크기가 커서 웹에서 사용하기엔 적절하지 x

  🍒  웹에 적합한 글꼴 : EOT embedded open type / WOFF web open font format 

  

@font-face {
    font-family: <글꼴 이름>; <!-- 글꼴 파일 이름과 같은 이름으로 사용 -->
    src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>, ....]; <!-- 글꼴 파일의 경로 -->
    }

 

    ⚡️  local()문을 사용해서 사용자 시스템에 해당 글꼴이 있는지 먼저 확인해야 한다.

 

@import 방식
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

        h1 {
                font-family: "Nanum Pen Script", cursive;
                font-weight: 400;
                font-style: normal;
            }

    </style>
</head>
<body>

<h1>안녕하세요~</h1>

</body>

 

link 방식

 

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
    <style>
        /* link 방식 적용. Nanum Brush Script 폰트 적용 */
        * {
            padding: 0;
            margin: 0;
        }

        p {
            margin: 40px;
        }

        .test {
            font-family: "Nanum Pen Script", cursive;
            font-weight: 400;
            font-style: normal;
        }

    </style>
</head>

 


 

3.  텍스트 관련 스타일

 

1) 글자색 지정하는 color 속성

 

color: <색상>

 

hsl과 hsla

   

    · hsl은 hue(색상), saturation(채도), lightness(명도)의 줄임말

    · hsla는 hsl에 alpha(불투명도)를 추가한 것을 의미

 

<style>
  h1 { 
    color:#0000ff;   /* 16진수 표기법 */
  } 
  p {
    color:green;  /* 색상 이름 */
  }
  .accent {
    color:hsl(0, 100%, 50%);  /* hsl 표기법 */
    font-weight:bold;
  }
</style>

 

 

rgb와 rgba로 표현하는 방법

 

     ·  rgb는 red, green, blue의 줄임말

     ·  하나도 섞이지 않았을 때는 0으로 표시, 가득 섞였을 때는 255로 표시

     ·  rgba에서 맨 끝의 a(alpha)는 불투명도 값을 나타내며 0~1의 값 중에서 사용할 수 있다.

<!--파란색 지정 -->
h1 { color: rgb(0, 0, 255); }

 


 

2) 텍스트 정렬하는 text-align 속성

 

text-align: start | end | left | right | center | justify | match-parent

 

종류 설명
start 현재 텍스트 줄의 시작 위치에 맞추어 문단 정렬
end 현재 텍스트 줄의 끝 위치에 맞추어 문단 정렬
left 왼쪽에 맞추어 문단 정렬
right 오른쪽에 맞추어 문단 정렬
center 가운데에 맞추어 문단 정렬
justify 양쪽에 맞추어 문단 정렬
match-parent 부모 요소를 따라 문단 정렬

🍒  왼쪽 정렬이 기본값. 양쪽 정렬과의 차이는 왼쪽 정렬에서는 오른쪽에 여백이 생기지만 양쪽 정렬에서는 여백이 없다.

 


 

4)  줄 간격을 조절하는 line-height 속성

 

🍒   line-height 속성을 이용하면 줄 간격을 원하는 만큼 조절할 수 있다.

🍒   텍스트를 세로 가운데 정렬할 때 height 값과 똑같이 추가하면 된다.

 

p { font-size: 12px; line-height: 24px; }
p { font-size: 12px; line-height: 2.0;; }
p { font-size: 12px; line-height: 200%; }

 


 

5) 텍스트의 줄을 표시하거나 없애 주는 text-decoration 속성

 

🍒  텍스트에 밑줄을 긋거나 취소선을 표시하는 속성

       ex. 하이퍼링크 적용하면 기본적으로 밑줄이 생김

<p style="text-decoration:none">none</p>
<p style="text-decoration:underline">underline</p>
<p style="text-decoration:overline">overline</p>

 


 

6) 텍스트에 그림자 효과를 추가하는 text-shadow 속성

text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>

 

<가로 거리>  :  텍스트로부터 그림자까지의 가로 거리로 필수 속성.
                           양수값은 오른쪽, 음수값은 왼쪽
<세로 거리>  :  텍스트로부터 그림자까지의 세로 거리로 필수 속성.
                           양수값은 아래쪽, 음수값은 위쪽
<번짐 정도>  :  그림자가 번지는 정도. 양수값은 모든 방향으로 퍼짐, 음수값은 모든 방향으로 축소
<색상>          :  그림자 색상을 지정

 


 

7) 텍스트의 대소 문자를 변환하는 text-transform 속성

 

👾  capitalize : 첫 번째 글자를 대문자로 변환
👾  uppercase : 모든 글자를 대문자로 변환
👾  lowercase  : 모든 글자를 소문자로 변환
👾  full-with     : 가능한 한 모든 문자를 전각 문자로 변환

 


 

8) 글자 간격을 조절하는 letter-spacing, word-spacing 속성

 

🍒  letter-spacing 속성은 글자와 글자 사이의 간격을 조절

🍒  word-spacing 속성은 단어와 단어 사이 간격을 조절

 

<head>
  <style>  
    p {
      font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      font-size:80px;
      text-shadow:3px 3px 1px #ccc;  /* 오른쪽 아래로 파란색 그림자 */
    }
    .spacing1 {
      letter-spacing:0.2em;  /* 글자 간격 0.2em */
    }
    .spacing2 {
      letter-spacing:0.5em;  /* 글자 간격 0.5em */
    }      
  </style>
</head>
<body>
  <p>CSS</p> 
  <p class="spacing1">CSS</p>
  <p class="spacing2">CSS</p>
</body>

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

 


 

1.  폼 form 삽입하기

 

🐰  form : 여러 입력 양식을 그룹화하고 전송

🐰  폼과 관련한 작업은 정보를 저장하거나 검색, 수정하는 것이 대부분인데 모두 데이터베이스를 기반으로 작동

        ➡️  텍스트 박스나 버튼 같은 폼 형태는 HTML 태그로 만들지만,

             폼에 입력한 사용자 정보는 ASP나 PHP, JSP같은 서버 프로그래밍을 이용해 처리

 

    🥕  form을 만들고 사용자 화면을 구성하는 영역은 프론트엔드 영역에서 담당
    🥕  form을 통해 전달 받은 데이터를 가공하는 일은 벡엔드 영역에서 처리

 

 

1) 폼을 만드는 <form> 태그

<form [속성="속성값"]>여러 폼 요소</form>

 

          💡 폼 태그의 속성

종류 설명
method 폼을 서버로 전송할 때 http 메소드를 지정(=전송방식)

· get : 주소표시줄에 사용자가 입력한 내용이 그대로 표시 - 보안이 위험
· post : 대부분이 사용하는 방식, 내부적으로 보이지 않게 전송
action 특정 주소값이나 파일 위치. 폼 데이터가 전송되는 곳. 
name 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정
target action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함

 

🐰  autocomplete 속성 : 기본값. 자동 완성 기능

        ▶️  입력한 적 있는 값을 한 두글자 정도 입력하면 이전에 입력 내용을 자동으로 보여준다.

<!-- 자동 완성 기능 끄기 -->
<form action="" autocomplete="off">
...
</form>

 


 

2)  폼 요소를 그룹으로 묶는 <fieldset>, <legend> 태그

<fieldset [속성="속성값"]>
    <legend>그룹 이름</legend>
</fieldset>

 

  fieldset : 하나의 폼 안에서 여러 구역을 나누어 표시할 때 사용
  legend  : fieldset로 묶은 그룹에 제목을 붙일 수 있음 

 

<body>
  <h1>쇼핑몰 주문하기</h1>
  <form action="">
    <fieldset>
      <legend>상품 선택</legend>
      
    </fieldset>
    <fieldset>
      <legend>배송 정보</legend>
      
    </fieldset>      
  </form>

 


3) 폼 요소에 레이블을 붙이는 <label> 태그

 

<label>레이블명<input></label>

 

  <label> 태그  : input 태그와 같은 폼 요소에 레이블을 붙일 때 사용
         📍 label이란 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트
         📍  label 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을 브라우저가 인식 

 

<!-- 폼 요소의 id 속성값을 <label>태그의 for 속성에 알려 주는 방법 -->
<label for="id명">레이블명<input id="id명"></label>

 


 

2.  사용자 입력을 위한 input 태그 

🐰  <input> 태그 : 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용

 

1)  <input> 태그의 type 속성

 

종류 설명
text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스 생성
password 비밀번호 입력할 수 있는 필드 생성, 문자를 입력하면 특수문자로 생성
search 검색할 때 입력하는 필드 생성
검색 키워드를 입력할 경우 키워드를 지울 수 있도록 X 표시가 나타남
url url 주소 입력할 수 있는 필드 생성
email email 주소 입력할 수 있는 필드 생성
tel 전화번호를 입력할 수 있는 필드 생성. 모바일에서는 숫자 키보드로 자동 전환.
checkbox 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스 생성
radio 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼 생성
number 숫자를 조절할 수 있는 스핀 박스 생성. 모바일에서는 숫자 키보드로 자동 전환.
[min은 이상, max는 이하, step은 클릭할 때 값]
range 숫자를 조절할 수 있는 슬라이드 막대 생성
date 사용자 지역을 기준으로 날짜(연, 월, 일) 생성
month 사용자 지역을 기준으로 날짜(연, 월) 생성
week 사용자 지역을 기준으로 날짜(연, 주) 생성
time 사용자 지역을 기준으로 시간(시, 분, 초, 분할 초) 생성
datetime 국제 표준시로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초) 생성
datetime-local 사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초) 생성
submit 전송 버튼 생성
reset 리셋 버튼 생성
image submit 버튼 대신 사용할 이미지를 생성
button 일반 버튼 생성
file 파일을 첨부할 수 있는 버튼 생성
hidden 사용자에게 보이지 않지만 서버로 넘겨주는 값이 있는 필드 생성
color 색상 선택 양식을 생성. 선택 시 색상 선택 화면이 나타나면 색상을 선택 할 수 있음.
<input type= "속성" name= "이름(서버에서 사용하는 이름) 필수" id="css나 자바스크립트에서 제어할 때 사용">
<!-- 이미지 버튼 -->
<input type="image" src="이미지 경로" alt="대체 텍스트">

 

💡  텍스트, 비밀번호 필드에서 사용하는 주요 속성

종류 설명
size 텍스트와 비밀번호 필드 길이 지정
= 화면에 몇 글자가 보이도록 할 것인지 지정
value 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용
maxlength 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수 지정

 

💡  체크 박스, 라디오 버튼에서 사용하는 속성

종류 설명
value 선택한 체크 박스나 라디오 버튼을 서버에 알려 줄 때 넘겨줄 값을 지정.
영문이거나 숫자여야 하며 필수 속성.
checked 체크 박스나 라디오 버튼의 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용.

 

💡  number, range에서 사용하는 속성

속성 설명
min 필드에 입력할 수 있는 최솟값을 지정
기본 최솟값은 0
max 필드에 입력할 수 있는 최댓값을 지정
기본 최댓값은 100
step 숫자 간격을 지정. 기본값은 1
value 필드에 표시할 초깃값

 

💡  날짜, 시간 범위를 지정하는 속성

종류 설명
min 날짜나 시간의 범위를 제한.
min은 범위의 시작 날짜나 시간, max는 범위의 마지막 날짜나 시간
max
step 스핀 박스의 화살표를 클릭했을 때 증감시킬 크기 지정
value 기본적으로 표시할 날짜나 시간 지정

 


 

type="text", type="hidden", type="submit"
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type=text]{
        width: 200px; height: 16px; border: 1px solid #999;
        }
    </style>
</head>
<body>
    <form name="frmPost" action="action.php" method="post">
        <label for="memberID">아이디</label>
        <input type="hidden" name="loginType" value="general">
        <input type="text" name="memberID" id="memberID" value="1" maxlength="4">

        <input type="submit" value="전송">
    </form>
</body>

전송버튼 눌렀을 때 결과

 


 

type="password", type="search"
<body>

    <form action="action.php" method="post">
        <label for="mId">아이디</label>
        <input type="text" name="memberId" id="mId" />

        <label for="pwd">비밀번호</label>
        <input type="password" name="password" id="pwd">

        <input type="reset" />
        <input type="submit" />
    </form>
    <br><br>
    <form action="action.php" method="get">
        <input type="search" name="search">
        <input type="submit" value="검색" />
    </form>
</body>

 


 

type="checkbox"

💡 php에서는 checkbox의 name을 배열처리해야 함 ▶️ name="hobby[]"
     자바 계열에서는 배열처리를 하지 않음 ▶️ name="hobby"
<body>
    <form name="frmPost" action="action.php" method="post">
        <h4>취미</h4>
        <!-- for에 해당 태그의 아이디 값을 지정하면 label 클릭 시에 해당 체크박스 선택, 해제 됨 -->
        <input name="hobby[]" type="checkbox" value="sports" id="sportsId">
        <label for="sportsId">스포츠</label>

        <!-- label 태그로 전체를 감싸도 동일한 기능 -->
        <label>
            <input name="hobby[]" type="checkbox" value="game">
            게임</label>

        <!-- 분리해서 사용하면 선택, 해제 기능 안 됨. -->
        <input name="hobby[]" type="checkbox" value="cook">
        <label>요리</label>
        <input type="submit" value="전송">
    </form>
</body>


 

type="radio"
    
📍 짧은 항목에 대한 선택이 필요할 때 주로 활용되며, 반드시 한 가지 항목을 선택해야 할 때 사용
📍 name 값을 동일하게 작성해야 같은 그룹으로 인식

checked="checked"는 방문자의 편의를 돕기 위해 미리 항목에 체크된 상태를 보여주는 옵션

 

<body>
<form action="action.php" method="post">
    <h4>직업</h4>

    <input type="radio" name="job" value="design" id="design" checked="checked">
    <label for="design">UI/UX 디자이너</label>

    <input type="radio" name="job" value="front_end dev" id="front_end">
    <label for="front_end">프런트엔드 개발자</label>

    <input type="radio" name="job" value="back_end dev" id="back_end">
    <label for="back_end">백엔드 개발자</label>

    <input type="submit" value="전송">
</form>

</body>


 

 type="color" 색상값 선택하기
<body>
<form name="frmPost" action="action.php" metho="post">
    <label for="color">색상 선택</label>
    <input type="color" name="color" id="color">

    <input type="submit" value="전송">
</form>
</body>


 

type="date",  type="month",  type="week",  type="datetime"
<body>
<form name="frmPost" action="action.php" method="post">
    <label for="date2">날짜 선택</label>
    <input type="date" name="date" id="date2">

    <br><br>
    <!-- type="month"  년/월에 대한 정보를 달력을 통해 선택 -->
    <input type="month" name="month">

    <br><br>
    <!-- type="week" 년/주에 대한 정보를 달력을 통해 선택 -->
    <input type="week" name="week">
    <input type="submit" value="전송">
    
    <br><br>
    <!-- type="datetime" 날짜, 시간을 지정. -->
    <label>datetime <input type="datetime-local" name="datetime-local"/></label>
</form>
</body>


 

type="search",  type="url",  type="email",  type="tel",  type="number",  type="range"
<head>
    <style>
        label {
            display: block;
            padding: 10px;
        }
    </style>
</head>
<body>
<form name="etc" action="action.php" method="post">
    <!-- type="search"-->
    <label>검색<input type="search" name="search" /></label>

    <!-- type="url" 자동으로 주소 양식 검사 -->
    <label>url <input type="url" name="url"/></label>

    <!-- type="email"-->
    <!-- required : submit 전 반드시 채워져 있어야 하는 입력 필드를 명시 -->
    <label>email <input type="email" name="email" required></label>

    <!-- type="tel" -->
    <label>tel <input type="tel" name="tel"/></label>

    <!-- type="number" -->
    <label>number <input type="number" name="number" min="1" max="100" step="5"/></label>

    <!-- type="range" value는 초기값 -->
    <label>range <input type="range" name="range" min="1" max="5" value="3"/></label>


    <input type="reset"/>
    <input type="submit"/>
</form>

</body>

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

+ Recent posts