kaki1013
3. HTML 기본 요소 본문
# HTML 스타일(Style)
HTML 요소의 style 속성(attribute)을 이용하면 CSS 스타일을 HTML 요소에 직접 설정 가능
But 이러한 style 속성을 이용한 방법은 오직 단 하나의 HTML 요소에만 스타일을 적용 가능
문법
<태그이름 style="속성이름:속성값">
1. 배경색 변경
<h1 style="background-color:white">
style 속성을 이용한 배경색 변경
</h1>2. 글자색 변경
<h1 style="color:maroon">
style 속성을 이용한 글자색 변경
</h1>3. 글자 크기 변경
<h1 style="font-size:250%">
style 속성을 이용한 글자 크기 변경
</h1>4. 문단 정렬 변경
<h1 style="text-align:center">
style 속성을 이용한 문단 정렬 변경
</h1>5. 여러 스타일의 설정
style 속성을 이용하여 여러 CSS 스타일을 한 번에 적용 가능
→ style 속성값에 사용되는 CSS 속성(property)과 속성값들은 세미콜론(;)을 이용하여 구분
→ CSS 속성을 하나만 사용할 때나, 여러 개의 CSS 속성 중 맨 마지막 CSS 속성은 세미콜론(;)을 생략 가능
<h1 style="background-color:white; color:maroon; font-size:150%; text-align:center">
style 속성을 이용하여 한 번에 스타일링 하기!
</h1>
# HTML 색(Color) 표현
1. 색상 이름으로 표현
HTML에서 색상 이름은 대소문자 구분 X
<h1 style="color:blue">색상 이름으로 표현된 파란색</h1>
<h1 style="color:green">색상 이름으로 표현된 녹색</h1>
<h1 style="color:silver">색상 이름으로 표현된 은색</h1>
<h1 style="color:teal">색상 이름으로 표현된 청록색</h1>
<h1 style="color:red">색상 이름으로 표현된 빨간색</h1>2. RGB 색상값으로 표현
RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가짐
<h1 style="color:rgb(0,0,255)">RGB 색상값으로 표현된 파란색</h1>
<h1 style="color:rgb(0,128,0)">RGB 색상값으로 표현된 녹색</h1>
<h1 style="color:rgb(192,192,192)">RGB 색상값으로 표현된 은색</h1>
<h1 style="color:rgb(0,128,128)">RGB 색상값으로 표현된 청록색</h1>
<h1 style="color:rgb(255,0,0)">RGB 색상값으로 표현된 빨간색</h1>3. 16진수 색상값으로 표현
RGB 색상값을 각각 16진수로 변환
→ 각각의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가짐
<h1 style="color:#0000FF">16진수 색상값으로 표현된 파란색</h1>
<h1 style="color:#008000">16진수 색상값으로 표현된 녹색</h1>
<h1 style="color:#C0C0C0">16진수 색상값으로 표현된 은색</h1>
<h1 style="color:#008080">16진수 색상값으로 표현된 청록색</h1>
<h1 style="color:#FF0000">16진수 색상값으로 표현된 빨간색</h1>
# HTML 배경(Background)
HTML 문서의 기본 배경(background)은 흰색
HTML 요소들도 각자 자신만의 배경을 가짐
1. 배경을 다른 색으로 변경
HTML5 이전까지는 bgcolor 속성을 이용하여 HTML 요소의 배경색을 다른 색으로 변경
But HTML5부터는 bgcolor 속성을 더 이상 지원 X → CSS를 이용하여 배경색을 변경
<!-- CSS 스타일을 이용하여 배경색을 다른 색으로 변경 -->
<style>
body { background-color: lightblue; }
h1 { background-color: rgb(255,128,0); }
p { background-color: #FFFFCC; }
</style>1232. 배경을 다른 이미지로 변경
background 속성을 이용하여 HTML 요소의 배경을 이미지(image)로 설정
문법
<태그이름 background="이미지주소"><body background="/examples/images/img_background_good.png">
...
</body>배경으로 이미지를 사용하면 웹 페이지의 로딩시간이 증가
→ 보통은 작은 사이즈의 이미지를 패턴(pattern)으로 만들어 배경 이미지로 반복 설정
# HTML 링크(Link)
오늘날 웹 페이지에는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재
→ 이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 <a>태그로 표현
문법
<a href="링크주소">HTML 링크</a><a>태그의 href 속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시함
<a>태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용 가능
<a href="/html/intro">
<h2>이 링크를 클릭해 보세요!</h2>
</a>
1. target 속성
<a>태그의 target 속성 : 링크로 연결된 문서를 어디에서 열지를 명시
| target 속성값 | 설명 |
| _blank | 링크로 연결된 문서를 새 창이나 새 탭에서 오픈. |
| _self | 링크로 연결된 문서를 현재 프레임(frame)에서 오픈. (기본설정) |
| _parent | 링크로 연결된 문서를 부모 프레임(frame)에서 오픈. |
| _top | 링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 오픈. |
| 프레임(frame) 이름 | 링크로 연결된 문서를 지정된 프레임(frame)에서 오픈. |
<h2><a href="/html/intro" target="_blank">blank</a></h2>
<h2><a href="/html/intro" target="_self">self</a></h2>
<h2><a href="/html/intro" target="_parent">parent</a></h2>
<h2><a href="/html/intro" target="_top">top</a></h2>
<h2><a href="/html/intro" target="myframe">myframe</a></h2>
<iframe name="myframe" style="width:50%; height: 330px"></iframe>2. 링크의 상태(state)
| 링크의 상태 | 설명 |
| link | 아직 한 번도 방문한 적이 없는 상태 (기본설정) |
| visited | 한 번이라도 방문한 적이 있는 상태 |
| hover | 링크 위에 마우스를 올려놓은 상태 |
| active | 링크를 마우스로 누르고 있는 상태 |
웹 브라우저에서 링크가 연결되어 있는 텍스트의 색상
- 기본적으로 링크가 걸린 텍스트는 밑줄에, 텍스트 색상이 파란색으로 변경
- visited 상태의 링크는 밑줄에, 텍스트 색상이 보라색으로 변경
- active 상태의 링크는 밑줄에, 텍스트 색상이 빨간색으로 변경
<style>
a:link { color: teal; }
a:visited { color: maroon; text-decoration: none }
a:hover { color: yellow; text-decoration: none }
a:active { color: red; text-decoration: none }
</style>3. 페이지 책갈피
<a>태그의 name 속성으로 간단한 책갈피를 만들 수 있음
→ 책갈피를 통해 가고 싶은 위치에 <a>태그를 만듦 & name 속성을 작성
→ 작성한 name 속성값을 이용하여 다른 <a>태그에서 링크 걸기
<a href="#bookmark"><p>제목 3으로 갑시다!!!</p></a>
...
<h2><a name="bookmark"></a>제목 3</h2>
# HTML 이미지(Image)
이미지(image) : 2차원 평면 위에 그려진 시각적 요소
1. 이미지의 삽입
HTML 문서에 이미지를 삽입할 때는 <img>태그를 사용
<img>태그는 종료 태그가 없는 빈 태그(empty tag)
문법
<img src="이미지주소" alt="대체문자열">src 속성 : 이미지가 저장된 주소의 URL 주소를 명시
alt 속성 : 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정
<img src="/img_html5_logo.png" alt="이미지가 없나봐요..">2. 이미지의 크기(width, height) 설정
HTML에서는 style 속성을 사용하여 이미지의 크기를 설정 가능
width 속성과 height 속성을 이용하면, 이미지의 너비와 높이를 각각 픽셀(pixel) 단위로 설정 가능
위의 두 가지 방법 모두 HTML5 표준에는 적합한 방법
But CSS를 이용한 내부 스타일 시트나 외부 스타일 시트와 상관없이 이미지의 원래 크기를 유지하려면
→ style 속성을 사용하는 것이 바람직
<style>
img {
width:100%;
border: 1px solid black;
}
</style>
...
<img src="/examples/images/img_flag.png" alt="html size" width="320" height="214">
<img src="/examples/images/img_flag.png" alt="style size" style="width:320px; height:214px">3. 이미지의 테두리(border) 설정
border 속성 : 이미지의 테두리 사용 여부와 굵기를 설정
<img src="/examples/images/img_flag.png" alt="이미지 테두리"
style="width:320px; height:214px; border: 3px solid black">4. 이미지에 링크(link) 설정
이미지에 <a>태그를 이용하여 링크를 설정 가능
<a href="/html/intro" target="_blank">
<img src="/examples/images/img_flag.png" alt="flag" style="width:320px; height:214px">
</a>5. 이미지 맵 만들기
HTML에서는 <map>태그를 이용하여 이미지 맵(image map) 제작 가능
이미지 맵(image map) : 이미지의 일부를 클릭할 수 있도록 만들어서 버튼처럼 사용하는 기능
<img>태그의 usemap 속성을 <map>태그의 name 속성과 연결하면 이미지와 맵사이의 관계가 설정됨
<map>태그는 하나 이상의 <area>태그를 가짐 → <area>태그가 버튼 역할을 수행
<img src="/examples/images/img_imagemap.jpg" alt="진실혹은거짓" usemap="#vending"
style="width:320px; height:240px" />
<map name="vending">
<area shape="rect" coords="90,60,180,130" alt="거짓"
href="https://ko.wikipedia.org/wiki/%EA%B1%B0%EC%A7%93%EB%A7%90">
<area shape="rect" coords="210,200,70,130" alt="진실"
href="https://ko.wikipedia.org/wiki/%EC%A7%84%EC%8B%A4">
</map>
# HTML 리스트(List)
리스트(list) : 여러 요소들을 일렬로 나열한 목록이나 명단
1. 순서가 없는 리스트(unordered list)
<ul>태그로 시작 & 여기에 포함되는 각각의 리스트 요소는 <li>태그로 시작
각각의 리스트 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet)이 위치함
<ul>
<li>사과</li>
<li>멜론</li>
<li>바나나</li>
</ul>
CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경 가능
- disc : 검정색 작은 원 모양 (기본설정)
- circle : 흰색 작은 원 모양
- square : 사각형 모양
<ul style="list-style-type: circle">
<li>수박</li>
<li>참외</li>
<li>옥수수</li>
</ul>
<ul style="list-style-type: square">
...
</ul>2. 순서가 있는 리스트(ordered list)
<ol>태그로 시작 & 여기에 포함되는 각각의 리스트 요소는 <li>태그로 시작
각각의 리스트 요소 앞에는 기본 마커로 아라비아 숫자가 위치함
<ol>
<li>사과</li>
<li>멜론</li>
<li>바나나</li>
</ol>CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경 가능
- decimal : 숫자 (기본설정)
- upper-alpha : 영문 대문자
- lower-alpha : 영문 소문자
- upper-roman : 로마 숫자 대문자
- lower-roman : 로마 숫자 소문자
<ol style="list-style-type: upper-alpha">
<li>수박</li>
<li>참외</li>
<li>옥수수</li>
</ol>
<ol style="list-style-type: lower-alpha">
...
</ol>
<ol style="list-style-type: upper-roman">
...
</ol>
<ol style="list-style-type: lower-roman">
...
</ol>3. 정의 리스트(definition list)
용어와 그에 대한 정의를 모아놓은 리스트
<dl>태그로 시작 & <dt>태그에는 용어의 이름 & <dd>태그에는 해당 용어에 대한 정의
<dl>
<dt>호박</dt>
<dd>- 박과의 한해살이 덩굴성 채소</dd>
<dt>상추</dt>
<dd>- 국화과의 한해살이 또는 두해살이풀</dd>
</dl>
# HTML 테이블(Table)
테이블(Table) : 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표
HTML에서는 <table>태그를 사용하여 테이블 작성 가능
<table>태그는 다음과 같은 태그들로 구성
<tr>태그 : 테이블에서 열을 구분
<th>태그 :각 열의 제목 → 모든 내용은 자동으로 굵은 글씨 + 가운데 정렬
<td>태그 : 테이블의 열을 각각의 셀(cell)로 나누어 줌
<table style="width:100%">
<tr style="background-color:lightgrey">
<th>참치</th>
<th>고래</th>
</tr>
<tr>
<td>상어</td>
<td>문어</td>
</tr>
<tr>
<td>오징어</td>
<td>고등어</td>
</tr>
</table>CSS의 border 속성을 이용하여 테이블에 테두리 표현 가능
border 속성값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리를 가짐
<style>
table, th, td { border: 1px solid black }
</style>위의 예제에서 테이블의 테두리(border)가 두 줄씩 나타나는 이유
→ <table>태그와 <th>태그, <td>태그가 모두 자신만의 테두리를 가지기 때문
위와 같이 두 줄로 표현되는 테두리를 한 줄로 설정하려면 border-collapse 속성을 사용해야 함
border-collapse 속성값을 collapse로 설정하면, 테이블의 테두리를 한 줄로 표현 가능
<style>
table, th, td { border: 1px solid black; border-collapse: collapse }
</style>
1. 테이블의 열 합치기
colspan 속성 : 테이블의 열(column)을 합침
<table style="width:100%">
<tr>
<td>참치</td>
<td colspan="2">고래</td>
</tr>
<tr>
<td>상어</td>
<td>문어</td>
<td>꽁치</td>
</tr>
</table>2. 테이블의 행 합치기
rowspan 속성 : 테이블의 행(row)을 합침
<table style="width:100%">
<tr>
<td rowspan="2">상어</td>
<td>문어</td>
<td>꽁치</td>
</tr>
<tr>
<td>고등어</td>
<td>돌고래</td>
</tr>
</table>3. 테이블의 열과 행 합치기
<table style="width:100%">
<tr>
<td colspan="6">1</td>
</tr>
<tr>
<td colspan="6">2</td>
</tr>
<tr>
<td rowspan="3">3</td>
<td rowspan="3">4</td>
<td colspan="2">5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td colspan="3">8</td>
<td>9</td>
</tr>
<tr>
<td colspan="4">10</td>
</tr>
</table>4. 테이블의 캡션(caption) 설정
<caption>태그 : 테이블 상단에 제목이나 짧은 설명을 붙일 수 있음
<table style="width:100%">
<caption>해양 생물</caption>
<tr>
<td>참치</td>
<td>고래</td>
<td>날치</td>
</tr>
</table>
'버그바운티 스터디 > HTML' 카테고리의 다른 글
| 6. HTML 확장 (0) | 2023.07.06 |
|---|---|
| 5. HTML 입력 양식 (0) | 2023.07.06 |
| 4. HTML 공간 분할 (0) | 2023.07.06 |
| 2. HTML 텍스트 요소 (0) | 2023.07.05 |
| 1. HTML 시작 (0) | 2023.07.03 |
