수업 33일차 - html/css/javascript 11

[내일 시험]

@1,2,3번 주관식 

block inline  inline-block차이

display 속성이 'inline'으로 지정된 엘리먼트는 줄바꿈 없이 한 줄에 다른 엘리먼트와 나란히 배치됨

대표적인 inline 엘리먼트로 <span>, <a> 태그가 있음

display 속성이 'block' 으로 지정된 엘리먼트는 전후 줄밥꿈이 들어가 혼자 한 줄을 차지함

대표적인 block 엘리먼트는 <div>,<p> 태그가 있음

display 속성이 'inline-block' 으로 지정된 엘리먼트는 

inline 엘리먼트처럼 줄바꿈없이 한 줄에 다른 엘리먼트와 배치되지만,

block 엘리먼트처럼 너비, 높이, margin, padding 속성 지정이 가능하다. 

대표적인 inline-block 엘리먼트는 <button>, <input> 태그가 있음

 

div span 차이

<div> 는 display 속성이 block 으로 한 줄을 차지한다.

<span>은 display 속성이 inline 으로 다른 엘리먼트와 나란히 배치된다. 

 

css 적용 방법 3가지

- 인라인 : 태그 내부에 style 정의

<div style="color:red">글자</div>

- HTML 태그에 직접주는 방법

div { color:red;}

- id 를 이용해 주는 방법

#red { color:red;}

<div id="red"></div>

- class를 이용해 주는 방법

.red { color:red;}

<div class="red"></div>

- css 파일을 만들어서 정의

 

JS 아이디 요소 객체 호출 방법 

- getElementById("di")

- querySelector("#id")

 

@4번 간단한 손코딩

테이블 만들기

<table>

  <tr>

     <td>1</td>

     <td>2</td>

     <td>3</td>

     <td>4</td>

  </tr>

  <tr>

     <td>5</td>

     <td>6</td>

     <td>7</td>

     <td>8</td>

  </tr>

</table>

 

type =  1, a, A, i, I

start = '시작할 index 입력' 

colspan="2"  -> 행 공간 2

rowspan="2" -> 열 공간 2

 

<table> 테이블 만들기 </table>

 <caption> 테이블 제목 </caption>

 

<tr> 행 </tr>

<th>테이블 헤드 부분 </th>

<td> 열 </td>

 

 

@5번

(실습)

로그인 화면 구현하기 + 간단한 JS 기능 추가

 

 

 

 

1교시 스프링

바로 활용할 수 있는