음... 강의를 들어보니까 예전에 배운거라 그냥 실습을 하면서 공부하는 것이 낫겠다는 생각이 들었다...
그래도 정리한건 아까우니까... (기록...)
섹션1. 기초 HTML
[1-1] HTML 개념 알기
하이퍼텍스트 -> 다른 정보로 접근할 수 있게 도와주는 링크
HTML(HyperText Markup Language)
웹을 이루는 가장 기초적인 구성 요소로, HTML은 웹 페이지의 내용을 서술하고 정의하는 데 사용한다. (태그라는 개념으로 구분)
- html 언어에서는 태그라는 문법적 특성으로 웹 화면의 요소(element)를 표현
요소 = 태그로 이루어짐
HTML의 문법
- 마크업 언어: 언어체계가 모든 것이 태그로 이루어져있음, 태그의 집합으로 어떠한 내용을 표현하는 것
- 여는 태그와 닫는 태그의 한 쌍
- 태그는 중첩될 수 있음
HTML의 기본 구조
- html, head, body 태그
- html 태그는 문서의 시작과 끝
- head 태그는 문서의 메타 정보(문서의 정보)를 정의(사용자에게 보이는 부분이 아님)
- body 태그 안에는 실제 사용자에게 보여질 화면을 구현
크롬 개발자 도구
- 단축키: Ctrl+Shift+I
[1-2] 서식 관련 태그 알아보기
글의 내용을 정의하는 태그들
글의 성격이나 구성을 위해 사용되는 태그로 내용을 강조하거나 문단을 구분, 제목을 지정할 때 사용
=> 글의 내용이나 종류를 나타내는 태그들
- heading(주제) 태그: h1, h2, h3
- paragraph(문단) 태그: p
- break(줄바꿈) 태그: br
- italic(기울임) 태그: i
- strong(강조), bold(굵게 하는 강조) 태그: strong, b
- horizontal rule 태그: hr
heading 태그(크기와 굵기가 달라짐)
제목을 구성할 때 사용되는 태그로 제목의 단계에 따라 h1(대주제)부터 h6(소주제)태그로 나눠진다.
<h1>내용</h1>
paragraph 태그
하나의 문단을 지정할 때 사용되는 태그로 하나의 문단으로 묶여서 화면에 보여진다. (우리가 문서 안에서 작성할 때 엔터키를 이용하여 줄바꿈을 하더라도 무시를 함-> 명시적으로 줄바꿈을 하거나 문단으로 그루핑)
<p>내용</p>
Break 태그
HTML에서는 코드 상에서 줄바꿈을 해도 웹 페이지 상에서는 줄바꿈이 되지 않는다. 줄바꿈을 하려면 break 태그를 사용해서 줄바꿈을 지정해야 한다. br 태그는 닫는 태그 없이 사용 가능한데 이런 태그들을 홀태그라고 한다.
<br> 또는 <br/>
Italic 태그
특정 글자들에 기울임체(이탤릭체)를 적용하고 싶을 때 사용한다.
<i>글자</i>
Strong, bold 태그(굵게 표현됨)
특정 글자들을 강조하고 싶을 때 사용한다.
<b>글자</b>
<strong>글자</strong>
Horizontal rule 태그(내용을 구분할 때 사용 가능)
문서 내에 가로 선을 넣고 싶을 때 사용한다. 홀태그 형태로 하나의 태그만을 사용한다.
<hr>
[1-3] 리스트 태그 알아보기
리스트를 나열하는 태그들
어떠한 항목들을 구분해서 나열하고 싶을 때 사용하는 태그들이다. 여러 개의 li태그를 ol또는 ul 태그로 묶어서 사용한다.
- Ordered list 태그: ol
- Unordered list 태그: ul
- List item 태그: li
Ordered list 태그
순서가 있는 항목들을 나열할 때 사용
<ol> -> 순서가 있는 리스트인지 먼저 명시
<li>사과</li> -> 1. 사과
<li>메론</li> 2. 메론
</ol>
Unordered list 태그
순서가 정해지지 않은 항목들을 나열할 때 사용
<ul>
<li>사과</li>
<li>메론</li>
</ul>
- 사과
- 메론
분리 기호를 바꿀 수도 css에서 없앨 수도 있음
[1-4] 실습: 자기소개 페이지 만들기(Sublime Text 툴 사용)
실습은 간단하다. 예전에 학교 다닐 때 해봐서 쉽게 했다. 복습한다 생각하고 얼른 끝내버려야겠다.
<html>
<head>
</head>
<body>
<h1>자기소개서</h1>
<hr/>
<h3>좋아하는 음식</h3>
<ul>
<li>초밥</li>
<li>갈비</li>
<li>라면</li>
</ul>
<h3>가고싶은 여행지 순위</h3>
<ol>
<li>일본</li>
<li>유럽</li>
<li>대만</li>
</ol>
<h3>나를 소개한다면?</h3>
<p>저는 <i>사람</i>입니다. 저는 <strong>낭만</strong>있습니다. <br/>저는 사람입니다. 저는 낭만있습니다.저는 사람입니다. 저는 낭만있습니다.</p>
<p>저는 10살 때 처음으로 피아노를 배웠습니다. 저는 10살 때 처음으로 피아노를 배웠습니다.저는 10살 때 처음으로 피아노를 배웠습니다.저는 10살 때 처음으로 피아노를 배웠습니다.</p>
</body>
</html>
[1-5] 블록/인라인 요소 알아보기
HTML 요소의 두 형태
화면 영역을 차지하는 형태에 따라 Block과 Inline 형태로 나뉨
- Block: 태그의 내용과 관계 없이 상위 요소의 너비에 맞게 너비를 차지함. 레이아웃 영역을 지정할 때 주로 사용됨
- Inline: 태그의 내용에 맞춰서 너비가 결정됨. 레이아웃에 영향을 주지 않고 일부 내용에만 스타일이나 내용의 구분을 주고 싶을 때 사용
태그(Tag)와 요소(Element)
태그는 HTML의 문법적 규칙이자 코드를 의미, 요소는 실제 웹 페이지 화면에 그려지는 구성 요소들을 의미
보통은 하나의 HTML 태그가 웹 페이지의 요소에 일대일로 연결됨
<h1> 제목입니다.</h1> -> 제목입니다.
(태그) ( 요소)
레이아웃을 정의할 때 그룹 단위로 생각을 많이 함
Block 요소
화면의 레이아웃, 얼개를 짜거나 구성을 나눌 때 자주 사용(그룹핑). 이 요소에 CSS 스타일을 적용해서(크기, 위치 등) 화면의 레이아웃을 완성함
- div: block 요소의 대표적인 태그로 아무 의미를 담지 않는 블록 요소로 아래의 블록 요소들의 상위 개념
(이후 html5가 나오면서 시멘틱 웹이라는 개념 등장)
(어떤 의미가 있는지 유추할 수 있도록 시멘틱한 요소를 넣자해서 나온 태그들)
- section: 서로 다른 내용 구성이 들어갈 영역을 구분하는 블록 요소
- article: 동일한 내용 구성이 반복될 때 구분하기 위한 블록 요소
- header: 본문 내용의 머리말의 영역을 구성하기 위한 블록 요소
- footer: 본문 내용의 바닥글의 영역을 구성하기 위한 블록 요소
Section: 같은 종류의 데이터를 다루고 있지는 않은데 본문에서의 각 레벨이나 중요도가 다 똑같음
Article: 다루는 데이터는 동일한데 병렬적으로 리스트처럼 보여질 때 사용
Inline 요소
화면의 레이아웃에 영향을 미치지 않고 특정 내용을 강조하거나 구분하고 싶을 때 사용. b, i등의 요소가 이에 속하고 대표적인 태그로 span이 있음
- span: (div와 반대되는 개념)아무 의미도 내포하지 않은 대표적인 inline요소. CSS 스타일과 함께 특정 내용을 강조하거나 구분하고 싶을 때 사용.
왜 의미가 부여된 태그를 써야하나?-> Accessibility(접근성, 그거에 맞게 스크린 리더가 읽어주도록...) 그리고 더 나아가서는 검색 엔진 최적화를 위해
블록/인라인 요소의 사용
- section, header 등의 레이아웃 구성을 위한 태그들은 전부 div로 대체해서 사용은 가능하지만 스크린리더 등의 Accessibility를 고려해서 가능하면 의미를 내포하고 있는 태그를 사용할 것을 권장함
- CSS의 스타일 중 display속성을 이용하면 div 등의 기존 block 요소를 위한 태그도 inline 요소로 바꿔서 보여지게 할 수 있고 span 등의 inline 요소도 block 요소로 표현하는 것도 가능함. 하지만 가능하면 기본 형태에 맞게 사용하는 걸 권장함.
[1-6] 하이퍼미디어 태그 알아보기
하이퍼미디어
웹 페이지 내의 미디어를 통해 다른 연관 정보로 넘어갈 수 있게 하는 연결고리. 즉, 링크를 의미
a(anchor) 태그
특정 내용에 링크를 생성할 때 사용한다. href(hyper reference) 속성으로 이동할 리소스를 지정한다. 이동할 리소스는 URL과 같은 웹 페이지 주소나 미디어의 주소가 된다.
(여는 태그에 속성 추가(사용자한테 보여지지 않는 부분에))
<a href = "이동할 url"> 페이지 이동</a> -> 페이지이동
img(image) 태그
이미지를 삽입할 때 사용한다. src(source) 속성으로 이미지의 주소를 지정하면 해당 이미지가 표시된다. 홀태그 형식으로 사용된다.<img src = "표시될 이미지 주소"/> -> 이미지
(만약 이미지를 링크로 만들고 싶다면)
<a href = "주소"><img src = "이미지 주소"/></a>
embed 태그
외부 콘텐츠(mp3, wav 같은 음성파일, mov같은 영상파일, swf 플래시파일)를 삽입할 때 사용된다. 보통 유튜브, 플래시와 같은 외부 미디어 객체를 웹 사이트에 포함시키고 싶을 때 사용한다.
<embed src = "객체의 주소"/>
[1-7] 표 관련 태그 알아보기
표 작성하기
표를 그리기 위해서는 여러 태그를 조합해서 코드를 작성해야 한다.
- table: 표의 시작과 끝
- tr: 표의 하나의 행(row, 테이블 하나에 tr이 4개면 4줄짜리 표)
- th, td: 표의 열
만약 4X3 표가 있을 때,
tr: 4
td: 3x4 =12(tr 태그로 감싸져서 td가 각각 들어가야 하기 때문에)
표 태그의 전체 구조
(2열에 3번 반복되는 표라면)
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
th(table heading)로도 열을 지정하는데 제목칸임
td 대신 th로 바꿔주기만 하면 그 칸은 제목처럼 표시(선이 굵어지고 그 안에 글자를 쓰면 그 글이 자동으로 볼드(굵어짐)가 먹음)
-> 그냥 td하고 css를 사용해도 되기는 한데 th로 지정하게 되면 스크린 리더 같은 애들이 표의 제목이라는 것을 빨리 파악함
(rowspan과 colspan은 td, th에서만 쓸 수 있음)
행 합치기
rowspan: 합칠 행의 수(쓴 만큼 td를 덜 써야함)
<table>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
//이미 위에서 합쳐졌기 때문에 여기는 작성할 필요가 없음
<td></td>
<td></td>
</tr>
</table>
열 합치기
colspan: 합칠 열의 수
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
</table>
'웹' 카테고리의 다른 글
| [강의] 학습중... (0) | 2024.04.24 |
|---|---|
| [React] 정리 (0) | 2024.04.18 |
| [인프런] 웹 개발 시작해봐요 (0) | 2024.03.18 |
