표, table 🔻표 생성 순서 이해하기🔻 [2행 2열 상자 만드는 순서] 1. 큰 틀 하나를 만든다. 2. 가로 길이가 전체 길이와 같고 세로길이는 전체 길이의 1/2인 틀 2개를 만든다. 3. 2에서 만든 틀의 가로길이 1/2, 세로길이는 전체 길이의 1/2인 틀 4개를 만든다. 🔻구성요소🔻 1. 전체 컨테이너 2. table row의 약자 행 역할 3. table data의 약자 셀 역할 4. table header의 약자 표제목을 출력하는 전용 셀 🔻테이블 생성🔻 2행2열 테이블 1 2 3 4 🔻테이블의 크기 조절🔻 width, height 속성으로 조절한다. 2행2열 테이블 1 2 3 4 Q. 전체 너비가 200일 때, 한 셀의 너비를 100으로 설정한다면 사이즈가 반반으로 나눠질까? A. 그렇..
인라인 태그 vs 블럭 태그 모든 태그는 위의 두 분류 중 하나에 속한다. 랜더링의 결과가 다르다. 반드시, 인라인 태그인지 블럭 태그인지 구분하여 사용해야한다. 랜더링(Rendering) 이란 태그를 화면에 출력하는 작업 h1 태그에 속하면 큰 글씨와 굵은 폰트로 출력하는 것 🔻인라인 태그, Inline Tag🔻 자신의 내용물과 주변 태그의 내용물을 같은 라인에 출력한다. 자바의 print()와 같다. PCDATA(텍스트)도 인라인 태그에 속하는 성질을 가진다. 내용물의 크기가 태그의 영역이다.(***) 네이버 구글 다음 문자열 🔻블럭 태그, Block Tag🔻 자신의 내용물과 주변 태그의 내용물을 다른 라인에 출력한다. 자바의 println()과 같다. 내용물의 크기와 상관없이 자신이 속한 라인을 독..
🔻이미지, Image🔻 단독태그 *저작권 없는 이미지 공개 사이트 https://pixabay.com/ 🔻img 속성🔻 1. img.src source의 약자 이미지 파일 url을 넣는다. 이미지 2. img.alt alternate text의 약자 이미지가 에러나서 출력이 안될경우, 이미지를 대신해서 출력할 문자열을 의미한다. 스크린 리더에서 사진을 읽는 역할로 사용된다. 이미지 3. img.width 이미지 너비 설정 ⁉웹 이미지의 크기를 확인하는 방법 이미지 우클릭 후 검사 클릭 오른쪽 검사 창에 사이즈가 나타난다. 4. img.height 이미지 높이 설정 이미지 크기는 파일 크기와 상관이 없다. 5. img.border 테두리 설정 🔻html 속성🔻 1. 필수 속성, Required 반드시 작성..
