HTML
태그들
기본 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>가장 기본적인 뼈대
텍스트 태그
<p>안녕하세요</p> <!--기본적인 텍스트 입력 태그--!>
<span>hello</span> <!--네모 안에 들어가는 텍스트 태그--!>
<b>식사하셨나요?</b> <!--굵게 강조--!>
<strong>hello</strong> <!--굵게 강조2: "강조"라는 의미를 검색엔진에게 알려준다고 함.--!>
<i>기울이기</i> <!-- 이텔릭 --!>
<cite>hello</cite> <!--이텔릭2: 인용--!>
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
<hgroup>
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
</hgroup>a 태그
<!-- id가 #"~~"에서 "~~"인 특정위치로 이동하기(인덱스 기능)-->
<a href="#javascript">javascript</a>
<!-- 특정 페이지를 지정해서 id가 #"~~"에서 "~~"인 특정위치로 이동하기(인덱스 기능)-->
<a href="html03a.html#javascript">javascript</a>이미지 태그
<img width="150" src="이미지경로" alt="대체텍스트" title="이미지제목">표
<table>
<!-- 행 -->
<tr>
<!-- 열 -->
<td><img width="150" src="이미지경로" alt="대체텍스트" title="이미지제목"></td>
<td><img width="150" src="이미지경로" alt="대체텍스트" title="이미지제목"></td>
<td><img width="150" src="이미지경로" alt="대체텍스트" title="이미지제목"></td>
</tr>
<tr>
<td>이미지에 대한 설명</td>
<td>이미지에 대한 설명</td>
<td>이미지에 대한 설명</td>
</tr>
<tr>
<!-- 열 -->
<td><img width="150" src="이미지경로" alt="대체텍스트" title="이미지제목"></td>
<td><img width="150" src="이미지경로" alt="대체텍스트" title="이미지제목"></td>
<td><img width="150" src="이미지경로" alt="대체텍스트" title="이미지제목"></td>
</tr>
<tr>
<td>이미지에 대한 설명</td>
<td>이미지에 대한 설명</td>
<td>이미지에 대한 설명</td>
</tr>
</table>이런 식으로 이미지를 표 안에 넣어서 예쁘게 만들 수 있다 👍
<td colspan="4">1 2 3</td> <!-- colspan : 몇 개의 열을 합칠 건지 정의할 수 있음. -->CSS
<style>
h1, nav, p{
text-align: center;
}
hr {
width: 450px;
}
#title01{
color: blue;
}
.map{
font-size: 20pt;
}
.info{
font-size: 10pt;
}
</style>- html 안에 style 태그 안에 넣을 수 있다.
- h1, nav, p : id나 class가 지정되지 않은 전체 서식 수정
- #title01 : id가 "title01"인 요소의 스타일 지정
- .map : class가 "map"인 요소들의 스타일 지정
무럭무럭 자라는 개발자와 콩나무 🌱 콩 한 쪽이라도 기록하자! 개발 실력 향상을 위한 백엔드와 머신러닝, 자격증 공부기록