[HTML] 01. HTML 기초

 

 

태그

 

태그 중 초록색 태그는 요소, 보라색 태그는 속성을 나타낸다.

 

블록 요소 헤딩

 

h1부터 h6까지 있는데 글씨 크기에 따라 나눈 것으로 h1에 가까울수록 큰 글자이고,

h6에 가까울수록 작은 글자를 나타낸다.

그리고 블록 요소라서 웹에서 확인할 때 한줄이 끝까지 다 가있다.

엔터는 태그요소라서 무시되고 엔터대신  를 사용해 공백을 만들 수 있다.

 

- table(테이블) 태그 : 데이터 표를 만드는 태그.
- tr 태그 : 테이블의 행을 만드는 태그.
- th 태그 : 테이블의 열(타이틀-제목)을 만드는 태그.
- td 태그 : 테이블의 열을 만드는 태그.

table 속성 : colspan, rowspan, border, bgcolor, width, height, cellpadding, cellspacing, align, valign 등

● colspan : column span 약자로, 셀(가로줄)을 합치는 개수를 지정
● rowspan : row span이란 뜻으로 셀(세로줄)을 합치는 개수를 지정
● border : 테이블 경계선 굵기를 지정(예: border="10")
● width : 너비를 지정(픽셀이나, %)
● height : 높이를 지정(픽셀이나, %)
● cellpadding : 셀과 경계선 사이의 여백
● cellspacing : 셀과 셀 사이의 여백
● align : 셀의 가로줄을   오른쪽(right), 왼쪽(left), 중앙(center) 등으로 정렬
● valign : 셀의 세로줄의 위(top), 중앙(middle), 아래(bottom)를 정렬
● bgcolor : 배경색 지정
● gcolor : 속성값으로는 색상 이름(예:green)이나, 색상코드(#ff0000) 등을 쓸 수 있음
● bordercolor: 경계선 색깔 지정
● 태그언어 == &gt는 >, &lt는 <
● 줄바꿈 : <br>

 

<a> : 링크요소 <a 어디로가야할지 href(하이퍼 레퍼런스)를 입력해야한다.><a/> - 새로운 html로 이동할 수도 있다.

<img> : <img alt="스크린리더에서 안내되어야할 멘트" src="이미지 파일의 경로"> - 이미지를 불러올 수 있다.

 

스크린리더는 시각장애인들을 위한 멘트이다.

응집도를 높이기 위해 이미지 경로는 폴더를 하나 더 만들어서 관리한다.
이미지 태그를 링크태그로 감싸면 이미지를 링크로 만들 수 있다.

 

리스트

리스트의 종류는 2가지가 있다.

 

<ol>
올더리스트는 방법을 설명하거나, 순서가 중요한 리스트일때 순서대로 나오는 리스트이고
방법을 설명하거나, 순서가 중요한 리스트일때, 활용도가 낮다

<ul>
언올더리스트는 순서가 없다
베스트, 신상품, 상의, 하의

 

 

2024.08.06