• Excel

  • Excel basic : 엑셀을 안열고 조작 (엑셀 라이센스 필요 X, 설치된 Excel이 없어도 사용 가능, .xlsx 파일만 지원한다.)

    • Open : 열기 작업을 통해서 원하는 엑셀 파일과 Session명을 지정

      • Specific sheet name : 시작할 엑셀 시트 지정
      • Open in : 엑셀을 열 때 읽기 모드 또는 읽기/쓰기 모드로 열 것인지 정할 수 있다.
      • Password is required : 패스워드 관련된 부분
      • sheet contains a header : 헤더포함여부 선택(헤더가 한 줄 인 경우에만 지원)

    • (Excel 명령 사용 : 원하는 Action 사용) Get single cell : 특정 셀의 값 읽어오기

      • Cell Option
        • Active Cell : 현재 활성화 된 셀
        • Specific Cell : 특정 지정 셀

    • Set Cell : 특정 셀에 값을 입력 (값 입력 후 Save workbook과 같은 명령어를 같이 써서 저장한다.)

    • Close : 엑셀 파일을 닫으면서 동시에 Session도 닫힘

      • Save changes when closing file : 파일이 수정이 될 경우 저장할지 말지 선택

  • Excel advanced : 엑셀을 열고 조작 (설치된 Excel이 필요하며 고급 작업을 할 때 사용)

    • Open : 열기 작업을 통해서 원하는 엑셀 파일(xlsx)rhk Session명을 지정

    • (Loop를 이용해서 엑셀 파일 한 행씩 읽기) Set cell : 셀에 값 작성

    • Go to cell : 특정 셀로 이동

      • Cell Option
        • Specific cell
        • Active cell
          • One cell to the left
          • One cell to the right
          • One cell above
          • One cell below
          • Beginning of the row : 해당된 열의 맨 앞 cell로 이동

    • Close : 엑셀 파일을 닫으면서 동시에 Session도 닫힘

  • Office 365 Excel : 웹브라우저 상에서 Excel 365를 사용하는 경우에 사용

• String : String 변수 관련 작동을 할 때 사용
  • Assign : 하나 이상의 String을 조합하는 경우
  • To number : 숫자형태의 문자열을 숫자로 변환 (※ 콤마가 들어간 문자열은 숫자가 아니므로 에러 발생)
  • Extract Text : 전체 문자 중에서 원하는 부분만 추출
    • Get characters
      • Before : 기준이 된 텍스트 뒤에 있는 텍스트가 나온다.
      • Afer : 기준이 된 텍스트 앞에 있는 텍스트가 나온다.
      • Befor and/or after : 원하는 값 앞 뒤의 텍스트를 입력하는 원하는 값이 추출된다. (※ 원하는 값 주변으로는 변하지 않는 값으로 설정해야 한다.)
    • If no match found, return : 조건이 맞지 않은 경우 리턴할 값을 정할 수 있다.
    • Number of characters to get : 조건이 맞는 경우 값을 몇 개만 추출할 건지 정한다.
  • Length : String 길이 확인
  • Replace : String 안의 text를 원하는 값으로 변경하는 경우
    • Find String : 찾아야 될 텍스트
    • Start from / Count : 찾고자 하는 텍스트의 범위
  • Trim : String 안의 빈칸 없앰
  • Find : 원하는 Text가 몇번째 위치에 있는지 확인

• Number : Number 변수 관련 작동을 해야 할 때 사용
  • Assign : 원하는 Number를 넣거나 계산하는 경우
  • Decrement : 원하는 값으로 감소하는 경우
  • Increment : 원하는 값으로 증가시킬 경우
  • To String : Number 형태의 변수를 String 형태로 변환
    • Select the string variable to store the result : 소수점 관련하여 설정

• ★ Simulate Keystrokes : 키보드 입력할 때 사용하는 명령어

  • Delay between each keystroke in ms (optional) : 문자가 입력되는 사이의 지연시간을 정할 수 있다.

  • Keystrokes : 키보드로 입력할 데이터를 작성한다.

    <ctrl + c 특수키 입력하는 방법>

    • 1) 키보드모양 이모티콘을 선택.
    • 2) Ctrl 키 모양 클릭
    • 3) [CTRL DOWN][CTRL UP]이 입력된다.
    • 4) ][ 사이에 C를 입력한다.
    • 5) [CTRL DOWN]c[CTRL UP]

• System : Restart, Shutdown등 조작할 수 있는 명령어

• ★ Task Bot : Task Bot 내에서 다른 Task Bot을 실행하거나 중지 할 때 사용하는 명령어(-> uipah의 Startjob 같은 역할) (자식 bot을 호출하면서 다양한 변수를 input/output하여 사용할 수 있다.)
  • Pause
  • Run
    • Task Bot to run : 실행할 복을 설정
    • Input value : input할 값 설정
    • Save the outcome to a variable : output값을 dictionary로 받아올 수 있다.(key는 변수명)
  • Stop

• Terminal Emulator : Terminal에 접근해서 조작할 수 있는 명령어

• ★ Wait : 특정 조건까지 기다리게 하는 명령어
  • Wait for condition : 조건에 맞을 때까지 대기 (ex) 파일이 생성될 때)
  • Wait for screen change : 화면이 변화될 때까지 대기 (ex) 로딩시간이 불규칙할 때)
    • Screen change relative to
      • Window : 해당되는 윈도우 안에 좌표 기반
      • Screen : 화면 전체에 대한 좌표 기반
    • How long to wait before comparing screens?(Seconds) : 변화를 인지하는 시점의 시작 시간 설정
    • How long to wait before screen comparing is stopped?(Seconds) : 화면 변화가 없을 경우 최대 기다리는 시간을 설정할 수 있다.
  • Wait for window : 윈도우에 변화가 있을 때까지 대기
    • Wait for window : 윈도우창이 열리기를/닫히기를 기다릴지 선택

• XML : XML 값을 받고 활용할 때 사용하는 명령어

• Loop : 반복적인 업무를 지속하거나 종료할 때 사용하는 명령어 (IF 조건을 함께 사용하여 조건을 확인하고 결과에 따라서 Loop의 반복을 건너뛰거나(Continue), 중단(Break)할 수 있다.)
  • Loop Type
    • Iterator 타입 : 선택된 Option에 따라서 정해진 숫자만큼 반복 작업 (DataTable, Folder, List.. 등 Iterator 타입을 지정할 수 있다.)
      • Excel basic
        • Loop through
          • Specific rows : 선택한 특정 열부터 열까지 반복한다.
          • Cell range : 선택한 특정 cell부터 cell까지 반복한다.
          • All rows : 전체 열을 반복한다.
        • Email
          • Type of email to get : 가지고 올 이메일 타입
          • When subject contains (optional) : subject 관련 설정
          • From specific senders (optional) : 보낸 사람 설정
          • Assign the current value to variable (optional)
            • Dictionary → [dictionary 변수의 key값] https://docs.automationanywhere.com/bundle/enterprise-v2019/page/enterprise-cloud/topics/aae-client/bot-creator/commands/cloud-using-email-properties.html
    • While 타입 : 정해진 조건이 충족하면 지속적으로 반복 작업

• Message box : 팝업팡을 띄우는 명령어 (String 타입만 지원하기 때문에 숫자는 'To string' 명령어를 사용해서 변환 후 사용한다. )

  
  
  • Mouse : 마우스 관련 명령어
    • Click : 좌표를 기반으로 클릭할 수 있다. (객체가 없거나 이미지가 안잡히거나 기술적인 어려움이 있는 경우 사용), 속도가 빠르지만 윈도우창이 작거나 위치가 이동했을 경우 환경에 따라 취약할 수 있다.
    • Move : 좌표와 좌표를 선택해서 이동시키는 명령어
    • Scroll : 스크롤의 방향, 반복횟수, 스크롤의 지연시간을 정할 수 있다.
      • 현재 활성화 되어있는 창에서 스크롤을 한다.(※ Window- Activate 명령어와 조합해서 사용할 화면을 활성화시킨 후 사용해야 한다.)

• OCR : 이미지에서 텍스트를 추출할 떄 사용하는 명령어
  • Capture window : 윈도우 전체의 텍스트를 추출한다.
  • Capture area : 특정 영역의 텍스트를 추출한다.
  • Capture image by path : 특정 경로의 이미지에서 텍스트를 추출한다.
  • Capture image by url : 특정 웹사이트의 이미지 안의 텍스트를 추출한다.

• Office 365 : Office 365에 관련한 명령어

• PDF : 텍스트 추출 및 합치는 등 PDF 파일을 조작하는 명령어
  • Decrypt/Encrypt document : 복호화/암호화를 할 수 있는 명령어
  • Extract image : PDF에서 이미지 형태로 변환을 할 때 사용한다.
    • Type of image to be converted to : 이미지 타입을 정할 수 있다.
    • Quilty : 이미지의 퀄리티를 정할 수 있다.
    • File trefix : 앞에 서두를 달 수 있다.
    • Color : 컬러값 및 흑백을 설정할 수 있다.
  • Extract text : PDF에서 텍스트를 추출할 수 있다. (이미지 형태로 된 PDF의 텍스트는 추출할 수 없다.)
  • Text type
    • Plain text : 보이는 것과 상관없이 일렬로 텍스트를 추출한다.
    • Structure text : PDF파일을 보고 있는 것처럼 텍스트가 위치되어 텍스트가 추출된다.
  • Split document : 하나의 PDF 파일을 여러 장으로 나눌 수 있다.

• Play Sound : 특정 상황에서 소리가 나도록 하는 명령어 (동작이 끝나거나 에러가 났을때 등 소리가 나게 활용 가능)

• Printer : 프린터 조작 시 사용하는 명령어

• Prompt : 로봇이 사람에게 답을 얻어 행동하게 하는 명령어
  • For File : File 경로 입력
  • For Folder : Folder 경로 입력
  • For Yes/No : 예/아니오 선택
  • For Value : 특정 텍스트 입력
    • Prompt window caption : 윈도우창 상단에 뜨는 제목명
    • Prompt message : 화면에 보일 메세지
    • Assign the value to a variable : 입력받은 값을 저장할 변수

• Python script : Python script를 임베디드하거나 호출해서 사용하는 명령어

• REST Web Service/SOAP Web Service : API, 제 3공간에 있는 서비스를 제공받을 때 사용하는 명령어

• ★ Recoder - Capture : 정보를 추출하는 것뿐만 아니라 행동을 할 때 사용하는 명령어 (텍스트상자, button, combo box, 목록보기 등 기능 사용, ※ 현재 화면에 보이지 않더라도 한 번 로딩이 끝나면 알아서 이미지를 찾을 수 있다.)

  • Action to take on object : 선택한 영역의 특성에 따라서 각각의 메뉴들이 달라진다.

    • Set text : text 쓰기
    • Append Text : text 이어쓰기
    • Click : 백그라운드 클릭
    • Left, Right Click : 물리적인 클릭
    • Get Property : Object Property를 가져옴

  • Property name : 'Action to take on object'에서 'Get Property'를 선택했을 때 어떤 prperty를 가져올 것인지 입력

• SAP : SAP 관련된 자동화를 할 떄 사용하는 명령어 (SAP GUI 어플리케이션을 쓸 때는 ★Recorder-Capture를 사용하면 훨씬 간편하다.)

  • ☆ Connect : SAP GUI Login 과정을 대행할 때 사용

    • Select Connection type : 연결타입 선택

  • Export Table : Table을 CSV 형태로 저장할 때 사용

  • Send virtual key : SAP 단축키를 사용할 때 사용

  • SAP 기본 사용 순서 (Open program/file를 이용하여 사전에 SAP GUI Client를 실행해야 한다.)

    • Connect : SAP GUI 연결 설정
    • SAP 명령 사용 : dnjsgksms Action 사용
    • Disconnect : 사용되었던 SAP Session 종료

  • 사용 전, 필수 확인 사항

    • 사용자의 SAP GUI Scripting Accessibility 활성화
    • SAP Server쪽에서도 Scripting 활성화
    • SAP GUI 호환 버전 사용
    • Script Tracker 등 툴 통해 Field Path 값들을 쉽게 추출 가능

• Screen : Screen Capture할 떄 사용하는 명령어
  • Capture desktop : 전체영역을 캡처하는 명령어
  • Capture window : 특정 window만을 캡쳐하는 명령어
  • Capture area : 특정영역만 캡쳐하는 명령어

• Window : 창을 최대화/최소화 등 조작할 수 있는 명령어
  • Activate : 원하는 Window를 활성화시키는 명령어
  • Close : Window 창을 닫는 명령어
  • Maximize/Minimize : 원하는 창을 최대/최소화할 수 있는 명령어
  • Resize : 창의 사이즈를 설정할 수 있다.

• Service : Window의 Service를 관장할 때 사용하는 명령어

• Step : 각각의 행동들을 하나의 그룹으로 지정하는 명령어

• Email : Email을 보거나 체크하는 등 관리할 때 사용하는 명령어 (Outlook, Email Server, EWS Server 지원)

  • Delete : 선택된 Email 삭제 (＊Loop 사용 필수)

  • Forward : 선택된 Email 포워딩 (＊Loop 사용 필수)

  • Reply : 선택된 Email 회신 (＊Loop 사용 필수)

  • Save attachments : 선택된 Email에서 첨부파일 저장 (＊Loop 사용 필수)

  • Send : 원하는 수신처로 Email 발송

  • Change status : 이메일의 읽음/안읽음 상태를 설정할 수 있다. (＊Loop 사용 필수)

  • Delete all : 모든 이메일 삭제

  • Save all attachments : 모든 이메일의 attachments를 저장

  • Save attachments : 특정 이메일의 attachments를 저장

  • Connect : Email 서버와 연결 설정

    • Connect to : 접속할 서버를 선택 및 옵션을 설정

  • Email 명령어 사용 (Action)

  • Disconnect : 사용되었던 Email Session 종료

    • Session name : 연결을 끊을 세션명 지정

🚀출처

오토메이션 코리아

• App integration : 특정 위치나 윈도우에 있는 텍스트들을 추출하는 명령어

  
  

• ★ Application - Open program/file : 실행하고자 하는 프로그램을 실행하는 명령어(.exe, .bat, 스크립트 파일 혹은 단축 아이콘도 수행할 수 있다.)

  • Location of the program/file : 실행할 프로그램을 정한다.
  • Start in path (optional) : 어플리케이션을 실행할 때 어떤 path에서 실행할 지 설정할 수 있다.
  • Parameters (optional) : \r을 사용해야하는 application, 문서들의 경우 설정하여 실행할 수 있다.
    

• CSV/TXT : CSV나 확장자를 가지고 있는 파일을 열거나 읽을 때 사용하는 명령어

  • 파일을 열어서 지정된 Table 변수에 넣고 Loop 명령어를 통해 처리한다. (CSV 파일에서 각 열(Line)의 데이터를 읽는 작업)
  • Open
    • Session name : 정해져 있는 고유 값을 사용해야 한다.
    • Contains header : header가 있을 경우 체크
    • Delimiter : 어떤 표식으로 열을 구분할 지 정한다.(ex) Comma, Tab, NewLine...)

• Browser : 웹브라우저 관련 명령어 (파일 다운로드, 깨진 Link검색, 새로운 사이트를 오픈 시에 사용한다.)
  • Download File
    • URL of file : 다운로드할 사이트 URL입력
    • Save to location : 다운로드 받은 파일을 저장할 경로 입력
  • Find broke links
    • Scope
      • check only this page : 선택한 페이지만 확인
      • check the whole sige : 전체 사이트를 확인
    • Number of paralle threads : 하고자 하는 병렬 처리의 수

• Clipboard : 윈도우 Clipboard를 조작할 때 사용하는 명령어 (Text를 복사/붙여넣기해서 입력할 때, 입력기의 한/영 변환이 멋대로 되는 것을 막고자 클립보드에 보내서 ctrl+v를 입력해 붙여넣는 방식을 많이 쓴다.)
  • Copy from : Windows 클립보드에 있는 걸 가져오는 명령어
    • Assign the output to variable : Window 클립보드에서 가져온 값을 어떤 변수에 넣을지 정할 수 있다.
      • Clipboard-String 변수 → 현재 마지막으로 클립보드에 담은 내용을 가져오는 변수
  • Copy to : 변수가 가지고 있는 값을 WIndows 클립보드로 복사해 주는 명령어
  • Clear : 클립보드에 있는 내용을 전부 삭제하는 명령어_

• ★ Comment : 특정한 액션을 가지고 있지는 않지만, 원하는 텍스트를 작성한다. (주석을 작성해서 유지보수 시에 사용한다.)

  
  

• DLL : DLL을 활용할 수 있는 명령어

  
  

• Database : 별도의 애플리케이션 없이 select, insert 등을 날려서 Database를 수정할 수 있는 명령어

  
  

• *Datetime *: Datetime 변수에 대한 조작이 가능한 명령어

  
  

• Delay : 일정 시간을 기다리게 하는 명령어

  
  

• Dictionary : Dictionary 변수를 관리하는 명령어

  
  

• Email : Email을 보거나 체크하는 등 관리할 때 사용하는 명령어

  
  

• Error Handler : Error가 났을때 어떤 행동을 할 지 정의하는 명령어

• File/Folder : 특정 파일/폴더를 생성, 삭제, 복사 등을 할 때 사용하는 명령어
  • Copy : 파일 복사
    • Source file : 복사할 파일을 설정
    • Destination file/folder : 복사한 파일을 저장할 위치를 지정
    • SIze : 파일의 크기를 보고 복사를 진행하도록 설정할 수 있다.
    • Date : 파일의 생성/수정 날짜를 보고 복사를 진행할 수 있도록 설정한다.
  • Zip : 폴더 압축
    • Specify file type(s) to compress : 파일타입을 지정해서 해당 타입의 파일만 압출할 수 있다. (Ex) *.txt, *.xlsx)

• Ftp/Sftp : 별도의 프로그램없이 작동하고 조작이 가능한 명령어, 서버에 있는 파일에 접근(업로드/다운로드)할 때 사용 (작업이 시작될 때 한 번은 Connect를 한 번 이상은 사용하고 작업이 끝날 때는 Discinnect를 사용해야 한다.) (특정 위치에서 특정 파일을 가지고 올 때만 Ftp 명령어를 사용 할 수 있다.)
  • Session name : 고유값이므로 Ftp를 두개 이상 사용하면 서로 이름을 다르게 설정해야 한다.
  • Server name : Ftp의 주소를 설정
  • Remote files : 가지고 올 파일을 설정
  • Local folder : 저장할 경로 설정

• IF : 특정 조건에서 현재 상태에 따라서 다르게 행동하도록 하는 명령어
  • If : 초기 조건에 대해서 입력하는 명령어
  • Else If : If에서 처리되지 않았을 때 추가로 조건을 주는 명령어
  • Else : If와 Else If에서 모두 통과되지 못한 항목은 여기를 통해서 처리되는 명령어

→ 고객정보에서 20대 이상만 추출하기

• Image Recognition : 특정 이미지를 인식할 때 사용하는 명령어, 캡쳐한 이미지를 가지고 그 이미지를 화면에서 찾아서 클릭하는 액션들을 가지고 있는 명령어(객체기반으로 자동화하는 것이 불가능하거나, 안정적이지 못할때 사용한다. ※ 현재 화면에 보여야만 이미지를 찾을 수 있다.)
  • Find Image in window : 특정 어플리케이션 안에서 해당된 이미지를 찾아서 액션을 하는 역할
    • Select Window : 액션들의 대부분은 어떤 Window에서 실행할지 정해준다.
    • Capture Region : 특정 영역을 지정해서 그 안에서만 선택한 이미지를 찾게 할 수 있다. (Capture Region을 사용하는 이유 : 전체 화면을 한번은 스캔을 해야 되기 때문에 성능이 떨어질 수 있다. 또한 경우에 따라서 전체 화면에 선택한 이미지가 여러 개 있을 수 있다. 그러므로 특정영역을 지정해주면 안정적인 작동이 가능하다.)
  • Select target image : 타깃이미지 또는 캡쳐 이미지를 미리 가지고 있어야 한다.
  • Click Action : 클릭 액션 종류 선택
  • Repeat if image not found : 이미지를 못 찾았을 때 얼마나 반복적으로 재시도 할 지 정할 수 있다.
    • Times : 재시도를 행하는 횟수
    • Wait between repeats(ms) : 재시도하는 중간에 딜레이를 정할 수 있다.
  • Find window in window
    • Capture target image : 이미지를 어디서 캡쳐할지 정할 수 있다.
    • Match percentage : 설정한 퍼센트만큼 유사성을 지니고 있으면 진행한다.

🚀출처

AutomationAnywhere 코리아

단순 if문

if(조건)
  명령문1;
  명령문2; 

• 주어진 조건을 만족하면(참이면) 명령문 1부터 수행하고, 만족하지 않으면 명령문2부터 수행한다.

if(조건){
  명령문1;
    ...
  명령문n;
}

• 주어진 조건을 만족하면 중괄호 안의 명령문을 수행하고, 만족하지 않으면 중괄화 밖의 명령문을 수행한다. 이때 조건에 따라 수행해야 할 명령문이 복수개일 경우에는 반드시 중괄호({})를 묶어야 한다.

if~else문

if(조건) {
  명령문1;   // 참 
} else {
  명령문2;   // 거짓
}    

• 주어진 조건이 참일 때는 명령문1을, 거짓일 때는 명령문2를 수행한다.

다중 if-else문

if(조건1) {
    if(조건2) {
       명령문1;
    } else {
       명령문2;
    }
} else {
    명령문3;
}

다중 ifelse ifelse문

if(조건1) {
  명령문1;   
} else if (조건2) {
  명령문2;
} else if (조건3) {
  명령문3;
} else {
  명령문4;
}

• 조건1이 참이면 명령문1을 수행하고, 거짓이면 조건2를 검사하여 참이면 조건2를 수행한다. 조건2가 거짓이면 조건 3을 검사하여 참이면 조건 3을 수행하고 거짓일 경우 명령문 4를 수행한다.

switch문

switch(수식) {
  case값1 : 명령문1;
  case값2 : 명령문2;
  ...
  default : 명령문n;
}

• 수식에 일치하는 case문을 찾아 명령문을 수행하며, 해당되는 값이 없을 경우 default 값을 수행한다. default문은 생략이 가능하다.
• ★ 여러 개의 case문 중 조건이 일치하는 case가 발생하면 그 다음 나머지 case문은 비교없이 그냥 수행된다. 나머지 case문이 수행되는 것을 막기 위해 break문을 사용해야 한다.

goto문

Label : 
goto Label;
...

• goto문은 무조건적인 분기 명령으로 보통 Loop가 여러 개 중첩되어 있을 경우 한꺼번에 루프를 벗어나고자 할 때 사용된다.
• 현재 위치에서 프로그램의 실행 순서를 원하는 곳으로 이동 시켜 그곳의 명령문을 수행하게 한다.
• 반복문 밖에서 안으로의 분기나, if문의 범위 안으로는 이동할 수 없다.
• 가능하면 사용하지 않는 것이 좋다. (goto문을 사용하면 프로그램 순서가 복잡해서 이해, 수정이 어렵다.)

printf() : 화면에 여러 종류의 자료를 출력. 양식 지정 출력함수

• 형식 : printf("출력양식", 변수1, 변수2);
• 출력양식 변환 기호 : %d(부호 있는 10진수 정수), %f(10진 부동소수점 형식)...

putchar() : 화면에 1개의 문자를 출력

• 형식 : putchar(문자);
• 문자 단위의 출력함수로, getchar() 함수와는 반대로 지정된 문자를 화면에 출력하는 기능을 갖는다.

puts() : 화면에 문자열을 출력

• 형식 : 변수가 가리키는 문자열을 화면에 출력하는 문자열 출력함수로, 문자열을 출력한 후 자동으로 줄이 바뀐다. 문자열 끝인 null 문자('／0')을 만나면 '／n'으로 바꾸어 출력하기 때문이다.

scanf() : 키보드를 통해 1개 이상의 자료를 입력받음(키보드입려을 받아서 저장)

• 형식 : scanf("입력양식", &변수1, &변수2);

• scanf() 함수의 입력 양식에 "%문자"가 아닌 다른 문자를 포함시켜서는 안된다.
• 모든 변수 앞에는 주소를 의미하는 &(주소 연산자)를 붙여야 한다.
• 자료를 입력할 때 자료가 하나 이상일 경우에는 자료 사이에 공백을 두어 자료를 구분해야 한다.

getchar() : 키보드를 통해 1개의 문자를 입력받음

• 형식 : getchar();
• getchar()은 문자 단위의 입력함수로, 하나의 문자를 키보드를 통해 받아들이고, 이 문자를 받아들여 저장하는 변수는 정수형이나 문자형으로 선언되어야한다.

gets() : 키보드를 통해 문자열을 입력받음

• 형식 : gets(변수);
• 키보드로부터 문자열을 입력받아 변수가 가리키는 기억공간에 저장하는 문자열 입력함수이다. 이때 변수는 배열명이나 포인터 변수여야 한다.

출력양식의 편집

• printf() 함수로 자료를 출력할 때 출력 폭이나 각 변수에 대한 출력 자릿수를 지정할 수 있다. EX) printf("|%5d|", 123) -> 총 5자리로 오른쪽부터 채워진다.

   printf("|%05d|", 123) -> 총 5자리로 오른쪽부터 채워지고, 공백은 0으로 채워짐

날짜 - 1일하는 방법

str_영업일전일 = DateTime.ParseExact(str_영업일,"yyyyMMdd", Nothing).AddDays(-1).ToString("yyyyMMdd")

String 타입 날짜를 DateTime 형식으로 변환 + 한글요일 만들기

• String type 날짜를 DateTime 형식으로 변환하기

  DateTime.ParseExact([String 타입 날짜변수], "[String변수의 형식]",System.Globalization.CultureInfo.CurrentUICulture.DateTimeFormat)

• *한글요일 *

  [날짜변수].ToString("yyyy-MM-dd(ddd)", CultureInfo.CreateSpecificCulture("ko-KR"))

  

DataTable Activity

• Remove Duplicate Rows : 중복된 행을 제거한다.
• Merge Data Table : DataTable을 병합한다.

.Split한 첫번째 인덱스 가져오기

.split(""c)(0) 또는 .split(""c).Frist

줄바꿈(개행)

"문자열" + Enviroment.NewLine + "문자열"

앞자리 0 모두 제거하기

String번호.TrimStart("0"c)

전월말일 구하기

(DateTime.Today.AddDays(0 - DateTime.Today.Day)).ToString("yyyyMMdd")
또는
New DateTime(Now.Date.Year, Now.date.Month, 1).AddDays(-1).ToString("yyyy-MM-dd")

• 항상 고정된 값을 갖는 자료
• 값이 정해진 상수는 프로그램 실행 도중 변경할 수 없다.

실수형 상수

• 부동소수점형 상수라고도 한다.
• 실수형 상수는 double형을 기본 자료형으로 사용한다.

문자형 상수

• 단일 인용부호('')로 묶여있는 1개의 영문자나 숫자문자이다.
• 내부적으로 해당 문자의 ASCII 코드값이 사용된다. EX) ／n, ／b ...

문자열 상수

• 이중 인용부호("")로 묶여 있는 복수개의 영문자와 숫자로 이루어진 상수
• 기억공간에 보관될때는 문자열 끝에 null문자('／0')가 추가된다.

변수

• 자료를 저장할 기억공간을 확보하고 이 공간에 이름을 붙인 것
• 프로그램 실행 도중 변할 수 있는 값이 저장되는 공간
• 변수 속에 들어가는 값들은 수시로 변경될 수 있다.
• 변수는 사용하기 전에 반드시 그 변수를 선언하여 컴파일러가 기억공간에서 일정 공간을 확보할 수 있도록 해야한다.

변수의 특징

• 모든 변수는 이름이 있다. (= 변수명)
• 모든 변수는 정해진 자료형이 있다.
• 모든 변수는 할당된 값을 갖는다.

자료형

• 사용하는 자료의 형태
• 변수나 함수 등을 사용할 때 컴파일러가 기억공간을 마련하는데 사용되는 자료의 종류나 크기 등의 특징을 나타낸다.

자료형의 종류

• 정수형 : int, short, long, unsigned(부호 없는 정수)
• 실수형 : float, double, long double
• 문자형 : char, unsigned char

변수 선언 시 고려해야할 사항

• 변수에 저장될 값의 크기(오버플로우 또는 언더플로가 발생하지 않게 해야한다.)
• 변수의 선언 위치(전역변수, 지역변수)
• 변수의 초기화(모든 변수는 변수 선언이 이루어지면 선언된 변수에 특정값을 부여해야하며, 이를 변수의 초기화라고 한다.)

선행처리기

• 컴파일 명령을 내렸을 때, 컴파일에 앞서 프로그램 선두에 선언된 지시자들을 미리 처리하는 역할을 한다.
• #include(파일포함)
• #define(매크로 정의)
• #if, #else, #elif, #endif(조건부 컴파일)

선행처리기를 사용할 때 주의사항

• 반드시 #으로 시작해야한다.
• 명령문 끝에는 세미콜론;이 붙지 않는다.
• 한 줄에 하나의 명령만 쓴다.
• 소스 프로그램의 첫 부분에 위치한다.

#include(파일 포함)

#include는 C언어에서 제공되는 헤더 파일(*.h)를 자신의 소스 파일에 읽어 들여 함께 컴파일 하고자 할 때 사용된다. 형식 : #include <파일명> 또는 #include "파일명"

#define(매크로 정의)

• 매크로란 선행처리기 #define을 사용하여 단순 치환되는 자료를 말한다.

• 저급 언어(하드웨어 제어가 가능함) 특성을 지닌 고급언어이다.

C언어의 특징

• 논리적이며 구조적인 시스템 프로그래밍 언어이다.
• 하드웨어 제어가 가능하다.
• 프로그램 이식성이 높다.
• 간략한 문법 표현으로 함축적인 프로그램 작성이 용이하다.
• 저급 언어 특성을 사진 고급언어이다.

C언어 프로그램의 완성 과정

• 소스파일 생성(.c) -> 컴파일(기계어로 변환, .obj) -> 실행파일 생성(링킹과정- 컴파일된 목적파일과 라이브러리 파일을 연결하여 실행파일 생성, .exe)

C프로그램의 구조

#include <stdio.h>   // 도입부 :  프로그램 전체에 적용되는 사항을 기술함

void main() {     // main() 함수는 가장 먼저 호출되는 함수로 모든 프로그램에 반드시 존재함

  선언문
  제어문
  치환문
  함수호출
   ...
}

함수() { }     // main() 함수에서 호출된 함수를 정의하는 부분

C프로그램 구조의 특징

• C프로그램은 반드시 하나 이상의 main 함수를 포함해야한다.
• main 함수가 반드시 존재해야 한다.
• 함수의 시작과 끝을 알리는 중괄호 {}를 사용해야한다.
• 중괄호{} 내부에는 변수선언문, 연산문, 함수 등 명령을 기입한다.
• 선행처리기를 제외하고 문장의 끝에는 세미콜론 ; 을 붙인다.

명명 규칙(변수명, 함수명, 배열이름 등..)

• 영문자와 숫자의 조함으로 만들어야한다.
• 명칭의 첫문자는 영문자나 _로 시작해야한다.
• 명칭을 숫자로 시작할 수 없다.
• 특수문자를 사용해서는 안된다. (_만 사용가능)
• 문자 사이에 공백을 사용할 수 없다.
• 예약어(int, char, if,,)를 사용할 수 없다.
• 영문자 대문자와 소문자를 서로 구별하여 사용한다.

주석

• /**/ -> 여러 줄을 주석으로 사용할 때
• // -> 한 줄을 주석으로 사용할 때

에러와 경고

• 에러 : 문법상 명백하게 잘못된 점이 있어 컴파일을 거부한다.
• 경고 : 권장하지 않는 방법으로 작성했을 경우 발생 컴파일은 가능. 경고를 무시해도 실행 파일을 생성하여 실행할 수 있다.

ex40_axis.html

Axis

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        div {
            border: 1px solid black;
            padding: 5px 10px;
            margin: 5px;
        }

        #n7 {
            border: 5px solid cornflowerblue;
        }

        .sel {
            border: 5px solid tomato;
        }

    </style>
</head>
<body>
    <div id="n1">할아버지
        <div id="n2">큰아버지
           <div id="n5">사촌</div>
        </div>
        <div id="n3">아버지
           <div id="n6">형</div>
           <div id="n7">나
               <div id="n10">첫째 자식</div>
               <!-- 기준 요소 -->
              <div id="n11">둘째 자식
                 <div id="n13">손자</div>
              </div>
              <div id="n12">셋째 자식</div>
           </div>
           <div id="n8">동생</div>
        </div>
        <div id="n4">작은아버지
           <div id="n9">사촌</div>
        </div>
     </div>

     <hr>
     <input type="button" value="확인" id="btn1">


     <script>

        /*
            Axis 검색
            - 상대 검색
            - 나(기준)를 중심으로 다른 노드를 찾는 검색 방식 
                - 누구를 원점으로 하느냐에 따라 달라진다.

            DOM Tree의 구성요소
            - 페이지 소스의 모든 요소들이 구성요소가 된다.
            - 선언문(<!DOCYPE>), 주석, 태그, PCDATA, 속성 등

        */

        var btn1 = document.getElementById("btn1");
        var n7 = document.getElementById("n7");

        btn1.onclick = function() {
            /* 
                Tree 구조에서 요소를 노드(Node)라고 부른다.
                Element = 태그

                내 자식들 검색 도구
                - n7.hasChildNodes

                - n7.childNodes
                - n7.firstChild
                - n7.lastChild

                - n7.children
                - n7.firstElementChild
                - n7.lastElementChild

            */

            alert(n7.hasChildNodes()); // 자식이 있습니까? - true/false(확인)

            // 유사배열
            alert(n7.childNodes.constructor); // 유사배열인지 확인 -> Array면 순수배열, function NodList() 생성자 함수

            alert(n7.childNodes.length); // 내 자식이 몇명? > 7명 => 태그, PCDATA, tap(enter) 포함

            /*
                노드(Node)
                - 태그, 속성, PCDATA, 주석, 선언문 등..
                - 1. nodeType
                    - 해당 노드의 타입
                    - 태그(1)
                    - 속성(2)
                    - PCDATA(3)
                    - 주석(8)
                    - 선언문(13)

                - 2. nodeName
                    - 태그(태그명)
                    - 속성(속성명)
                    - PCDATA(#text)
                    - 주석(#comment)
                    - 나머지(#xxxx)

                - 3. nodeValue
                    - 태그(null)
                    - 속성(속성값)
                    - PCDATA(텍스트)

            */


            for (var i=0; i<n7.childNodes.length; i++){
                console.log('index', i);
                // console.log(n7.childNodes[i]);
                console.log('\tnodeType', n7.childNodes[i].nodeType); // 자식의 조합을 명확하게 알 수 있음.
                console.log('\tnodeName', n7.childNodes[i].nodeName);
                console.log('\tnodeValue', n7.childNodes[i].nodeValue);
            } 


            /* 
                n7.childNodes > 모든 타입의 노드를 자식으로 취급
                n7.children > 태그만 자식으로 취급
            */
           console.log(n7.children.length);

            for (var i=0; i<n7.children.length; i++){
                console.log('nodeType', n7.children[i].nodeType);
                console.log('nodeName', n7.children[i].nodeName);
            }

            n7.firstElementChild.className = "sel";
            n7.lastElementChild.className = "sel";

        };

        // 덮어쓰기, 재정의
        // var a = 10;
        // a = 5; 
        // 위의 상황과 같은 상황 ↓
        btn1.onclick = function() {

            /* 
                부모 탐색
                - n7.parentNode
                - n7.parentElement
            */

            n7.parentNode.className = "sel"; // 아버지
            n7.parentNode.parentNode.className = "sel"; // 할아버지
            n7.parentNode.parentNode.parentNode.className = "sel"; // 증조할아버지
            n7.parentNode.parentNode.parentNode.parentNode.className = "sel"; // 고조할아버지

            // <html> 노드의 부모
            // - 화면에 안보이는 노드
            // - window.document 객체
            n7.parentNode.parentNode.parentNode.parentNode.parentNode.className = "sel"; // 현조할아버지 

            alert(n7.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName); // document
            alert(n7.parentNode.parentNode.parentNode.parentNode.parentNode.nodeType); // 9
            alert(n7.parentNode.parentNode.parentNode.parentNode.parentNode === window.document); // true

            // BOM : document의 부모는 window이다.
            // DOM : document가 최상위 객체이다.
            // alert(n7.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName); // window?? -> 에러!!!!

        };


        btn1.onclick = function() {

            // 형제를 찾으려면 부모로 올라가서 찾아야한다.

            // 형제 찾기
            //n7.parentNode.firstElementChild.className = "sel";
            n7.previousElementSibling.className = "sel";

            // 동생 찾기
            //n7.parentNode.lastElementChild.className = "sel";
            n7.nextElementSibling.className = "sel";

        };

        /*
            패턴
            - 1. id 검색 > 나를 검색
            - 2. 나를 중심 > axis 검색
        */

     </script>
</body>
</html>

ex41_attribute.html

attribute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>속성 제어</h1>

    <a href="http://google.con" id="link1">구글</a>
    <hr>
    <input type="button" value="버튼" id="btn1">

    <script>
        var link1 = document.getElementById('link1');
        var btn1 = document.getElementById('btn1');

        btn1.onclick = function() {
            /*
                < 속성 제어 >

                1. BOM
                    - HTML의 속성을 JavaScript에서 프로퍼티로 제공한다.
            */
            // link1.href = 'http://w3.org'; // 속성 제어
            // link1.target = '_blank'; // 없는 속성 추가
            // link1.innerText = 'W3C' // DOM으로 PADATA 조작


            /*
                2. DOM
                - setter(), getter() 제공
            */
            // link1.setAttribute('속성이름','속성값');
            // link1.setAttribute('href','http://daum.net'); // 속성 제어
            // alert(link1.getAttribute('href')); // 확인. 속성값 반환

            // link1.setAttribute('target', '_blank');
            // link1.textContent = '다음';

            alert(link1.attributes.length); // 2 -> link1가 속성을 2개 가지고 있다(href, id)
            for(var i=0; i<link1.attributes.length; i++) {
                console.log('nodeName', link1.attributes[i].nodeName);
                console.log('nodeType', link1.attributes[i].nodeType);
                console.log('nodeValue', link1.attributes[i].nodeValue);
            }

            // DOM에서의 속성 제어 인터페이스
            // link1.attributes - 모든 속성을 총괄. 배열
            // link1.setAttribute - 추가
            // link1.getAttribute - 확인
            // link1.removeAttribute('href'); // 속성 없애기
            // link1.toggleAttribute('href'); // 해당 속성을 넣었다 뺐다 할 수 있음

        };

    </script>
</body>
</html>

ex42_DOM.html

DOM 태그 조작

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 태그 조작 -->
    <input type="button" value="버튼" id="btn1">
    <hr>
    <div id="div1"></div>
    <hr>
    <div id="cat">
        <img src="images/catty01.png">
        <img src="images/catty02.png">
        <img src="images/catty03.png">
        <img src="images/catty04.png">
        <img src="images/catty05.png">
    </div>

    <script>
        var btn1 = document.getElementById('btn1');
        var div1 = document.getElementById('div1');

        // DOM을 사용해서 태그 + 속성 + PCDATA 조작
        // - 생성
        // - 제어
        // - 삭제
        btn1.onclick = function() {

            /*
                <a href ="http://naver.com">네이버</a>

                BOM -> 불가능
                DOM -> 가능
            */

            // DOM
            // innerHTML -> 간단함. 불편함(의미없는 텍스트 조작)
            div1.innerHTML = "<a href='http://naver.com'>네이버</a>";

            // 표준 방법, 정석(******) -> 조직화, 대형화 작업에서 편리
            // 노드(태그)만들기
            var a = document.createElement('a'); // <a> 생성
            // alert(a.nodeType); // 1
            // alert(a.nodeName); // A

            // 속성 만들기
            // href = ''
            var href = document.createAttribute('href');
            // href = 'http://naver.com'
            href.nodeValue = 'http://naver.com';

            // 태그와 속성 연결하기
            // <a href='http://naver.com'></a>
            // a.setAttribute('name', 'value');
            a.setAttributeNode(href); 

            // PCDATA 만들기
            var text = document.createTextNode('네이버');

            // 태그와 PCDATA 연결하기
            a.appendChild(text);

            // 확인 -> 화면에 안보임
            console.log(a);

            // 화면에 출력 -> 이미 화면에 보이고 있는 태그(div)의 자식으로 넣어야한다.
            div1.appendChild(a);

        };

        // ---------------------------------------------------------------------------------

        // 간단 버전 (***)
        btn1.onclick = function() {

            // 태그만들기
            var a = document.createElement('a');

            // 속성만들기
            a.setAttributeNode('href', 'http://naver.com');

            // PCDATA 만들기
            a.innerHTML = '네이버';

            // 연결하기
            div1.appendChild(a);

        };


        btn1.onclick = function() {
            //링크 X 3개

            // 객체 배열
            var data = [
                { // 객체
                    name: '네이버',
                    url: 'http://naver.com'
                },
                {
                    name: '구글',
                    url: 'http://google.com'
                },
                {
                    name: '다음',
                    url: 'http://daum.net'
                }
            ];

            data.forEach(function(item, index) {

                // alert(item.name + ',' + item.url);

                // BOM
                div1.innerHTML += "<a href='"+ item.url +"'>" + item.name +"</a><br>";

                // DOM
                var a = document.createElement('a');
                a.setAttributeNode('href', item.url);
                a.innerText = item.name;
                div1.appendChild(a);

                var br = document.createElement('br');
                div1.appendChild(br);

            });
        };

        btn1.onclick = function() {

            // img의 부모 -> #cat
            var cat = document.getElementById('cat');

            // img - 유사배열
            for(var i=0; i<cat.children.length; i++) {
                // cat.children[i].width = 50;

                cat.children[i].onclick = function() {
                    cat.removeChild(event.srcElement); // 태그 삭제
                };
            }

            // DOM에서 태그 삭제 > 부모가 한다.
            // cat.removeChild(자식 태그);
            // cat.removeChild(cat.firstElementChild); 
            // cat.removeChild(cat.lastElementChild);
            // cat.removeChild(cat.Children[2]);

        };

    </script>
</body>
</html>

ex43_event.html

DOM 이벤트

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>DOM 이벤트</h1>

    <input type="button" value="버튼" id="btn1">

    <script>
        var btn1 = document.getElementById('btn1');

        function m1(){
            alert('m1');
        }

        function m2(){
            alert('m2');
        }

        function m3() {
            m1();
            m2();
        }

        // BOM 이벤트 
        // btn1.onclick = function() {}; // 익명함수
        // btn1.onclick = m1; // 실명함수. 덮어쓰기
        // btn1.onclick = m2; // 덮어쓰기
        // btn1.onclick = null; // 이벤트 제거
        // btn1.onclick = m1 + m2; // 불가능
        // btn1.onclick = m3; // m1 + m2 -> 함수로 해결 -> 편법


        // DOM 이벤트
        // - addEventListener 
        //         : 함수를 목록으로 관리한다.(InvocationList).(함수만 따로 관리하는 배열)
        //         : 리스트에 함수를 Append
        // btn1.addEventListener('이벤트종류', 함수);
        // btn1.addEventListener('click', function() { // 익명함수
        //     alert();
        // });
        btn1.addEventListener('click', m1); // 덮어쓰기. 실명함수
        btn1.addEventListener('click', m2); // 덮어쓰기(X), 누적(O)

        btn1.removeEventListener('click', m1); // 삭제 - 실명함수

    </script>
</body>
</html>

ex44.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>

      #tbl1 { 
          border: 1px solid black;
          border-collapse: collapse; 
       }

      #tbl1 td { 
          border: 1px solid black;
          width: 100px; height: 100px;
          text-align: center; 
       }

   </style>
</head>
<body>

   <table id="tbl1">
      <tr>
         <td class="cell"></td>
         <td class="cell"></td>
         <td class="cell"></td>
         <td class="cell"></td>
         <td class="cell"></td>
      </tr>
      <tr>
         <td class="cell"></td>
         <td class="cell"></td>
         <td class="cell"></td>
         <td class="cell"></td>
         <td class="cell"></td>
      </tr>
      <tr>
         <td class="cell"></td>
         <td class="cell"></td>
         <td class="cell"></td>
         <td class="cell"></td>
         <td class="cell"></td>
      </tr>
      <tr>
         <td class="cell"></td>
         <td class="cell"></td>
         <td class="cell"></td>
         <td class="cell"></td>
         <td class="cell"></td>
      </tr>
      <tr>
         <td class="cell"></td>
         <td class="cell"></td>
         <td class="cell"></td>
         <td class="cell"></td>
         <td class="cell"></td>
      </tr>
   </table>

   <script>

      var cell = document.getElementsByClassName('cell');
      var index = 0;
      cell[index].bgColor = 'gold';

      // DOM에 이벤트 걸 때 -> onkeydown -> on빼기
      window.addEventListener('keydown', function() { // window -> 전역으로 걸기

         clear();

         if (event.keyCode == 37) {
            // 왼쪽 방향키
            index--;

            if (index < 0) {
               //index = 0;
               index = cell.length - 1;
            }

         } else if (event.keyCode == 39) {
            // 오른쪽 방향키
            // cell[index].bgColor = 'transparent'; // 투명색
            index++;

            if (index >= cell.length) {
               // alert('마지막 셀입니다.');
               // index--;
               index = 0;
            }
         }

         cell[index].bgColor = 'gold';

      });

       // 전체를 투명으로 바꾸는 함수
      function clear() {
         for (var i=0; i<cell.length; i++) {
            cell[i].bgColor = "transparent";
         }
      }

   </script>

</body>
</html>

ex45_event.html

이벤트 버블링(Event Bubbling), 이벤트 터널링(Event Tunneling)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>

      .box { border: 1px solid black; padding: 50px; }

      #box1 { background-color: tomato; }
      #box2 { background-color: gold; }
      #box3 { background-color: cornflowerblue; }


      .tbl { border: 1px solid black; border-collapse: collapse; }
      .tbl td { border: 1px solid black; }

      #tbl1 { margin: 20px 0; }
      #tbl1 td { padding: 5px 20px; }

      #tbl2 td { width: 126px; height: 126px; }
      #tbl2 td img { display: block; }

   </style>
</head>
<body oncontextmenu="return false;"> <!-- contextmenu없앰(마우스 우측버튼 - 메뉴창) -->

   <h1>이벤트 버블링(Event Bubbling), 이벤트 터널링(Event Tunneling) == 이벤트 캡처링(Event Capturing)</h1>

   <table id="tbl2" class="tbl">
      <tr>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
         <td></td>
      </tr>
   </table>


   <table id="tbl1" class="tbl">
      <tr>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
      </tr>
      <tr>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
      </tr>
      <tr>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
      </tr>
      <tr>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
      </tr>
      <tr>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
      </tr>
      <tr>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
      </tr>
      <tr>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
      </tr>
      <tr>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
      </tr>
      <tr>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
      </tr>
      <tr>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
         <td>item</td>
      </tr>
   </table>


   <div id="box1" class="box">
      <div id="box2" class="box">
         <div id="box3" class="box"></div>
      </div>
   </div>

   <script>

      // JavaScript의 이벤트는 기본적으로 버블링을 기반으로 동작한다.(*****)
      // 터널링 기반의 동작은 지원하지 않는다.(추가 지원함)

      var box1 = document.getElementById('box1');
      var box2 = document.getElementById('box2');
      var box3 = document.getElementById('box3');

      // box3.onclick = function() { 
      //    alert('손자') 
      //    //alert(event.srcElement.id);

      //    // 부모로 전파되는 버블링을 취소
      //    //event.cancelBubble = true;
      // };

      // box2.onclick = function() {
      //    alert('부모');
      //    //alert(event.srcElement.id);

      //    //event.cancelBubble = true;
      // };

      // box1.onclick = function() {
      //    alert('조부모');
      //    //alert(event.srcElement.id);
      //    //event.srcElement.style.border = "10px solid black";
      // };

    // true -> 터널링 / false -> 버블링
      // box1.addEventListener('click', function() {
      //    alert('할아버지');
      // }, true);
      // box2.addEventListener('click', function() {
      //    alert('아버지');
      // }, true);
      // box3.addEventListener('click', function() {
      //    alert('나');
      // }, true);

    // -------------------------------------------------------------------

      // var td = document.getElementsByTagName('td');

      // for (var i=0; i<td.length; i++) {
      //    td[i].onmouseover = function() {
      //       event.srcElement.bgColor = 'gold';
      //    };
      //    td[i].onmouseout = function() {
      //       event.srcElement.bgColor = 'transparent';
      //    };
      // }


      // 행 단위로 색상 바꾸기
      // var tr = document.getElementsByTagName('tr');

      // for (var i=0; i<tr.length; i++) {
      //    tr[i].onmouseover = function() {
              // 테이블에서는 영역이 겹치기 때문에 무조건 event.srcElement는 td에 걸리게 된다.
      //       // event.srcElement.bgColor = 'gold';
      //       // event.srcElement.parentNode.bgColor = 'gold'; // td의 부모인 tr을 찾기
      //       event.currentTarget.bgColor = 'tomato'; // 함수를 소유하고 있는 이벤트의 주인을 가르킴
      //    };
      //    tr[i].onmouseout = function() {
      //       // event.srcElement.bgColor = 'transparent';
      //       // event.srcElement.parentNode.bgColor = 'transparent';
      //       event.currentTarget.bgColor = 'transparent';
      //    };
      // }

      // ---------------------------------------------------------------------------

      var td = document.getElementsByTagName('td');

      for (var i=0; i<td.length; i++) {

         td[i].onmousedown = function() {
            // event.srcElement -> <td>
            // event.srcElement.innerHTML = '<img src="images/rect_icon01.png">';
            // event.srcElement.firstElementChild.onmousedown = function() {}; // img

            // 마우스 왼쪽버튼 누르면 추가
            if (event.buttons == 1) {

               // 객체 찾기 쉬움.
               var img = document.createElement('img');
               img.setAttribute('src', 'images/rect_icon01.png');
               event.srcElement.appendChild(img);

            } else if (event.buttons == 2) { // 마우스 오른쪽 버튼 누르면 삭제
               // 이미지 삭제
               // alert(event.srcElement.nodeType);
               // alert(event.srcElement.nodeName); // img

               // event.srcElement.removeChild(event.srcElement.firstElementChild);
               // event.srcElement.parentNode.removeChild(event.srcElement);
               event.currentTarget.removeChild(event.currentTarget.firstElementChild); // event.currentTarget -> <td>
            }

            // img.onmousedown = function() {
            //    //클릭한 이미지를 삭제
            //    event.srcElement ->img 
            //     event.srcElement.parentNode -> td
                 //부모가 자식을 없앨 수 있음.
            //    event.srcElement.parentNode.removeChild(event.srcElement);
            // };

         };
      }

   </script>

</body>
</html>

ex30_timer.html

Timer

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <!--  
      타이머, timer
   -->
   <h1>Timer</h1>

   <form name="form1">
      <input type="text" name="txt1" placeholder="10초내에 입력하세요.">
      <hr>
      <input type="button" value="버튼1" name="btn1">
      <input type="button" value="버튼2" name="btn2">
      <input type="button" value="버튼3" name="btn3">
      <hr>
      <input type="button" value="시작" name="btnStart">
      <input type="button" value="멈춤" name="btnStop">
      <hr>
      <img src="images/catty01.png" name="cat1">
      <hr>
      <input type="button" value="버튼4" name="btn4">
      <input type="button" value="버튼5" name="btn5">
      <input type="button" value="버튼6" name="btn6">

      <hr>

      <select name="sel1" size="5">
         <option>하나</option>
         <option>둘</option>
         <option>셋</option>
         <option>넷</option>
         <option>다섯</option>
      </select>
      <input type="button" value="삭제" name="btnDelete">

   </form>

   <script>

      var txt1 = document.form1.txt1;
      var btn1 = document.form1.btn1;
      var btn2 = document.form1.btn2;
      var btn3 = document.form1.btn3;
      var btn4 = document.form1.btn4;
      var btn5 = document.form1.btn5;
      var btn6 = document.form1.btn6;

      var cat1 = document.images['cat1'];

      var btnStart = document.form1.btnStart;
      var btnStop = document.form1.btnStop;

      var sel1 = document.form1.sel1;
      var btnDelete = document.form1.btnDelete;




      //타이머
      // - window 객체 메소드

      // - number setTimeout(함수, 시간(ms))
      //    - 해당 함수 실행 후 지정한 시간이 되는 순간 함수를 실행한다.
      //    - 1회 실행
      // - void clearTimeout(타이머 ID) -> 동작 중인 타이머를 없애주는 일을 한다. 

      // - number setInterval(함수, 시간(ms))
      //    - 해당 함수 실행 후부터 지정한 시간마다 함수를 실행한다.
      //    - 반복 실행
      // - void clearInterval(타이머 ID)
      //    - 타이머 ID : number setInterval(함수, 시간(ms))의 반환값. 고유ID

      btn1.onclick = function() {
         setTimeout(function () {
            alert('확인');
         }, 3000); // 3초
      };

      btn2.onclick = function() {
         setInterval(function() {
            alert('확인');
         }, 3000);
      };

      btn3.onclick = function() {
         // setTimeout(function() {
         //    txt1.size += 10;
         // }, 3000);

         // 버튼 누르면 바로 실행
         var now = new Date();
         txt1.value = now.toLocaleTimeString();

         // 1초마다 실행
         setInterval(function() {   
            var now = new Date(); // 현재 시간
            txt1.value = now.toLocaleTimeString(); // 시분초
         }, 1000); //1초마다 함수 실행
      };

      // 페이지가 들어오자마자 바로 실행
      // var now = new Date();
      // txt1.value = now.toLocaleTimeString();

      // 페이지가 로딩되고 1초마다 실행
      // setInterval(function() {   
      //    var now = new Date();
      //    txt1.value = now.toLocaleTimeString();
      // }, 1000); //1초마다 함수 실행


      // ------------------------------------------------


      // 전역 변수는 페이지가 화면에 보이는 동안은 계속 살아있다.
      //    - 멈춤 버튼 눌러도 멈춘 숫자에서 이어져서 동작하는 이유(자기 값을 계속 이어서 관리)
      var n = 1;
      var timer = 0; // 타이머 1개 기억. 타이머 ID(중복되지 않는 고유값)
      var timerList = []; // 타이머 N개 기억 - 배열

      // 개발자가 아니라, 시스템이나 실행환경이 호출하는 함수(메소드)
      // 개발자가 원하는 시점에 바로 호출하는 것이 아니라 언젠가 어떤 조건이 만족했을 때 환경(시스템)이 호출하는 함수
      // - 콜백 함수(Callback Function), 콜백 메소드

      btnStart.onclick = function() {
         // timer = setTimeout(function() {
         //    txt1.value = n;
         // }, 5000);
         // console.log(timer);

         // timer = setInterval(function() {
         //    txt1.value = n;
         //    n++;
         // }, 10); // 0.01초 
         // console.log(timer);

         // 타이머ID를 여러개 생성 -> 삭제하는 방법
         // timerList.push(timer); // 버튼을 여러번 누르면 타이머 ID가 여러개 생성된다. -> 타이머 ID 배열에 저장

         // 시작버튼 한번만 클릭가능.
         if (timer == 0) {
            timer = setInterval(function() { // 타이머 ID 대입
               txt1.value = n;
               n++;
            }, 10);
         }

      };

      btnStop.onclick = function() {
         // clearTimeout(timer);
         // clearInterval(timer);
         // n = 0; // 전역변수 리셋

         // timer = timerList.pop(); // 배열에 넣은 타이머 ID를 pop()으로 호출 (pop()은 스택이라 꺼내면 사라짐.)
         // clearInterval(timer); 
         // console.log(timerList);

         clearInterval(timer); 
         timer = 0; // 0으로 초기화

      };


      // ------------------------------------------------------


      var index = 0;
      var colors = [ 'white', 'black', 'tomato', 'gold', 'cornflowerblue' ];

      btn4.onclick = function() {

         setInterval(function() {
            document.body.bgColor = colors[index];
            index++;
            if (index >= colors.length) {
               index = 0; //reset
            }
         }, 1000);

      };

      // -----------------------------------------------------

      cat1.onclick = function() {

         index = 1;

         if (timer == 0) {
            timer = setInterval(function() {
               //JavaScript -> format String X (자바스크립트는 형식문자열이 없다.)
               //console.log() -> format String O
               cat1.src = "images/catty0" + index + ".png";
               index++;

               if (index > 9) {
                  index = 1;
               }

            }, 50);
         } else {
            clearInterval(timer);
            timer = 0;
         }

      };


      // ----------------------------------------------------


      txt1.onkeyup = function() {
         //무언가를 입력중이면 타이머 중지
         clearTimeout(timer);
      };

      txt1.onblur = function() {
         // onblur : 포커스가 소멸되는 순간(입력 상태가 풀리면) 발생하는 이벤트
         txt1.readOnly = true;
      };

      timer = setTimeout(function() {
         txt1.readOnly = true;
         txt1.placeholder = '입력이 불가능합니다.';
      }, 10000); // 10초가 지나면 입력 불가능 -> 읽기만 가능


      // ------------------------------------------------------


      btnDelete.onclick = function() {

         // <select>의 모든 <option>태그 삭제하기
         //1.
         // while (sel1.options.length > 0) {
         //    sel1.options.remove(0);
         // }

         //2.
         //sel1.options = null;

         //3.
         // a. length의 변화
         // b. index의 shift

         //length -> 5 => loop x 5

         var count = sel1.options.length;

         // for (var i=0; i<count; i++) {
         //    sel1.options.remove(i);
         //    // console.log(sel1.options.length);
         // }

         for (var i = count-1; i>=0; i--) { // shift를 방지하기 위해 뒤에서부터 지운다.
            sel1.options.remove(i);
         }

      };

   </script>

</body>
</html>

문제

<!-- https://pinnpublic.github.io/example/javascript/exam12.html -->

ESLint

• ESLint는 JavaScript 코드에서 발견 된 문제 패턴을 식별하기위한 정적 코드 분석 도구

      JavaScript -> 문법 검사 도구

      ESLint
      -> node.js
      -> npm(JS 관련 라이브러리 설치/관리 도구) or yarn

      VS Code > Ctrl + `(~)

      VS Code
      1. 폴더 열기 > Ctrl + K,O > javascript 폴더 선택
      2. Ctrl + ` > 프롬프트 > javascript
      3. > npm install bootstrap@3

      현재 행동 > 사이트 + 설치 파일 다운로드 + 작업 폴더 이동 + 설정
      -> 위의 행동을 대신

      XXLint

      1. > npm install -g eslint
      2. > npm init : 작업 공간 선언(초기화)
      3. > eslint --init : eslint 작업 공간 선언 (***터미널이 powerShell이면 버그때문에 안됨 -> cmd로 설정하기)
      4. > eslint ex36.js
      5. VS 확장 프로그램 -> ESLint 실시간 연동
      6. 구글검색 git > eslint-plugin-html > .eslintrc.js (ESLint 설정파일) > 붙여넣기

DOM

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
   <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
</head>
<body>
   <!-- ex36_DOM.html -->

   <!--  
      JavaScript -> 문법 검사 도구

      ESLint
      -> node.js
      -> npm(JS 관련 라이브러리 설치/관리 도구) or yarn

      VS Code > Ctrl + `(~)

      VS Code
      1. 폴더 열기 > Ctrl + K,O > javascript 폴더 선택
      2. Ctrl + ` > 프롬프트 > javascript
      3. > npm install bootstrap@3

      현재 행동 > 사이트 + 설치 파일 다운로드 + 작업 폴더 이동 + 설정
      -> 위의 행동을 대신

      XXLint

      1. > npm install -g eslint
      2. > npm init : 작업 공간 선언(초기화)
      3. > eslint --init : eslint 작업 공간 선언
      4. > eslint ex36.js
      5. VS 확장 프로그램 -> ESLint 실시간 연동
      6. 구글 > eslint-plugin-html

   -->


   <!--  
      name: BOM 구성요소만 가질 수 있다.
      id, class: 모든 태그가 가질 수 있다.
   -->

   <div class="container">
      <h1 class="title">DOM</h1>

      <form name="form1">
         <h2 class="title">Document Object Model</h2>
         <div id="container">
            <input type="text" name="txt1" id="txt1" class="txt"><br>
            <input type="text" name="txt2" id="txt2" class="txt"><br>
            <input type="text" name="txt3" id="txt3" class="txt"><br>
         </div>
      </form>
   </div>

   <script>

      /*  

      BOM vs DOM
      1. BOM, Browser Object Model
         - HTML 문서의 일부 요소만을 가지고 트리 구조를 제공
         - BOM 트리 구조를 기반으로 태그 검색
         - 접근한 태그 > 속성 조작
         - BOM에 속하지 않은 나머지 태그 접근 불가능!!
         - 조작 도구가 HTML 속성에 기반 > 프로퍼티로 제공 > 한계(제한)!!
         - PCDATA 조작 불가능!!
         - 태그 동적 추가/삭제 불가능!!(예외. <option> 태그)
         - CSS 조작 불가능!!!

      2. DOM, Document Object Model
         - 현재 HTML의 모든 태그를 사용해서 트리 구조 생성 + 제공
         - BOM과 달리 모든 태그를 인식
         - 검색 도구 추가 제공, 조작 도구 추가 제공
         - 태그 동적 추가/삭제 가능!!
         - CSS 조작 가능!!
         - PCDATA 조작 가능!!
         - DOM Level 1
         - DOM Level 2
         - DOM Level 3
         - BOM 기반으로 생성 > 모든 DOM 기능이 document를 통해서 정의(사용)

      */


      /*

         DOM 태그 검색 도구
         1. id 검색(***)
            - object getElementById("id")
            - 유일한 객체(태그)를 찾겠다.
            - 계층 구조를 고려할 필요가 없다.(누구의 자식(X))

         2. class 검색(**)
            - collection getElementsByClassName("class")
            - 같은 이름의 class를 가진 태그 집합을 반환한다.
            - 유사 배열

         3. 태그명 검색
            - collection getElementsByTagName("tag name")
            - 태그명을 검색 -> 태그 집합을 반환한다. (유사배열)

         4. name 검색
            - BOM에서 사용하는 name 식별자를 지원하기 위해서 추가된 기능
            - collection getElementsByName("name")
            - name을 검색 -> 태그 집합을 반환한다.

         5. axis 검색

      */

      // id 검색
      //txt1 검색
      var txt1 = document.form1.txt1; // BOM 방식으로 검색
      //txt1.value = "BOM"; // BOM
      txt1.setAttribute("value", "BOM2"); // DOM 방식으로 수정

      //id(유일)
      var txt2 = document.getElementById("txt2"); // <input id="txt2"> DOM 방식으로 검색
      //txt2.setAttribute("value", "DOM"); // DOM
      txt2.value = "DOM2"; // BOM 방식으로 수정

      //*** BOM으로 검색하던 DOM으로 검색하던 찾은 결과 객체는 동일한 타입이다. -> DOM이랑 BOM을 섞어서 사용 가능하다.!!!
      var txt3_1 = document.form1.txt3; //BOM
      var txt3_2 = document.getElementById("txt3"); //DOM

      console.log(txt3_1 == txt3_2); // true
      console.log(txt3_1 === txt3_2); // true


      // class 검색
      var txt = document.getElementsByClassName("txt");
      console.log(txt.length); // 유사 배열 반환
      console.log(typeof txt); // 자료형 - object

      // Array(X) 
      // HTMLCollection(O): Collection, 유사배열(배열은 아니지만 배열처럼 사용 가능)
      console.log(txt.constructor);
      txt[0].value = "100";

      // 에러 : txt.forEach is not a function (배열처럼 사용이 가능하지만 배열이 아니라서 forEach는 사용할 수 없다. )
      // txt.forEach(function(item, index) {
      //    console.log(item.id);
      // });

      // for문은 사용 가능
      for (var i=0; i<txt.length; i++) {
         // console.log(txt[i].id);
         txt[i].value = "집합";
      }


      // 태그명 검색
      var input = document.getElementsByTagName("input");
      console.log(input.length); // 유사배열
      console.log(input.constructor);

      // ESLint -> 강제력(X), 통보(O)
      for (var i=0; i<input.length; i++) {
         input[i].value = "하하하";
      }


      // name 검색
      var txt1 = document.getElementsByName("txt1"); // txt1 -> 배열
      txt1[0].value = "추가 검색";



      //<h1>, <h2> 태그 찾기 -> BOM이 찾을 수 없었던 태그 찾기 가능
      var title = document.getElementsByClassName("title");
      title[0].style.color = "red";
      title[1].style.color = "blue";

   </script>

</body>
</html>

ex37_content.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>

      #div1 {
         background-color: gold;
         width: 100%;
         height: 50px;
      }

   </style>
</head>
<body>

   <h1>Content 조작</h1>

   <input type="button" value="버튼1" id="btn1">
   <hr>
   <div id="div1"></div>

   <script>

      var btn1 = document.getElementById("btn1");
      var div1 = document.getElementById("div1");

      // <input type value size readonly disabled maxlength title..> => 태그 조작할게 많음.
      // btn1.value = "100";

      // <div id="" class="" title="" bgcolor(X)> => 태그 자체에 조작할 속성이 많지 않음. -> DOM으로 찾은 태그를 활용할 범위가 생각보다 많지 않음. -> 주로 contents를 조작함.
      // div1.bgColor = "red"; -> 없는 프로퍼티 조작 불가능. 


      /*      
         content : 시작 태그와 끝 태그 사이에 있는 내용물

         Content 조작(DOM 전용)
         - <div>Content</div>
         - getter(읽기), setter(쓰기)

         1. innerText
         - 시작 태그와 끝 태그 사이의 문자열 읽기/쓰기 프로퍼티
         - 내용물 파싱하지 않는다.(= 해석하지 않고 있는 그대로 입출력)
         - 비 표준 프로퍼티(MS), 모든 브라우저 지원

         2. innerHTML
         - 시작 태그와 끝 태그 사이의 문자열 읽기/쓰기 프로퍼티
         - 내용물 파싱한다.(구문이 존재하면 해석해서 실행한다.)
         - 표준 프로퍼티

         3. textContent
         - innerText와 동일한 프로퍼티
         - 표준 프로퍼티 
      */

      btn1.onclick = function() {
         // div1.innerText = "홍길동";
         // div1.innerText = "<b>안녕하세요.</b>"; // => 내용물 파싱하지 않는다. 태그가 들어있으면 태그가 그대로 들어가지 않고 엔티티로 변환되서 들어간다.

         // div1.innerHTML = "아무개";
         // div1.innerHTML = "<b>반갑습니다.</b>"; // => 내용물 파싱한다. 태그가 들어있으면 태그를 인식 + 통제.

         // 동적 컨트롤 생성
         // div1.innerHTML += "<input type='text'><br>";

         // div1.innerHTML = "<img src='images/catty01.png'>";

         // div1.innerHTML = "<input type='button' value='버튼' onclick='alert(100);'>";

         var n = parseInt(Math.random() * 5) + 1; // 1 ~ 5 랜덤
         div1.innerHTML += "<img src='images/catty0" + n + ".png'>";
      };


      // 브라우저 > 개발자 도구 > 요소(탭)의 소스 > 현재 브라우저에서 실행 중인 페이지 상태를 보여주는 것 > DOM Tree
      // 실제 현재 상태 -> 개발자 도구사용
      // 실제 원본 -> 원본 소스보기 사용

   </script>
</body>
</html>

ex38_content.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>

      #tbl1 {
         border: 1px solid black;
         border-collapse: collapse;
         width: 500px;
         height: 500px;
      }

      #tbl1 td {
         border: 1px solid black;
         width: 100px;
         height: 100px;

         text-align: center;
         font-size: 4em;
         font-weight: bold;
      }

   </style>
</head>
<body>

   <h1>게시판</h1>

   <div>
      <input type="button" value="첨부파일 추가하기" id="btnAdd">
   </div>

   <hr>

   <div>
      <label>첨부파일: <input type="file" class="file"></label>
   </div>

   <div id="filelist"></div>

   <hr>

   <table id="tbl1">
      <tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
   </table>


   <script>

      // 동적 컨트롤
      var btnAdd = document.getElementById("btnAdd");
      var filelist = document.getElementById("filelist");

      btnAdd.onclick = function() {
         filelist.innerHTML += "<div><label>첨부파일: <input type='file' class=\"file\"></label></div>";
      };

      // --------------------------------------------------

      var td = document.getElementsByTagName("td");

      for (var i=0; i<td.length; i++) {
         td[i].onclick = function() {
            // alert("click");
            // alert(i); - 사용X

            // event.srcElement.innerText = "O";
            event.srcElement.innerHTML = "<img src='images/catty01.png' width='90' height='90'>";

            // event.srcElement.innerHTML = ""; // 없애기
         };
      }

   </script>

</body>
</html>

ex39_content.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>

      fieldset { 
         border: 1px solid #999; 
         border-radius: 5px;
         width: 200px;
      }

      fieldset > div {
         margin: 7px;
      }

      #tbl1 {
         border: 1px solid black;
         border-collapse: collapse;
      }

      #tbl1 td {
         border: 1px solid black;
         padding: 5px 15px;
         text-align: center;
      }
   </style>
</head>
<body>

   <h1>테이블</h1>

   <fieldset>
      <legend>행x열</legend>
      <div><label>행: <select id="selRow"></select></label></div>
      <div><label>열: <select id="selColumn"></select></label></div>
      <div><input type="button" value="생성하기" id="btnCreate"></div>
   </fieldset>

   <table id="tbl1">
      <tbody id="tbody1"></tbody>
   </table>

   <script>

      var selRow = document.getElementById("selRow");
      var selColumn = document.getElementById("selColumn");
      var btnCreate = document.getElementById("btnCreate");
      var tbody1 = document.getElementById("tbody1");

      // selRow -> BOM 추가
      // selColumn -> DOM 추가

       // BOM
      for (var i=1; i<=30; i++) { // -> option태그에만 쓸 수 있는 방법
         var op = new Option();
         op.text = i;
         op.value = i;
         selRow.options.add(op);
      }

      selRow.value = 5; // 평균 -> 초기값(기본값)

       // DOM
      for (var i=1; i<=10; i++) { // -> 어디서든 쓸 수 있는 방법
         selColumn.innerHTML += "<option value='" + i + "'>" + i + "</option>";
      }

      selColumn.value = 3; // 기본값


      btnCreate.onclick = function() {
         // 사용자가 선택한 : 행 x 열 -> 테이블 추가

         //혹시 기존 내용이 <tbody>에 남아있으면 지우고 다시 시작
         tbody1.innerHTML = ""; // 삭제(초기화)

         for (var i=0; i<selRow.value; i++) {
            // 행 -> <tr>
            var temp = ""; // 누적변수
            temp += "<tr>";

               for (var j=0; j<selColumn.value; j++) {
                  //열 -> <td>
                  temp += "<td>";
                  temp += i + ',' + j; //<td>5,2</td>
                  temp += "</td>";
               }

            temp += "</tr>";

            tbody1.innerHTML += temp; //<tr> 동적 추가
         }

      };

   </script>

</body>
</html>

ex27_messagebox.html

메세지 박스

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        메세지 박스
        - Dialog box
        1. alert() ****
            - 메세지 전달
        2. confirm() *****
            - 메세지 전달 -> 사용자 의사 확인 -> Yes or No 선택
        3. prompt()
            - 사용자에게 정보 입력
            - 디자인 수정 불가
    -->
    <h1>Message box</h1>

    <form name="form1">
        <input type="button" value="버튼1" name="btn1">
        <input type="button" value="버튼2" name="btn2">
        <input type="button" value="버튼3" name="btn3">
    </form>

    <script>
        var btn1 = document.form1.btn1;
        var btn2 = document.form1.btn2;
        var btn3 = document.form1.btn3;

        btn1.onclick = function() {
            alert(100);
            alert(true);
            alert('문자열');
            alert(new Date()); // 문자열
        };

        btn2.onclick = function() {
            // confirm('메세지');

            var result = confirm('정말 삭제하시겠습니까?');
            console.log(result); // 반환값 boolean

            if(result){

            } else {

            }
        };

        btn3.onclick = function() {
            // prompt('메시지', '초기값');
            var age = prompt('나이를 입력하세요.', ''); // 반환값

            if (age >= 19) {
                location.href = 'http://google.com';
            } else {
                alert('미성년자는 가입할 수 없습니다.');
            }
        };



        // **** 결론 : 자바스크립트의 함수는 모두(100%) 객체 메소드이다.(귀속 함수)
        //           : 자바스크립트는 독립 함수라는 존재가 없다.
        //           : 자바스크립트는 전역 함수라는 존재가 없다.
        //           : 자바스크립트는 전역 변수라는 존재가 없다.

        //★★★★★ 모든 전역 변수와 모든 전역 함수는 (자동으로) window 객체의 프로퍼티가 된다.★★★★★

        // 전역변수
        var num = 10;

        // 함수
        // alert();

        // 독립함수 -> 전역함수
        // 재정의
        // function alert() { 

        // }

        var obj = {
            name: '홍길동', // 프로퍼티
            age: 20,
            // 귀속함수 > 메소드
            hello: function() {
                console.log(1);
                console.log(this); // this == obj
            }
        };

        // 함수도 값이기 때문에 덮어쓰기가 가능하다.
        obj.hello = function() {
            console.log(2);
        }

        // hello(); // X
        obj.hello(); // O

        // 객체에 변수를 추가하면 -> 프로퍼티
        obj.gender = '남자'; // 프로퍼티 추가


        // 전역변수 생성
        var program = 'test';
        // 아래와 같이 자동으로 처리
        // window.program = 'test';

        console.log(program);
        console.log(window.program);


        // 전역 함수 생성
        function test() {
            console.log('function test');
        }

        //아래와 같이 자동으로 추가
        // window.test = function() {
        //     console.log('function test');
        // };

        test();
        window.test();

        // window는 최상위 객체이며 유일하기 때문에 생략가능*****
        // window.alert(100);
        alert(100); // 단독으로 사용하는 것은 대부분 window의 메소드이다.

        // window.confirm();
        // window.prompt();


        // 전역함수에서 작성한 this는 항상 window객체를 말한다.
        // this : 메소드를 소유하고 있는 객체
       // window.aaa = function() {};    
        function aaa() {
            console.log(this); // this == window
        }

        aaa();

    </script>
</body>
</html>

ex28_form.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>

      body { margin-bottom: 500px; }

      #tbl1 { border: 1px solid black; border-collapse: collapse; }
      #tbl1 th, #tbl1 td { border: 1px solid black; padding: 5px; }

   </style>
</head>
<body>

   <!--  

      BOM
      - window
      - window의 자식 : screen, history, location, document
      - document의 자식 : image, link, form
      - form의 자식 : text, button, radio, checkbox..

   -->

   <h1>폼</h1>

   <form name="form1">

      <h2>텍스트 박스</h2>
      <input type="text" name="txt1">
      <input type="button" value="버튼" name="btn1">

      <h2>로그인</h2>
      아이디: <input type="text" name="txtID"><br>
      암호: <input type="password" name="txtPW"><br>
      <input type="button" value="로그인" name="btnLogin">

      <h2>체크박스</h2>
      <label>동의: <input type="checkbox" name="cb1"> </label>
      <input type="button" value="확인" name="btn2">

      <h2>약관</h2>
      <fieldset>어쩌구 저쩌구..</fieldset><br>
      <label>약관 동의: <input type="checkbox" name="cb2"> </label>
      <input type="button" value="다음 단계로" name="btn3" disabled>

      <h2>게시물</h2>

      <table id="tbl1">
         <tr>
            <th><input type="checkbox" name="cbAll"></th>
            <th>제목</th>
            <th>작성자</th>
            <th>날짜</th>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="cbItem"></td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>홍길동</td>
            <td>2021-06-25</td>
         </tr>
      </table>

      <h2>라디오 버튼</h2>

      <div>
         <h3>선호하는 언어를 선택하세요.</h3>
         <label><input type="radio" name="rb" value="Java"> Java</label><br>
         <label><input type="radio" name="rb" value="SQL"> SQL</label><br>
         <label><input type="radio" name="rb" value="HTML"> HTML</label><br>
         <label><input type="radio" name="rb" value="CSS"> CSS</label><br>
         <label><input type="radio" name="rb" value="JavaScript"> JavaScript</label><br>
         <br>
         <input type="button" value="확인" name="btn4">
      </div>

      <div>
         <h3>색상을 선택하세요.</h3>
         <label><input type="radio" name="rbColor" value="tomato">빨강</label><br>
         <label><input type="radio" name="rbColor" value="gold">노랑</label><br>
         <label><input type="radio" name="rbColor" value="cornflowerblue">파랑</label><br>
         <label><input type="radio" name="rbColor" value="white" checked>하양</label><br>
         <label><input type="radio" name="rbColor" value="black">검정</label><br>
      </div>


      <h2>셀렉트 박스</h2>

      <div>
         <label>동물: </label>
         <select name="sel1" multiple size="7">
            <option value="1">강아지</option>
            <option value="2">고양이</option>
            <option value="3">병아리</option>
            <option value="4">토끼</option>
            <option value="5">거북이</option>
         </select>
         <br><br>
         <input type="button" value="확인5" name="btn5">
         <input type="button" value="확인6" name="btn6">
         <input type="button" value="확인7" name="btn7">
         <input type="button" value="확인8" name="btn8">
         <input type="button" value="확인9" name="btn9">
      </div>


   </form>

   <script>

      var txt1 = document.form1.txt1;
      var btn1 = document.form1.btn1;

      var txtID = document.form1.txtID;
      var txtPW = document.form1.txtPW;
      var btnLogin = document.form1.btnLogin;

      var btn2 = document.form1.btn2;
      var cb1 = document.form1.cb1;

      var btn3 = document.form1.btn3;
      var cb2 = document.form1.cb2;

      var cbAll = document.form1.cbAll; //단수
      var cbItem = document.form1.cbItem; //복수 -> 배열

      var btn4 = document.form1.btn4;
      var rb = document.form1.rb; //복수 -> 배열

      var rbColor = document.form1.rbColor; //복수 -> 배열


      var sel1 = document.form1.sel1;

      var btn5 = document.form1.btn5;
      var btn6 = document.form1.btn6;
      var btn7 = document.form1.btn7;
      var btn8 = document.form1.btn8;
      var btn9 = document.form1.btn9;



      //텍스트 박스 조작
      //1. 텍스트 박스 자체
      //2. 텍스트 박스의 값 > 문자열 조작 *****

      btn1.onclick = function() {
         //txt1.readOnly = true; // 텍스트 박스 자체 조작

      };


      // 텍스트 박스의 값 조작
      btnLogin.onclick = function() { 

         //유효성 검사
         // - 유효성 검사는 되도록 유효하지 않은 걸 찾아야 로직 구현이 편하다.
         //1. 아이디: 필수 입력, 4~12자 이내
         //2. 암호: 필수 입력, 4~12자 이내

         // 필수 입력 확인하는 방법
         // 1. txtID.value == '' -> 빈문자열인지 확인
         // 2. txtID.value.length == 0 -> 문자열길이가 0인지 확인

         if (txtID.value.trim() == '') {
            alert('아이디를 반드시 입력하세요');
            txtID.focus(); //onfocus -> 텍스트 박스에 커서의 포커스가 맞춰짐.
            return; // 빈리턴문. 함수 종료
         }

         if (txtID.value.trim().length < 4 || txtID.value.trim().length > 12) {
            alert('아이디를 4자~12자 이내로 입력하세요.');
            //txtID.focus();
            txtID.select(); // 선택된 상태로 포커스가 맞춰짐.
            return;
         }

         if (txtPW.value.trim() == '') {
            alert('암호를 반드시 입력하세요');
            txtPW.focus(); 
            return;
         }

         if (txtPW.value.trim().length < 4 || txtPW.value.trim().length > 12) {
            alert('암호를 4자~12자 이내로 입력하세요.');
            //txtPW.focus();
            txtPW.select();
            return;
         }

         //여기에 도착~
         //올바른 데이터를 입력!!
         //전송~
         alert('success');


      };

      // ----------------------------------------------------

      btn2.onclick = function() {

         //체크박스의 상태?
         alert(cb1.checked); // 체크하면 true, 체크 안하면 false

      };


      //체크박스를 클릭해서 체크 상태를 변화할 때 > 어떤 이벤트?
      //1. onclick
      //2. onchange : 변화가 일어났는지 감지하는 이벤트 //권장

      cb2.onchange = function() {
         //alert(cb2.checked);

         if (cb2.checked) {
            btn3.disabled = false;
         } else {
            btn3.disabled = true;
         }

      };

      btn3.onclick = function() {
         location.href = '다음페이지';
      };

      // ----------------------------------------------------

      cbAll.onchange = function() {

         //cbItem -> for문

         // if (cbAll.checked) {
         //    for (var i=0; i<cbItem.length; i++) {
         //       cbItem[i].checked = true;
         //    }
         // } else {
         //    for (var i=0; i<cbItem.length; i++) {
         //       cbItem[i].checked = false;
         //    }
         // }

         for (var i=0; i<cbItem.length; i++) {
            cbItem[i].checked = cbAll.checked;
         }

      };

      // ----------------------------------------------------

      btn4.onclick = function() {

         rb.forEach(function(item, index) {

            //alert(item.checked);
            //alert(item.value);

            if (item.checked) {
               alert(item.value);
            }

         });

      };

      // ----------------------------------------------------

      rbColor.forEach(function (rb, index) {

         rb.onclick = function() {
            //alert(rb.value);
            //alert(event.srcElement.value); //권장!!!
            document.body.bgColor = event.srcElement.value;
         };

      });

      // ----------------------------------------------------

      btn5.onclick = function() {

         // 선택한 <option> 접근
         // alert(sel1.value); //읽기
         sel1.value = 4; //쓰기

      };

      btn6.onclick = function() {

         // 선택 항목(<option>)
         // - <option> 태그의 index
         // alert(sel1.selectedIndex); //선택된 <option>의 index
         sel1.selectedIndex = 2;


         // 셀렉트 박스 > 선택 항목 조작
         // 1. value
         // 2. selectedIndex 

      };

      btn7.onclick = function() {

         //var flag = false;

         for (var i=0; i<sel1.options.length; i++) {
            if (sel1.options[i].text == '햄스터') {
               //flag = true;
               //break;
               return;
            }
         }

         //if (!flag) {
            // <option> 동적 추가
            var op = new Option(); // 생성자 함수. <option> 태그 생성
            op.value = 6; // <option value="6"></option>
            op.text = '햄스터'; // <option value="6">햄스터</option>

            //<select>에 <option> 추가 - options 컬렉션
            sel1.options.add(op);
         //}
      };

      btn8.onclick = function() {

         //<option> 삭제
         //sel1.options.remove(3);

         //sel1.options.remove(선택한 옵션의 index);

         if (sel1.options.length > 1) {
            sel1.options.remove(sel1.selectedIndex);
         }

      };

      btn9.onclick = function() {

         //다중 선택 > 선택한 항목들?
         for (var i=0; i<sel1.options.length; i++) {

            // 체크박스, 라디오버튼 : checked
            // 셀렉트 박스 : selected

            //alert(sel1.options[i].selected);
            if (sel1.options[i].selected) {
               alert(sel1.options[i].text + ':' + sel1.options[i].value);
            }
         }
      };

   </script>

</body>
</html>

ex29.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        다량의 태그에 일괄적으로 이벤트 적용시 생기는 상황
     -->

    <img src="images/cat01.jpg" name="img">
    <img src="images/cat02.jpg" name="img">
    <img src="images/cat03.jpg" name="img">

    <script>

        var img = document.all.img;         

        // alert(img.length);

        for(var i=0; i<img.length; i++) { // <- var i = 0 전역변수

            // end loop -> 3

            // 이벤트를 등록하는 것. 함수는 행동이 발생했을때 실행된다.
            img[0].onclick = function() { alert(i); };
            img[1].onclick = function() { alert(i); };
            img[2].onclick = function() { alert(i); };

            // 이벤트 핸들러(역할)
            // i번째 이미지 태그의 멤버 메소드(구문)
            img[i].onclick = function() {

                // 누가 나를 불렀나?
                // - 3개의 이미지 중 어떤 이미지를 클릭했을 때 이 함수가 호출되었나?
                // alert('Click');
                // 지금 이벤트(onclick)를 발생시킨 주체가 누구? -> 이미지 중 하나
                // alert(event.srcElement.src);
                // event.srcElement.width = 500;

                // Uncaught TypeError: Cannot read property 'src' of undefined
                // alert(img[i].src); -> 나중에 이미지를 클릭한 이미지를 접근하기 위해서 img[i] 표현을 사용
                // -> 루프 변수 i의 상태가 루프를 진행할 때 당시의 값이 아니기 때문에 사용 불가능!!
                // -> event.srcElement 또는 this를 사용하자!!
                // -> event.srcElement를 더 권장.

                // alert(i);
                //alert(this.src);
                alert(event.srcElement === this); 


                //1. i가 왜 0,1,2가 아닌가?
                // ->  시간차 때문에..사건의 발생 순서 때문에..
                //2. i가 왜 있어? > i가 왜 살아있나? >  Closure(클로저)
                // -> 전역변수
            };
        }
    </script>
</body>
</html>

ex16_event_key.html

key 이벤트

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea{ width: 500px; height: 300px; resize: none; }
    </style>
</head>
<body>
    <!-- 
        키 이벤트 
        - 키보드의 키와 관련된 이벤트
        - onkeyXXX
        - 주로 폼 관련 태그에게 적용한다.(포커스를 가지지 않으면 발생하지 않기 때문에)

        1. onkeydown (******)
            - 키를 눌렀을 때 발생
            - 물리적 키에 반응하는 이벤트
            - 현재 어떤 글자를 눌렀는지 중요하지 않음 -> 어떤 물리키를 눌렀는지가 중요함!!! -> 키를 구분하는 역할
                - a키를 눌렀을때 소문자인지 대문자인지 중요하지 않음. a키를 눌렀다는 자체가 중요함
            - 중요 : 현재 입력값과 상관없는 일을 할 때 keydown을 사용

        가이드
            - 우선 onkeydown을 기본으로 사용한다.
            - 지금 입력값 자체가 업무에 바로 사용된다. > onkeyup을 사용한다.

        2. onkeyup (******)
            - 키를 뗐을 때 발생
            - 중요 : 현재 입력한 값이 관계된 일이라면.. keyup을 사용

        3. onkeypress -> 제한적이라 잘 사용안함
            - 키를 눌렀을 때 발생 
            - 문자키에 반응하는 이벤트(ASCII문자 - 영어 + 숫자 + 특수문자) -> 한글에 반응 안함.
            - 영어 대소문자를 구분할 수 있지만 아스키코드에만 사용할 수 있어서 제한적이다.

     -->

     <h1>키 이벤트</h1>
     <!-- 
         이름 붙일때

         텍스트박스 : txtName
         체크박스 : cbName
         라디오버튼 : rbName
         셀렉트박스 : selName

      -->

    <form name="form1">
        <textarea name="txt1">
        </textarea>

        <legend>키 이벤트</legend>
        <fieldset>
            <div>
                <input type="text" name="txtOrigin" size="50">
            </div>
            <div>
                <input type="text" name="txtCopy" size="50">
            </div>
        </fieldset>
    </form>

     <!-- <form name="form1">
         <img src="images/catty01.png" 
         onkeydown="//alert('img');" -- 이미지에는 키 이벤트 사용 불가  
         onclick="alert('img');" 
         onmousedown="alert('img');">

         <input type="text"
          onkeydown="alert('text');" 
          onclick="alert('img');" 
          onmousedown="alert('img');">
     </form> -->

     <script>
         var txt1 = window.document.form1.txt1;
         var txtOrigin = window.document.form1.txtOrigin;
         var txtCopy = window.document.form1.txtCopy;

         // 이벤트 함수
         txt1.onkeydown = function() {
            // alert();
            // console.log('keydown');

            // event 객체
            // - 이벤트가 발생할 때만 참조할 수 있는 객체
            // console.log(event.keyCode); // 누른 키의 문자 코드 값
            console.log(txt1.value); // 입력된 전체의 값 가져올 수 있음
        };

        txt1.onkeyup = function() {
            // console.log('keyup');
        };

         txt1.onkeypress = function() {
            // console.log('keypress');
            // console.log(event.keyCode);
        };


        // -------------------------------------


        txtOrigin.onkeydown = function() {
            // 한발짝 느리게 복사가 된다.
            // txtCopy.value = txtOrigin.value;
        };

        txtOrigin.onkeyup = function() {
            txtCopy.value = txtOrigin.value;
        };

     </script>
</body>
</html>

ex17_event_key.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <h1>키 이벤트</h1>

    <form name="form1">
        <input type="text" name="txt1">
    </form>

    <script>
        var txt1 = window.document.form1.txt1;

        // txt1.onkeydown = function() {
        //     // 방향키: 좌(37), 상(38), 우(39), 하(40)
        //     if (event.keyCode == 38) {
        //         // console.log(txt1.size);
        //         txt1.size++;
        //     } else (tvent.keyCode == 40) {
        //         txt1.size--;
        //     }
        // };


        //즉시 반영해야해서 onkeyup 사용
        txt1.onkeyup = function() {
            txt1.size = txt1.value;
        }

    </script>
</body>
</html>

ex18_event.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script>
      // <script> 상단부, 하단부 양쪽 코딩 
      // 상단부 : 함수 선언

      // 함수 선언
      // 자바스크립트는 HTML태그의 속성에 접근하기 위해서 똑같은 이름의 프로퍼티를 제공한다.
      // bgColor -> 합성어는 대문자로 연결해서 사용한다.(캐멀표기법)
      function m1() {
         window.document.body.bgColor = "red";
      }
      function m2() {
         window.document.body.bgColor = "yellow";
      }
      function m3() {
         window.document.body.bgColor = "blue";
      }

      // -----------------------------------------

      function m4(color) {
         window.document.body.bgColor = color;
      }

      // -----------------------------------------

      function m5(btn) {

         // this: 이벤트를 발생시킨 태그 자신
         // alert(btn.name);
         // alert(this); //window 객체

         window.document.body.bgColor = btn.value;
      }

      // ----------------------------------------

      function m6() {
         // 지금 나를 호출할 버튼이 누구???
         // event 객체 사용 가능

         // event.srcElement - 지금 이벤트를 발생시킨 태그
         // -> 3번에서 사용한 this와 동일한 표현
         // alert(event.srcElement.name);

         window.document.body.bgColor = event.srcElement.value;
      }

   </script>
</head>
<body>

   <h1>이벤트(***)</h1>

   <h2>7</h2>
   <form name="form7">
      <!--  
         data-XXX 속성
         : 사용자 정의 속성(개발자 맘대로)
      -->
      <!-- 대외적으로는 value를 쓰고 내부적으로는 사용자 정의 속성을 쓴다. -->
      <input type="button" value="빨강" name="btn17" data-color="tomato">
      <input type="button" value="노랑" name="btn17" data-color="gold">
      <input type="button" value="파랑" name="btn17" data-color="cornflowerblue">
   </form>

   <h2>6</h2>
   <form name="form6">
      <input type="button" value="red" name="btn16">
      <input type="button" value="yellow" name="btn16">
      <input type="button" value="blue" name="btn16">
   </form>

   <h2>5</h2>
   <form name="form5">
      <input type="button" value="red" name="btn13">
      <input type="button" value="yellow" name="btn14">
      <input type="button" value="blue" name="btn15">
   </form>

   <h2>4</h2>
   <form name="form4">
      <input type="button" value="red" name="btn10" onclick='m6();'>
      <input type="button" value="yellow" name="btn11" onclick="m6();">
      <input type="button" value="blue" name="btn12" onclick="m6();">
   </form>

   <h2>3</h2>
   <form name="form3">
      <input type="button" value="red" name="btn7" onclick='m5(this);'>
      <input type="button" value="yellow" name="btn8" onclick="m5(this);">
      <input type="button" value="blue" name="btn9" onclick="m5(this);">
   </form>

   <h2>2</h2> <!-- 매개변수로 처리하는 방법 -->
   <form name="form2">
      <input type="button" value="red" name="btn4" onclick='m4("red");'> <!-- 자바스크립트에서 색깔은 문자열로 표시 -->
      <input type="button" value="yellow" name="btn5" onclick="m4('yellow');"> <!-- "", '' 둘 다 사용 가능 -->
      <input type="button" value="blue" name="btn6" onclick="m4('blue');">
   </form>

   <h2>1</h2> <!-- 코드 재사용성이 없어서 안좋은 코드. -->
   <form name="form1">
      <input type="button" value="red" name="btn1" onclick="m1();">
      <input type="button" value="yellow" name="btn2" onclick="m2();">
      <input type="button" value="blue" name="btn3" onclick="m3();">
   </form>

   <script>
      // 하단부 : 제어 코드
      var btn13 = window.document.form5.btn13;
      var btn14 = window.document.form5.btn14;
      var btn15 = window.document.form5.btn15;

      // 익명함수 - 재사용 불가
      // btn13.onclick = function() {
      //    window.document.body.bgColor = event.srcElement.value;
      // };

      // btn14.onclick = function() {
      //    window.document.body.bgColor = event.srcElement.value;
      // };

      // btn15.onclick = function() {
      //    window.document.body.bgColor = event.srcElement.value;
      // };

      // 실명함수
      function m7() {
         window.document.body.bgColor = event.srcElement.value;
      }

      btn13.onclick = m7;
      btn14.onclick = m7;
      btn15.onclick = m7;

      // -------------------------------------------------------

      var btn16 = window.document.form6.btn16; // name을 똑같이 여러개 주면 배열이 반환된다. 
      // console.log(btn16.length);

      // btn16[0].onclick = m7;
      // btn16[1].onclick = m7;
      // btn16[2].onclick = m7;

      for (var i=0; i<btn16.length; i++) {
         btn16[i].onclick = m7;
      }

      // 향상된 for문
      btn16.forEach(function (item, index) {
         item.onclick = m7;
      });

      // ----------------------------------------------------------

      var btn17 = window.document.form7.btn17;

      btn17.forEach(function(item, index) {
         item.onclick = function() {
            window.document.body.bgColor = item.dataset["color"];
         };
      });

   </script>
</body>
</html>

ex19_attribute.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

       .one {
          background-color: gold;
       }

       .two {
          background-color: cornflowerblue;
       }

    </style>
    <script>
       function m1() {

          // 모든 폼태그의 자식 태그들은 form이라는 프로퍼티를 가지고 있고, 부모 폼태그를 참조한다.
          // var txt1 = window.document.form1.txt1;
          var txt1 = event.srcElement.form.txt1;

          // Attribute 조작
          // - HTML 태그가 가지는 거의 대부분 속성은 자바스크립트에서 프로퍼티로 제공한다.(사용자 경험을 살리기 위해서)         
          // - HTML 속성이 합성어(두단어 복합)라면 > 캐멀 표기법으로 표현

          // <input value> -> txt1.value
          // <input size> -> txt1.size

          // -------------------------------------------------

          // HTML 속성의 숫자값은 JavaScript에서도 숫자로 표시
          // txt1.size = 50;
          // txt1.size++;

          // -------------------------------------------------

          // HTML(boolean) -> JavaScript(boolean)
          // txt1.readOnly = true;
          // txt1.readOnly = !txt1.readOnly; //이런 버튼(역할) : Toggle Button

          // txt1.readOnly면 읽기만 가능.
          // if (txt1.readOnly) {
          //    event.srcElement.value = "읽기전용";
          // } else {
          //    event.srcElement.value = "쓰기가능";            
          // }

          // -------------------------------------------------

          // HTML(열거형) -> JavaScript(문자열)
          // txt1.type = "checkbox"; // type 조작 금지!!! -> 근원이 되는 속성이기 때문에 혼동될 수 있다.

          // HTML(색상) -> JavaScript(문자열)
          // window.document.body.bgColor = "yellow";

          // HTML(문자열) -> JavaScript(문자열)
          // txt1.value = "문자열";
          // txt1.title = "하하하";
          // txt1.placeholder = "이름 입력";

          // ---------------------------------------------------

          //모든 속성명이 그대로 사용 가능하지만, 유일하게 class만을 사용 불가능 -> class 키워드 (예약어)
          txt1.className = "two";
       }

    </script>
 </head>
 <body>
    <h1>JavaScript를 사용해서 HTML의 Attribute를 조작하기</h1>

    <form>
       <input type="text" name="txt1" class="one">
       <input type="button" value="쓰기가능" name="btn1" onclick="m1();">
    </form>

 </body>
 </html>

ex20_collection.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>

   <form name="form1">
      <input type="button" name="btn1" value="btn1" onclick="m1();">
      <input type="text">
      <input type="checkbox">
   </form>

   <h1>이미지</h1>

   <img src="images/catty01.png" name="cat1">
   <img src="images/catty02.png" name="cat2">
   <img src="images/catty03.png">

   <h1>링크</h1>

   <a href="http://naver.com" name="link1">네이버</a>
   <a href="http://naver.com" name="link2">구글</a>
   <a href="http://naver.com" name="link3">다음</a>

   <h1>앵커</h1>

   <a name="a1">아이템1</a>
   <a name="a2">아이템2</a>
   <a name="a3">아이템3</a>


   <script>

      //m1();
      //m1; 

      // window.document.form1.btn1.onclick = m1; --> 함수 자체. 함수를 어딘가 넣을 때는 함수 이름을 직접 취급

      // window.document.form1.btn1.onclick = function m1() {
      //    alert();
      // };

      // function m1() {
      //    alert();
      // }

      /*
         JavaScript Built-in Collection
         - 브라우저가 HTML 문서를 로딩하는 과정에서 자동으로 만드는 배열

         1. window.document.images
            - 문서내의 모든 <img> 태그 배열
         2. window.document.links
            - 문서내의 모든 <a href=""> 태그 배열
         3. window.document.anchors
            - 문서내의 모든 <a name=""> 태그 배열
         4. window.document.forms
            - 문서내의 모든 <form> 태그 배열
         5. window.document.forms[index].elements
            - 해당 폼태그의 자식 태그 배열
         6. window.document.all
            - 문서내의 모든 name을 가지는 태그 배열
               - 예전: (images + links + anchors + forms + elements): 종합 선물 세트
               - 최근: 모든 태그 배열(name을 가지지 않은 태그까지 포함)
            - 비표준(MS) > 대다수 브라우저 지원

      */

      // 이미지
      // console.log(window.document.cat1);
      // console.log(window.document.images.length);
      // console.log(window.document.images[0].name); // 위치로 찾기
      // console.log(window.document.images['cat1'].name); // 이름으로 찾기


      // 링크
      // console.log(window.document.links.length);
      // console.log(window.document.link1); // X
      // console.log(window.document.links[0]);
      // console.log(window.document.links['link1']);

      // console.log(window.document.links.link1); // 멤버접근 연산자로 접근 가능
      // console.log(window.document.links['link1']); // hasmap형태로 접근 가능
      // console.log(window.document.links[0]); // index로 접근 가능


      // 링크와 앵커의 차이
      // <a> : href속성을 가지면 링크, name을 가지면 앵커 -> 속성의 차이


      //앵커(<a name="">)
      // console.log(window.document.anchors.length);
      // console.log(window.document.anchors[3]);


      //폼
      // console.log(window.document.forms.length);

      // console.log(window.document.form1); //v
      // console.log(window.document.forms[0]); //v

      // console.log(window.document.forms['form1']);
      // console.log(window.document.forms.form1);

      // console.log(window.document.form1.elements.length);


      console.log(window.document.all.cat1);
      console.log(window.document.all['cat1']);
      // console.log(window.document.all[23]); -- 위에 부터 세기 어렵다..

      console.log(window.document.all.link1);
      console.log(window.document.all['link1']);

      console.log(window.document.all.form1);
      console.log(window.document.all['form1']);

   </script>
</body>
</html>

ex21_window.html

window 객체

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      input[type='button'] { display: block; margin-bottom: 5px;}
   </style>
</head>
<body>

   <h1>window 객체</h1>

   <form name="form1">
      <input type="text" name="txt1">
      <input type="button" value="자식창 띄우기" name="btn1">
      <input type="button" value="자식창의 텍스트박스에 접근하기" name="btn2">
      <input type="button" value="" name="btn3">
      <input type="button" value="" name="btn4">
      <input type="button" value="" name="btn5">
   </form>

   <script>

      var txt1 = document.form1.txt1;
      var btn1 = document.form1.btn1;
      var btn2 = document.form1.btn2;
      var btn3 = document.form1.btn3;
      var btn4 = document.form1.btn4;
      var btn5 = document.form1.btn5;

      //window 객체
      // - 최상위 객체
      // - 브라우저 창 자체를 참조하는 객체

      var child; // 전역변수

      btn1.onclick = function() {
         //open(url, name, option)
         // - name: 자식 창의 중복 방지

         //반환값 -> child : 새창(자식창)의 window 객체
         child = window.open('child.html', 'child', 'width=300, height=300, left=0, top=0');
      };


      // 부모페이지 <-> 자식페이지에 접근해서 조작하기
      btn2.onclick = function() {
         // window.close();

         // 열려있는 자식창의 window객체를 얻어내기 
         // (페이지를 조작할때는 페이지의 최상위 객체인 window객체를 얻어내면 밑에 있는 모든 것들을 조작할 수 있다.)
         // child.close();
         child.document.form1.txt1.value = "부모창에서 접근했습니다."; // -> 자식창의 텍스트 박스 조작
      };

      //사용자에게 허락 구함? > 팝업 광고
      //window.open('child.html', 'child', 'width=300, height=300');

   </script>

</body>
</html>

자식창

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>자식창</h1>
    <form name="form1">
        <input type="text" name="txt1">
        <input type="button" value="창닫기" name="btn1">
        <input type="button" value="부모창의 텍스트 박스에 접근하기" name="btn2">
    </form>

    <hr>

    <form name="form2">
        아이디: <input type="text" name="txtID">
        <input type="button" value="중복검사">
        <br>
        <input type="button" value="사용하기" name="btnUse">
    </form>

    <script>
        var btn1 = document.form1.btn1; 
        var btn2 = document.form1.btn2; 
        var txt1 = document.form1.txt1; 

        var txtID = document.form2.txtID; 
        var btnUse = document.form2.btnUse; 

        btn1.onclick = function() {
            window.close(); // 자기 자신을 닫음
        };

        btn2.onclick = function() {
            //부모창의 window 객체를 얻어내기(= opener)
            opener.document.form1.txt1.value = "자식창에서 접근했습니다.";
        };


        btnUse.onclick = function() {
            // 1. 아이디를 부모창에 복사하기
            // 2. 팝업창을 닫기

            opener.document.form1.txt1.value = txtID.value;

            window.close();

        };

    </script>
</body>
</html>

ex22_screen.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>

   <!--  

      screen 객체
      - window 객체의 자식 객체
      - 유일한 객체 > 예약어 제공
      - 화면 정보 제공

   -->
   <script>

      // 해상도(화면크기) 
      // - 작업표시줄의 높이에 따라 화면 크기가 달라진다. > 작업 표시줄 영역 제외
      // 사용자들마다 어떤 해상도를 사용하는지에 따라 화면 구성을 달리 만들기 위한 객체.  
      console.log(window.screen.availWidth); //*** 
      console.log(window.screen.availHeight); //***

      console.log(screen.colorDepth); // 24bit color. 사용하고 있는 디스플레이가 몇가지 색깔을 지원하는 지 알려줌

      // type: "landscape-primary"
      console.log(screen.orientation); // 모니터 가로로 보는지 세로로 보는지 확인 


   </script>

</body>
</html>

ex23_location.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>

   <!--  
      location 객체
      - window 객체의 자식 객체
      - 현재 창의 URL과 관련된 정보를 제공/조작
      - 주소표시줄, 주소창에 접근해서 제어.

   -->

   <input type="button" value="버튼" name="btn1">

   <script>

      window.document.all.btn1.onclick = function() {

         // console.log(location.host); //127.0.0.1:5500 - 호스트
         // console.log(location.hostname); //127.0.0.1 - 호스트네임
         // console.log(location.port); //5500 - 포트번호
         // console.log(location.protocol); //http: - 프로토콜

         // console.log(location.href); //http://127.0.0.1:5500/ex23_location.html - 현재 페이지 주소

         // 자바스크립트를 사용해서 페이지를 이동하기(*****************************)
         // location.href = "http://google.com";


         //페이지 이동 메소드
         // location.assign('http://yes24.com');
         // location.replace('http://yes24.com');

         // 프로퍼티
         location.href = 'http://naver.com'; //*****************

         // 페이지 새로고침
         // location.reload(); //*

      };

      //window 객체에 키 이벤트를 걸면..
      // - 전역 키 이벤트 > 무슨 행동을 하던지 키보드가 눌리면 항상 발생
      window.onkeydown = function() {

         if (event.keyCode == 71) {
            location.href = "http://google.com";
         } else if (event.keyCode == 65) {
            location.href = "http://amazon.com";
         } else if (event.keyCode == 67) {
            location.href = "http://coupang.com";
         } else if (event.keyCode == 68) {
            location.href = "http://daum.net";
         }
      };

   </script>

</body>
</html>

ex24_history.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>

   <!--  
      history 객체
      - window 객체의 자식 객체
      - 브라우저의 방문 기록을 탐색
   -->
   <input type="button" value="뒤로가기(-2)" name="btn1">
   <input type="button" value="뒤로가기" name="btn2">
   <input type="button" value="앞으로가기" name="btn3">
   <input type="button" value="앞으로가기(+2)" name="btn4">

   <script>

      var btn1 = document.all.btn1;
      var btn2 = document.all.btn2;
      var btn3 = document.all.btn3;
      var btn4 = document.all.btn4;

       // 예제 -> 구글 -> 네이버 -> 예제(현재위치) -> 예스24 -> 쿠팡
       // -  탐색기록이 남아있는 상황에서 쓸 수 있는 이동 명령어
      btn1.onclick = function() {
         history.go(-2);
      };
      btn2.onclick = function() {
         //history.go(-1); //뒤로 가기
         history.back(); //뒤로 가기
      };
      btn3.onclick = function() {
         //history.go(1); //앞으로 가기
         history.forward(); //앞으로 가기
      };
      btn4.onclick = function() {
         history.go(2);
      };

   </script>

</body>
</html>

document의 자식

ex25_link.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <h1>링크 조작</h1>

   <form name="form1">
      <a href="http://google.com" name="link1">구글</a>
      <br>
      <input type="button" value="확인" name="btn1">
   </form>

   <script>

      // 새창으로 이동 불가능 > 현재창에서만 이동 가능
      // location.href = URL; // 현재창에서 이동하기
      // window.open(URL, name, '옵션X'); // 새창으로 이동하기


      var link1 = document.links['link1'];
      var btn1 = document.form1.btn1;

      btn1.onclick = function() {

         //<a> 태그 조작
         //1. <a> 태그 자체 조작 X
         //2. <a> 태그 속성 조작 O
         //3. <a> 태그 PCDATA 조작 O

         link1.href = "http://amazon.com";
         link1.target = "_blank";
         link1.title = "아마존으로 이동합니다.";

         //BOM -> PCDATA 조작 기능 없음
         //DOM -> PCDATA 조작 기능 있음
         link1.innerText = "아마존";

         //프로그램이 사용자 대신 클릭을 했다.
         // - 에뮬레이터 함수
         // - onclick -> on(X) -> click()
         link1.click();

      };

   </script>

</body>
</html>

ex26_image.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>

   <h1>이미지</h1>

   <input type="button" value="확인" name="btn1">
   <hr>
   <img src="images/cat01.jpg" name="cat1">
   <hr>
   <img src="images/dog01.jpg" name="dog1">
   <hr>

   <img src="images/switch_on.png" name="sw">


   <!--  
      1. window.onkeydown
      2. event.keyCode
      3. img.src
   -->

   <h3>문제1.</h3>
   <!--  
      1. 방향키에 따라 이미지를 변경한다.
         a. 오른쪽 방향키: dog01.jpg -> dog02.jpg -> dog03.jpg
         b. 왼쪽 방향키: dog05.jpg -> dog04.jpg -> dog03.jpg
      2. 더 이상 이미지가 없다면 경고
         a. dog05.jpg 까지 -> "더 이상 이미지가 없습니다."
         b. dog01.jpg 까지 -> "처음 이미지입니다."
   -->
   <img src="images/dog01.jpg" name="dog2">

   <h3>문제2.</h3>
   <!--  
      누른 숫자키에 해당하는 숫자 이미지로 변경하시오.
   -->
   <img src="images/0.png" name="num">


   <script>

      var btn1 = document.all.btn1;
      var cat1 = document.images['cat1'];
      var dog1 = document.images['dog1'];
      var sw = document.images['sw'];


      btn1.onclick = function() {

         // alert(cat1.src);
         // cat1.src = "images/cat02.jpg";

         // cat1.width = "500";
         // cat1.height = "500";

         // cat1.alt = "고양이"; // alt : 이미지 설명

      };


      //롤오버 이미지(Roll over image)
      cat1.onmouseover = function() {
         cat1.src = "images/cat02.jpg";
      };

      cat1.onmouseout = function() {
         cat1.src = "images/cat01.jpg";
      };


      // ------------------------------------

      var n = 1;

      dog1.onclick = function() {
         //dog01.jpg > dog02.jpg > dog03.jpg > dog04.jpg > dog05.jpg
         n++;
         dog1.src = "images/dog0" + n + ".jpg";

         if (n >= 5) n = 0; //loop

      };

      // ------------------------------------

      window.onkeydown = function() {
         // 똑같은 숫자지만 물리키가 다름.
         //상단 숫자키(1) -> 49
         //우측 키패드 숫자키(1) -> 97
         //alert(event.keyCode);

         if (event.keyCode >= 49 && event.keyCode <= 53) {
            dog1.src = "images/dog0" + (event.keyCode - 48) + ".jpg";
         } else if (event.keyCode >= 97 && event.keyCode <= 101) {
            dog1.src = "images/dog0" + (event.keyCode - 96) + ".jpg";
         }

      };

      // ------------------------------------

      // 토글 버튼
      sw.onclick = function() {

         // alert(sw.src);
         // alert(sw.src.endsWith('switch_on.png'));
         // endsWith : 패턴 검색
         if (sw.src.endsWith('switch_on.png')) {
            sw.src = "images/switch_off.png";
            document.body.bgColor = "#000";
         } else {
            sw.src = "images/switch_on.png";
            document.body.bgColor = "#FFF";
         }

      };

   </script>

</body>
</html>

ex07_casting.js

형변환

// 형변환 함수
// 1. 정수 parseInt(값)
// 2. 실수 parseFloat(값)

var n1 = 3.14;
console.log(parseInt(n1)); // 실수 -> 정수

var n2 = '100';
console.log(parseInt(n2), typeof parseInt(n2)); // 문자열 -> 정수

var n3 = 200;
console.log(parseFloat(n3), typeof parseInt(n3)) // 정수 -> 실수

var n4 = '5.21';
console.log(parseFloat(n4), typeof parseFloat(n4)); // 문자열 -> 실수


// 실수 -> 정수
// 문자열 -> 정수, 실수
console.log('100' + 100); // 100100
console.log(parseInt('100') + 100); // 200

console.log('100' * 2); // 200 -> 에러 안남, 우리가 모르게 형변환 된다. -> 왠만하면 Java하는 것 처럼 형변환 함수 써서 할 것.
console.log(parseInt('100') * 2); // 200

// -----------------------------------------------------

// CSS 속성 조작
// box > width: 150px > *2 > width: 300px
var width = '150px';
console.log(width * 2); // NaN(난, Not a Number)

// 시작부터 연속된 숫자만을 취하고 나머지는 버린 뒤 형변환한다.
// 숫자 뒤에 붙어있는 단위를 없애준다.
console.log(parseInt(width)); // '150px' -> 150
console.log(parseInt('20세')); // '20세' -> 20
console.log(parseInt('나이20세')); // NaN
console.log(parseInt('123ABCD567EFG'));

var fontSize = '1.5em';
console.log(parseFloat(fontSize));

// boolean isNaN(값)
// - is not a number?
// - 숫자면? false, 숫자가 아니면? true

var age = "20"; //입력
var age1 = "20";

// 유효성 검사(숫자만 입력했는지??)
console.log(isNaN(age)); // false
console.log(isNaN(age1)); // true

console.log(isNaN(age) ? '나이를 올바르게 입력하세요' : '통과');

ex08_string.js

문자열 함수

// 문자열 함수
var txt = "hello!! hong!!";

// 문자열 길이(문자 수)
// - 메소드X, 프로퍼티O
console.log(txt.length);

// 검색
// - indexOd()
// - lastIndexOf()
// - zero-based index
console.log(txt.indexOf('o')); // 4
console.log(txt.indexOf('o', 5)); // start위치 설정 -> 9
console.log(txt.indexOf('a'));
console.log(txt.lastIndexOf('o'));

// 대소문자 변환
console.log(txt.toUpperCase());
console.log(txt.toLowerCase());

// 치환
// - replace
// - 1번만 치환된다.(1회 치환)
// - 모든 대상을 치환하려면 정규 표현식을 사용해야 한다.
console.log(txt.replace('hong','lee'));
console.log(txt.replace('!', '?'));
console.log(txt.replace(/!/gi, '?'));


// 추출
// - substring(beginIndex, endIndex)
// - substr(beginIndex, length)
// - charAt(index)
// - charCodeAt(index)
txt = 'abcdefgijk';
console.log(txt.substring(2, 5)); // cde
console.log(txt.substring(2)); // cdefgijk
console.log(txt.substr(2,5)); // 2번째부터 5글자를 가져와라
console.log(txt.substr(2));
console.log(txt.charAt(2));
console.log(txt.charCodeAt(2));
console.log('A' > 'B'); // 문자코드 비교 지원
console.log('홍길동' > '아무개');


// 공백 제거
txt = '     하나        둘      셋      ';
console.log(txt.trim());
console.log(txt.trimStart());
console.log(txt.trimEnd());
console.log(txt.trimLeft());
console.log(txt.trimRight());


// 패턴 검색
txt = 'hong';
console.log(txt.startsWith('h'));
console.log(txt.endsWith('.'));


// 분할
txt = '홍길동,아무개,하하하,호호호';
var temp = txt.split(',');
console.log(temp);
console.log(temp[0]);


console.log(txt.bold()); // 해당 문자열을 PCDATA로 해서 출력해줌 -> 활용도 떨어져서 사용 안함.

ex09_date.js

날짜

// 날짜시간 자료형 + 함수

// 현재 시각
// Calendar c = Calendar.getInstance();
// Date d = new Date();

var now = new Date();
console.log(now); // Wed Jun 23 2021 10:16:53 GMT+0900 (대한민국 표준시)

// 요소 추출
// c.get(Calendar.YEAR);
console.log(now.getYear()); // 121, 1999년 이전 2자리 표기 함수
console.log(now.getFullYear()); // 2021, 2000년 이후
console.log(now.getMonth()); // 0~11, 월
console.log(now.getDate()); // 23, 일
console.log(now.getDay()); // 3, 요일(0~6)
console.log(now.getHours()); // 시
console.log(now.getMinutes()); // 분
console.log(now.getSeconds()); // 초
console.log(now.getMilliseconds()); // 밀리초
console.log(now.getTime()); // 틱


// 덤프(+ 출력)
// - 자바: %tF(2021-06-23), %tT(10:22:30), %tA(요일)
console.log(now);
console.log(now.toString());
console.log(now.toLocaleString()); // 현지 설정 (********)

console.log(now.toDateString());
console.log(now.toTimeString());

console.log(now.toLocaleDateString()); // 년,월,일
console.log(now.toLocaleTimeString()); // 시,분,초


// javascript moment.js -> 라이브러리


// 특정 시각
var christmas = new Date();

christmas.setFullYear(2021);
christmas.setMonth(11);
christmas.setDate(25);

christmas.setHours(0);
christmas.setMinutes(0);
christmas.setSeconds(0);

console.log(christmas.toLocaleString());


// 연산 -> 크리스마스가 몇일 남았는지?
// - tick 연산
console.log(christmas - now);
console.log((christmas - now) / 1000 / 60 / 60 / 24); // 184일


// 오늘 + 100일
var tick = now.getTime() + (100 * 24 * 60 * 60 * 1000); // + 100일분량의 tick값
var hday = new Date(); // 더미데이터
hday.setTime(tick); //tick 수정
console.log(hday.toLocaleString());

ex10_arry.js

배열

// ex10_array.js

// 배열, Array
// - 자바의 Array + Collection

// int[] nums = new int[3];
var nums = new Array(); // new ArrayList();랑 비슷한 느낌..

//Indexer 지원
nums[0] = 10;
nums[1] = 20;
nums[2] = 30;

console.log(nums);

nums[5] = 50; // 사용 금지(중간에 빈 방 두지 말것)

console.log(nums);
console.log(nums[3]);
console.log(nums[6]);

console.log('-----------------------------------');

// 배열 초기화 리스트
// int[] nums = new int[] { 10, 20, 30 };
// int[] nums = { 10, 20, 30 };

nums = new Array(10, 20, 30); // X 잘 안씀 
nums = [10, 20, 30]; // O
console.log(nums);

console.log('-----------------------------------');

// 빈 배열 만들기
nums = new Array(); // O
nums = []; // O


// 길이
nums = [10, 20, 30, 40, 50];
console.log(nums.length); // 5

console.log('-----------------------------------');

// 메소드
nums.push(60); // append, 배열 끝에 추가(index 미사용). Stack.push()
nums.push(70);
console.log(nums);

console.log(nums.pop()); // 마지막 방 가져오기. Stack.pop()
console.log(nums); // 가져오면 삭제된다.

console.log(nums.shift()); // 첫번째 방 가져오기. 삭제 <-> pop()
console.log(nums); // 가져오면 삭제된다.


console.log('-----------------------------------');


//탐색
for (var i = 0; i < nums.length; i++) {
    console.log(i, nums[i]);
}

//for in: 기존 향상된 for문과 다르다.
for (var i in nums) {
    console.log(i);
}

console.log('-----------------------------------');

// ES6 -> 향상된 for문(= iterator)
// 자바스크립트는 함수를 값으로 취급한다. -> 변수에 넣거나, 매개변수로 사용하거나, 반환값으로 사용 할 수 있음.

// nums.forEach(함수);
// forEach는 인자값을 2개 갖는 익명함수(다른 곳에서 사용하지 않기 때문에)를 사용한다. 
nums.forEach(function (item, index) { 
    console.log("forEach", item, index);
}); 
// 배열의 길이가 5개라서 5번 호출됨 (첫번째 방에 가서 데이터를 가져오고 익명함수를 호출한다.
 //    item-> 배열에 있던 데이터. index -> 방번호))

ex11_object.js

object

/*
JavaScript 전체 구성
1. Core(ECMAScript, 언어 기본)
2. BOM(브라우저 조작)
3. DOM(브라우저 조작)

JavaScript Object
1. 내장 객체
   - Array, Date, Math, RegExp 등.. 

2. BOM 객체
   - window, document, location, form..

3. DOM 객체
   - element, attribute, text..

4. 사용자 정의 객체
   - 개발자가 직접 정의한 객체

*/

// 사용자 정의 객체 만들기
// - 자바스크립트는 클래스가 없다.
// 1. Object 생성자 함수 사용하기
// 2. 객체 리터럴 표기법({}) 사용하기

// 요구사항] User 클래스 정의(멤버 구성) -> 홍길동 객체 생성하기
// 요구사항] User 클래스 정의(멤버 구성) -> 아무개 객체 생성하기

/*
[자바]

class User {
   private String name;
   private int age;
   private String address;
}

User hong = new User();
hong.name = "홍길동";
hong.age = 20;
hong.address = "서울시";

*/

// Object -> 내장 객체
var hong = new Object(); // 無

// 객체 프로퍼티(Property)
// - 추가: 객체에 마음대로 지정해서 추가
hong.name = '홍길동';
hong.age = 20;
hong.address = '서울시';

console.log(hong.name);
console.log(hong.age);
console.log(hong.address);
console.log(hong);

// --------------------------------------------

// 같은 성질의 객체 만들기
var aaa = new Object();

// 오타가 나면 다른 성질이 되기 때문에 최대한 오타가 나지 않게 해야한다. (물리적 통제 어려움.)
// amu.meme = '아무개';

aaa.name = '아무개';
aaa.age = 25;
aaa.address = '부산시';

console.log(aaa);

// ----------------------------

// 객체 리터럴 사용
hong = {}; //new Object()

hong.name = 'hong';
hong.age = 22;
hong.address = 'seoul';

console.log(hong); // { name: 'hong', age: 22, address: 'seoul' }


// 객체 리터럴을 사용해서 objcet를 만드는 방법 (*******)
hong = {
    name: '홍길동', //프로퍼티
    age: 20,
    address: '서울시'
};

console.log(hong); // { name: '홍길동', age: 20, address: '서울시' }


// --------------------------------------------------


// 프로퍼티 접근 방법
// 1. 멤버 접근 연산자 -> .
// 2. key 접근
console.log('1', hong.name); // 작성하기 쉬움, 프로퍼티 이름이 온전한 식별자여야한다. 
console.log('2', hong['name']); // 작성하기 불편함, 프로퍼티 이름이 온전하지 않아도 괜찮다. 변수로 치환이 가능하다.

var prop = 'name'; // 변수로 치환 가능
console.log(hong[prop]); 

//hong.phone-number = "010"; -> 식별자에 - 기호를 넣을 수 없다.
hong['phone-number'] = '010'; // 문자열로 만들면 사용 가능 -> 권장X
console.log(hong);


// -----------------------------------------------------


// 프로퍼티 삭제
delete hong.age;
console.log(hong);


// 객체 탐색(= 프로퍼티 탐색)
// - 해당 객체가 어떤 프로퍼티들을 가지고 있는지 순차적으로 탐색
// - for in : 객체가 가진 프로퍼티를 탐색하는 전용 for문
for (var prop in hong) {
    console.log(prop, hong[prop]); // key형식으로 탐색.
}


// -------------------------------------------------------


// 객체의 멤버
// 1. 변수
// 2. 메소드
hong = new Object();

hong.name = '홍길동';
hong.age = 20;

// hong이라는 객체에 hello라는 프로퍼티를 추가. 프로퍼티에는 함수를 넣음.
hong.hello = function () {
    console.log('안녕하세요.'); 
};

console.log(hong); // { name: '홍길동', age: 20, hello: [Function (anonymous)] }
hong.hello(); // 안녕하세요.


// 객체의 메소드는 본인의 정보를 사용한 행동을 해야한다.(자신의 멤버를 활용하는 것이 좋다.)
hong.info = function () {
    // var name = "";
    console.log('저는 %s입니다. 나이는 %s세입니다.', this.name, this.age); // 객체 안에 들어있는 프로퍼티 사용하기
};

hong.info();



// *****
hong = {
    name: '홍길동',
    age: 20,
    //address: '서울시 강남구 역삼동 20번지',

    // 객체 안에 객체
    address: {
        sido: '서울시',
        gugun: '강남구',
        dong: '역삼동',
        bunji: '20번지'
    },
    info: function () {
        console.log(this.name, this.age);
    }
};

console.log(hong.name); // 홍길동 
console.log(hong.age); // 20
console.log(hong.address); // { sido: '서울시', gugun: '강남구', dong: '역삼동', bunji: '20번지' }

console.log(typeof hong.name); // string
console.log(typeof hong.age); // number
console.log(typeof hong.address); // object (자바스크립트의 모든 객체의 자료형은 object)

//  프로퍼티 접근 방법
console.log(hong.address.dong); // 역삼동
console.log(hong.address['dong']); // 역삼동
console.log(hong['address']['dong']); // 역삼동


console.log('-----------------------------------');


// 함수 -> 변수의 지역
// 자바 : 지역 변수(메소드, 제어문), 멤버 변수
// 자바스크립트: 지역 변수(***), 전역 변수(***)
// - 자바스크립트의 지역 변수는 함수만 인식한다.(제어문은 인식하지 못한다.******** 자바와 다름)


// 전역 변수, Global Variable
// - 어디에도 소속되지 않은 변수
// - 적용 범위: 현재 파일 전체

var n1 = 10;

function m1() {
    //지역 변수, Local Variable
    var n2 = 20;
    console.log(n2);

    if (true) {
        var n3 = 30; // Scope: m1
        console.log(n3);
    }

    console.log(n3); // 30 (제어문 바깥쪽의 지역이 영역이 된다.)
}

// console.log(n2);
m1();


console.log('-----------------------------------');


// 같은 식별자 사용 -> ? 
// 자바스크립트의 var 키워드는 중복 선언이 가능하다.
var num = 10;
var num = 20;
var num = 30;

console.log(num); // 30


// 변수 선언 키워드(var) 없이도 변수를 선언 가능하다. -> 전역 변수가 된다.
// -> 사용 금지!!!!(가독성 저하)
color = '노랑';
console.log(color);

function test() {
    var width = 100; // 지역변수(test())
    height = 200; // 전역변수 -> 지역변수
}

// console.log(width);
// console.log(height);


console.log('-----------------------------------');


// 선언 -> 호출
// 호출 -> 선언
// Hoisting
// - 함수 호이스팅 : 함수선언은 어느 위치든 상관없다.
// - 변수 호이스팅 -> 사용 안함
// - 자바스크립트 엔진이 구문(문장)을 실행하기 전에 소스상의 모든 변수 선언문과 함수 선언문을 소스의 최상단으로 이동시킨다.(끌어 올린다.)
console.log(nick);

print();

//변수 호이스팅 : var nick 선언문만 끌어올린다. -> undefined -> 남은 코드 nick = '강아지';가 나중에 실행된다.
// nick = '강아지';

var nick = '강아지';

function print() {
    console.log('고양이');
}


console.log('-----------------------------------');


function f1() {
    console.log('f1');

    //지역 함수(nested function)
    function f2() {
        console.log('f2');
    }
    f2();
    console.log('f1');
}
f1();
//f2();


console.log('-----------------------------------');


// 즉시 실행 함수
// - 코드 관리 기법
// - 폐쇄적인 환경을 만들기 위해서
//    - 네임 충돌 발생 방지
//    - 자원 관리 편함
(function () {
    //이곳에 코딩하는 모습을 자주 볼 수 있다.

    var num = 100; // 안에서만 유효한 지역변수

    function test() {
        console.log('test');
    }
})();

console.log(num); 
test();

// --------------------------------------------------

//클래스(X) -> 생성자 함수
//요구사항] 동일한 타입의 객체를 3개 생성
var m1 = {
    name: '홍길동',
    age: 20
};
var m2 = {
    name: '아무개',
    age: 25
};
var m3 = {
    name: '하하하',
    age: 26
}; // -> 문제점: 강제성을 가지지 않고 객체를 만들때마다 정의하는 것이기 때문에 누락되거나 오타로 인해 다른 형식의 객체가 될 위험이 있다.


// 생성자 함수
// - 이름이 파스칼 표기법(대문자로 시작)
// - this: 나중에 생성될 객체
function User() {
    this.name = '홍길동';
    this.age = 20;
    this.hello = function () {
        console.log(this.name, this.age);
    };
}

// 생성자 함수는 단독 호출(X) -> 반드시 new 연산자와 함께 사용
var user = new User();
console.log(user);
user.hello();


// --------------------------------------

// 틀처럼 사용할 수 있다. 
function Member(name, age) {
    this.name = name;
    this.age = age;
}

var m1 = new Member('홍길동', 20);
var m2 = new Member('아무개', 25);
var m3 = new Member('하하하', 26);

console.log(m1);
console.log(typeof m1); //object
// constructor 프로퍼티
console.log(m1.constructor); //[Function: Member] 생성자 이름

console.log(user);
console.log(typeof user); //object
console.log(user.constructor); //[Function: User]

//객체를 구분할 땐 typeof 아니라 constructor를 확인한다.(******)
var list = [];
list = new Array(); //Array라는 이름의 생성자 함수
console.log(typeof list); //object
console.log(list.constructor); //[Function: Array]

var now = new Date(); //Date란 이름의 생성자 함수
console.log(typeof now); //object
console.log(now.constructor); //[Function: Date]

console.log(m1 == m2);
console.log(m1 == user);
console.log(m1.constructor == m2.constructor); //true
console.log(m1.constructor == user.constructor); //false

ex12_BOM.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <!-- 
                BOM, Browser Object Model
                - HTML 문서의 내용을 읽어들여 트리 구조로 만들어 놓은 모델 
                - 정적 구조 : HTML 코드에 상관없이 구조가 고정
                - BOM 트리에 존재하는 태그는 맵핑이 되는데, 트리에 존재하지 않는 태그는 맵핑 불가
                    -> BOM 트리에 없는 태그는 조작이 불가능하다!!
                - 태그를 접근할 때 접근 가능 태그 or 접근 불가능 태그
                - 접근 가능 태그 -> BOM 트리 참조
                - 태그 접근 시 사용하는 식별자 -> name 사용 (*****)
                - 이미지, 링크, 폼 -> 어떤 태그는 name 있고, 어떤 태그는 name 없다.(BOM 트리구조 안에 있는 태그만 name을 갖는다.)
             -->
        <h1>BOM</h1>
        <form name="form1">
            <input type="text" name="txt1" value="" />
            <div></div> <!-- BOM 트리에 없는 태그 -->
            <input type="button" value="확인" name="btn1" />
        </form>

            <!-- 태그를 조작하는 <script>는 보편적으로 태그를 먼저 읽고 난 뒤 <script>를 짠다. -->
        <script>
            // *** JavaScript로 찾은 태그의 참조 객체는 여러 프로퍼티를 제공 
                // -> 상당수는 html 태그가 가지던 속성의 이름과 동일하게 제공된다.(해당 속성을 조작 가능한 프로퍼티로 제공된다.)

            // 예약어
            // - window
            // - document

            // window.document.form1.txt1 - 태그 검색(****)
            // window.document.form1.txt1.value - 속성 접근(****)
            // window.document.form1.txt1.value = '홍길동'; - 속성 조작(****)
            // window.document.form1.txt1.value = '홍길동';

            window.document.form1.txt1.value = new Date().toLocaleDateString();
        </script>
    </body>
</html>

ex13_event.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <!-- 
        <<< BOM 모델에 이벤트 거는 방법 >>>
        이벤트, Event
             - 사용자(사람)와 상호 작용을 하면서 마우스(키보드, 터치, 펜 등)를 조작하면 그에 대한 반응을 정의하는 모델

             이벤트 걸기 -> 이벤트 맵핑(Event Mapping)
             - 특정 태그 검색 + 이벤트 정의 + 코드 등록(함수 등록)

             1. 정적 방식 > BOM 정적 이벤트 모델
                - 이벤트가 발생할 태그에 onXXX 속성을 미리 정의한다.
                - onXXX 속성: 이벤트 핸들러, Event Handler > 사건이 발생하면 일을 처리하는 담당자
                - 하는 일이 고정일 때..(변화가 없을 때) 많이 사용. 

             2. 동적 방식 > BOM 동적 이벤트 모델
                - 자바스크립트로 객체를 찾아서 이벤트를 정의한다.
                - 태그객체.onXXX = 익명함수;
                - 태그객체.onXXX = 실명함수;
        -->

        <h1>Event</h1>
        <form name="form1">
            <input type="text" name="txt1" />
            <input type="button" value="확인1" name="btn1" onclick="txt1.value='click';" /> <!-- 정적 이벤트 모델 -->
            <input type="button" value="확인2" name="btn2">
        </form>

        <!-- 하단부 코딩 -->
        <script>
            var btn1 = window.document.form1.btn1;
            var btn2 = window.document.form1.btn2;
            var txt1 = window.document.form1.txt1;

            // 동적 이벤트 모델
            // btn1.onclick = function () {
            //     //alert();
            //     txt1.value = '클릭';
            // };

            // 익명함수(가장 많이 사용하는 방식 *****)
            btn1.onclick = function() { // 익명함수는 여기에서만 사용 가능

            };

            // 실명함수
            function test() {

            }

            btn1.onclick = test;

            test(); // 실명함수는 다른 용도로 호출 가능

            // ------------------------------------

            var now = new Date();

            // 동적 이벤트 모델은 이벤트 제어할 수 있다.
            // 수요일에만 btn2를 클릭할 수 있다. -> 조건부 클릭 이벤트
            if (now.getDay() == 3) {
                btn2.onclick = function() {
                    alert('click');
                };
            }
        </script>
    </body>
</html>

ex14_event.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script>
      // 상단부 코딩 
      // 에러 : Cannot read property 'txt1' of undefined --> form1을 못찾았다는 뜻
      // window.document.form1.txt1.value = new Date();  --> form1을 읽기도 전에 접근해서 에러남.

      //<body onload="">
      // - HTML 문서의 모든 내용이 브라우저에 의해 로딩되고 난 직후에 발생하는 이벤트
       // - 상단부에 코딩할 때 많이 사용하는 방법.
      function init() {
         window.document.form1.txt1.value = new Date();
      }

      //<body onload=""> 유사
      window.onload = function() {  // 동적 이벤트 모델
         //alert();
      };

   </script>
</head>
<!-- <body onload="init();"> --> <!-- 정적 이벤트 모델 -->
<body>
   <h1>Event</h1>
   <form name="form1">
      <input type="text" name="txt1" size="50" />
   </form>

   <script>
       // 하단부 코딩
       // window.document.form1.txt1.value = new Date();
   </script>

</body>
</html>

ex15_event_mouse.html

마우스 관련 이벤트

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      textarea { width: 500px; height: 300px; resize: none; font-size: 2.5em; cursor: default; }
      textarea, input { display: block; margin-bottom: 10px;}
   </style>
</head>
<body>

   <h1>마우스 관련 이벤트</h1>

   <form name="form1">
      <textarea name="txt1" onmouseover="m1();"></textarea> <!-- 정적 이벤트 -->
      <input type="button" value="버튼" name="btn1">
   </form>

   <img src="images/cat01.jpg" name="cat1">

   <script>

      var txt1 = window.document.form1.txt1;
      var btn1 = window.document.form1.btn1;

      /*  
         *** 이벤트!!! > 어떤 행동을 했을 때 발생하는지!!!를 알아야한다.

         마우스 관련 이벤트
         - onmouseXXX

         1. onmouseover: 해당 객체 영역 위에 마우스 커서가 진입하는 순간 발생
         2. onmouseout: 해당 객체 영역 위에 마우스 커서가 빠져나가는 순간
         3. onmousedown: 해당 객체 영역 위에서 마우스 버튼을 누르는 순간
         4. onmouseup: 해당 객체 영역 위에서 마우스 버튼을 떼는 순간
         5. onmousemove: 해당 객체 영역 위에서 마우스 커서가 움직일 때마다 발생
         6. onclick: 마우스 이벤트가 아니다!!! 키보드를 사용해서 발생 가능하다. 좌표를 얻어내지 못한다. -> 독립적 이벤트
                  -> 좌표를 얻어내려면 onmousedown 이벤트를 사용해야한다. 
      */

       // 동적 이벤트 모델
       function m1() {
           // txt1.value = 'mouseover';
           // txt1.value = 'mouseover\n' + txt1.value; // 마우스가 영역 위에 올라갔을 때 메세지가 위로 찍힘.
           // window.document.body.bgColor = "tomato";
       }

       // 정적 이벤트 모델
       txt1.onmouseout = function() {
           // txt1.value = 'mouseout\n' + txt1.value;
           // window.document.body.bgColor = "white";
       };

       // 버튼에도 사용 가능
       btn1.onmouseover = function() {
           btn1.value = '하하';
       };

       btn1.onmouseout = function() {
           btn1.value = '버튼';
       };

       txt1.onmousedown = function() {
           //txt1.value = 'mousedown\n' + txt1.value;

           //event 객체
           // - 이벤트가 발생하면 자동으로 제공되는 객체

           // event.buttons
           // - 마우스의 버튼 종류
           // - 1: 왼쪽 버튼
           // - 2: 오른쪽 버튼

           // txt1.value = event.buttons + '\n' + txt1.value;

           // 우측버튼을 누르면 경고창 띄우기.
           // if (event.buttons == 2) {
           //    // 브라우저 -> 오른쪽 버튼 클릭 -> Context Menu 호출
           //    alert('오른쪽 버튼을 사용할 수 없습니다.');

           //    event.preventDefault();
           //    return false;
           // }

           /*
             event -> 마우스 커서의 좌표
             1. x, y
                - 마우스 좌표값
                - 기준점: 문서 좌측 상단
                - 비표준(MS) -> 특정 브라우저에만 사용 가능, 사용 권장 X

             2. clientX, clientY *****
                - 기준점: 문서 좌측 상단
                - 1번과 동일
                - 표준(정식) -> 권장 O
                - CSS의 absolute과 동일한 좌표계

             3. screenX, screenY
                - 기준점: 모니터 좌측 상단

             4. offsetX, offsetY *****
                - 기준점: 이벤트가 걸린 태그의 좌측 상단
                - CSS의 relative와 동일한 좌표계(자신을 기준) -> 특정 위치 찾기 좋음
         */

           // txt1.value = event.x + ',' + event.y + '\n' + txt1.value;
           // txt1.value = event.clientX + ',' + event.clientY + '\n' + txt1.value;
           // txt1.value = event.screenX + ',' + event.screenY + '\n' + txt1.value;
           // txt1.value = event.offsetX + ',' + event.offsetY + '\n' + txt1.value;

       };

      txt1.onmouseup = function() {
         // txt1.value = 'mouseup\n' + txt1.value;
      };

      txt1.onmousemove = function() {
         // txt1.value = 'mousemove\n' + txt1.value;

         // mouse tracking - 마우스 움직일때마다 좌표 추적
         txt1.value = event.offsetX + ',' + event.offsetY + '\n' + txt1.value;
      };


      window.document.all.cat1.onmousedown = function() {

         if (event.offsetX > 100 && event.offsetX < 125 
               && event.offsetY > 70 && event.offsetY < 100) {
                  alert('거기는 고양이 코!');
         }
      };

      btn1.onclick = function() {
         btn1.value = "click";
      };

   </script>
</body>
</html>

javascript

ex01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style></style>

    <!-- 참조, 외부 자바스트립트 -->
    <!-- <script src="js/ex01.js"></script> -->
    <script src="hello.js"></script>

    <script>
        // 임베디드 형식
        // alert('반갑습니다.');
    </script>
</head>
<body>
    <!-- 
        Web Client
        1.HTML
            - 골격(레이아웃,틀) -> 블럭태그
            - 내용물(텍스트, 이미지, 컨트롤 등) -> 인라인태그
        2. CSS
            - 1번 결과물 + 서식 구현
        3. Javascript
            - 1번 + 2번 결과물 + 프로그래밍 구현(목적: 1번(HTML) 조작 or 2번(CSS) 조작)


        JavaScript
        - 브라우저에서 동작하는 프로그래밍 언어
        - 가볍다. (경량)
        - 쉽다.(규모가 적다.)
        - C계열 언어 > 기본 구문이 자바와 비슷하다.
        - 1996년 1.0 넷스케이프 네이게이터(브라우저) -> IE
        - 초반: 폼 태그 유효성 검사 + 링크 조작 + 이미지 조작 -> BOM
        - 중반: 모든 태그 조작 -> DOM(****)
        - 후반: 2015년 -> ES5 -> Node.js 출시 -> 비 브라우저 환경에서도 JavaScript 동작, 서버 구축


        JavaScript가 하는 일?
        1. 기본적인 프로그래밍 언어의 행동
            - Core
            - 변수
            - 연산자
            - 제어문
            - 조작, 가공 등..

        2. 브라우저에 특화된 행동
            - HTML/CSS 요소 조작 능력
                a. HTML Element 생성  
                b. HTML Element 수정  
                c. HTML Element 삭제  
                d. HTML Attribute 생성/수정/삭제
                e. HTML PCDATA 생성/수정/삭제
                f. CSS 속성 생성/수정/삭제
                g. 폼 태그 조작
                h. 이미지 조작
                i. 링크 조작


        JavaScript 역사
        1. Netscape Navigator > JavaScript 1.0 > 1.1 > ... > 1.8
        2. Internet Explorer > JavaScript > JScript > 1.0 ... 8.0
        3. ECMA -> JavaScript -> 표준 스크립트 등재 신청 -> ECMAScript(ES) -> ECMAScript 2015 (ES6) -> ECMAScript 2020(ES11) 
        - 현재 자바스크립트 시장 -> ES6기반


        JavaScript 적용 방법
        1. 인라인 방식(X) -> 이벤트 핸들러(Event Handler) -> 이벤트
            - 태그에 직접 기재

        2. 임베디드 방식
            - <script></script>

        3. 외부 방식
            - <script src="경로"><script>

     -->

     <!-- 이벤트 핸들러 -->
     <input type="button" value="버튼" onclick="alert('안녕');"/>

</body>
</html>

ex02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* <style>은 일반적으로 문서내 <head> 자식으로 1회 적용 */
    </style>

    <script>
        // <script>는 문서 내에 여기저기 여러번 적용하는 모습을 자주 볼 수 있다.
        // -> 코드의 실행 순서를 제어하기 위해서..
        // -> 동기순으로 적용
        // alert('하나');

        // window.document.all.txt1.value = new Date();

    </script>
</head>
<body>

    <!-- 
        자바스크립트 구문의 실행 순서
        - 동기(문장 순서대로 실행)
        - 브라우저가 HTML과 JavaScript를 동시에 실행한다.
        - HTML 조작 시 HTML과 JavaScript 구문의 순서가 중요하다.(*****)
     -->

    <input type="text" name="txt1" size="50" />

    <script>
        // alert('둘');

        // window.document.all.txt1.value = new Date();

    </script>
</body>
</html>

ex03_debug.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!--
        JavaScript 디버그 시 값을 확인하는 방법
        1.alert(값);
            - 디버그 전용 함수 X
            - 구문 간단
            - 블럭이 걸린다.(break)

        2. document.write(값);
            - 디버그 전용 함수 X
            - 페이지에 직접 출력
            - 사용X

        3. HTML 사용
            - 사용 X
            - 추가 비용 발생

        4. console.log(값);
            - 디버그 전용 함수 O
            - FM
            - 적극 추천
            - 개발자 콘솔창에 출력 + 사용자에게 출력 X
            - Node 환경에서도 출력

    -->
    <script>
        // alert(new Date());
        // alert(100);

        // document.write(new Date());

       console.log(100);
       console.log(100, 200, 300);
       console.log('점수', 100);
       console.error(300);
       console.info('확인');

    </script>
</body>
</html>

ex04_datatype.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>

        /*

            자바스크립트 자료형

            1. Number
                - 숫자형(정수 + 실수)
                - 리터럴(다른 언어와 동일)

            변수
            - 자바스크립트는 동적(<-> 정적) 할당 언어이다. > 변수를 선언할 때 자료형이 정해지지 않는다.
            - 자바는 정적 할당 언어이다. > 변수를 선언할 때 자료형을 정해진다.(int a)    
            - var 키워드 사용


            2. String
                - 문자열(문자)
                - 리터럴
                    - "문자열"
                    - '문자열'

            3. Boolean
                - 논리형
                - 리터럴
                    - true
                    - false

            4. Object
                - 객체형
                - ES6 이전에는 Class 개념이 없었다. > 생성자 함수를 통해 객체 생성
                - ES6 이후에는 Class 개념이 생겼다.(진정한 Class가 아니라 Class를 흉내)        
                - 배열, 날짜시간, 수학 등,,

            5. 기타
                - null
                - underfined
                - NaN


            연산자
            - 자바와 동일


            제어문
            - 자바와 동일


            문자 이스케이프
            - 자바와 동일
            - \n, \r, \t ...
        */

        var a = 10; // Number
        var b = 3.14; // Number
        var c = '홍길동'; 
        var d = true;
        var e = new Date();

        console.log(a);
        console.log(typeof a); // number(콘솔창에서 자료형 표기), Number(생성자 이름)
        console.log(typeof 100); // number

        var str1 = "홍길동";
        var str2 = '아무개';

        console.log(str1, typeof str1);
        console.log(str2, typeof str2);

        console.log(true, typeof true);

        console.log(new Date()); // 클래스 사용 + 객체 사용
        console.log(new Date().toString());

        console.log(typeof new Date()); // Date 자료형 X -> Object 자료형

    </script>
</body>
</html>

ex04.js

// - JavaScript Core 실행 가능
// - JavaScript Browser 실행 불가능

var num = 10;

console.log('num', num);

// Ctrl + F5
//확장 프로그램 > Code Runner > 설치 -> Ctrl + Alt + N

if (num > 0) {
    console.log('양수');
} else {
    console.log('음수');
}

for (var i = 0; i < 10; i++) {
    console.log(i);
}

ex05_function.js

/*
    함수, Function
    - 메소드, 프로시저
    - 자바스크립트(메소드(=함수))
    - function 키워드 사용

    선언문
    1. 자바의 선언문
        public [static] void test(int a) {
            실행문;
        }

    2. 자바스크립트의 선언문
        function test(a) {
            실행문;
        }    
*/

// 매개변수 X, 반환값 X
function f1() {
    console.log('f1');
}

f1();
f1();
f1();


// 매개변수 O, 반환값 X
function f2(num) {
    console.log(num);
}

f2(100);
f2(200);
f2(300);


// 매개변수 X , 반환값 O
function f3() {
    return 100;
}

var result = f3();
console.log('result', result);


// 매개변수 O, 반환값 O
function f4(a, b) {
    return a + b;
}

console.log(f4(100, 200));



// 주의점!!
// - 실인자와 가인자가 일치하지 않아도 가능 !!

function hello(name) {
    console.log('안녕하세요' + name + '님');
    // console.log('안녕하세요. %s님', name);
    // console.log('안녕하세요', name, '님');
}

hello('홍길동');

// hello(); 
// hello('홍길동', '아무개', '하하하');



// 자료형
// - null : 그 외 나머지 비어있는 상태, 개발자 직접 명시
// - undefined : 변수를 생성 직후 초기화를 하지 않은 상태
// - 둘은 똑같다. (실제로는 다르다.)


console.log(null);
console.log(undefined);

console.log(null == undefined); // true

// var temp = null; // 명시적 선언에는 null만 사용
// var temp = undefined; // X

var temp;
console.log('temp', temp); // undefined

ex06_function.js

/*
    자바스크립트의 함수
    - 함수를 객체(데이터)처럼 취급할 수 있다.
        -> 함수는 1급 객체(first class object)이다.


    1급 객체
    1. 함수를 변수나 데이터 구조에 담을 수 있다.
    2. 함수를 매개변수로 전달할 수 있다.(=1번)
    3. 함수를 반환값으로 사용할 수 있다.(=1번)

*/


// 1. 함수를 변수나 데이터 구조에 담을 수 있다.
var n1;

function f1() {
    console.log('f1');
}

n1 = f1(); // 함수의 반환값을 n1에 대입
console.log(n1); // undefined -> 리턴값이 없는 메서드를 호출해서

n1 = f1; // 함수 자체를 n1에 대입(= 함수 포인터)
console.log(n1); // [Function: f1]
n1(); // f1 (*************)

var n2 = n1;
n2(); // f1

n2 = 100;
console.log(n2); // 100

console.log('----------------------------');

// 2. 함수를 매개변수로 전달할 수 있다.(=1번)

function f3(){
    console.log('f3');
}

function f4(temp){
    console.log(temp);
}

f4(100);
var n3 = f3;

f4(n3); // [Function: f3]
f4(f3); // [Function: f3]
f4(f3()); // undefined -> 리턴값이 없어서 -> 사용 X

console.log('----------------------------');

// 3. 함수를 반환값으로 사용할 수 있다.(=1번)
function f5() {
    console.log('f5');
}

function f6(temp) {
    temp(); // == f5()
}

f6(f5); // 함수를 매개변수로 넘김

function f7() {
    console.log('f7');
}

function f8() {
    return f7; // 함수를 반환값으로 쓸 수 있다.
}

// f8을 호출() -> f7로 치환 -> f7();호출 -> f7
f8()(); //f7


// ---------------------------------------------------------------------------------

/*
    자바스크립트이 함수 선언
    1. 명시적 선언(실명)
    2. 암시적 선언(= 익명 함수, 함수 리터럴)
    3. 즉시 호출
*/


// 1. 명시적 선언(실명)
function hello() {
    console.log('hello');
}

hello();


//  2. 암시적 선언(= 익명 함수(****), 함수 리터럴)
var m1 = function() {
    console.log('hi');
};

m1();


// 3. 익명함수를 즉시 호출할 때 쓰임 
(function() {
    console.log('good!!!');
})();


console.log('----------------------------');


/*
    연산자 + 자료형
    - 자바스크립트는 오라클과 비슷하게 자동 형변환이 잦다.
    - 자동형변환이 많다. -> 개발자 편함, 개발자 불편함(가독성 저하).
    - 자동형변환이 적다. -> 개발자 불편(모든걸 직접 구현해야한다.), 개발자 편함(가독성 향상). 
*/ 
console.log(null == undefined);


/*
    == 연산자
    - 자료형의 비교는 하지 않고 데이터만 같은지 판단.
    - 추상적(abstract) 같음 비교
*/
console.log(100 == 100);
console.log(100 == '100'); //true
console.log(1 == true); // true
console.log(0 == false); // true


/*
    === 연산자, !== 연산자
    - 자료형도 비교하고, 값도 비교한다.
    - 엄격한(strict) 같음 비교
*/
console.log('----------------------------');
console.log(100 === 100); // true
console.log(100 === '100'); // false
console.log(1 === true); // false
console.log(null === undefined); // false

ex64_bootstrap.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- Bootstrap 설치(로컬) -->
    <!-- 
        <link rel="stylesheet" href="css/bootstrap.css">
        <script src="js/bootstrap.js"></script> 
    -->

    <!-- CDN 설치(원격) -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

</head>
<body>

    <!-- 
        CSS 디자인 프레임워크
        - 디자인을 손쉽게 하기 위해 만들어진 라이브러리 모음
        - Bootstrap
        - https://getbootstrap.com (공홈)
        - http://bootstrapk.com (한국어)
        - v3 ~ v4 ~ v5

        Bootstrap 설정
        - *. css
        - *.js 
        1. 직접 다운로드 -> 참조
        2. CDN -> 참조

     -->

     <div class="container">
        <h1 class="page-header">Bootstrap<small>Design Framework</small></h1>

        <h2>버튼 디자인</h2>
        <input type="button" value="Button" />
        <button>Button</button>
        <input type="button" value="Button" class="btn btn-default">
        <input type="button" value="Button" class="btn btn-primary">
        <input type="button" value="Button" class="btn btn-success">
        <input type="button" value="Button" class="btn btn-danger">
        <input type="button" value="Button" class="btn btn-warning">
        <input type="button" value="Button" class="btn btn-info">



        <h2>버튼 크기</h2>
        <input type="button" value="Button" class="btn btn-primary btn-xs">
        <input type="button" value="Button" class="btn btn-primary btn-sm">
        <input type="button" value="Button" class="btn btn-primary">
        <input type="button" value="Button" class="btn btn-primary btn-lg">



        <h2>테이블</h2>
        <!-- table>tr>th*5 -->

        <!-- <table class="table"> -->
        <!-- <table class="table- table-bordered"> -->
        <!-- <table class="table- table-striped"> -->
        <!-- <table class="table- table-condensed"> -->
        <!-- <table class="table- table-condensed table-bordered table-striped"> -->
        <table class="table- table-hover">
            <tr>
                <th>번호</th>
                <th>이름</th>
                <th>나이</th>
                <th>성별</th>
                <th>주소</th>
            </tr>
            <!-- tr>td*5 -->
            <tr>
                <td>3</td>
                <td>홍길동</td>
                <td>20</td>
                <td>남자</td>
                <td>서울시 강남구 역삼동</td>
            </tr>
            <tr>
                <td>3</td>
                <td>홍길동</td>
                <td>20</td>
                <td>남자</td>
                <td>서울시 강남구 역삼동</td>
            </tr>
            <tr>
                <td>3</td>
                <td>홍길동</td>
                <td>20</td>
                <td>남자</td>
                <td>서울시 강남구 역삼동</td>
            </tr>
            <tr>
                <td>3</td>
                <td>홍길동</td>
                <td>20</td>
                <td>남자</td>
                <td>서울시 강남구 역삼동</td>
            </tr>
            <tr>
                <td>3</td>
                <td>홍길동</td>
                <td>20</td>
                <td>남자</td>
                <td>서울시 강남구 역삼동</td>
            </tr>
            <tr>
                <td>3</td>
                <td>홍길동</td>
                <td>20</td>
                <td>남자</td>
                <td>서울시 강남구 역삼동</td>
            </tr>
        </table>



        <h2>폼</h2>
        <table class="table table-bordered" style="width: 600px">
            <tr>
                <th style="width: 150px">텍스트 박스</th>
                <td>
                    <input type="text" class="form-control" />
                </td>
            </tr>

            <tr>
                <th style="width: 150px">암호 박스</th>
                <td>
                    <input type="password" class="form-control">
                </td>
            </tr>

            <tr>
                <th style="width: 150px">다중라인 텍스트</th>
                <td>
                    <textarea 
                    style="height: 200px" 
                    class="form-control"
                    ></textarea>
                </td>
            </tr>

            <tr>
                <th style="width: 150px">셀렉트 박스</th>
                <td>
                    <select class="form-control">
                        <option>항목</option>
                        <option>항목</option>
                    </select>
                </td>
            </tr>

            <tr>
                <th style="width: 150px">체크박스</th>
                <td>
                    <input type="checkbox">
                </td>
            </tr>
        </table>


        <h2>텍스트 관련</h2>
        <!-- (p>lorem)*3 -->
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit minus quae velit minima explicabo fuga sit, repellendus iusto ipsam quod ut commodi exercitationem est nisi, praesentium obcaecati, nesciunt veritatis at?</p>

        <p>Blanditiis repellendus numquam unde delectus ad quos odit molestias aspernatur at in. Temporibus vero, vitae vel, quia voluptatum aperiam, delectus veritatis voluptatem quibusdam eligendi earum magnam? Quia consequuntur nemo ex.</p>

        <p>Sunt, facere nemo. Quibusdam magnam dicta distinctio ipsa quisquam, repudiandae dolorem rerum excepturi aspernatur laborum at cupiditate modi deserunt inventore facilis adipisci officia error soluta quia eum impedit corporis pariatur?</p>

        <blockquote class="blockquote-reverse">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus illo cumque alias rem nulla dolorem? Veritatis excepturi ipsam libero dicta maxime ratione fuga id sequi similique. Vero atque quas similique?
        </blockquote>



        <h2>목록</h2>
        <ul>
            <li>딸기</li>
            <li>바나나</li>
            <li>포도</li>
        </ul>


        <h2>프로그래밍 코드</h2>
        <p>자바스크립트의 변수는 <code>var a = 10;</code>와 같이 선언합니다.</p>



        <h2>단축키</h2>
        <p>
            코드의 정렬은 <kbd>ctrl + Shift + F</kbd> 로 합니다.
        </p>



        <h2>외부 자료(preformatted Text-개행 문자 적용)</h2>
        <pre>
            public class Test {

                public static void main(String[] args)  {

                    System.out.print("숫자: ");

                    <span style="color:red">int sum = 0;</span>

                    for (int i=1; i<=num; i++) {
                        sum += i;
                    }
                }
            }
        </pre>
     </div>
</body>
</html>

• Bootstrap

ex70_bootstrap.html

• bootstrap을 이용해서 게시판 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script> 

    <style>
        body {
            background: #ddd;
        }

        main {
            width: 800px;
            height: 100vh;
            margin: 0px auto;
            border-left: 1px solid #777;
            border-right: 1px solid #777;
            padding-top: 20px;
            background-color: #FFF;
            box-shadow: 0px 0px 5px #999;
        }

        h1{
            margin-top: 0;
            padding-left: 20px;
            padding-right: 20px;
        }

        #tbl1 th,
        #tbl1 td {
            text-align: center;
        }

        #tbl1 th::nth-child(1) { width: 80px; }
        #tbl1 th::nth-child(2) { width: auto; }
        #tbl1 th::nth-child(3) { width: 100px; }
        #tbl1 th::nth-child(4) { width: 120px; }
        #tbl1 th::nth-child(5) { width: 80px; }

        #tbl1 td::nth-child(2) { text-align: left; }

        .btns {
            margin-top: 30px;
            padding: 0px 15px;
            display: flex;
            justify-content: space-between;
        }

        nav {
            text-align: center;
        }
    </style>

</head>
<body>
    <!-- 게시판 시작 페이지(목록보기) -->
    <main>

        <h1 class="page-header">Board <small>Bootstrap</small></h1>

        <table id="tbl1" class="table table-striped">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>제목</th>
                    <th>이름</th>
                    <th>날짜</th>
                    <th>읽음</th>  
                </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>5</td>
                        <td>게시판 테스트입니다.</td>
                        <td>홍길동</td>
                        <td>2021-06-22</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>게시판 테스트입니다.</td>
                        <td>홍길동</td>
                        <td>2021-06-22</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>게시판 테스트입니다.</td>
                        <td>홍길동</td>
                        <td>2021-06-22</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>게시판 테스트입니다.</td>
                        <td>홍길동</td>
                        <td>2021-06-22</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>게시판 테스트입니다.</td>
                        <td>홍길동</td>
                        <td>2021-06-22</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>게시판 테스트입니다.</td>
                        <td>홍길동</td>
                        <td>2021-06-22</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>게시판 테스트입니다.</td>
                        <td>홍길동</td>
                        <td>2021-06-22</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>게시판 테스트입니다.</td>
                        <td>홍길동</td>
                        <td>2021-06-22</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>게시판 테스트입니다.</td>
                        <td>홍길동</td>
                        <td>2021-06-22</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>게시판 테스트입니다.</td>
                        <td>홍길동</td>
                        <td>2021-06-22</td>
                        <td>10</td>
                    </tr>
                </tbody>
        </table>

        <div class="btns">
            <button class="btn btn-default">
                <span class="glyphicon glyphicon-home"></span> 
                Home</button>
            <button class="btn btn-primary">
                <span class="glyphicon glyphicon-log-in"></span>
                Write</button>
        </div>

        <nav>
            <ul class="pagination">
              <li>
                <a href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li class="active"><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li><a href="#">6</a></li>
              <li><a href="#">7</a></li>
              <li><a href="#">8</a></li>
              <li><a href="#">9</a></li>
              <li><a href="#">10</a></li>
              <li>
                <a href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
    </main>
</body>
</html>

ex63_animation.html

animation

• animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다.

• animation-delay 속성은 애니메이션 지연 시간을 설정합니다.

• animation-direction 속성은 애니메이션 움직임 방향을 설정합니다.

• animation-duration 속성은 애니메이션 움직임 시간을 설정합니다.

• animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.

  • forwards : 애니메이션이 끝난 후 그 지점에 그대로
  • backwards : 애니메이션이 끝난 후 시작점으로

• animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다.

• animation-name 속성은 애니메이션 keyframe 이름을 설정합니다.

• animation-play-state 속성은 애니메이션 진행 상태를 설정합니다.

• animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="css/example.css" />
        <style>
            /*
                인라인 태그에는 transform이 적용이 되지 않습니다. inline-block이나 block에만 적용됩니다.

                transition -> animation
                transition: 1 -> 10
                animation: 1 -> (값의 변화를 개발자가 직접 조작) -> 10

            */

            /*
                블럭 태그의 height 속성
                - % 이외의 단위: 적용O
                - %: 적용X
                - 부모 영역을 100%으로 하는 상대 단위 (***********)

                <html>, <body>
                - height: auto로 되어있음.
                - 내용물의 높이가 자신의 높이



                <body> 태그를 문서(브라우저창) 전체 높이로 설정하기
                방법 1. CSS 2
                1. <html>의 높이: 100% 지정
                2. <body>의 높이: 100% 지정

                방법 2. CSS 3
                1. <xxx>의 높이: 100vh
                - vh: viewport height, 눈에 보이는 창 크기만의 높이로 지정해라

            */


            /* 최고 조상 */
            html {
                /* border는 width, height에 포함되지 않음 */
                /* border: 50px solid gold; */

                /* height: auto; */

                /* 눈에 보이는 문서의 전체 높이가 <html>의 높이 */
                /* height: 100%; */ 

                /* width와 height에 padding과 border를 포함한다. */
                /* box-sizing: border-box; */
            }

            body {
                /* border: 50px solid black; */

                margin: 0; /* <html> 와 <body> 사이의 여백 */

                /* box-sizing: border-box; */

                /* height: auto; */
                /* height: 100%; */

                height: 100vh;
            }

            .box {
                margin-bottom: 10px;
            }

            body:hover #box1 {
                animation-name: key1; /* 외부 참조 - 코드 재사용 가능 */
                animation-duration: 1s;
                animation-fill-mode: forwards;
            }

            body:hover #box3 {
                animation-name: key1;
                animation-duration: 1s;
                animation-fill-mode: forwards;
            }

            /* @keyframes : 애니메이션의 값의 변화 상태 처리,
                약속한 이름을 사용해 해당 객체에 속성의 값 변화 명시 */
            @keyframes key1 {
                /* 어떤 속성 + 어떤 변화값 + 시간 순서 */

                from { /* 시작, 처음상태 */
                    width: 200px;
                }

                to { /* 끝, 최종값 */
                    width: 600px;
                }
            }

            /* transition */
            body:hover #box2 {
                transition: all 1s;
                width: 600px;
            }


            /* ----------------------------------------------------------------------- */


            body:hover #box4 {
                animation-name: key2; /* 애니메이션에 정의된 이름 */
                animation-duration: 1s; /* 애니메이션에 적용되는 소요 시간 */
            }

            @keyframes key2 {
            /* 
                from {
                    width: 200px;
                    height: 200px;
                }

                to {
                    width: 400px;
                    height: 400px;
                } 
            */


                /* 시간대별 속성값의 변화를 세분화 */
                0% {
                    /* 0s */
                    width: 200px;
                    background-color: orange;
                }

                50% {
                    /* 0.5s */
                    width: 600px;
                    background-color: green;
                }

                100% {
                    /* 1s */
                    width: 200px;
                    background-color: orange;
                }
            }


            /* ----------------------------------------------------------------------- */


            body:hover #box5 {
                animation-name: key3;
                animation-duration: 10s;
            }

            @keyframes key3 {

                0% { width: 200px; }
                25% { width: 1000px; }
                50% { width: 500px; }
                75% { width: 800px; }
                100% { width: 200px; }

            }

            #cat1 {
                position: relative;
                left: 0px;
                top: 0px;

                /* transition: all 1s; */

                /* 애니메이션 시작 -> 평상시에 애니메이션을 건다. -> 새로고침해야 애니메이션이 시작된다.
                animation-name: key4;
                animation-duration: 10s; 
                */
            }

            body:hover #cat1 {
                /* 
                left: 300px;
                top: 100px; 
                */

                /* 애니메이션 시작 -> 마우스를 올려야 애니메이션이 시작된다.  */
                animation-name: key4; /* transition-property 역할 */
                animation-duration: 10s;
            }

            @keyframes key4 {

                /* 시간배분에 따라 애니메이션의 움직임이 달라진다. */
                /* 초반에는 빠른 변화 -> 후반에는 느리게 변화 가능. */
                0% {
                    left: 0;
                    top: 0;
                }            

                5% {
                    left: 100px;
                    top: 100px;
                }    

                10% {
                    left: 1000px;
                    top: 100px;
                }    

                15% {
                    left: 1000px;
                    top: 500px;
                }    

                20% {
                    left: 1000px;
                    top: 100px;
                }    

                100% {
                    left: 0px;
                    top: 0px;
                }    
            }


            /* ----------------------------------------------------------------------- */


            #box6 {
                margin: 100px;
            }

            body:hover #box6 {
                animation-name: key5; /* 값 변화 */
                animation-duration: 1s; /* 적용 시간 */
                animation-iteration-count: 3;/* 반복 횟수 */

                /* 
                normal: 정방향
                reverse: 역방향
                alternate: 사이클마다 정방향 -> 역방향 -> 정방향.. 으로 진행된다.
                alternate-reverse: 사이클마다 역방향 -> 정방향 -> 역방향.. 으로 진행된다.
                */
                animation-direction: normal; /* 값 변화의 방향 */
                animation-delay: 5s; /* 지연 시간 */
            }

            @keyframes key5 {
                0% {
                    transform: translate(0px, 0px);
                }
                25% {
                    transform: translate(200px, 0px);
                }
                50% {
                    transform: translate(200px, 200px);
                }
                75% {
                    transform: translate(0px, 200px);
                }
                100% {
                    transform: translate(0px, 0px);
                }
            }


            /* ----------------------------------------------------------------------- */


            #cat img {
                display: block;
                margin: 10px;
            }

            #cat:hover img {
                animation-name: key6;
                animation-duration: 3s;
                animation-iteration-count: 2;
                animation-direction: alternate;
            }

            #cat img:nth-child(1) { animation-delay: 0s; animation-duration: 1s; }
            #cat img:nth-child(2) { animation-delay: 1s; animation-duration: 2s; }
            #cat img:nth-child(3) { animation-delay: 0.5s;  animation-duration: 3s;}
            #cat img:nth-child(4) { animation-delay: 3s;  animation-duration: 1.5s;}
            #cat img:nth-child(5) { animation-delay: 2s;  animation-duration: .5s;}

            @keyframes key6 {
                from { transform: translate(0px, 0px); }
                to { transform: translate(800px, 0px); }
            }


            /* ----------------------------------------------------------------------- */            


            #box7 {
                width: 500px;
                height: 500px;
                border: 10px solid black;
                margin: 50px;
                background-color: coral;

                /* animation-name: key7;
                animation-duration: 2s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                animation-direction: reverse; */
            }

            /* 부모가 한바퀴돌때 자식도 한바퀴 돌고 자식만의 한바퀴를 또 돈다. */
            #box8 {
                width: 50px;
                height: 250px;
                border: 10px solid black;
                background-color: gold;
                /* margin: 115px 115px; */
                margin: 0px auto; /* 중앙정렬 */

                animation-name: key7;
                animation-duration: 60s; /* 시계의 초침, 분침, 시침을 만들 수 있음 */
                animation-iteration-count: infinite;
                animation-timing-function: linear; /* 속도 일정하게 */
                transform-origin: center 250px; /* 회전 중심점  */ 
            }

            @keyframes key7 {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }


        </style>
    </head>
    <body>
        <!-- ex63_animation.html -->
        <h1>애니메이션</h1>

        <div id="box7">

            <div id="box8">

            </div>

        </div>

        <hr>

        <div id="box6" class="box box-medium box-border3 bgcolor-yellow">box6</div>

        <hr>

        <div id="cat">
            <img src="images/catty01.png">
            <img src="images/catty02.png">
            <img src="images/catty03.png">
            <img src="images/catty04.png">
            <img src="images/catty05.png">
        </div>

        <hr>

        <img src="images/catty01.png" id="cat1">

        <div id="box1" class="box box-medium box-border3 bgcolor-red">box1</div>
        <div id="box2" class="box box-medium box-border3 bgcolor-blue">box2</div>
        <div id="box3" class="box box-medium box-border3 bgcolor-green">box3</div>
        <div id="box4" class="box box-medium box-border3 bgcolor-orange">box4</div>
        <div id="box5" class="box box-medium box-border3 bgcolor-blue">box5</div>
    </body>
</html>

ex64_animaton.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      #box {
         border: 10px solid black;
         width: 600px;
         height: 1200px;
         margin: 50px auto;
      }

      #ball {
         width: 100px;
         height: 100px;
         background-color: gold;
         border-radius: 50%;
         box-sizing: border-box;
         border: 10px solid black;
         margin: 0 auto;

         animation-name: key1;
         animation-duration: 0.5s;
         animation-iteration-count: infinite; /* 반복횟수 - 무한대 */
         animation-direction: alternate; /* 움직임 방향 - 정방향 재생후 역방향 */
         animation-timing-function: ease-in; /* 애니메이션 재생중 속도변화 - 천천히 시작되어 정상속도가 된다. */
      }

      @keyframes key1 {
         0% {
            transform: translate(0px, 0px);
         }
         100% {
            transform: translate(0px, 1100px);
         }
      }
   </style>
</head>
<body>

   <div id="box">
      <div id="ball"></div>
   </div>

</body>
</html>

ex65_transition.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
   <style>

      #html {
         font-size: 5em;
         color: tomato;
      }

      /* -------------------------------- */

      button {
         background-color: black;
         border: 0px;
         outline: none;
         border-radius: 0;
         padding: 10px;
         color: white;
      }
      button > i {
         color: gold;
      }

      /* -------------------------------- */

      html, body {
         height: 100%;
      }

      .char {
         font-size: 5em;
         color: tomato;
         display: block;
         width: 60px;
         margin: 100px auto;
         /* margin-top: 500px; */

         transform: scale(100, 100); /* 크기가 커질때 중심을 기준으로 커짐. */
         opacity: 0;

         animation-name: keychar;
         animation-duration: 1s;
         animation-fill-mode: forwards;
         animation-timing-function: ease-out;
      }

      .char:nth-child(1) { animation-delay: 0s; } 
      .char:nth-child(2) { animation-delay: 0.7s; color: gold; } 
      .char:nth-child(3) { animation-delay: 1.4s; color: cornflowerblue; } 

      @keyframes keychar {
         0% {
            transform: scale(100, 100);
            opacity: 0;
         }
         100% {
            transform: scale(1, 1);
            opacity: 1;
         }
      }

   </style>
</head>
<body>

   <!-- 벡터(폰트) 기반: 수식, 확대/축소 능함 -->
   <!-- 
   <i class="fab fa-html5" id="html"></i>

   <hr>

   <button><i class="fas fa-trash-alt"></i> Delete</button>
   -->

   <i class="fab fa-html5 char"></i>
   <i class="fab fa-css3-alt char"></i>
   <i class="fab fa-js char"></i>

</body>
</html>

ex66_flex.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>

   /*  

      Flex
      - Flexible Box, FlexBox
      - 레이아웃 만들 때 내부 요소의 배치를 지정하는 상자
      - float + position + margin

   */

   #box {
      border: 10px solid black;

      /* 컨테이너 */
      /*  */ /* 컨테이너가 블럭태그 */
      /* display: inline-flex; */ /* 컨테이너가 인라인태그 */

      display: flex;

      /*  
         축, Axis
         - 기본축, Main Axis
         - 수직축, 교차축, Cross Axis
      */ 
      /*  
         flex-direction
         - 아이템의 배치 방향 -> 메인축의 방향을 가로로 할지 세로로 할지 정함
         - 기본축 or 수직축
      */
      /* flex-direction: row; */ /* 메인축 */ /* 가로 배치 */
      /* flex-direction: column; */ /* 수직축 */ /* 세로 배치 */
      /* flex-direction: row-reverse; */ /* 역순으로 가로 배치 */
      /* flex-direction: column-reverse; */ /* 역순으로 세로 배치 */



      /*  
         flex-wrap
         - 자동 줄바꿈
         - 컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성
      */
      /* flex-wrap: nowrap; */ /* 줄바꿈 X, 넘치면 삐져나감 */
      /* flex-wrap: wrap; */ /* 줄바꿈 */
      /* flex-wrap: wrap-reverse; */ /* 줄바꿈 -> 아이템을 역순으로 배치 */


      /*  
         flex-flow
         - 축약 속성, 그룹 속성
         - flex-direction + flex-wrap을 한번에 지정할 수 있는 단축 속성
      */
      /* flex-flow: row wrap; */


      /* 

         justify
         - 메인축 방향

         align
         - 수직축 방향

         justify-content
         - 메인축 방향으로 아이템을 어떻게 정렬?

      */

      /* justify-content: flex-start; */
      /* justify-content: flex-end; */
      /* flex-direction: row-reverse; */

      /* justify-content: center; */

      /* justify-content: space-between; */
      /* justify-content: space-around; */
      /* justify-content: space-evenly; */


      /* 메인축을 수직으로 했을 경우 */
      /* flex-direction: column; */
      /* height: 600px; */
      /* justify-content: space-around; */


      /*  

         ******* flexbox는 기본적으로 모든 내부 요소의 높이가 상자의 높이와 동일하다.

         align-items
         - 수직축 방향으로 아이템을 어떻게 정렬?

      */
      height: 600px;

      /* align-items: stretch; */
      /* align-items: flex-start; */
      /* align-items: flex-end; */
      /* align-items: center; */
      /* align-items: baseline; */

   }

   #box .item:nth-child(2) {
      font-size: 5em;
   }

   /* 
   float를 사용했을 때

   #box::after {
      content: '';
      display: block;
      clear: both;
   }
   #box .item {
      float: left;
   } 
   */

   #box .item:nth-child(3n) {
      border: 10px solid tomato;
   }
   #box .item:nth-child(3n+1) {
      border: 10px solid gold;
   }
   #box .item:nth-child(3n+2) {
      border: 10px solid cornflowerblue;
   }



   #title1, #title2 {
      font-variant: small-caps;
      color: #333;
      border-bottom: 1px dashed #999;
      width: 600px;
   }

   #title1 small, #title2 small {
      color: #777;
      font-size: .6em;
   }

   /* 소제목을 오른쪽으로 옮기는 방법 */
   /* 방법 1 -  float사용 */
   #title1 small {
      float: right;
      margin-top: 18px; /* 블럭태그의 성질때문에 수직축이 위로 맞춰진다. -> margin을 사용해 내린다. */
   }

   /* 방법 2 -  justify-content사용 */
   #title2 {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
   }



   #box2, #box3 {
      border: 15px solid black;
   }

   #box2 {
      width: 320px;
      height: 170px;
      background-color: gold;

      /* 안쪽 상자를 부모상자에 가운데 정렬하기 */
      display: flex;
      justify-content: center;
      align-items: center;
   }

   #box3 {
      width: 20px;
      height: 30px;
      background-color: tomato;
      /* margin: 55px 135px; */
   }

   body {
      margin-bottom: 500px;
   }

   </style>
</head>
<body>
   <!-- ex66_flex.html -->

   <div id="box">
      <div class="item">1.딸기</div>
      <div class="item">2.바나나</div>
      <div class="item">3.포도</div>
      <div class="item">1.딸기</div>
      <div class="item">2.바나나</div>
      <!-- <div class="item">1.딸기</div>
      <div class="item">2.바나나</div>
      <div class="item">3.포도</div>
      <div class="item">1.딸기</div>
      <div class="item">2.바나나</div>
      <div class="item">3.포도</div>
      <div class="item">1.딸기</div>
      <div class="item">2.바나나</div>
      <div class="item">10.파인애플</div> -->
   </div>

   <hr>

   <h1 id="title1">Main Title<small>Sub Title</small></h1>
   <h1 id="title2">Main Title<small>Sub Title</small></h1>

   <hr>

   <div id="box2">
      <div id="box3"></div>
   </div>

</body>
</html>

• space-between : 아이템들의 “사이(between)”에 균일한 간격을 만들어 준다.
• space-around : 아이템들의 “둘레(around)”에 균일한 간격을 만들어 준다.
• space-evenly : 아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다.

ex67.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>

       /* <html> 태그와 <body>태그 사이의 여백은 <body>태그의 마진값이다. */
      /*
      html, body {
         border: 1px solid black;
      }

      html {
         padding: 0;
      } 
      */

      html {
         /* height: 100%; */
      }

      body {
         margin: 0;

         /* border: 1px solid red; */
         /* height: 100%; */
         background-color: #CCC;
      }

      #main {
         width: 800px;
         /* height: 100%; */
         height: 100vh;

         /* background-color: gold; */
         margin: 0 auto;
         border-left: 1px solid #999;
         border-right: 1px solid #999;
         padding: 0px 50px;
         background-color: white;
         box-shadow: 0px 0px 5px #555;
      }

      #main > header {
         width: 100%;
         height: 200px;
         /* background-color: tomato; */
      }

      #main > section {
         width: 100%;
         /* background-color: cornflowerblue; */
      }

   </style>
</head>
<body>
   <!-- ex67.html -->

   <div id="main">
      <header>
         Menu
      </header>
      <section>
         lorem*50
      </section>
   </div>

</body>
</html>

ex48_transform.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/example.css">
    <style>
        /* 
            transform, 변형
            - 요소의 위치, 크기, 회전, 비틀기(왜곡) 변형을 적용
            - transform: 값;

            값(함수)
            1. translate(x좌표, y좌표) : 위치 변형(position-relative 유사)
            2. scale(가로축배율, 세로축배율) : 배율(크기) 변형 -> 객체의 크기가 커진 것이 아니라 확대한 것.
            3. rotate( deg) : 회전 변형
            ------------------------------
            4. skew(x각도, 각도) : 왜곡 변형
            5. matrix() : X

        */

        .box {
            margin: 10px 0px;
        }

        #box1 {
            transform: translate(100px, 100px);
        }

        #cat {
            margin-bottom: 80px;
        }

        /* margin 정책(마진 상쇄현상) : 인접한 요소의 margin이 겹치면 큰 값만 적용된다. */
        /* 
        #box1 { margin-bottom: 10px; }
        #box2 { margin-top: 20px; }
        */


        /*
            레이아웃 작업: position 사용
            사용자 인터페이스: transforn-translate 사용 
        */
        /* #cat > img:hover {
            transform: translate(0px, -15px);
        } */


        /* #cat:hover > img {
            transform: translate(0px, -15px);
        } */


        /* 마우스를 올린 사진의 형제 */
        /* #cat > img:hover + img {
            transform: translate(0px, -15px);
        } */


        /* #cat > img:hover ~ img {
            transform: translate(0px, -15px);
        } */

        /* 짝수번째 사진 */
        /* #cat:hover > img:nth-child(even) {
            transform: translate(0px, -15px);
        } */

        /* 홀수번째 사진 */
        /* #cat:hover > img:nth-child(odd) {
            transform: translate(0px, -15px);
        } */

        /* ------------------------------------------- */

        /* 1:1 배율 -> 정사이즈 */
        /* #box2 {
            transform: scale(1, 1);
        } */

        /* #box2 {
            transform: scale(1.5, 1.5) translate(300px, 0px);
        } */

        /* #box3 {
            width: 300px;
            height: 300px;
        } */

        /* #box2 {
            transform: scale(-1, 1);
        } */

        /* 역상 - 종이가 뒤집힌다고 생각. */
        /* #box2 {
            transform: scale(-1, -1);
        } */


        #box2 {
            transition: transform 1s;
        }

        #box2:hover {
            transform: scale(-1, 1);
        }

        #cat > img:hover  {
            transform: scale(1.3, 1.3);
            opacity: 0.3;
        }    


        /* ------------------------------------------- */


        /* #box3 {
            transform: rotate(30deg);
        } */

        #box3 {
            transform: rotate(-30deg);
        }

        /* #cat > img:hover  {
            transform: rotate(30deg);
        } */


        /* ------------------------------------------- */


        /* 서로 반대방향을 잡고 30도가 될 때까지 밀어낸 모양 */
        #box1 {
            transform: skew(30deg, 0deg);
        }

    </style>
</head>

<body>
    <!-- div#box$.box{상자$}*3 -->
    <div id="box1" class="box box-border5 box-medium bgcolor-red">상자1</div>
    <div id="box2" class="box box-border5 box-medium bgcolor-yellow">상자2</div>
    <div id="box3" class="box box-border5 box-medium bgcolor-blue">상자3</div>


    <h1>고양이</h1>
    <!-- div#cat>img[src='images/catty$$.png']*5 -->
    <div id="cat">
        <img src="images/catty01.png" alt="">
        <img src="images/catty02.png" alt="">
        <img src="images/catty03.png" alt="">
        <img src="images/catty04.png" alt="">
        <img src="images/catty05.png" alt="">
    </div>


        <!-- 텍스트 박스도 기울기를 정할 수 있음 -->
    <div>
        <input type="text" style="color: rebeccapurple; transform: rotate(45deg);">
    </div>

    <div>
        <input type="text" style="color: rebeccapurple; transform: scale(-1, 1);">
    </div>

    <br><br><br><br><br><br><br><br><br><br>

</body>
</html>

ex49_transform.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 너비: 1000 + 가운데 정렬 */

        /* 
            인접한 인라인 태그 사이의 공백을 없애는 방법
            1. 직접 공백을 지운다. > 비권장
            2. float > 추가 비용 발생
            3. font-size(한글자 크기)를 0px으로 준다.
        */


        /* 가로 메뉴 */
        #menu {
            width: 630px; /* 아이콘 크기게 맞게 줄인다. */
            margin: 0 auto;
            font-size: 0;
            /* border: 1px solid black; */
            /* text-align: center; 인라인 태그에 영향을 준다, 내용물만 가운데로 */
            transform: translate(0px, -100px);
        }

        /* #menu:hover {
            transform: translate(0px, -10px);
        } */

        #menu > img:hover {
            transform: translate(0px, 90px);
        }

        /* 

        #menu > img {
            float: left;
        }

        #menu::after {     -> float 영향 없애는 법
            content: "";
            display: block;
            clear: both;
        } 

        */


        /* 세로 서브메뉴 */
        #submenu {
            /* border: 1px solid black; */
            width: 126px;
            font-size: 0;
            transform: translate(-110px, 0px);
        }

        #submenu > img:hover{
            transform: translate(100px, 0px);
        }


        #section {
            width: 1000px;
            margin: 0 auto;
        }

    </style>
</head>
<body>
    <nav id="menu">
        <!-- img[src=imges/rect_icon$$.png]*5 -->
        <img src="images/rect_icon01.png" alt="">
        <img src="images/rect_icon02.png" alt="">
        <img src="images/rect_icon03.png" alt="">
        <img src="images/rect_icon04.png" alt="">
        <img src="images/rect_icon05.png" alt="">
        <!-- <div style="clear: both;"></div> -->
    </nav>

    <nav id="submenu">
        <!-- img[src=imges/rect_icon$$.png]*5 -->
        <img src="images/rect_icon01.png" alt="">
        <img src="images/rect_icon02.png" alt="">
        <img src="images/rect_icon03.png" alt="">
        <img src="images/rect_icon04.png" alt="">
        <img src="images/rect_icon05.png" alt="">
        <!-- <div style="clear: both;"></div> -->
    </nav>

    <section>

        <h1>Transform Menu</h1>

        <!-- ((h2>lorem5)+(p>lorem)*3)*5 -->
        <h2>Lorem ipsum dolor sit amet.</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla sed iusto ullam repellendus. Doloremque aperiam sint temporibus minima maiores, iste molestias natus, saepe similique soluta nemo architecto id ratione totam?</p>
        <p>Neque repellat quos consectetur corporis accusantium ducimus. Fuga, ea ullam? Dolor itaque doloremque dolore quam, voluptate officia ipsum eveniet autem officiis atque asperiores impedit nulla quod aliquid labore qui commodi!</p>
        <p>Architecto ex dicta amet ut vitae, fugiat delectus similique placeat maxime impedit? Excepturi perspiciatis, ratione inventore nihil tempora qui quidem, aperiam minus debitis vitae quos sed repellat, quam et consequatur?</p>

        <h2>Asperiores et debitis quis doloribus.</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quas soluta possimus, asperiores, dolores quasi saepe cupiditate illo obcaecati animi, repellat odit recusandae cumque dolore! Facere consequatur quo neque quaerat!</p>
        <p>Similique fuga itaque nesciunt ab dolores libero rem. Doloremque quas voluptatibus culpa nisi quos maiores fugiat, tenetur nostrum soluta. Recusandae quia eos suscipit modi officia tempore tempora facilis illo maxime!</p>
        <p>Totam repellat distinctio rem. Nemo laboriosam molestiae corrupti facilis. Tempora fugit temporibus ad fuga dolore! Minima repellendus, magni voluptatem odit a iure inventore, illo reprehenderit perspiciatis, ipsum vero recusandae dolor!</p>

        <h2>Nesciunt accusantium rem unde assumenda.</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde dolore pariatur deserunt exercitationem ipsam neque quas voluptatem perferendis rerum fuga, debitis saepe, eos recusandae at. At a nulla excepturi eos.</p>
        <p>Repudiandae reprehenderit suscipit esse perspiciatis, perferendis magnam dolore saepe alias expedita in placeat velit autem cupiditate nisi magni fuga laborum, corporis ab odio sunt sit excepturi id. Voluptatibus, ipsam voluptatum?</p>
        <p>Beatae quos dolor ex velit, odio distinctio illo autem veniam dicta porro maiores? Quos eligendi tenetur dolor odit, natus nihil nostrum aliquid ipsa quam excepturi mollitia amet illum voluptas eveniet.</p>

        <h2>Quae repellat doloribus veritatis a.</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo corrupti, neque, debitis ea officiis placeat necessitatibus, in cum suscipit veritatis reprehenderit dicta voluptates sit et. Doloremque cumque reprehenderit atque eum.</p>
        <p>Aut quaerat quas eum cumque neque vitae repellat vel quisquam iure, ab fugit. Praesentium vitae minus porro, corporis ipsum magnam sed sint aperiam deserunt quas, quo ex laudantium reiciendis unde!</p>
        <p>Magni nobis eos, cupiditate similique accusantium reiciendis ipsum, maxime officia beatae sit ipsa nisi in. Quis eos sit esse, nulla, expedita dolor ipsa maiores modi placeat amet fugiat iusto porro.</p>

        <h2>Dolore, aut totam! Neque, sed.</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A magnam ratione reprehenderit dolores quae aliquam incidunt error architecto, quia soluta harum omnis eligendi repellat earum voluptatibus itaque totam similique ducimus?</p>
        <p>Pariatur quasi asperiores nostrum omnis corrupti amet incidunt. Explicabo, sequi nam provident quam molestias, vitae repellendus doloribus in pariatur suscipit hic quae quis, commodi eos ex mollitia quisquam animi. Libero?</p>
        <p>Similique rerum nihil modi architecto saepe repudiandae assumenda pariatur dolorem, ea quod omnis maxime inventore? Ratione, cumque. Fugiat, necessitatibus esse obcaecati, voluptatibus ex autem labore quaerat, reprehenderit ut non ducimus.</p>
    </section>
</body>
</html>

ex50_transform.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            border: 10px solid steelblue;
            font-size: 0;
            width: 250px;
            height: 188px;
            overflow: hidden;
        }

        #innerbox {
            /* border: 10px solid red; */
            width: 1250px;

        }

        #box:hover > #innerbox {
            transform: translate(-250px, 0px);
        }

    </style>
</head>
<body>
    <div id="box">
        <div id="innerbox">
            <!-- img[src=images/cat$$.jpg]*5 -->
            <img src="images/cat01.jpg" alt="">
            <img src="images/cat02.jpg" alt="">
            <img src="images/cat03.jpg" alt="">
            <img src="images/cat04.jpg" alt="">
            <img src="images/cat05.jpg" alt="">
        </div>
    </div>
</body>
</html>

ex51_transition.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/example.css">
    <style>
        /* 
            transition, 전환
            - 객체의 속성(상태값)이 변화되는 과정을 시간 순으로 보여주는 기술
            - 수치형 속성 값에 한해서.. (열거형은 불가능)
        */
        #box {
            /* 애니메이션이 걸릴 대상 */
            /* transition-property: width, height, font-size; */

            /* all : 모든 속성 */
            transition-property: all;

            /* 변화를 일으키는데 걸리는 시간 */
            transition-duration: 1s;
        }

        #box:hover {
            /* width: 500px; */
            /* height: 500px; */
            /* font-size: 5em; */
            /* opacity: .1; */
            /* font-family: 궁서체; -> 수치가 아니라서 서서히 바뀌지 않음. */
            /* background-color: royalblue; */
            /* border-width: 30px; */
            /* padding: 50px; */
            /* border-radius: 50%; */
            /* margin-left: 200px; */
            /* box-shadow: 10px 10px 10px slateblue; */

            /* transform: translate(100px, 0px); */
            /* transform: scale(-1, 1); */
            /* transform: rotate(30deg); */
        }

        #cat > img {
            transition-property: all;
            transition-duration: 0.2s;
            opacity: .3;
        }

        #cat > img:hover {
            transform: translate(0px, -25px);
            opacity: 1;
        }


        /* 문제 - 덜덜 떨림, 안정적이지 않음 */
        /* #cat6 {

        }   

        #cat6:hover {
            transform: translate(500px, 0px);
        } */


        /* 자바스크립트를 쓰지않고 해결하는 방법 */

        /* 방법 1. 형제를 이용한다. */
        /* #cat5 + #cat6 {
            transition: all 1s;
        }   

        #cat5:hover + #cat6 {
            transform: translate(500px, 0px);
        }  */

        /* 방법 2. 부모태그를 이용한다. */
        #cage {
            /* border: 10px solid black; */
            width: 620px;
        }

        #cat7 {
            transition: all 1s;
        }

        #cage:hover > #cat7 {
            transform: translate(500px, 0px);
        }

    </style>
</head>
<body>
    <div id="box" class="box box-small box-border1 bgcolor-orange">상자</div>

    <h1>고양이</h1>
    <div id="cat">
        <img src="images/catty01.png" alt="">
        <img src="images/catty02.png" alt="">
        <img src="images/catty03.png" alt="">
        <img src="images/catty04.png" alt="">
        <img src="images/catty05.png" alt="">
    </div>

    <hr>
    <img src="images/catty05.png" alt="" id="cat5">
    <img src="images/catty06.png" alt="" id="cat6">

    <hr>

    <div id="cage">
        <img src="images/catty07.png" alt="" id="cat7">
    </div>

</body>
</html>

ex52_transition.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        body {
            margin: 0;
        }
        #menu {
            /* position: fixed; */
            position: relative;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 120px;
            background-color: white;
            border-bottom: 1px solid #CCC;
            box-shadow: 0px 2px 2px #DDD;
            cursor: pointer;
            transform: translate(0px, -80px);
            transition: transform .8s;
        }

        #menu:hover {
            transform: translate(0px, 0px);
        }

        #menu > span {
            font-weight: bold;
            font-variant: small-caps;
            position: absolute;
            right: 20px;
            bottom: 10px;
        }

        section{
            width: 800px;
            margin: 0px auto;
            margin-top: -60px;
        }
    </style>
</head>
<body>
    <!-- 
        메뉴 (붙박이 + 슬라이딩)
     -->

     <nav id="menu">
         <span>Menu</span>
     </nav>
     <section>
         <!-- ((h1>lorem5)+(p>lorem5)*3)*20 -->
         <h1>Lorem ipsum dolor sit amet.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Laudantium explicabo aspernatur maiores corporis?</p>
         <p>Veniam dignissimos tempora reiciendis quidem.</p>
         <h1>Corporis minima numquam distinctio! Molestiae.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Nobis repudiandae veritatis quisquam rem.</p>
         <p>Quidem eum cum maiores laudantium?</p>
         <h1>Animi optio porro nulla inventore.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Deserunt sit maiores aspernatur quis?</p>
         <p>Nostrum ratione a nobis fugiat?</p>
         <h1>Dignissimos placeat molestiae esse consectetur!</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Recusandae libero officia sapiente corporis?</p>
         <p>Ex dolor consequuntur harum? Maxime.</p>
         <h1>Facere ab aperiam atque expedita?</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>A maxime aut praesentium eveniet?</p>
         <p>Eligendi exercitationem architecto quidem natus!</p>
         <h1>Est porro aliquam id. Voluptates.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Aliquid repudiandae harum quidem obcaecati?</p>
         <p>Explicabo veniam accusantium repudiandae illum?</p>
         <h1>Eveniet harum recusandae rem neque!</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Nostrum totam hic natus labore?</p>
         <p>Tenetur ipsam repellat necessitatibus deleniti?</p>
         <h1>Cum perferendis quaerat itaque eos!</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Sunt aliquam ipsam totam quisquam?</p>
         <p>Deleniti eligendi tempora libero voluptas.</p>
         <h1>Provident qui consequatur sunt quod?</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Voluptate, consequuntur! Excepturi, recusandae cupiditate?</p>
         <p>Possimus asperiores eveniet hic soluta?</p>
         <h1>Quod sapiente ea debitis accusamus.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Ad numquam consectetur dolorem maiores.</p>
         <p>Culpa perferendis tempora maiores atque.</p>
         <h1>Ex assumenda eius aut porro!</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Nihil cum numquam iste quae?</p>
         <p>Ullam, quibusdam. Repellat, laboriosam a!</p>
         <h1>Neque iure ex nostrum totam.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Dolorem nemo quidem quasi perferendis!</p>
         <p>Laudantium pariatur facere nisi a!</p>
         <h1>Rerum odio perferendis neque possimus.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Cum harum dolores doloribus aliquam!</p>
         <p>Facilis mollitia nam soluta iure.</p>
         <h1>Blanditiis, minus. Doloremque, animi cupiditate.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Amet voluptates maxime minima voluptate!</p>
         <p>Temporibus cumque blanditiis esse deleniti?</p>
         <h1>Consequuntur sequi dignissimos earum eveniet!</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Placeat nulla a culpa in.</p>
         <p>Dignissimos eum qui ullam numquam!</p>
         <h1>Modi accusantium ipsum optio doloribus.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Unde odio quidem maiores vero?</p>
         <p>Ratione similique rerum quibusdam eveniet!</p>
         <h1>Quidem molestias repellat nesciunt voluptatibus.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Pariatur tenetur deleniti sint corporis.</p>
         <p>Eligendi vel quae quam nihil.</p>
         <h1>Enim rerum cumque id veniam!</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Id numquam similique soluta officiis.</p>
         <p>Error necessitatibus et optio quibusdam?</p>
         <h1>Saepe enim totam omnis sed!</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Asperiores explicabo natus assumenda eius.</p>
         <p>Dicta fugit beatae ipsam autem.</p>
         <h1>Earum unde dolorem ipsum consectetur.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Odit ratione quia temporibus eligendi.</p>
         <p>Quam id dolorum alias sed!</p>
     </section>
</body>
</html>

ex53_transform.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 128px;
            height: 128px;
            border: 10px solid orange;
            float: left;
            overflow: hidden;
        }

        .box:nth-child(even){
            border-color: crimson;
        }

        /* .box > img {
            transition: all 1s;
        }

        .box:hover > img {
            transform: translate(-128px, 0px);
        } */


        .box > img {
            transition: all 1s;
            /* transform: translate(0px, -128px); */
            transform: rotate(0deg) translate(0px, 0px);
            transform-origin: center top;
        }

        .box:hover > img {
            /* transform: translate(0px, 0px); */
            transform: rotate(360deg);
        }

    </style>
</head>
<body>
    <!-- (div#bpox$.box>img[src=images/catty$$.png])*5 -->
    <div id="bpox1" class="box"><img src="images/catty01.png" alt=""></div>
    <div id="bpox2" class="box"><img src="images/catty02.png" alt=""></div>
    <div id="bpox3" class="box"><img src="images/catty03.png" alt=""></div>
    <div id="bpox4" class="box"><img src="images/catty04.png" alt=""></div>
    <div id="bpox5" class="box"><img src="images/catty05.png" alt=""></div>
</body>
</html>

ex54_transition.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #list {
            border: 1px solid black;
            width: 1400px;
            height: 350px;
        }

        .box {
            width: 100px;
            height: 100px;
            margin: 15px 0px;
            transition: width 10s;
        }

        #box1 { background-color: royalblue; transition-timing-function: linear;}
        #box2 { background-color: gold; transition-timing-function: ease;}
        #box3 { background-color: crimson; transition-timing-function: ease-in;}
        #box4 { background-color: mediumseagreen; transition-timing-function: ease-out;}
        #box5 { background-color: violet; transition-timing-function: ease-in-out;}

        #list:hover .box {
            width: 1400px;
        }
    </style>
</head>
<body>
    <!-- div#list>div#box$.box*5 -->
    <div id="list">
        <div id="box1" class="box">linear</div>
        <div id="box2" class="box">ease(defalut)</div>
        <div id="box3" class="box">ease-in</div>
        <div id="box4" class="box">ease-out</div>
        <div id="box5" class="box">ease-in-out</div>
    </div>
</body>
</html>

ex55_box-sizing.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
                margin-bottom: 5px;
        }

        #box1 {
            width: 300px;
            height: 150px;
            border: 20px solid black;
            padding: 20px;
            background-color: gold;

            /* 테두리와 여백은 제외한 컨텐츠 크기를 width와 height로 하겠다. */
            box-sizing: content-box; /* default */
        }

        #box2 {
            width: 300px;
            height: 150px;
            border: 20px solid black;
            padding: 20px;
            background-color: hotpink;

            /* 테두리와 여백을 모두 포함한 크기를 width와 height로 하겠다. */
            box-sizing: border-box;
        }



    </style>
</head>
<body>
    <!-- div#box$.box*3 -->
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box"></div>
</body>
</html>

example

/* 
    수업에서 자주 사용하는 서식 미리 지정
*/

/* 배경색 */
.bgcolor-red { background-color: tomato; }
.bgcolor-blue { background-color: cornflowerblue; }
.bgcolor-yellow { background-color: gold; }
.bgcolor-green { background-color: greenyellow; }
.bgcolor-black { background-color: black; }
.bgcolor-white { background-color: white; }
.bgcolor-orange { background-color: orange; }

/* 전경색(글자) */
.color-red { color: tomato; }
.color-blue { color: cornflowerblue; }
.color-yellow { color: gold; }
.color-green { color: greenyellow; }
.color-black { color: black; }
.color-white { color: white; }
.color-orange { color: orange; }
.color-grey { color: #555; }

/* 상자(크기) */
.box-small { width:100px; height:100px; }
.box-medium { width:200px; height:200px; }
.box-large { width:400px; height:400px; }

/* 상자(테두리) */
.box-border1 { border: 1px solid black; }
.box-border3 { border: 3px solid black; }
.box-border5 { border: 5px solid black; }
.box-border10 { border: 10px solid black; }

/* 테이블(기본) */
.table {
    border: 1px solid black;
    border-collapse: collapse;
}

.table th, .table td {
    border: 1px solid black;
}

/* <table class="table small"> */
.table.small {
    width: 300px;
}

.table.medium {
    width: 500px;
}

.table.large {
    width: 800px;
}

.table.padding-small th,
.table.padding-small td {
    padding: 3px;
}

.table.padding-medium th,
.table.padding-medium td {
    padding: 5px;
}

.table.padding-large th,
.table.padding-large td {
    padding: 10px;
}

.table.header th {
    background-color: #DDD;
}

ex40_selector.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/example.css">
    <style>
        /* 
            1. first-child: 자신이 첫째인 요소
            2. last-child: 자신이 막내인 요소
            3. nth-child(n): 자신이 포함된 형제들 중에서 n번째인 요소(one-based index)
            4. nth-last-child(n): 자신이 거꾸로 n번째인 요소


            nth-child(n)AA
            - n: index + 수열 역할AAA
            1. 숫자 : index
            2. 2n : 0, 2, 4...
            3. 2n+1 : 1, 3, 5...
            4. even : 짝수(2n)
            5. odd : 홀수(2n+1)

        */

        /* #list > li {
            color: gold;
        } */

        /* 현재 <li>가 해당 집합에 첫번째 자식이냐? -> 유지보수성 좋음 */
        #list1 > li:first-child {
            color: blue;
        }

        /* 막내 찾기 */
        #list1 > li:last-child {
            color: red;
        }

        /* 서수는 1부터 시작, 순서를 직접 명시해서 찾을 수 있다. */
        #list1 > li:nth-child(5) {
            color: orange;
        }

        #list1 > li:nth-last-child(3) {
            color: greenyellow;
        }

        /* n : 0부터 시작, 2n+1 -> 홀수번째, 2n -> 짝수번째 등등.. */
        #list1 > li:nth-child(3n-2) {
            background-color: lightcoral;
        }

        /* CSS의 선택자는 태그에 직접 적용 */
        /* #table1 > tbody > tr {
            background-color: tomato;
        } */

        /* #table1 tr:nth-child(odd){
            background-color: gold;
        } */

        /* 첫번째 열(*****) */
        /* #table1 td:first-child {
            background-color: mediumslateblue;
        } */

        /* #table1 td:last-child {
            background-color: mediumslateblue;
        } */

        #table1 tr:nth-child(even) td:nth-child(odd){
            background-color: palegreen;
        }

        #table1 tr:nth-child(odd) td:nth-child(even){
            background-color: palegreen;
        }

    </style> 
</head>
<body>
    <!-- 
        CSS1 + CSS2 -> CSS3

        CSS 선택자
        1. *
        2. 태그 선택자
        3. ID 선택자
        4. class 선택자
        5. 자식 선택자
        6. 자손 선택자
        7. 형제 선택자
        8. 인접 형제 선택자
        9. 그룹 선택자

        가상 클래스 -> 태그에 실제 클래스가 없음 -> 사용하기 쉬움 (태그에 추가 코딩 불필요)
        10. 가상 클래스(:hover)
        11. CSS3 > 가상 클래스 or 필터

     -->

     <h1>목록</h1>

     <ul id="list1">
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
         <li>Java</li>
         <li>C#</li>
         <li>C++</li>
         <li>Spring</li>
         <li>PHP</li>
         <li>ASP.NET</li>
         <li>Perl</li>
         <li>Scalar</li>
     </ul>



     <!-- 
        1. <table>
        2. <tr>
        3. <td>
        4. <th>
        ----------------
        5. <thead>
        6. <tbody>
        7. <tfoot>
        ----------------    
        8. <caption>       

      -->
     <h1>테이블</h1>
     <table id="table1" class="table medium padding-medium header">
         <!-- <thead> -->
             <tr>
                 <th>헤더</th>
                 <th>헤더</th>
                 <th>헤더</th>
                 <th>헤더</th>
                 <th>헤더</th>
             </tr>
         <!-- </thead> -->

         <!-- <tbody> -->
             <tr>
                 <td>항목</td>
                 <td>항목</td>
                 <td>항목</td>
                 <td>항목</td>
                 <td>항목</td>
             </tr>
             <tr>
                 <td>항목</td>
                 <td>항목</td>
                 <td>항목</td>
                 <td>항목</td>
                 <td>항목</td>
             </tr>
             <tr>
                 <td>항목</td>
                 <td>항목</td>
                 <td>항목</td>
                 <td>항목</td>
                 <td>항목</td>
             </tr>
             <tr>
                <td>항목</td>
                <td>항목</td>
                <td>항목</td>
                <td>항목</td>
                <td>항목</td>
            </tr>
            <tr>
                <td>항목</td>
                <td>항목</td>
                <td>항목</td>
                <td>항목</td>
                <td>항목</td>
            </tr>
            <tr>
                <td>항목</td>
                <td>항목</td>
                <td>항목</td>
                <td>항목</td>
                <td>항목</td>
            </tr>
            <tr>
                <td>항목</td>
                <td>항목</td>
                <td>항목</td>
                <td>항목</td>
                <td>항목</td>
            </tr>
            <tr>
                <td>항목</td>
                <td>항목</td>
                <td>항목</td>
                <td>항목</td>
                <td>항목</td>
            </tr>
            <tr>
                <td>항목</td>
                <td>항목</td>
                <td>항목</td>
                <td>항목</td>
                <td>항목</td>
            </tr>
            <!-- </tbody> -->
            <!-- <tfoot> -->
                <tr>
                    <td>바닥</td>
                    <td>바닥</td>
                    <td>바닥</td>
                    <td>바닥</td>
                    <td>바닥</td>
                </tr>
            <!-- </tfoot> -->

     </table>
</body>
</html>

ex41_selector.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/example.css">
    <style>
        a {
            text-decoration: none;
            color: #555;
            display: block;
            margin-bottom: 5px;
        }

        /*
            속성 선택자
            1. 선택자[속성명]
                - 해당 속성을 명시한 태그 검색
            2. 선택자[속성명=값]   
                - 해당 속성을 명시하고 특정 값을 가진 태그 검색
            3. 선택자[속성명^=값]   
                - 해당 속성을 명시하고 특정 값으로 시작 태그 검색
            4. 선택자[속성명$=값]   
                - 해당 속성을 명시하고 특정 값으로 끝나는 태그 검색
            5. 선택자[속성명*=값]   
                - 해당 속성을 명시하고 특정 값이 포함된 태그 검색

        */

        /* a { */
        /* a[title] { */
        /* a[target='_blank'] { */
        /* a[href^='https://'] { */
        /* a[href$='.com'] { */
        a[href*='co'] {    
            color: tomato;
        }

    </style>
</head>
<body>
    <!-- 
        속성 선택자
        - 태그의 속성이나 속성의 값을 조건으로 요소를 검색
     -->

     <h1>속성 선택자</h1>

     <a href="http://naver.com" target="_blank">네이버</a>
     <a href="http://yes24.con" target="_self" title="서점으로 이동합니다.">YES24</a>
     <a href="https://daum.net">다음</a>
     <a href="https://11st.co.kr" title="쇼핑몰로 이동합니다.">11번가</a>
     <a href="http://kma.go.kr" target="_blank">기상청</a>

</body>
</html>

tistory

.tistory {
        width: 90%;    
        font-weight: bold;
        background-color: #D8D8D8;
        border-left: 10px solid #FF8224;    
        border-right: 10px solid #FF8224;
        margin: 1.5em 10px;    
        padding: 0.5em 10px;
        quotes:"\201C""\201D""\2018""\2019";
    }
    .tistory:before {
        color: #FF8224;    
        content: open-quote;    
        font-size: 4em;
        line-height: 0.1em;
        vertical-align: -0.4em;        
    }

ex43_selector.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* 
            입력 폼 선택자
            1. :form
            2. :enabled
            3. :disabled
            4. :checked
            5. :required
            6. :read-only
            7. :optional 
        */

        /* 태그1점 클래스 10점 -> 12점   */
        form:nth-child(2) > input {
            display: block;
            margin-bottom: 10px;
            border: 1px solid #999;
            background-color: white;
            outline: none;
            padding: 5px;
        }   

        /* 컨트롤의 상태에 따라 선택할 수 있는 선택자 */

        /* form:nth-child(2) > input:focus { background-color: yellowgreen; } */

        /* 사용가능한 컨트롤, 불가능한 컨트롤 표시  */
        /* form:nth-child(2) > input:enabled { background-color: peru; } */
        /* form:nth-child(2) > input:disabled { background-color: pink; }*/


        /* 못쓰는 것 표시 -> 커서 모양 바꾸기, 색깔로 표시 */
        /* form:nth-child(2) > input:disabled {
            background-color: palegoldenrod;
            opacity: .3;
            cursor: not-allowed;
        } */

        /* 필수로 입력해야하는 컨트롤만 표시  */
        form:nth-child(2) > input:required {
            background-color: gold;
        }

        /* 써도되고 안써도되는 컨트롤 표시 */
        form:nth-child(2) > input:optional {
            background-color: tomato;
        }

        /* 읽기만 가능한 컨트롤에 마우스 모양 바꾸기 */
        form:nth-child(2) > input:read-only {
            cursor: not-allowed;
        }

        /* ------------------------------------------------------------------------------------ */

        form:nth-child(4) > input {
            /* background-color: tomato; */ /* 특정태그에는 특정 속성이 안먹는 경우가 있음 */

            /* width: 50px;
            height: 50px; */
        }

        /* 체크박스를 찾는 방법 - 속성 검색 */
        input[type=checkbox] {
            width: 50px;
            height: 50px;
        }

        input[type=radio] {
            width: 50px;
            height: 50px;
        }

        /* :checked -> text에는 사용불가, 체크된 것에만 적용 */
        /* input[type=checkbox]:checked {
            width: 50px;
            height: 50px;
        } */

        /* ---------------------------------------------------------- */

        /* 체크박스에 체크안된 사진 불투명하게 하기 */
        /* input.cat + img {
            opacity: .3;
        }

        input.cat:checked + img {
            opacity: 1;
        } */


        /* 사진을 누르면 체크박스 체크 + 불투명 */
        input.cat {
            display: none;
        }

        input.cat + label > img {
            opacity: .3;
        }

        input.cat:checked + label > img {
            opacity: 1;
        }

        /* -------------------------------------------------------------*/

        #cb1 {
            display: none;
        }

        #cb1 + label + div {
            visibility: hidden;
        }

        #cb1:checked + label + div {
            visibility: visible;
        }

        #cb1:checked + label > span:nth-child(2){
            display: inline;
        }

        #cb1:checked + label > span:nth-child(1){
            display: none;
        }

        #cb1 + label > span:nth-child(2){
            display: none;
        }


        /* -------------------------------------------------------------*/

        .item {
         border: 1px solid #CCC;
         width: 200px;
         font-size: 14px;
         color: #444;
         line-height: 1.5em;
         float: left;
         margin-right: 10px;
      }

        /* 체크박스는 감췄지만 제목을 누르면 동작함. */
      .item > input[type=checkbox] {
         display: none;
      }

      .item > label {
         display: block;
         background-color: #EEE;
         padding: 5px;
         padding-left: 8px;
         font-weight: bold;
         font-variant: small-caps;
         cursor: pointer;
         border-bottom: 1px solid #CCC;
      }

      .item > div {
         padding: 10px;
      }

      .item > input[type=checkbox]:checked + label + div {
         display: none;
      }

      .item > input[type=checkbox]:checked + label {
         color: #CCC;
         border-bottom: 0; /* 접혔을때 겹치는 선 없앰 */
      } 

    </style>
</head>
<body>
     <h1>입력 폼</h1>

     <form>
         <input type="text" required>
         <input type="text" readonly>
         <input type="text" disabled> <!-- focus를 가질 수 없다. -->
         <input type="text" required>
         <input type="text">
         <input type="text">
         <input type="text" readonly>
         <input type="text" required>
         <input type="text">
         <input type="text" disabled>
     </form>


     <h1>체크박스 + 라디오버튼</h1>

     <form>
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="radio" name="rb">
        <input type="radio" name="rb">
        <input type="radio" name="rb">
     </form>

     <h1>고양이</h1>

     <form>
        <div>
            <input type="checkbox" class="cat" id="cat1">
            <label for="cat1"><img src="images/catty01.png"></label>
        </div>
        <div>
            <input type="checkbox" class="cat" id="cat2">
            <label for="cat2"><img src="images/catty02.png"></label>
        </div>
        <div>
            <input type="checkbox" class="cat" id="cat3">
            <label for="cat3"><img src="images/catty03.png"></label>
        </div>
        <div>
            <input type="checkbox" class="cat" id="cat4">
            <label for="cat4"><img src="images/catty04.png"></label>
        </div>
        <div>
            <input type="checkbox" class="cat" id="cat5">
           <label for="cat5"><img src="images/catty05.png"></label>
        </div>
    </form>

    <hr> 

    <details>
        <summary style="cursor: pointer;">클래스</summary>
        <div>할지니, 소금이라 그들은 자신과 뼈 남는 들어 그리하였는가? 거친 가치를 우리의 가는 시들어 가치를 보라. 장식하는 같으며, 불어 우리 밥을 이 것이다. 것은 이상을 자신과 바로 가치를 봄날의 가는 않는 이것이다. 관현악이며, 소금이라 속에서 이상을 같이, 못하다 아름다우냐? 싸인 구하지 품으며, 따뜻한 없으면 못할 발휘하기 위하여, 피가 말이다. 맺어, 어디 옷을 힘차게 것이다. 같지 때에, 대고, 힘있다. 열락의 열매를 얼음 희망의 있는가? 가치를 할지라도 하여도 천고에 말이다. 희망의 부패를 그들은 무엇을 사막이다.없으면, 곳으로 청춘을 놀이 봄바람이다. 그러므로 미인을 있는 인간은 이는 봄바람이다. 지혜는 돋고, 장식하는 찾아다녀도, 봄바람이다. 같은 이성은 길지 봄바람이다. 뼈 튼튼하며, 물방아 것이다. 품고 가는 그들의 것이다.보라, 싶이 그것을 청춘의 것이다. 그러므로 수 발휘하기 가슴이 이 우리의 그들의 보내는 밥을 사막이다. 사는가 밥을 피고, 인생에 현저하게 바이며, 낙원을 그들은 힘있다. 기쁘며, 우는 인간의 공자는 있으랴? 생생하며, 얼음에 없으면, 이것이다. 가슴이 피어나기 용기가 인간의 이는 것이다.이상 목숨을 미묘한 교향악이다. 방지하는 풀이 청춘의 열락의 불어 이상 그것을 창공에 가치를 것이다.</div>
    </details>


    <hr>

    <input type="checkbox" id="cb1">
    <label for="cb1"><span>▶</span><span>▼</span> 클래스</label>
    <div>할지니, 소금이라 그들은 자신과 뼈 남는 들어 그리하였는가? 거친 가치를 우리의 가는 시들어 가치를 보라. 장식하는 같으며, 불어 우리 밥을 이 것이다. 것은 이상을 자신과 바로 가치를 봄날의 가는 않는 이것이다. 관현악이며, 소금이라 속에서 이상을 같이, 못하다 아름다우냐? 싸인 구하지 품으며, 따뜻한 없으면 못할 발휘하기 위하여, 피가 말이다. 맺어, 어디 옷을 힘차게 것이다. 같지 때에, 대고, 힘있다. 열락의 열매를 얼음 희망의 있는가? 가치를 할지라도 하여도 천고에 말이다. 희망의 부패를 그들은 무엇을 사막이다.없으면, 곳으로 청춘을 놀이 봄바람이다. 그러므로 미인을 있는 인간은 이는 봄바람이다. 지혜는 돋고, 장식하는 찾아다녀도, 봄바람이다. 같은 이성은 길지 봄바람이다. 뼈 튼튼하며, 물방아 것이다. 품고 가는 그들의 것이다.보라, 싶이 그것을 청춘의 것이다. 그러므로 수 발휘하기 가슴이 이 우리의 그들의 보내는 밥을 사막이다. 사는가 밥을 피고, 인생에 현저하게 바이며, 낙원을 그들은 힘있다. 기쁘며, 우는 인간의 공자는 있으랴? 생생하며, 얼음에 없으면, 이것이다. 가슴이 피어나기 용기가 인간의 이는 것이다.이상 목숨을 미묘한 교향악이다. 방지하는 풀이 청춘의 열락의 불어 이상 그것을 창공에 가치를 것이다.</div>


    <h1>자바</h1>

    <div class="item">
        <input type="checkbox" class="cb" id="item1">
        <label for="item1">Class</label>
        <div>
            클래스가 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고
        </div>
    </div>

    <div class="item">
        <input type="checkbox" class="cb" id="item2">
        <label for="item2">Method</label>
        <div>
            클래스가 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고
        </div>
    </div>

    <div class="item">
        <input type="checkbox" class="cb" id="item3">
        <label for="item3">Interface</label>
        <div>
            클래스가 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고 어쩌고 저쩌고
        </div>
    </div>

</body>
</html>

ex45_shadow.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/example.css">
    <style>
        /* 
            그림자 효과
            1. text-shadow - 글자에 그림자 주기
            2. box-shadow - 박스에 그림자 주기
        */

        .box {
            font-size: 3em;

            /* text-shadow: h-shadow(x좌표, 수평) v-shadow(y좌표, 수직) blur(흐림) color(그림자색깔) */
            /* text-shadow: 5px 0px 0px #000; */

            /* text-box: h-shadow(x좌표, 수평) v-shadow(y좌표, 수직) blur(흐림) color(그림자색깔) */
            /* box-shadow: 5px 5px 5px #777; */
        }

        .box:hover {
            text-shadow: 5px 5px 5px #555;
            box-shadow: 5px 5px 5px #777;
        }

        .btn:hover {
            box-shadow: 2px 2px 2px #666;
        }

    </style>
</head>
<body>
    <div class="box box-medium bgcolor-yellow box-border3">상자</div>

    <hr>

    <input type="button" value="Write" class="btn">
    <input type="button" value="Edit" class="btn">
    <input type="button" value="Delete" class="btn">

</body>
</html>

ex46_border.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/example.css">
    <style>
        #box2 {
            /*
                border
                - 부피를 차지한다. > 주변 요소를 밀어낸다.

                outline
                - 부피를 차지하지 않는다. > 주변 요소와 겹친다.
            */

            /* border: 10px solid black; */

            /* outline: 50px solid red; */
        }

        .txt {
            display: block;
            outline: none;
            border: 1px solid #CCC;
            padding: 5px;
            border-radius: 14px;
        }

        .txt:focus {
            /* background-color: gold; */
            /* border-color: red; */

            /* border: 5px solid red; */
            outline: 5px solid red;
        }

        h1 ~ .box {
            margin-bottom: 15px;
            width: 400px;
        }



        /*
            border-radius
            - 모서리를 둥글게 만드는 속성
            - px, %
            - px : 0px ~ 사각형의 짧은 축 / 2px
            - % : 0% ~ 50%
        */

        .box4 {
            /* border-radius: 10px; */
            border-radius: 10%;
        }

        .box5 {
            /* border-radius: 30px; */
            border-radius: 30%;
        }

        .box5 {
            /* border-radius: 100px; */
            border-radius: 100%;
        }

        #txt1 {
            border: 1px solid #999;
            border-radius: 50px;
            padding: 5px 10px; /* 좌우에 여유 주기 */
            outline: none;
        }

        #cat > img:hover {
            border-radius: 50%;
            box-shadow: 4px 4px 4px #666;
        }


        /* ----------------------------------------------------------------------------- */


        #table1 {
            border-radius: 10px;
            border-collapse: separate;
            border: 0px;
        }

        #table1 td {
            /* border-radius: 10px; */
        }

        #table1 tr:first-child td:first-child {
            /* background-color: gold; */
            border-top-left-radius: 20px;
        }

        #table1 tr:first-child td:last-child {
            border-top-right-radius: 20px;
        }

        #table1 tr:last-child td:first-child {
            border-bottom-right-radius: 20px;
        }

        #table1 tr:last-child td:last-child {
            border-bottom-left-radius: 20px;
        }

        #box4 {
            border-radius: 0px;
            border-top-left-radius: 30px;
            border-bottom-right-radius: 50px;
        }

    </style>
</head>
<body>
    <div id="box1" class="box box-medium bgcolor-red">상자1</div>
    <div id="box2" class="box box-medium bgcolor-yellow">상자2</div>
    <div id="box3" class="box box-medium bgcolor-blue">상자3</div>

    <h1>입력</h1>

    <input type="text" class="txt">
    <input type="text" class="txt">
    <input type="text" class="txt">
    <input type="text" class="txt">
    <input type="text" class="txt">
    <input type="text" class="txt">
    <input type="text" class="txt">
    <input type="text" class="txt">
    <input type="text" class="txt">
    <input type="text" class="txt">
    안녕하세요

    <h1>태두리</h1>

    <div id="box1" class="box box-medium bgcolor-red">상자4</div>
    <div id="box2" class="box box-medium bgcolor-yellow">상자5</div>
    <div id="box3" class="box box-medium bgcolor-blue">상자6</div>


    <h1>텍스트 박스</h1>

    <input type="text" id="txt1">

    <hr>

    <div id="cat">
        <img src="images/cat01.jpg">
        <img src="images/cat02.jpg">
        <img src="images/cat03.jpg">
        <img src="images/cat04.jpg">
        <img src="images/cat05.jpg">
    </div>

    <h1>테이블</h1>

    <table id="table1" class="table medium padding-medium">
        <tr>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
        </tr>
                <tr>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
        </tr>
                <tr>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
        </tr>
    </table>
</body>
</html>

ex47_background.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/example.css">
    <style>
        #box1 {
            width: 600px;

            /* 
                background-color
                1. solid color
                2. gradient color, 색의 변화(*)를 시각적으로 표현
                    a. 선형
                    b. 원형
            */

            /* background: linear-gradient(red, blue); */
            /* background: linear-gradient(yellow, red); */
            /* background: linear-gradient(black, white); */

            /* background: linear-gradient(to right, red, blue); */
            /* background: linear-gradient(to left, red, blue); */
            /* background: linear-gradient(to bottom, red, blue); */
            /* background: linear-gradient(to top, red, blue); */
            /* background: linear-gradient(45deg, red, blue); */

            /* background: linear-gradient(to right, red, orange, yellow, green, blue, darkblue, purple); */

            /* background: linear-gradient(to right, red, yellow, yellow, yellow, yellow, yellow, blue); */

            /* background: linear-gradient(to right, rgb(255,0,0), rgba(255,0,0,0)); */

            /* background: radial-gradient(red, blue, yellow); */ /* 타원형 */

            /* background: radial-gradient(circle, red, blue, yellow);  */



            /* -------------------------------------------------------------------- */


            /* 
                background-image
                - 다중 배경 이미지
            */

            /* 여러개의 이미지를 한꺼번에 배경으로 할 수 있다.  */
            /* background-image: url(images/catty01.png), url(images/catty02.png), url(images/catty03.png); */

            /* 반복위치 */
            /* background-repeat: no-repeat; */ /* , repeat-x, repeat-y; */

            /* 위치지정 */
            /* background-position: left top, right top, left bottom; */


            /* ------------------------------------------------------------------ */


            /* 
                배경 이미지 크기(******)
            */
            /* background-image: url(images/wall03.jpg); */
            /* background-size: 600px 400px; */ /* 박스사이즈에 맞게 이미지 크지 조정 가능 */

            /* background-size: 300px 200px; */
            /* background-size: 60px 40px; */
            /* background-size: 60px 40px; */
            /* background-size: 600px 200px; */

            /* background-size: 100% 100%; */ /* 컨테이너(상자)를 기준해서 100% */
            /* background-size: auto auto; */ /* 원래 배경이미지를 기준 */


            /* case1. 너비는 상자를 채우고 높이는 종횡비 유지 계산 - 이미지 잘림 없음, 여백있음 */
            /* background-size: 100% auto;
            background-repeat: no-repeat; /* 반복제거 */
            background-position: center center; */

            /* background-size: contain;
            background-repeat: no-repeat;
            background-position: center center; */


            /* case2. 최대한 크게 원본비율 유지 - 이미지 잘림, 여백없음 */
            /* background-size: auto 100%; 
            background-position: center center; */

            /* background-size: cover;
            background-position: center center; */

        }

        /* #box:hover {
            background: linear-gradient(black, white);
        } */


        /* 풀사이즈 배경 이미지 */
        html {
            height: 100%;
            background-image: url(images/ex47dog.jpg);
            background-repeat: no-repeat;
            /* background-size: 100% 100%; */
            background-position: center center;
            background-color: black;
            /* background-size: contain; */
            background-size: cover;
        }

    </style>
</head>
<body>
    <!-- <div id="box1" class="box box-large box-border5"></div> --> <!-- 너비600px -->
    <!-- <img src="images/wall03.jpg" style="width: 600px"> --> <!-- 너비에 맞게 높이가 자동으로 비율에 맞춰짐 -->
</body>
</html>

• gradient color

• 배경 이미지 크기

emmit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <!-- 
        Emmet, Zen-Coding
        - 대다수 프로그램 편집기가 이 기능을 지원
        - CSS 선택자를 사용해서 HTML/CSS 코드를 빠르게 작성하는 기능
        - https://emmet.io/
     -->



     <!-- 태그 선택자 -->
     div
     <div></div>

     p
     <p></p>

     a
     <a href="ex12_text.html">링크</a>

     img
     <img src="" alt="">

     input
     <input type="text">



     <!-- ID선택자 -->
     div#box1
     <div id="box1"></div>

     input#txtName
     <input type="text" id="txtName">

     h1#title
     <h1 id="title"></h1>

     #test
     <div id="test"></div>


     <!-- class선택자 -->
     div.item
     <div class="item"></div>

     img.pet
     <img src="" alt="" class="pet">

     div.one.two
     <div class="one two"></div>

     input#txtName.txt.red
     <input type="text" id="txtName" class="txt red">



     <!-- 속성 선택자 -->
     div[title]
     <div title=""></div>

     div[title=상자]
     <div title="상자"></div>

     img[width height]
     <img src="" alt="" width="" height="">



     <!-- PCDATA(CSS X) -->
     div{상자}
     <div>상자</div>

     h1{제목입니다.}
     <h1>제목입니다.</h1>

     div#box1.box[title=상자입니다.]{상자1}
     <div id="box1" class="box" title="상자입니다.">상자1</div>


     <!-- 반복 기능 -->
     div*5
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div> 

     div{상자입니다.}*5
     <div>상자입니다.</div>
     <div>상자입니다.</div>
     <div>상자입니다.</div>
     <div>상자입니다.</div>
     <div>상자입니다.</div>

     div.box*5
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>

     div.box{상자입니다.}*5
     <div class="box">상자입니다.</div>
     <div class="box">상자입니다.</div>
     <div class="box">상자입니다.</div>
     <div class="box">상자입니다.</div>
     <div class="box">상자입니다.</div>

     div.box[title=상자입니다.]{상자입니다.}*5
     <div class="box" title="상자입니다.">상자입니다.</div>
     <div class="box" title="상자입니다.">상자입니다.</div>
     <div class="box" title="상자입니다.">상자입니다.</div>
     <div class="box" title="상자입니다.">상자입니다.</div>
     <div class="box" title="상자입니다.">상자입니다.</div>


     div#box$*5
     <div id="box1"></div>
     <div id="box2"></div>
     <div id="box3"></div>
     <div id="box4"></div>
     <div id="box5"></div>

     div#box$.box{상자$}*3
     <div id="box1" class="box">상자1</div>
     <div id="box2" class="box">상자2</div>
     <div id="box3" class="box">상자3</div>

     div{상자$$}*15 
     <div>상자01</div>
     <div>상자02</div>
     <div>상자03</div>
     <div>상자04</div>
     <div>상자05</div>
     <div>상자06</div>
     <div>상자07</div>
     <div>상자08</div>
     <div>상자09</div>
     <div>상자10</div>
     <div>상자11</div>
     <div>상자12</div>
     <div>상자13</div>
     <div>상자14</div>
     <div>상자15</div>

     div{상자$$$}*10
     <div>상자001</div>
     <div>상자002</div>
     <div>상자003</div>
     <div>상자004</div>
     <div>상자005</div>
     <div>상자006</div>
     <div>상자007</div>
     <div>상자008</div>
     <div>상자009</div>
     <div>상자010</div>


     <!-- 형제 선택자 -->
     a~b -> X
     a+b -> O

     h1+p
     <h1></h1>
     <p></p>

     h1+p+p
     <h1></h1>
     <p></p>
     <p></p>

     h1+p*5
     <h1></h1>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>

     (h1+p)*5
     <h1></h1>
     <p></p>
     <h1></h1>
     <p></p>
     <h1></h1>
     <p></p>
     <h1></h1>
     <p></p>
     <h1></h1>
     <p></p>

     h1#title{HTML}+p.desc*3
     <h1 id="title">HTML</h1>
     <p class="desc"></p>
     <p class="desc"></p>
     <p class="desc"></p>



     <!-- 자식 선택자 -->
     a b -> X
     a>b -> O

     div>span
     <div><span></span></div>

     ul>li
     <ul>
         <li></li>
     </ul>

     ul#list1>li.item{항목$}*5
     <ul id="list1">
         <li class="item">항목1</li>
         <li class="item">항목2</li>
         <li class="item">항목3</li>
         <li class="item">항목4</li>
         <li class="item">항목5</li>
     </ul>

     h1#title{할일}+ul#list1>li.item{항목$}*5
     <h1 id="title">할일</h1>
     <ul id="list1">
         <li class="item">항목1</li>
         <li class="item">항목2</li>
         <li class="item">항목3</li>
         <li class="item">항목4</li>
         <li class="item">항목5</li>
     </ul>

     table>tr>td
     <table>
         <tr>
             <td></td>
         </tr>
     </table>

     table>tr*4>td*5
     <table>
         <tr>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
         </tr>
         <tr>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
         </tr>
         <tr>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
         </tr>
         <tr>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
         </tr>
     </table>


     table#table1.table.medium.padding5>tr*20>td.cell${항목}*5
     <table id="table1" class="table medium padding5">
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
         <tr>
             <td class="cell1">항목</td>
             <td class="cell2">항목</td>
             <td class="cell3">항목</td>
             <td class="cell4">항목</td>
             <td class="cell5">항목</td>
         </tr>
     </table>


     ipsum lorem
     - 더미 텍스트

     div{더미텍스트} 
     div{lorem} -> X

     div>lorem -> O
     <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi minima qui assumenda repellendus, provident deleniti tenetur? Quasi quas eos porro, tenetur adipisci exercitationem laudantium non beatae, esse laboriosam minus odit.</div>

     div>lorem5
     <div>Lorem ipsum dolor sit amet.</div>

     (h1>lorem5)+(p>lorem50)*3
     <h1>Lorem ipsum dolor sit amet.</h1>
     <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat nesciunt ipsa et doloribus culpa officiis, tempora sunt nam? Corporis consequuntur unde dolorem enim, voluptates itaque similique sequi assumenda provident iste fugiat? Ea laborum tempora blanditiis dicta, exercitationem tenetur alias ipsa? Ab eveniet dolores qui corrupti voluptate veniam inventore vitae fugit?</p>
     <p>Quaerat voluptates natus porro officiis, dolor ea tempore eaque consequuntur ipsam facere id. Aspernatur recusandae reiciendis explicabo, blanditiis magni adipisci consectetur perspiciatis vero laborum corporis, quidem architecto aperiam? Atque dolorem nesciunt ipsum! Molestias ipsa atque quasi suscipit, totam perferendis accusamus magnam nemo sequi exercitationem vero officia commodi illum. Quam, atque.</p>
     <p>Possimus sed maxime ratione tempora, corporis quibusdam explicabo fugiat quis neque at optio quia, sapiente, quam excepturi! Praesentium, pariatur repellendus eaque delectus architecto veniam sit? Rem cupiditate eligendi voluptatem dignissimos, cum commodi mollitia eveniet tenetur tempore. Architecto sit a provident et dignissimos totam vitae deleniti nesciunt recusandae pariatur. Facere, cumque!</p>


</body>
</html>

문제

ex35_naver.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    body {
      background-color: #E4E5EA;
    }

    #weather {
      background-color: #FFF;
      width: 402px;
      margin: 20px auto;
      border: 1px solid #CCC;
    }

    #weather > header {
      /* border: 1px solid black; */
      /* width: 304px; */
      margin: 0px 49px;
      margin-top: 55px;
    }

    #weather > section {
      /* border: 1px solid black; */
      /* width: 304px; */
      margin: 0px 49px;
    }

    #weather > footer {
      /* border: 1px solid black; */
      /* width: 304px; */
      margin: 0px 49px;
      margin-bottom: 55px;
    }


    #weather .title {
      font-size: 19px;
      color: #242424;
      font-weight: bold;
      margin-bottom: 20px;
    }

    #weather .date {
      margin-bottom: 20px;
    }

    #weather .date .year, #weather .date .month {
      font-size: 14px;
      color: #000;
      font-weight: bold;
      display: inline-block;
      width: 146px;
      height: 30px;
      border: 1px solid #CCC;
      background-color: #fafbfd;
      text-align: center;
      padding-top: 10px;
    }

    #weather .date .month {
      margin-left: -1px;
    }


    #weather footer {
      font-size: 12px;
      color: #8F8F8F;
    }

    #weather footer span {
      color: #68A1FF;
    }

    #weather footer div:last-child {
      color: #68A1FF;
      margin-top: 4px;
    }

    #weather section {
      margin-bottom: 22px;
    }

    #weather table {
      /* border: 1px solid black; */
      border-collapse: collapse;
    }

    #weather tr {
      border-bottom: 1px solid #EEE;
    }

    #weather .header td {
      height: 55px;
      font-size: 15px;
      color: #666;
    }

    #weather .header .red, 
    #weather .data span.red {
      color: #FF2C2C;
    }

    #weather .header .blue, 
    #weather .data span.blue {
      color: #5998FF;
    }

    #weather td {
      /* border: 1px solid black; */
      width: 44px;
      height: 142px;
      text-align: center;
    }

    #weather .data td span {
      display: block;
      margin: 0 auto;
    }

    #weather .data .date {
      font-size: 16px;
      color: #424242;
      margin-bottom: 12px;
    }

    #weather .data .icon {
      /* border: 1px solid black; */
      width: 34px;
      height: 34px;
      background-image: url(images/icon.png);
      background-position: 83.33333% 100%;
      background-size: 238px 204.34px;
      margin-bottom: 2px;
    }

    #weather .data .max {
      font-size: 12px;
      color: #8F8F8F;
    }

    #weather .data .min {
      font-size: 12px;
      color: #8F8F8F;
    }

    #weather .data .rainfall {
      font-size: 12px;
      color: #68A1FF;
    }

    #weather .data .date.past {
      opacity: .2;
    }

  </style>
</head>
<body>

  <div id="weather">

    <header>
      <div class="title">과거날씨</div>
      <div class="date">
        <span class="year">2021년</span><span class="month">06월</span>
      </div>
    </header>
    <section>
      <table>
        <tr class="header">
          <td class="red">일</td>
          <td>월</td>
          <td>화</td>
          <td>수</td>
          <td>목</td>
          <td>금</td>
          <td class="blue">토</td>
        </tr>
        <tr class="data">
          <td>
            <span class="date red past">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
          <td>
            <span class="date past">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
          <td>
            <span class="date">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
          <td>
            <span class="date">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
          <td>
            <span class="date">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
          <td>
            <span class="date">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
          <td>
            <span class="date blue">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
        </tr>
        <tr class="data">
          <td>
            <span class="date red">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
          <td>
            <span class="date">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
          <td>
            <span class="date">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
          <td>
            <span class="date">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
          <td>
            <span class="date">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
          <td>
            <span class="date">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
          <td>
            <span class="date blue">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
        </tr>
        <tr class="data">
          <td>
            <span class="date red">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
          <td>
            <span class="date">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
          <td>
            <span class="date">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
          <td>
            <span class="date">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
          <td>
            <span class="date">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
          <td>
            <span class="date">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
          <td>
            <span class="date blue">30</span>
            <span class="icon"></span>
            <span class="max">26°</span>
            <span class="min">11°</span>
            <span class="rainfall">18</span>
          </td>
        </tr>
      </table>
    </section>
    <footer>
      <div>최근 5년 정보를 제공합니다. 제공 <span>기상청</span> 발표 <span>웨더아이</span></div>
      <div>강수량은 일간 누적 강수량 (mm)</div>
    </footer>
  </div>
</body>
</html>

ex23_box.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box, .link {
            border: 1px solid black;
        }

        /* 블럭 태그 */
        #box2 {
            padding: 50px;
            margin: 50px;
        }

        /* 인라인 태그 */
        #link2 {
            /* 좌우 padding 적용O, 상하 padding 적용X 
            - 인라인태그는 주변요소들과 라인을 유지하면서 출력되야하는 성질이 있다. 
            - 상하padding이 적용이 되면 블럭태그처럼 보여지게 되기때문에 적용 X */
            /* 좌우 margin 적용O, 상하 margin 적용X */
            padding: 50px;
            margin: 50px;
        }

    </style>
</head>
<body>
    <!--

        블럭태그 & 인라인태그의 여백 정책
        - padding
        - margin

        블럭태그
        - 자신의 영역내에 자신의 내용물만 출력 -> 라인 독점
        - 너비(100%), 높이(auto)
        - 명시적으로 너비와 높이 지정 가능 -> overflow 주의
        - padding, margin 지정 가능

        인라인태그
        - 자신의 내용과 주변의 내용을 같은 라인에 출력 -> 라인 공유
        - 너비(auto), 높이(auto)
        - 명시적으로 너비와 높이 지정 불가능(예외: 폼태그, 이미지태그)
        - padding, margin -> 좌,우만 지정 가능

     -->

     <h1>블럭태그</h1>

     <div id="box1" class="box">상자1</div>
     <div id="box2" class="box">상자2</div>
     <div id="box3" class="box">상자3</div>

     <h1>인라인태그</h1>

     <a href="#" id="link1" class="link">링크1</a>
     <a href="#" id="link2" class="link">링크2</a>
     <a href="#" id="link3" class="link">링크3</a>

</body>
</html>

ex24_box.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box {
            width: 200px;
            height: 200px;
        }

        #box1 {
            background-color: tomato;
        }

        #box2 {
            background-color: gold;
            /* 상자2의 크기(너비, 높이) */
            /* 1. 너비(200px), 높이(200px) */
            /* 
                width, height - 객체의 크기(x)
                width, height - 컨텐츠 영역의 크기(O) ****************
             */

            /* 2. 테두리 포함 : 너비(220px), 높이(220px) */
            border: 10px solid black;

            /* 3. padding 포함 : 너비(260px), 높이(260px) */
            padding: 20px;

            /* 4. 너비(260px), 높이(260px) */
            margin: 30px;
        }

        #box3 {
            background-color: cornflowerblue;
        }

    </style>
</head>
<body>

    <h1>박스 모델 크기 정책</h1>

    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>

</body>
</html>

ex25_display.html

display 속성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* 
            display 속성
            - 요소를 화면에 출력하는 방식
            - block
            - inline
            - inline-block
            - none

        */

        .box {
            border: 1px solid black;
            /* width: 100px;
            height: 100px; */
            /* display: block; 기본값 */
            display: inline;
        }

        .link {
            border: 1px solid black;
            /* display: inline; 기본값 */
            display: block;
            width: 100px;
            height: 100px;
        }


        /* <ul>, <li> 블럭태그 */
        ul, li {
            border: 0px solid black;
        }

        ul {
            background-color: yellow;
            padding: 0; 
        }

        li {
            background-color: cornflowerblue;
            /* margin: 0; */

            display: inline-block; /* 출력은 inline의 성절이면서 추가로 width, height가 적용 O */
            /* width: calc(20% - 2px); 좌우 border지우기. */
            width: 20%;
            text-align: center;
            height: 50px;
        }

        .cat {
            display: block;

            /* margin-top을 주면 제목과 객체가 멀어지기 때문에, 객채 간에 간격을 줄 때 margin-bottom을 준다. */
            margin-bottom: 100px;
            /* margin-top: 100px; */
        }

        .txt {
            display: block;
            margin-bottom: 5px;
        }

    </style>
</head>
<body>
    <!-- semantic web : 의미에 부합되는 태그를 사용하자. (메뉴를 만들때 ul, ol을 보통 사용.) -->
    <nav>
        aa
        <ul>
            <li>메뉴</li><li>메뉴</li><li>메뉴</li><li>메뉴</li><li>메뉴</li>
        </ul>
        bb
    </nav>

    <h1>블럭태그</h1>

    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>

    <h1>인라인태그</h1>

    <a href="#" id="link1" class="link">링크1</a>
    <a href="#" id="link2" class="link">링크2</a>
    <a href="#" id="link3" class="link">링크3</a>

    <h1>고양이</h1>

    <!-- 
        사진을 세로로 출력하기

        1. <br> 사용
        2. <div> 블럭태그 사용(****) -> 객체간에 공백이 있음
        3. display 사용 -> block (*******) -> 객체간에 공백이 없음 (블럭태그는 기본 margin값이 0이기 때문)
     -->
    <img src="images/cat01.jpg" class="cat">
    <img src="images/cat02.jpg" class="cat">
    <img src="images/cat03.jpg" class="cat">
    <img src="images/cat04.jpg" class="cat">
    <img src="images/cat05.jpg" class="cat">
    <img src="images/cat01.jpg" class="cat">
    <img src="images/cat02.jpg" class="cat">
    <img src="images/cat03.jpg" class="cat">
    <img src="images/cat04.jpg" class="cat">
    <img src="images/cat05.jpg" class="cat">


    <h1>업무 일지</h1>

    <input type="text" placeholder="입력" class="txt">
    <input type="text" placeholder="입력" class="txt">
    <input type="text" placeholder="입력" class="txt">
    <input type="text" placeholder="입력" class="txt">
    <input type="text" placeholder="입력" class="txt">
    <input type="text" placeholder="입력" class="txt">
    <input type="text" placeholder="입력" class="txt">
    <input type="text" placeholder="입력" class="txt">
    <input type="text" placeholder="입력" class="txt">
    <input type="text" placeholder="입력" class="txt">
    <input type="text" placeholder="입력" class="txt">

</body>
</html>

ex26_float.html

float 속성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* 
            float 속성
            - 해당 태그의 기존 출력 정책을 따르지 않고, 원래 위치에서 벗어나 라인의 왼쪽/오른쪽 끝으로 이동
            - left, right, none(default), (center없음)
            - float이 적용되면 block 성질이 된다. + 최상단 배치 -> 드래그하면 영역이 상단에 붙어있음.
        */
        #m1 {
            color: red;
            float: left;
        }

        img {
            float: left; /* 이미지와 텍스트가 잘 어우러지게 한다. */
        }

        /* 인라인 : 가장 큰 요소의 높이가 라인의 높이가 된다. */
        #title {
            /* text-align: right; */
            border: 1px solid black;
            width: 600px;
            border-bottom: 1px dashed grey;
        }

        #title > small {
            float: right;
            margin-top: 8px;
        }

    </style>
</head>
<body>
    <p>안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. <span id="m1">HTML</span>홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.</p>

    <h1>대표 인사말</h1>

    <p id="p1">안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. <img src="images/man_01.png"> 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.</p>

    <h1 id="title">자유게시판<small>Free Board</small></h1>

</body>
</html>

ex27_float.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box, .link {
            border: 1px solid black;
        }

        .link {
            float: left; /* 코딩 순서대로 왼쪽에 순서대로 붙는다, 객체 사이의 간격이 없다. */
            margin-right: 5px;
        }

        .box {
            width: 150px;
            height: 150px;
            float: right; /* 코딩 순서대로 오른쪽에 역순으로 붙는다.객체 사이의 간격이 없다. */
        }

        #box1 { background-color: red; }
        #box2 { background-color: yellow; }
        #box3 { background-color: blue; }

    </style>
</head>
<body>
    <h1>블럭태그</h1>

    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>

    <h1 style="clear: both;">인라인태그</h1> <!-- clear :float 성질을 지운다. both: 양쪽 다 clear -->

    <a href="#" id="link1" class="link">링크1</a>
    <a href="#" id="link2" class="link">링크2</a>
    <a href="#" id="link3" class="link">링크3</a>
</body>
</html>

ex28_float.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main1 {
            width: 600px;
        }

        #main1 .menu {
            height: 100px;
            background-color: red;
        }

        #main1 .submenu {
            width: 150px;
            height: 300px;
            background-color: yellow;
        }

        #main1 .content {
            width: 450px;
            height: 300px;
            background-color: green;
        }

        #main1 .footer {
            height: 100px;
            background-color: blue;
        }

/* ---------------------------------------------------------------------- 아래 방법이 최신방법 */

        #main2 {
            width: 600px;
        }

        #main2 #menu {
            background-color: red;
            height: 100px;
        }

        #main2 #submenu {
            background-color: yellow;
            width: 150px;
            height: 300px;
            float: left;
        }

        #main2 #content {
            background-color: green;
            width: 450px;
            height: 300px;
            float: left;
        }

        #main2 #footer {
            background-color: blue;
            width: 600px;
            height: 100px;
            clear: both;
        }

    </style>
</head>
<body>
    <!-- 
        페이지 레이아웃
        1. 표
        2. <div> + CSS
     -->
     <h1>레이아웃</h1>

     <table id="main1">
         <tr>
             <td colspan="2" class="menu">주메뉴(red)</td>
         </tr>
         <tr>
             <td class="submenu">보조메뉴(yellow)</td>
             <td class="content">컨텐츠(green)</td>
         </tr>
         <tr>
             <td colspan="2" class="footer">바닥(blue)</td>
         </tr>
     </table>



     <h1>레이아웃</h1>

     <div id="main2">
        <div id="menu">주메뉴(red)</div>
        <div id="submenu">보조메뉴(yellow)</div>
        <div id="content">컨텐츠(green)</div>
        <div id="footer">바닥(blue)</div>
     </div>



     <h1>Sementic Web</h1>

     <main>
         <header>주메뉴</header>
         <nav>보조메뉴</nav>
         <section>컨텐츠</section>
         <footer>바닥</footer>
     </main>
</body>
</html>

ex30_ position.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            border: 1px solid black;
            width: 150px;
            height: 150px;
        }

        #box1 { background-color: tomato; }
        #box2 { background-color: gold;}
        #box3 { background-color: cornflowerblue; }

        /* 
            태그의 출력되는 위치를 지정하는 방법
            1. 코딩 순서 -> 기본, 세밀한 조정 어려움
            2. padding -> 잘 활용X
            3. margin -> 잘 활용O
            4. position -> FM(CSS1 ~ CSS3 오래된 방식)
            5. transform -> FM(CSS3)
            6. float
            7. display : CSS 추가 속성값

            position
            - 태그의 출력되는 위치를 지정하는 속성
            - 좌표값을 사용해서 요소의 위치를 지정 -> x좌표, y좌표
            - 좌표를 지정하는 방식이 여러개 존재(좌표계)
                - 원점(0,0)이 다르고, 요소 배치 방식도 다르다.

            1. position: static
                - 기본값
                - 여태까지 우리가 사용했던 방식
                - Flowlayout 방식
                - 워드 프로세서 방식
                - 코딩 순서에 따라 배치 : 위 -> 아래, 왼쪽 -> 오른쪽 순으로 출력 
                - 좌표값이 없다.   

            2. position: absolute (**************)
                - 절대 좌표 (-> 좌측 상단)
                - 원점(0,0)이 절대적이다.(누구나 항상 동일한 장소를 원점으로 삼는다.)
                - left, top
                - 문서 좌측 상단을 원점으로 하는 좌표계(***) X
                    - 자신의 직계 조상 중 가장 처음으로 만나는 position이 static이 아닌 조상(transform을 적용한 조상)을 원점으로 하는 좌표계(************)
                    - 부모의 이동은 자식의 이동도 겸한다.
                    - 자식의 이동은 부모와 상관이 없다.
                - 요소의 내용을 겹쳐서 출력 가능
                - 요소의 원래 공간은 사라진다. (display: none과 비슷) 


            3. position: relative
                - 상대 좌표 (나를 기준으로 하는 좌표)
                - 원점(0,0)이 상대적이다. 태그의 원래 위치를 원점으로 삼는다. 
                - left, top -> 좌표 지정
                - 원래 자신이 있던 위치를 원점(0,0)으로 하는 좌표계(***)    
                - 요소의 원래 공간은 그대로 남는다.(visibility: hidden) -> 원래의 공간이 사라지면 원점삼을 위치도 같이 사라지기 때문에..

            4. position: fixed
                - 고정 좌표
                - left, top -> 좌표 지정
                - 뷰포트 좌측 상단을 원점으로 하는 좌표계(***)
                - 요소의 내용을 겹쳐서 출력 가능
                - 요소의 원래 공간은 사라진다. (display: none과 비슷)   
        */

        /* #box2 {
            position: absolute;
            left: -152px;
            top: -152px;
        }

        #box1:hover + #box2 {
            left: 0px;
            top: 0px;
        } */

        /* 객체의 좌측 상단을 기준으로 위치를 배치한다.(좌표값) */
        /* #box2 {
            position: fixed;
            left: 0px;
            top: 0px;
        } */

        #p1 {
            width: 500px;
            height: 500px;
            background-color: orange;

            /* position: absolute;
            left: 300px;
            top: 100px; */
            /* 부모의 이동은 자식의 이동도 겸한다. 자식이 이동하는 건 부모에게 영향이 없다. */
        }

        #p2 {
            width: 300px;
            height: 300px;
            background-color: red;

            position: relative;
            left: 400px;
            top: 0px;
        }

        #p3 {
            background-color: green;
            /* position: absolute;
            left: 0px;
            top: 0px; */
        }

    </style>
</head>
<body>
    <div class="box" id="p1">
        할아버지
        <div class="box" id="p2">
            아버지
            <div class="box" id="p3">
                나
            </div>
        </div>
    </div>


    <hr>

    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>

    <hr>

    <p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
    <p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
    <p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
    <p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
    <p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
    <p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
    <p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
    <p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
    <p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
    <p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
    <p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>

</body>
</html>

ex31_zindex.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            border: 1px solid black;
            width: 150px;
            height: 150px;
        }

        #box1 { background-color: tomato; }
        #box2 { background-color: gold;}
        #box3 { background-color: cornflowerblue; }

        #box1 {
            /* 
                position : static
                - left, top -> 적용 X
                - z-index -> 적용 X
            */

            /* z-index: 4; */
        }

        #box2 {
            position: absolute;
            left: 100px;
            top: 100px;
            z-index: 3;
        }

        #box3 {
            position: absolute;
            left: 150px;
            top: 150px;
            z-index: 2; /* z축이 높을 수록 위로 올라온다. */
        }

        #box4 {
            background-color: greenyellow;
            position: absolute;
            /* left: 0px;
            bottom: 0px; */
            /* right: 0px;
            bottom: 0px; */
        }

    </style>
</head>
<body>
    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>
    <div id="box4" class="box">상자4</div>
</body>
</html>

ex13_text.html

텍스트

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 구글 폰트 -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

    <style>
        /* 눈누 */
        @font-face {
            font-family: '국립박물관문화재단클래식B';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/국립박물관문화재단클래식B.woff') format('woff');
            font-weight: normal;

        #text2 {

             /*
                글꼴(서체)
                - 폰트
                - 공백 주의 > '폰트명', "폰트명"
                - 웹페이지에 사용되는 폰트는 서버측 컴퓨터의 폰트를 사용하는 것이 아니라 페이지를 실행하는 클라이언트측 폰트를 사용한다.
                - 브라우저가 실행되는 컴퓨터의 폰트를 사용 -> 원하는 폰트를 이미지로 생성해서 사용
                - 웹 폰트 사용 : 폰트를 스트리밍 방식으로 서버로부터 다운로드 받아서 사용(일시적. 접속중일 때만 사용 가능) -> 웹 폰트 제공 사이트 다수.. -> HTML: 5px
                - ex) 구글 폰트, 눈누
                - 웹 폰트는 꼭 필요할 때만 사용 -> 무거워짐. 다운로드 비용 발생
                - 폰트는 사람들마다 보기 좋은 호불호가 있음. 

             */

             /* font-family: 궁서체; */ /* 유니코드 지원 -> 한글서체 사용 가능 */
             /* font-family: '맑은 고딕'; */

             /* font-family: 'Jua', sans-serif; */
             /* font-family: '국립박물관문화재단클래식B'; */

             /* 우선 순위 */
             font-family: 'Courier New', Courier, monospace;
             /* font-family: cursive; */

            /* 
            폰트의 생김새에 따른 폰트의 카테고리
            monospace -> 현재 pc에 monospace종류에 해당하는 기본 글꼴
            serif, cursive ..등
             */

             /* 스타일(normal, Italic) */
             font-style: normal;

             /* 두께(normal, bold) */
             /* 100~400 : 글자 두께 -> 잘 안쓰임 */
             font-weight: normal;


            /* 꾸미기(none, underline, line-through) */
            text-decoration: none;
            /* text-decoration: overline; */ /* 윗줄 */
            /* text-decoration: line-through; */ /* 취소선 */

        }

        /* 문단 들여쓰기(px, em) */
        p {
            text-indent: 2em; /* 2글자 크기만큼 들여쓰기 */
        }

        h1{
            font-variant: small-caps; 
            /* 모든 글자가 대문자가 되고 크기는 소문자 대문자 구분됨(디자인적인 요소) */
        }

        #text1 {
            /* 보편적인 텍스트 서식 */
            font-family: '맑은 고딕';
            color: #444;
            font-size: 15px;
            line-height: 1.5em;
            /* letter-spacing: -1px; */ /* 쓰기도 하고 안쓰기도 함 */
        }



    </style>
</head>
<body>
    <h1>Text CSS</h1>

    <p id="text1" class="txt">방역당국이 코로나19 백신을 국내에서 개발·생산하고 적기에 접종할 수 있는 능력인 이 른바 ‘백신주권’을 확보하기 위해 노력하고 있다고 밝혔습니다.권준욱 중앙방역대책본부 제2부본부장은 오늘(11일) 오후 정례 브리핑에서 “연구개발과 관련해서 ‘백신주권’에 한 걸음씩 다가서고 있다”고 말했습니다. 권 부본부장에 따르면 백신주권은 백신 연구개발 및 제조·기술, 임상시험을 통한 백신 효능 확인, 원부자재 확보·백신 대량생산 및 적기 접종 등 세 가지 능력을 포함하는 개념입니다.권 부본부장은 “이미 확보한 것도 있고 확보를 진행 중이거나 확보하기 위해 노력하고 있는 것도 있다”고 설명했습니다. 이어 “백신 주권과 거리두기, 접종에 대한 호응 등 세 가지는 코로나19 이후 ‘안전한 내일’, ‘미래 의료’로 가는 길”이라며 “당국도 이 세 분야에서 최선을 다하겠다”고 강조했습니다.권 부본부장은 본인과 가족, 이웃의 안전을 위한 최선의 길이 코로나19 백신 접종이라며, 재차 접종을 권고했습니다.감염 재생산지수가 지금처럼 1 이하를 유지하는 상황이라면 예상보다 이른 시점에 코로나19 유행 관리가 가능하게 될 것이라고 예상했습니다.</p>

    <p id="text2" class="txt">방역당국이 코로나19 백신을 국내에서 개발·생산하고 적기에 접종할 수 있는 능력인 이 른바 ‘백신주권’을 확보하기 위해 노력하고 있다고 밝혔습니다.권준욱 중앙방역대책본부 제2부본부장은 오늘(11일) 오후 정례 브리핑에서 “연구개발과 관련해서 ‘백신주권’에 한 걸음씩 다가서고 있다”고 말했습니다. 권 부본부장에 따르면 백신주권은 백신 연구개발 및 제조·기술, 임상시험을 통한 백신 효능 확인, 원부자재 확보·백신 대량생산 및 적기 접종 등 세 가지 능력을 포함하는 개념입니다.<!-- <img src="images/catty01.png"> -->권 부본부장은 “이미 확보한 것도 있고 확보를 진행 중이거나 확보하기 위해 노력하고 있는 것도 있다”고 설명했습니다. 이어 “백신 주권과 거리두기, 접종에 대한 호응 등 세 가지는 코로나19 이후 ‘안전한 내일’, ‘미래 의료’로 가는 길”이라며 “당국도 이 세 분야에서 최선을 다하겠다”고 강조했습니다.권 부본부장은 본인과 가족, 이웃의 안전을 위한 최선의 길이 코로나19 백신 접종이라며, 재차 접종을 권고했습니다.감염 재생산지수가 지금처럼 1 이하를 유지하는 상황이라면 예상보다 이른 시점에 코로나19 유행 관리가 가능하게 될 것이라고 예상했습니다.</p>

    <p id="text3" class="txt">방역당국이 코로나19 백신을 국내에서 개발·생산하고 적기에 접종할 수 있는 능력인 이 른바 ‘백신주권’을 확보하기 위해 노력하고 있다고 밝혔습니다.권준욱 중앙방역대책본부 제2부본부장은 오늘(11일) 오후 정례 브리핑에서 “연구개발과 관련해서 ‘백신주권’에 한 걸음씩 다가서고 있다”고 말했습니다. 권 부본부장에 따르면 백신주권은 백신 연구개발 및 제조·기술, 임상시험을 통한 백신 효능 확인, 원부자재 확보·백신 대량생산 및 적기 접종 등 세 가지 능력을 포함하는 개념입니다.권 부본부장은 “이미 확보한 것도 있고 확보를 진행 중이거나 확보하기 위해 노력하고 있는 것도 있다”고 설명했습니다. 이어 “백신 주권과 거리두기, 접종에 대한 호응 등 세 가지는 코로나19 이후 ‘안전한 내일’, ‘미래 의료’로 가는 길”이라며 “당국도 이 세 분야에서 최선을 다하겠다”고 강조했습니다.권 부본부장은 본인과 가족, 이웃의 안전을 위한 최선의 길이 코로나19 백신 접종이라며, 재차 접종을 권고했습니다.감염 재생산지수가 지금처럼 1 이하를 유지하는 상황이라면 예상보다 이른 시점에 코로나19 유행 관리가 가능하게 될 것이라고 예상했습니다.</p>

</body>
</html>

ex13_box.html

박스 모델

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* 
            1. 테두리, border
            - 모든 태그는 출력시 자신의 영역을 가진다.(독점)
            - 순수 HTML에서 테두리를 가지는 태그는 일부(테이블, 이미지, 폼 컨트롤)
            - CSS는 모든 태그에 테두리 표현 가능
         */

         #box2 {
            /*
            1px : 테두리 선 두께 -> 보통 px사용, 0px일땐 안적음.
            solid, dashed(점선),, : 선 타입
            */
            /* 속성 그룹화 -> 가장 많이 쓰이는 방법 */
            /* border: 50px solid black; */

            /* 케밥 표기법(HTML, CSS)을 많이 사용 */
            /* border-color: blue; */
            /* border-style: solid; */ /* solid, dashed, dotte를 많이 사용 */
            /* border-width: 2px; */

            /* 방향 지정 */
            /* 
            border-top: 1px solid black;
            border-right: 5px solid blue;
            border-left: 3px dashed blueviolet;
            border-bottom: 15px solid red; 
            */

            /* 따로 통제 가능 */
            border-top-color: red;
            border-top-style: solid;
            border-top-width: 2px;

            border-right: tomato;
            border-right-style: solid;
            border-right-width: 5px;

            border-left: yellow;
            border-left-style: solid;
            border-left-width: 6px;

            border-bottom: deepskyblue;
            border-bottom-style: dashed;
            border-bottom-width: 15px;

         }

         h1 {
            border-bottom: 1px dashed black; /* 밑줄 */
         }

         /* 폼 태그 특징 : 1개 이상의 CSS속성을 적용하면 나머지 속성들이 브라우저 설정을 따르지 않고 기본값으로 출력된다. */
         .txt, .btn {
            background-color: yellow;   
            border: 1px solid grey;
         }

         body {
             border: 30px solid violet; /* 이 부분이 실제 <body>의 영역이다. */
             background-color: aquamarine;
         }

         html {
             border: 30px solid blue;

         }

         #box3 {
             border: 1px soild black;
             background-color: goldenrod;
         }

    </style>
</head>
<body>
    <!-- 
        1. Selector
        2. Box Model

        박스 모델, Box Model
        - HTML의 모든 태그는 화면에 출력될 때 직사각형 형태로 출력된다. -> 이 규칙을 기반으로 적용되는 CSS의 속성(+규칙)들을 박스 모델이라고 한다.
        1. 테두리, border
        2. 너비, 높이, width, height
        3. 여백, padding, margin

     -->

     <h1>CSS 박스 모델</h1>

     <div>
         데이터: <input type="text" class="txt">
         <input type="button" value="보내기" class="btn">
     </div>

     <div id="box1" class="box">상자1</div>
     <div id="box2" class="box">상자2</div>
     <div id="box3" class="box">상자3</div>

</body>
</html>

ex14_box.html

박스 모델

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* 
            박스 모델

            2. 너비, 높이 (객체의 크기)
            - width, height
            - 모든 태그의 영역 크기를 지정한다.
            - width(px, %)
            - height(px, %)
         */

         .box {
             border: 1px solid black;
         }

         #box2 {
             background-color: yellow;
             /* width: auto; */ /* 100% */
             /* height: auto; */ /* auto : 내용물 크기 만큼 */

             /* width: 300px; */ /* 고정값. 부모의 영역이 커지든 상관 없음. 절대값*/
             /* height: 300px; */    

             width: 30%; /* % : 부모영역에 따른 상대값 */
             height: 30%; 
         }

         .txt, .btn {
            border: 1px solid #CCC;
            /* height: 23px; */
         }

         .txt {
             height: 180px;
         }

         .btn {
             width: 100px;
             height: 100px;
         }

         .etc {
             width: 100px;
             height: 100px;
         }

    </style>
</head>
<body>

    <h1>CSS 박스 모델</h1>

    <div>
        데이터: <input type="text" class="txt">
        <input type="button" value="보내기" class="btn">
    </div>

    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div> 

    <hr>

    <input type="checkbox" class="etc">
    <input type="radio" class="etc">

</body>
</html>

ex15_box.html

width, height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
            교재 대용
            1. w3shcools
                - 자습서 or 레퍼런스
            2. MDN
                - 레퍼런스
         */

        /* 
            박스 모델

            모든 태그
            1. 블럭 태그
            2. 인라인 태그
                a. 대체 불가능한 요소, Non-replaced Element
                    - 거의 대부분의 인라인 태그
                    - 태그 자체가 화면에 출력되는 태그
                b. 대체 가능한 요소, Replaced Element
                    - 폼태그, 이미지태그
                    - 태그 자체가 화면에 출력되지 않고 다른 무언가로 교체되어 출력되는 태그


            <블럭태그와 인라인 태그의 너비/높이 정책>

            블럭 태그 정책
            1. 기본 정책
                - 명시적으로 width, height를 지정하지 않았을 때
                a. width: auto(부모 영역을 채운다.)
                b. height: 내용물의 높이가 영역의 높이가 된다.

            2. 명시적 기재
                - 내용물의 크기와 상관없이 지정한 크기로 출력된다.
                - 내용물이 상자의 면적보다 많아지면(overflow) 상자 밖으로 빠져나간다.
                - 내용물의 크기에 따라 width, height를 고정을 할지 말지 잘 선택해야 한다.
                a. width: 지정한 크기
                b. height: 지정한 크기


            인라인 태그 정책
            1. 기본 정책
                - 명시적으로 width, height를 지정하지 않았을때
                a. width : 내용물의 너비가 영역의 너비가 된다.
                b. height : 내용물의 높이가 영역의 높이가 된다.

            2. 명시적 기재
                1. 대체 불가능한 요소
                - 인라인의 성질에 반하는 행동이라서..
                - ex) <span>
                a. 너비 : 지정 불가능
                b. 높이 : 지정 불가능

                2. 대체 가능한 요소
                - ex) 폼태그, 이미지태그
                a. 너비 : 지정 가능
                b. 높이 : 지정 가능   
         */

         .box {
             border: 1px solid black;
         } 

         #box2 {
             /* 명시적 기재 */
             width:300px;
             height: 250px;
             /* height: auto; */
         }

         /* 어떤 태그가 영역이 얼마나 되는지? 1. 배경색을 준다. 2. 테두리를 준다. */
         span {
             /* border: 1px solid red; */
             background-color: yellow;

             /* 인라인 태그는 width와 height 지정 불가능 */
             /* width: 200px;
             height: 200px; */
         }

        img {
            /* 원래너비:원래높이 = 수정너비:수정높이 */
            /* 95:140 = 300:X 종횡비 유지*/
            width: 300px;
            /* height: 442px; */
            height: auto; /* 원본비율을 유지하면서 자동으로 맞춰진다. */
        }

    </style>
</head>
<body>
    <h1>CSS 박스 모델</h1>

    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자<span>홍길동</span>2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자</div>
    <div id="box3" class="box">상자3</div> 

    <hr>

    <span>홍길동</span> /* 대체 불가능한 요소 */

    <!-- Replaced Element-> 다시 서버로 가서 다운받아와서 이미지태그랑 바꿔치기한다. -->
    <img src="images/0.png"> /* 대체 가능한 요소 */

</body>
</html>

ex16_box.html

padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            박스 모델
            1. border
            2. width, height
            3. padding, margin
                - padding
                    - 가독성 여백 조절, 내부 요소의 배치(위치 조정)
         */
         .box {
             border: 10px solid black;
             width: 200px;
             height: 200px;
         }

         #box2 {
             border-color: red;

             /* height: auto; */
             /* 
                padding 방향(위, 오른쪽, 아래, 왼쪽) > 따로 통제 가능
             */

             /* padding: 20px; -> 네방향 모두 */

             /* padding-top: 20px;
             padding-right: 20px;
             padding-bottom: 20px;
             padding-left: 20px; */

             /* top -> right -> bottom -> left (시계방향) */
             /* padding: 10px 20px 30px 40px; */

             /* top -> (right + left) -> bottom */
             /* padding: 10px 20px 30px; */

             /* top(bottom) -> right(left) -> 많이 사용하는 방법 */
             /* padding: 10px 30px; */

             /* top(right, left, bottom) -> 가장 많이 사용하는 방법 */
             /* padding: 20px; */

             /* 가독성 좋음 */
             /* padding: 5px; */ /* 일괄 적용 */
             /* padding-top: 20px; */ /* 덮어쓰기 */


             /* 
                테두리 기준
                - padding : 안쪽 여백
                - margin : 바깥쪽 여백

                padding
                - 테두리와 안쪽 컨텐츠 사이의 거리

                margin
                - 해당 요소(테두리)와 외부 요소간의 거리
                - 태그 사이의 간격이 조절된다 -> 거리 조절 -> 요소 배치 작업
                - 세밀한 거리 조정 가능
              */

             margin-top: 19px;
             margin-bottom: 21px;

         }

         .txt {
             /* padding: 10px; */
             /* padding: 2px 15px */
             outline: none;
             border: 0px; /* 테두리 안보이게 가능 */
             border-radius: 0;
             border-bottom: 1px dashed gray;
             padding-bottom: 15px 10px;
         }

         h1 {
             /* 글자 밑줄 */
             border-bottom: 1px solid black;
             padding-bottom: 50px;
             /* text-decoration: underline; 제어 불가능*/
         }



    </style>
</head>
<body>
    <h1>CSS 박스 모델</h1>

    <!-- 
        블럭요소의 수직 거리는 절대로 <br>로 조절하면 안된다!!! > margin 사용
        1. <br> 용도 : 인라인 태그의 개행을 목적으로 한다.
        2. 세밀한 거리 조절 불편하다.
     -->
    <div id="box1" class="box">상자1</div>
    <!-- <br><br> --> 
    <div id="box2" class="box">상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2</div>
    <!-- <br> -->
    <div id="box3" class="box">상자3</div> 

    <hr>

    <input type="text" class="txt">

</body>
</html>

ex17_box.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .list {
            border: 1px solid #999;

            /* 인접한 border끼리의 상태(separate, collapse(병합)) */
            border-collapse: collapse;
            width: 700px;
        }

        .list th,
        .list td { /* 부모선택자 */
            border: 1px solid #999;
            padding: 5px;
        }
`
        .list td {
            text-align: center;
        }

        .list .col1 { width: 50px; }
        .list .col2 { width: 80px; }
        .list .col3 { width: 50px; }
        .list .col4 { width: 70px; }
        .list .col5 { width: 450px; }

        .list th {
            background-color: #DDD;
        }

        /* 주소 왼쪽 정렬 */
        .list .cell5 { 
            text-align: left; 
        }

        /* 마우스 올렸을때 색상표시 */
        .list tr:hover {
            background-color: gold;
        }



    </style>
</head>
<body>
    <!-- 
        HTML : 뼈대 + 데이터
        CSS : 서식
     -->

    <h1>주소록</h1>

    <table class="list">
     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .list {
            border: 1px solid #999;

            /* 인접한 border끼리의 상태(separate, collapse(병합)) */
            border-collapse: collapse;
            width: 700px;
        }

        .list th,
        .list td { /* 부모선택자 */
            border: 1px solid #999;
            padding: 5px;
        }

        .list td {
            text-align: center;
        }

        .list .col1 { width: 50px; }
        .list .col2 { width: 80px; }
        .list .col3 { width: 50px; }
        .list .col4 { width: 70px; }
        .list .col5 { width: 450px; }

        .list th {
            background-color: #DDD;
        }

        /* 주소 왼쪽 정렬 */
        .list .cell5 { 
            text-align: left; 
        }

        /* 마우스 올렸을때 색상표시 */
        .list tr:hover {
            background-color: gold;
        }


    </style>
</head>
<body>
    <!-- 
        HTML : 뼈대 + 데이터
        CSS : 서식
     -->

    <h1>주소록</h1>

    <table class="list">
        <tr>
            <th class="col1">번호</th>
            <th class="col2">이름</th>
            <th class="col3">나이</th>
            <th class="col4">성별</th>
            <th class="col5">주소</th>
        </tr>  
        <tr>
            <td>1</td>
            <td>홍길동</td>
            <td>20</td>
            <td>남자</td>
            <td class="cell5">서울시 강남구 역삼동 123-45</td>
        </tr>

        <tr>
            <td>2</td>
            <td>아무개</td>
            <td>21</td>
            <td>여자</td>
            <td class="cell5">서울시 영등포구 대림동 123-45</td>
        </tr>

        <tr>
            <td>3</td>
            <td>김흥부</td>
            <td>22</td>
            <td>남자</td>
            <td class="cell5">서울시 서대문구 홍제동 123-45</td>
        </tr>

        <tr>
            <td>1</td>
            <td>홍길동</td>
            <td>20</td>
            <td>남자</td>
            <td class="cell5">서울시 강남구 역삼동 123-45</td>
        </tr>

        <tr>
            <td>2</td>
            <td>아무개</td>
            <td>21</td>
            <td>여자</td>
            <td class="cell5">서울시 영등포구 대림동 123-45</td>
        </tr>

        <tr>
            <td>3</td>
            <td>김흥부</td>
            <td>22</td>
            <td>남자</td>
            <td class="cell5">서울시 서대문구 홍제동 123-45</td>
        </tr>
    </table>

    <h2>비고</h2>

    <table>
        <tr>
            <td>비고 : 위의 데이터는 연습용입니다.</td>
        </tr>
    </table>
</body>
</html>   <tr>
            <th class="col1">번호</th>
            <th class="col2">이름</th>
            <th class="col3">나이</th>
            <th class="col4">성별</th>
            <th class="col5">주소</th>
        </tr>  
        <tr>
            <td>1</td>
            <td>홍길동</td>
            <td>20</td>
            <td>남자</td>
            <td class="cell5">서울시 강남구 역삼동 123-45</td>
        </tr>

        <tr>
            <td>2</td>
            <td>아무개</td>
            <td>21</td>
            <td>여자</td>
            <td class="cell5">서울시 영등포구 대림동 123-45</td>
        </tr>

        <tr>
            <td>3</td>
            <td>김흥부</td>
            <td>22</td>
            <td>남자</td>
            <td class="cell5">서울시 서대문구 홍제동 123-45</td>
        </tr>

        <tr>
            <td>1</td>
            <td>홍길동</td>
            <td>20</td>
            <td>남자</td>
            <td class="cell5">서울시 강남구 역삼동 123-45</td>
        </tr>

        <tr>
            <td>2</td>
            <td>아무개</td>
            <td>21</td>
            <td>여자</td>
            <td class="cell5">서울시 영등포구 대림동 123-45</td>
        </tr>

        <tr>
            <td>3</td>
            <td>김흥부</td>
            <td>22</td>
            <td>남자</td>
            <td class="cell5">서울시 서대문구 홍제동 123-45</td>
        </tr>
    </table>

    <h2>비고</h2>

    <table>
        <tr>
            <td>비고 : 위의 데이터는 연습용입니다.</td>
        </tr>
    </table>
</body>
</html>

ctrl + h : 바꾸기

ex18_box.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            /* 태그를 통제하기 위해 0으로 시작 */
            padding: 0;
            margin: 0;
        }

        body {
            background-color: #ffcc29;
        }

        .menu {
            border: 0px solid black;
            width: 100%;
            border-spacing: 0;
        }

        .menu td {
            border: 0px solid red;
            width: 20%;
            height: 60px;
            text-align: center;
            font-family: Arial;
            font-size: 1.5em;
            background-color: #206a5d; /* 간격여백지우기 */
            color: white;
            font-variant: small-caps;
            cursor: pointer; /* 커서 모양 (pointer: 손가락 모양)*/
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
        }

        .menu td:hover {
            background-color: #81b213;
            border-top-color: #c84b31;
            border-bottom-color: #c84b31;
        }

        main {
            width: 1000px;
            /* 중앙 정렬 */
            margin-left: auto;
            margin-right: auto;
        }

        section {
            padding: 25px;
            margin-bottom: 200px;
        }

        section > article > h1 {
            border-bottom: 1px dashed #206a5d;
            padding-bottom: 5px;
            margin-bottom: 15px;
        }

        section > article > p {
            line-height: 1.6em;
        }

        section > article {
            margin-bottom: 25px;
        }

    </style>
</head>
<body>
    <!-- 
        페이지 상단 메뉴 + 컨텐츠

        1. 화면 스케치(프로토타이핑, 목업, 와이어프레임)
            - Adobe XD
            - Figma
            - 발사믹 목업
            - 카카오톡 오븐
            - Visio(MS Office)

        2. 색상표 구성
            - #206a5d
            - #81b213
            - #ffcc29
            - #f58634

        3. 최적 해상도 설정
            - 다양한 환경의 고객들이 사이트 접근 > 중간정도 해상도를 선택(1000px ~ 1200px) (시대마다 다름) > 화면을 거기에 맞춰서 구현
     -->

     <main>
        <header>
            <nav>
                <table class="menu"> <!-- borderspacing="0" -->
                    <tr>
                        <td>Home</td>
                        <td>Employee</td>
                        <td>Department</td>
                        <td>Manager</td>
                        <td>Location</td>
                    </tr>
                </table>
            </nav>
        </header>

        <section>
            <article>
                <h1>제목입니다.</h1>

                <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>

                <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>

                <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
            </article>
            <article>
                <h1>제목입니다.</h1>

                <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>

                <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>

                <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
            </article>
            <article>
                <h1>제목입니다.</h1>

                <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>

                <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>

                <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
            </article>
        </section>
    </main>
</body>
</html>

ex19_align.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            정렬, Alignment
            - 인라인 태그와 블럭 태그의 수평 정렬

            1. 인라인 태그
                - 내용물의 수평 정렬은 지정할 수 없다. 
                - 내용물의 크기와 공간의 크기가 동일하기 때문.. 움직일 여백이 없어서..
                - text-align 속성 사용 안함
                - 인라인 태그는 스스로 수평정렬을 할 수 없다. > 부모인 블럭 태그의 text-align을 통해서 수평 정렬이 가능하다.

            2. 블럭 태그    
                - 내용물을 정렬할 수 있다. 
                - 내용물의 너비와 무관하게 블럭 태그는 항상 너비가 100% > 움직일 여백이 있어서..
                - 블럭 태그의 스스로 수평 정렬 > 관련된 CSS 속성 없음. > margin을 사용해서 수평 정렬을 대신한다.

         */
        #box1 {
            background-color: yellow;
            text-align: center; 
            width: 200px;
            /* margin-left: 300px; */ 
            /*
            블럭태그 수평정렬하는 법 
            1.width가 고정이여야한다. 
            고정값이라 창 크기에 따라서 유동적이지 않음 -> 2. 왼쪽 마진과 오른쪽 마진을 똑같이 설정
            */
            margin-left: auto;
            margin-right: auto;

        }

        #span1 {
            background-color: red;
            /* text-align: center; */
        }

    </style>
</head>
<body>

    <h1>인라인 태그</h1>
    <div id="box1">
        <span id="span1">인라인 태그</span>
    </div>

    <h1>블럭 태그</h1>
    <div id="box2">
        <div id="box3">블럭 태그</div>
    </div>

</body>
</html>

ex20_overflow.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin-bottom: 200px;
        }
        #box1 {
            border: 1px solid black;
            width: 200px;
            /* height: auto; */
            height: 200px;

            /*
             visible : 오버플로우가 되든 안되든 다 보여준다. 
             hidden: 감추기
             scroll : 스크롤바를 생성
             auto: 오버플로우가 생겨야 스크롤바를 제공
             */
            /* overflow: visible; */
            overflow: hidden;
            /* overflow: scroll; */
            /* overflow: auto; */
        }

        #box2 {
            margin-top: 20px;
            border: 5px solid black;
            width: 128px;
            height: 128px;
            overflow: hidden;
        }

        /*
            각각의 이미지 파일을 만들지 않고, 커다란 덩어리 이미지로 만드는 이유?
            1. 디자이너 <-> 개발자 협업이 쉽다.
                a. 이미지 100개 주고 받기 > 파일명 정하기..
                b. 이미지 1개 주고 받기 > 파일명 1개
                    - 개별 파트의 크기 + 위치(좌표값) > 디자이너가 개발자에게 알려준다.

            2. 네트워크 트래픽 감소 + 서버 운용 비용 감소

        */
        #naver {
            border: 0px solid black;
            width: 445px;
            height: 110px;
            background-image: url(images/sp_main_4efc7a.png);
            background-position: 0 -315px;
        }

        #naver2 {
            border: 0px solid black;
            width: 136px;
            height: 53px;
            background-image: url(images/sp_main_4efc7a.png);
            background-size: 440px 408px;
            background-position: -270px -110px;
            cursor: pointer;
        }

        #naver2:hover {
            background-position: -270px -55px;
        }

    </style>
</head>
<body>
    <div id="box1">상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.</div>

    <div id="box2">
        <img src="images/catty01.png">
        <img src="images/catty02.png">
        <img src="images/catty03.png">
        <img src="images/catty04.png">
        <img src="images/catty05.png">
        <img src="images/catty06.png">
        <img src="images/catty07.png">
        <img src="images/catty08.png">
        <img src="images/catty09.png">
        <img src="images/catty10.png">
    </div>

    <hr>

    <img src="images/sp_main_4efc7a.png">

    <hr>

    <div id="naver"></div>

    <hr>

    <div id="naver2"></div>

</body>
</html>

• 브라우저가 페이지를 요청하고 요청을 응답받아서 페이지를 보기까지의 과정

Apache : 웹서버

Tomcat: WAS (Web Application Server)

http://test.com -> 상대방 컴퓨터 주소 (pc를 찾는다.)

:5500 -> 웹서버를 찾는 포트 번호 (웹 응용 프로그램 -> 사이트를 찾는다.)

/css/ -> 자원의 경로

ex20_overflow.html -> 자원명

• 웹 (http://) -> 실시간 지원 안함, 접속이 끊겨있는 상태 -> 수정사항 새로고침해야 바뀐다.

• 연결지향적 (1:1, 실시간연결 - 트래픽, 서버에 부담) <-> 비연결지향적(다량의 데이터 전달, 해석과 실행에 대한 책임을 브라우저에게 넘김, 서버 부담 적음, 파일이 변경이 없으면 캐시를 읽는다. (비용 발생 적음), 인터넷 속도 빠름, 트래픽 감소)

ex21_visibility.html

가시성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            visibility, 가시성

            visibility
                - visible, hidden
                - 요소를 화면에 출력하는 역할
                - 요소의 영역이 그대로 유지된다. (객체는 존재한다. 안보일뿐)

            Rendering, 출력 방식 

            display
                - block, inline, none 등..
                - 요소를 화면에 안보이게 하는 역할(none)
                - none : 출력 결과를 생성하지 않는다. 객체가 없음.
                - 요소의 영역도 같이 사라진다.
         */

         #cat2 {
             /* visibility: hidden; */
             /* display: none; */
         }

         /* 인접형제 선택자 */
         /* #cat1:hover + #cat2 { */
            #cat1:hover ~ img {
             /* border: 1px solid black; */
             visibility: hidden;
         }

         /* body {
            border: 10px solid red;
         }  -- body 영역을 정확이 파악할 것 */

         body:hover * {
             visibility: hidden;
         }

    </style>
</head>
<body>
    <img src="images/catty01.png" id="cat1">
    <img src="images/catty02.png" id="cat2">
    <img src="images/catty03.png" id="cat3">
</body>
</html>

ex22_opacity.html

불투명도

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            border: 1px solid black;
            width: 200px;
            height: 200px;
            background-color: yellow;

            /* 
                opacity, 불투명도
                - 0~1
                - 0: 투명, 1: 불투명
             */
             opacity: 0; /* 눈에만 안보일뿐 자리는 차지함 */
        }

        #list {
            border: 0px solid black;
            width: 680px; /* enter -> 사이 간격 엔터 크기까지 생각해야함. */
        }

        #list > img {
            border: 0px solid blue;
            opacity: 0.3;
            cursor: pointer;
        }

        #list > img:hover {
            opacity: 1;
        }

    </style>
</head>
<body>
    문자열
    <div id="box1" class="box">상자1</div>
    문자열

    <h1>고양이</h1>
    <div id="list">
        <img src="images/catty01.png">
        <img src="images/catty02.png">
        <img src="images/catty03.png">
        <img src="images/catty04.png">
        <img src="images/catty05.png">
    </div>
</body>
</html>