<hr /> --> 가로로 선을 긋는 태그 (종료 태그 없음)
<br> --> 줄바꿈 태그로 HTML에서 개행 역할을 한다.
<b>Hello World!</b> --> 굵게 쓰기
<i>Hello World!</i> --> 흝려 쓰기목록 태그
<ol> 순서가 있는 목록을 표현할 때 사용함
<ul> 순서가 없는 목록을 표현할 때 사용함
<li> 목록하위 항목으로 사용되며, <ul>, <ol> 태그의 하위에 위치한다
<dl> 사전처럼 용어를 설명한느 목록을 만듬
<dt> 정의되는 용어의 제목을 넣을 때 사용한다.
<dd> 용어를 설명하는데 사용한다.Table 기본 태그
<table> 표를 만드는 태그, 표 전체를 감싸는데 사용
<caption> 표의 제목이나 설명을 작성하는 태그
<tr> 표의 행을 의미하는 태그 <th>, <td> 태그가 반드시 잇어야함
<th> 표의 제목 열을 의미하는 태그
<td> 표의 일반 열을 의미하는 태그
<colgroup> 열을 그룹으로 묶을 수 있도록 해주는 태그
<col> <colgroup>의 자식으로 열 단위로 나뉠 수 있다.
colspan="2"--> 2개의 열 병합 rowspan="2"--> 2개의
행 병합
<thead> 표의 제목 열들을 묶는 그룹 태그
<tbody> 표의 일반적인 데이터들을 묵는 그룹태그
<tfoot> 표의 하단 영역을 묶는 그룹태그한글 깨짐 방지
<meta charset = "utf-8">이미지 가져오기
<ing src="이미지 주소" width= 300% or height = 200%....>
상위 폴더 --> src="../apple.jpg"
하위 폴더 --> src="하위폴더/apple.jpg"
동일한 폴더 --> src="apple.jpg"
오디오&비디오 태그
controls - 플레이어 화면에 컨트롤 바(재생막대)를 표시합니다.
loop - 오디오나 비디오를 반복 재생합니다.
muted - 오디오나 비디오의 소리를 제거합니다.
poster="파일이름" - <video> 태그에서 사용하는 속서으로, 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정합니다.(섬네일)하이퍼링크 태그
<a> 태그는 href 속성을 사용하여 다른 페이지나 같은 페이지의 특정위치, 파일, 이메일 주소를 연결 할 수 있는 하이퍼링크를 만든다.
target="_blank" 속성을 사용하면 새탭에서 화면을 열 수 있다.
<a href="inner.html">다른 패이지 이동</a>
<a href="inner.html" target="_blank">다른 패이지 이동</a>
- 이미지에 하이퍼링크 걸기
<a href="inner.html"<img src="apple/png" alt="사과" width="200"></a>
- id 속성이 apple인 특정위치로 이동하는 하이퍼링크
<a href="#apple">이동</a>
<div id="apple">사과</div>div vs span
div는 글을 새로운 단락으로 내버리지만 span은 그렇지 않음
- div, span
div, span 둘 다 영역 태그이다.
div는 영역을 분할하며, 컨테이너의 역할도 한다.
span은 영역태그이며, 특정 아이템을 꾸밀때 사용한다. - block vs inline
div는 block level element이다. (전체공간, 세로배치, width&height적용0)
span은 inline level element 이다.(컨텐츠 만큼, 가로배치, width&height 적용X)
클래스와 아이디
-
같은 클래스 이름을 여러 요소가 가질 수 있지만, 같은 아이디를 여러 요소가 공유할 수는 없습니다.
-
한 요소가 여러 클래스를 가질 수 있지만, 한 요소는 하나의 아이디만 가질 수 있습니다. (단, 한 요소가 클래스도 여러 개 갖고 아이디도 하나 가질 수 있습니다!)
여러 요소를 스타일링 하고 싶다면 -> class
한 요소만 스타일링 하고 싶다면 -> id
시맨틱 테그
- 검색엔진 최적화
- 웹 접근성 향상
- 가독성 향상
https://www.w3schools.com/html/html5_semantic_elements.asp
HTML Form 태그
- Form: 양식을 정의하는 구획
- input: 데이터를 입력받는 태그이며 다양한 타입들이 존재
ex) number, date, email, password, checkbox, radio... - textarea, select, datalist, button --> 여러가지 폼 형식
가운데 정렬
margin-right: auto;
margin-left: auto;
1. <style> 태그
<style>
h1 {
color: green;
text-align: center;
}
p {
font-size: 18px;
}
</style>
2. style 속성
<h1 style="color: green; text-align: center;">Hello World!</h1>
<p style="font-size: 18px;">Lorem ipsum dolor sit amet,</p>
3. 외부 CSS 파일 + <link> 태그
css/styles.css
<link href="css/styles.css" rel="stylesheet">텍스트 색 바꾸는 방법
- color: orange(색 이름);
- color: #AC460A(16진법); --> html color code구글링
- color: rgb(172, 70, 10);
텍스트 스타일링
p {
font-size: 32px;
font-weight: 700;
text-align: center;
text-decoration: underline;
// underline: 아랫줄 overline: 윗줄 line-through: 텍스트 통과
}
a{
text-decoration: none; //밑줄 없앰
}
a태그 가운데 정렬 하는 방법 : div로 묶고 class로 가운데 정렬
.google{
text-align: center;
}
<div class="google">
<a href="http://google.com"> 구글로 가는 링크 </a>
</div>li에서 list-styl로 자신의 사진을 가지고 사진의 모습이 바뀌지 않고 사이즈만 변경하여 목록을 나타내는 방법
li{
list-style: none;
}
li::before {
content: '';
display: inline-block;
height: 30px;
width: 30px;
background-image: url("../images/coding.png");
background-size: contain;
background-repeat: no-repeat;
margin-left: -35px;
margin-bottom: -15px;
}그 외...
line-height : 텍스트 뒤 백그라운드의 크기 설정
font-weight: 100 ~ 900 : 폰트 굵기 설정 normal = 400, bold = 700
font-family: "Times New Roman", Times, serif; --> 폰트 설정
구글 폰트로 폰트 설정: https://fonts.google.com/?subset=korean
꿀팁
- ctrl + / --> 주석 처리
<!-- 내용 -->의 형태로 되어 있는 부분이 HTML의 '코멘트(comment)'입니다.
/* 내용 */의 형태로 되어 있는 부분이 CSS의 '코멘트(comment)'입니다.-
크롬 개발자 도구: ... --> 도구 더보기 --> 개발자 도구
-
도움 되는 웹사이트:
모르는거 검색->https://www.w3schools.com/default.asp
모르는거 검색->https://stackoverflow.com/questions
html, css, javascript한번에 사용후 결과 확인->https://jsfiddle.net/
짐코딩의 HTML&CSS 입문
https://gymcoding.notion.site/HTML-CSS-706749085a29449bb066957e56686365
