8월 13일 TIL

🔥목차🔥

1. HTML 문서 독서 이어서
2. 프로그래밍 구조에 대한 독서 후 정리 이어서
3. 모던 JavaScript 입문 책 정리

📖오늘의 TIL 시작!📖

1. HTML문서 독서후 정리

• HTML 스타일 - CSS

  • CSS는 Cascading Style Sheets의 약자
  • CSS는 한번에 여러 웹 페이지의 레이아웃을 제어할 수 있음
  • CSS(Cascading Style Sheets)는 웹 페이지의 레이아웃 형식을 지정하는 데 사용됨
  • CSS를 사용하면 색상, 글꼴, 텍스트 크기,요소 사이의 간격, 요소가 어떻게 배치되고 배치되는지,어떤 배경 이미지 또는 배경 색상을 사용할지,다양한 장치와 화면 크기에 대한 다양한 디스플레이를 제어할 수 있음

• Tip - 배열 이라는 단어는 상위요소에 적용된 스타일이 상위요소 안에 모든 하위 요소에도 적용됨을 의미함

  • 따라서 본문 텍스트의 색상을 "파란색"으로 설정하면 본문 내의 모든 제목, 단락 및 기타 텍스트 요소도 모두 파란색으로 설정됨

• CSS

• CSS는 3가지 방법으로 HTML 문서에 추가할 수 있음

  • 인라인 - styleHTML 요소 내부의 속성 사용
  • 내부 - 섹션의 style>요소 사용
  • 외부 - link> 요소를 사용하여 외부 CSS파일에 연결

• 인라인 CSS

  • 단일 HTML 요소에 고유한 스타일을 적용하는 데 사용
  • 인라인 CSS는 styleHTML요소의 속성을 사용함

• 내부 CSS

  • 단일 HTML 페이지의 스타일을 정의하는 데 사용
  • 내부 CSS는 요소 head>내의 HTML 페이지에 사용됨

• 외부 CSS

  • 외부 스타일 시트는 많은 HTML페이지의 스타일을 정의하는 데 사용
  • 외부 스타일 시트는 모든 텍스트 편집기에서 작성할 수 있음
  • 파일에는 HTML 코드가 포함되어서는 안되고 .css 확장자로 저장해야함

• CSS 색상, 글꼴 및 크기

  • CSS color속성은 사용할 텍스트 색상을 정의함
  • CSS font-family속성은 사용할 글꼴을 정의함
  • CSS font-size속성은 사용할 텍스트 크기를 정의함

• CSS 테두리

  • CSS border속성은 HTML요소 주위에 테두리를 정의합니다.
  • 거의 모든 HTML 요소에 대해 테두리를 정의할 수 있습니다.

• CSS 패딩

  • CSS padding속성은 텍스트와 테두리 사이의 패딩(공백)을 정의

• CSS 여백

  • CSS margin속성은 테두리 외부의 여백(공백)을 정의

    • 요약
    • style인라인 스타일 에 HTML 속성사용
    • HTML style>요소를 사용하여 내부 CSS 정의
    • HTML link>요소를 사용하여 외부 CSS 파일참조
    • HTML head>요소를 사용하여 style> 및 link> 요소저장
    • color텍스트 색상에 CSS 속성사용
    • font-family텍스트 글꼴에 CSS 속성사용
    • 텍스트 크기 에 CSS font-size 속성사용
    • 테두리에 CSS border 속성사용
    • 테두리 내부공간에 CSS padding속성사용
    • margin테두리 외부공간에 CSS 속성사용

• HTML 링크는 하이퍼링크라고 함

  • 링크를 클릭하면 다른 문서로 이동할 수 있음

• HTML 링크 - 구문

  • HTML a>태그는 하이퍼링크를 정의함
  • 가장 중요한 속성은 링크의 목적지를 나타내는 속성임

• 링크 텍스트는 독자에게 표시되는 부분

  • 링크 텍스트를 클릭하면 리더가 지정된 URL 주소로 전송됨

• HTML링크-대상 속성

  • 기본적으로 링크된 페이지는 현재 브라우저 창에 표시됨
  • 변경하려면 링크에 대해 다른 대상을 지정해야함
  • 속성은 target연결된 문서를 열 위치를 지정함
  • 속성은 target다음 값 중 하나를 가질수있음

    • _self- 기본. 클릭한 것과 동일한 창/탭에서 문서를염
    • _blank- 새 창이나 탭에서 문서를염
    • _parent- 부모 프레임에서 문서를염
    • _top- 창의 전체 본문에서 문서를염

• HTML 링크 색상

  • 기본적으로 링크는 다음과 같이 표시됨(모든 브라우저에서)
  • 방문하지 않은 링크는 밑줄과 파란색으로 표시됨
  • 방문한 링크는 밑줄과 보라색임
  • 활성 링크는 밑줄이 그어져 있고 빨간색임
  • CSS를 사용하여 링크 상태 색상을 변경할수 있음

• HTML 이미지 구문

  • HTML img>태그는 웹 페이지에 이미지를 삽입하는 데 사용됨
  • 이미지는 기술적으로 웹 페이지에 삽입되지 않음
  • 이미지는 웹 페이지에 링크로 삽입함

• img>태그에는 두 가지 필수 속성이 있음

  • src - 이미지의 경로를 지정합니다.
  • alt - 이미지의 대체 텍스트를 지정합니다.

• src 속성

  • 필수 src속성은 이미지의 경로(URL)를 지정합니다.
  • 참고: 웹 페이지가 로드되면 그 순간에 웹 서버에서 이미지를 가져와 페이지에 삽입하는 것은 브라우저임
  • 이미지가 실제로 웹 페이지와 관련하여 동일한 위치에 있는지 확인해야함 그렇지 않으면 사용자에게 깨진 링크 아이콘이 표시됨
  • alt브라우저에서 이미지를 찾을 수 없는 경우 깨진 링크 아이콘과 텍스트가 표시됩니다.

• 대체 속성

  • 필수 alt속성은 사용자가 어떤 이유로 이미지를 볼 수 없는 경우(느린 연결, src 속성의 오류 또는 사용자가 화면 판독기를 사용하는 경우) 이미지에 대한 대체 텍스트를 제공함
  • alt속성 값은 이미지를 설명해야 합니다.
  • 이미지 크기 - 너비 및 높이
  • style속성을 사용하여 이미지의 너비와 높이를 지정 할 수있음

• 요약
• HTML img>요소를 사용하여 이미지 정의
• HTML src속성을 사용하여 이미지의 URL 정의
• HTML alt속성을 사용하여 이미지를 표시할 수 없는 경우 대체 텍스트를 정의합니다.
• HTML width및 height속성 또는 CSS width및 height 속성을 사용하여 이미지 크기 정의

• 이미지 맵

  • HTML map>태그는 이미지 맵을 의미하는 태그임
  • 이미지 맵은 클릭 가능한 영역이 있는 이미지임
  • 영역은 하나 이상의 area>태그로 사용가능
  • 이미지 맵의 기본 개념은 이미지에서 클릭하는 위치에 따라 다른 작업을 수행할 수 있어야 한다는 것
  • 이미지 맵을 만들려면 이미지와 클릭 가능한 영역을 설명하는 HTML 코드가 필요함
  • img>태그 를 사용하여 이미지가 삽입됨 다른 이미지와의 유일한 차이점은 usemap속성을 추가해야 사용 가능하단것
  • usemap값은 해시 태그로 시작하고 그 #뒤에 이미지 맵의 이름이 오고 이미지와 이미지 맵 간의 관계를 생성하는데 사용
    • 그런 다음 map>요소를 추가합니다.

• 요소는 이미지 맵을 만드는 데 사용되며 필수 속성 map>을 사용하여 이미지에 연결됨

• 그런 다음 클릭 가능한 영역을 추가

• 클릭 가능한 영역은 area>요소를 사용하여 구현가능

• 모양

  • 클릭 가능한 영역의 모양을 정의해야 하며 다음 값 중 하나를 선택할 수 있음
  • rect- 직사각형 영역을 정의합니다.
  • circle- 원형 영역을 정의
  • poly- 다각형 영역을 정의합니다.
  • default- 전체 지역을 정의
  • 또한 클릭 가능한 영역을 이미지에 배치할 수 있도록 일부 좌표를 정의해야 함

• "직사각형"
  좌표 shape="rect"는 x축에 대한 좌표와 y축에 대한 좌표가 쌍으로 지정해야함 지정할 사각형의 각 꼭짓점의 좌표를 설정하면됨

• "원"

  • 원 영역을 추가하려면 먼저 원의 중심 좌표를 설정
  • 그런 다음 원의 반지름을 지정함

• "폴리"

  • shape="poly"직선(다각형)으로 구성된 모양을 만드는 여러 좌표점을 설정해야함
  • 모든 모양을 만드는 데 사용할 수 있음
  • 대신 여러좌표점의 좌표를 전부 찾아서 입력해야함

• HTML 요소의 배경 이미지

  • HTML 요소에 배경 이미지를 추가하려면 HTML style속성과 CSS background-image속성을 사용해야함

• HTML 파비콘

  • HTML에 파비콘을 추가하는 방법
  • 원하는 이미지를 파비콘으로 사용할 수 있음
  • 사이트에서 자신만의 파비콘을 만들 수도 있음
  • 웹사이트에 파비콘을 추가하려면 파비콘 이미지를 웹서버의 루트 디렉터리에 저장하거나 루트 디렉터리에 images라는 폴더를 만들어야함
  • 이 폴더에 파비콘 이미지를 저장해야함 파비콘 이미지의 일반적인 이름은 "favicon.ico"임

• HTML 테이블을 사용하면 웹 개발자가 데이터를 행과 열로 정렬할 수 있음

  • HTML의 테이블은 행과 열 내부의 테이블 셀로 구성됨
  • 각 테이블 셀은 td>및 /td>태그로 정의됨
  • 자세한 링크

• 정렬되지 않은 HTML 목록

  • 순서가 지정되지 않은 목록은 ul>태그로 시작함
  • 각 목록 항목은 li>태그로 시작합니다.
    • 목록 항목은 기본적으로 글머리 기호(작은 검은색 원)로 표시됩니다.

• 정렬된 HTML 목록

  • 순서가 지정된 목록은 ol>태그로 시작함
  • 각 목록 항목은 li>태그로 시작합니다.
  • 목록 항목은 기본적으로 숫자로 표시됩니다.
    HTML 설명 목록
  • 태그 는 dl>설명 목록을 dt>정의하고 태그는 용어(이름)를 정의하며 dd> 태그는 각 용어를 설명함

• HTML 블록 및 인라인 요소

  • 모든 HTML 요소에는 요소 유형에 따라 기본 표시 값이 있음
  • 표시 값은 블록과 인라인의 두 가지임

• 블록 수준 요소
  블록 수준 요소는 항상 새 줄에서 시작하고 브라우저는 자동으로 요소 앞뒤에 약간의 공백(여백)을 추가함

  • 블록 수준 요소는 항상 사용 가능한 전체 너비를 차지함(가능한 한 왼쪽과 오른쪽으로 늘어남).

• 일반적으로 사용되는 두 가지 블록 요소는 p> 및 div>두가지가 있음

• p>요소는 HTML 문서의 단락을 정의합니다 .

• HTML elements