TIL(2023.08.23)

JAKE·2023년 8월 23일

TIL html

TIL

목록 보기

29/48

🏃‍♂️What I learned

1. HTML 시작

HTML : Hypertext Markup Language * hypertext : 웹페이지에서 다른 페이지로 이동할 수 있도록 하는 것
Markup : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 종류

태그 e.g. '<h1>' '</h1>' 여는 태그 닫는 태그가 한 쌍
기본 구성 - html:5

< !DOCTYPE (문서형식 Document Type) > : 현재 문서 형식 지정 -> 현재 문서는 html이다.

< /html >
html 태그 : html문서의 내용을 정의하는 태그 (이안에 코드 작성)
<head></head>
head 태그 : html문서를 정의하는 태그
문서의 제목, 스타일 시트(css), 스크립트(js), 메타데이터(문서의 일반적 정보)

<body></body>
body 태그 : 화면에 보여질 html 문서의 내용을 정의하는 태그

2. 문자 관련 태그

headline 태그 : 1~6까지, 태그하나가 하나의 문단이 됨 (줄바꿈)

<h1></h1> <h6></h6>
중요한 글씨는 headline으로 -> 단순 p태그로 하면 검색인식이 어려움(SEO)

개행 태그(brake) : 닫힘 태그 없음
```
<br/> <br>
```
가로 줄 긋기 태그(horizontal) : 닫힘 태그 없음
띄어쓰기(non-braking space) : html에서 단순 띄어쓰기는 한개만 인식함
& nbsp;
< p >태그(paragraph) : 일단 글 작성 태그 : 종료시 줄바꿈
< p > 안녕하세여 < /p >
pre태그(preformatted text) : 시작, 종료 사이 작성된 문자열 형식 그대로를 출력
```
안녕         하세요
```
b태그(bold) : 단순히 글자 굵게 b 안녕하세요
strong태그 : 글자 강조(웹접근성) strong 안녕하세요
- 웹 접근성
  일반인 뿐만 아니라 장애인, 고령자들을 위한
  서비스를 모두 이용을 보장하는 것 (의무사항)
  e.g. ) 스크린 리더
i태그(italic) : 단순히 글자를 기울임
i 안녕하세요
em태그(emphasized) 글자를 강조하는 태그 + 기울이는 태그(웹접근성)
em 안녕하세요
mark태그 : 형광펜 효과를 나타내는 태그
* style = "background-color: " 에서 색 변경 가능
mark 안녕하세요
u태그(underline) : 밑줄 긋는 태그
u안녕하세요
s태그(strikethrough) : 취소선 태그 도 있음
s - 안녕하세요
~~del -안녕하세요~~
small태그 : 작은 글자 태그
small 안녕하세요
sup태그(superscript) : 윗첨자
sub태그(subscript) : 아랫첨자
supsup 안녕하세요
subsub 안녕하세요
abbr태그(abbreviation) :마우스 오버시 툴팁 태그
안녕하세요

3. 목록 관련 태그

ul태그(unorder list) : 순서없는 목록을 작성하는 태그
ol태그(oredered list) : 순서있는 목록을 작성하는 태그
li태그 : 목록에 들어가는 내용을 작성하는 태그

ul태그 기본값 : disc
style = "list-style-type : ?" 로 변경 가능

ol태그의 기본값 : 1부터 1씩 증가

ol태그의 type속성 *
"1", "a", "A", "i(로마자)", "I(로마자)"

추가 속성
start="5" -> 5부터 시작
reversed -> 반대로

ul 태그 응용

4. 표 관련 태그

table 태그
- 웹 문서에서 자료 정리를 위해 주로 사용하는 태그
- 행과 열로 이루어져 있으며, 행과 열이 교차하는 지점을 셀(cell)이라 칭함
- 행과 열이 작성될 수 있는 영역을 지정
tr 태그(table row) - 한 행을 나타내는 태그
td 태그(table data) - 한 행의 한 컬럼(cell)을 나타내는 태그
th 태그(table header)
- 컬럼명을 나타내는 태그
- 기본 성질은 td와 같음 (디폴트 : 폰트색 red, 가운데 정렬)
caption 태그 - 테이블 제목이나, 설명 내용을 추가하는 태그
행 병합(rowspan), 열 병합(colspan)
- td 또는 th태그에 작성하는 속성
- rowspan : 행 (상하) 병합
- colspan : 열 (좌우) 병합

- thead : 테이블의 상단 영역 (컬럼명)
- tbody : 테이블의 중단 영역 (실제 값, 내용)
- tfoot : 테이블의 하단 영역 (합계)

<h3>회원 정보 예시</h3>

<table border = "1">

    <tr>
        <th width="70px">이름</th>
        <td width="210"></td>
        <th width="140" height="140" rowspan="2">사진</th>
    </tr>

    <tr>
        <th>연락처</th>
        <td></td>
    </tr>

    <tr>
        <th>주소</th>
        <td colspan="2" height="35"></td>
    </tr>

    <tr>
        <th>자기소개</th>
        <td colspan="2" height="140"></td>
    </tr>

</table>