내가 보려고 만든 블로그
<Web> html 태그 정리 본문
어쩌다 웹만들어야 할 일이 생겼는데 fastapi 이용해서 백단 만드는 것은 얼추 알겠는데. 화면만드는 법을 전혀 몰라서 만들어야 할 것에 있는 html태그들좀 간단하게 정리해보았다.
1. <!DOCTYPE html>
문서형식 html이라고 선언하는 부분. 이게 없으면 브라우저들이 제각각으로 랜더링한다고 한다.
2. <head>
문서에 대한 메타정보 ,css 적용, 인코딩방식, 그리고 title 등을 적용하는 곳 .
2- 1 . <link>
외부 소스와의 관계를 정의할때 쓰인다고한다. 헤드 태그안에만 들어갈 수 있으며 주로 외부 css 입힐때 쓰는 가 봄.
링크 태그안에는 rel , href , integrity , crossorigin이 있는데
rel : 외부소스와 어떤관계인지를 정의
href : 외부 리소스의 url
integrity: sha로 인코딩된 값이 들어있던데 사이트가 변조될경우 이를 확인하는 경우에 사용하는 옵션인거 같다.
crossorigin: cors를 처리하는 방식?? cors 들어는 본 것 같은데 우선 패스 .
3. <body>
문서의 내용에 해당하는 바디
3-1. <section>
독립적으로 화면을 분할? 할 때 사용하는 태그 , 내가 지금 보고있는 html 문서에서는 가장 윗부분이 지금 이걸로 나눠져있다.
3-2. <div>
제일 많이 보이던 태그인데 레이아웃을 나누는데 사용된다고 한다.
div에 사용되는 옵션에는 지금 class, style , align 이 보이는데.
class: 이것도 많이 보던 것인데 class = a 라고하면 a에 적용된 스타일을 전부 바꿀 수 있게 해주는 것.
style : 이건 말그대로 style을 정의하는 것 같다.
align: 이건 'center' 라고 적혀있는데 내용을 정렬 해주는 옵션이라구 한다.
3-3 <h1> , <h2> 등등
구획단계?? 라고 표현을 하는 것 같다. 대, 중 , 소 제목 같은걸 표현 . 들여쓰기로 위치도 표현이 되구나
3-4 <nav>
이런 것들. 문서 내부나 외부와 연결해주는 navigation 역할
nav와 자주 쓰는게 <ul> , <li> 태그가 있는데 요런느낌으로 사용
3-5 <form>
html에서 input 을 받는게 form 이다. 받은 폼을 백엔드 단에 get, post 등을 이용해서 보내줄수있음.
<span> : 이거 지금 감이 잘 안오긴하는데 div 같은 것처럼 구역 나눠주는 느낌인가본데 라인 단위로 적용이 되는 거 같다.
<img> : 이건 이름대로 이미지 가져오는 태그인가 봄. src는 이미지 경로 , alt 는 이미지를 만일 보여줄수없을때 대체할 텍스트
<input>: 사용자로부터 정보를 받는 태그 , type을 지정해줄수 있고 name부분이 넘기는 parameter의 이름이됨. value는 기본값
type - 지금은 텍스트로 되 있는데 옵션이 매우 다양해서 놀랐음. 비밀번호 ,버튼등등 다있구나
placeholder- 기본 텍스트가 적혀있는 부분인 것 같다.
<추가>
value와 place_holder차이가 이거였군.
3-6 <label> , <select> ,  
label : 주로 input 태그와 같이 사용되는 듯. input 에 이름 붙이는 용도.
select: 체크박스 만드는 태그가 select
$nbsp : 띄어쓰기가 이거였음.
3-7 table : 이건 그냥 테이블
<tbody>: 테이블의 바디 , 내용을 정리하는 부분
위와 같이 예시가 있다고 할 때 ,
<tr> 이 가로줄 역할. tr로 먼저 가로줄 만들고
내부에 <th> : th 태그가 헤더에 해당하는 부분. 로 번호 ,이름 만듬
그다음에 <td> 태그 이용해서 내용 채워 넣어 주면 됨 .
colspan 같은 옵션줘서 2칸씩 자리 차지하는 것 도 가능하다 .
<thead> 태그로 제목 지어줄수도 있음.
3-8 <a> 태그
하이퍼링크를 걸어주는 태그라고 한다. href 옵션줘서 링크 연결해주면 됨 .
3-9 <br> 태그
줄바꿈 태그 , 이건 닫는 게 없다고 한다.
3-10 <script>
html 내부에 자바스크립트 코드를 심을 수 있나보다 이 태그를 통해.
text: text/javascript - 자바스크립트 쓴다는 뜻임 html5부터는 안써도된다는데 아래처럼 /main/index로 이동시키는 자바스크립트 코드
'Python | Web > 웹개발' 카테고리의 다른 글
| Asynchronous 에 대한 간단한 정리 (0) | 2023.03.24 |
|---|