'분류 전체보기' 카테고리의 글 목록 (6 Page)

※하이퍼 링크란 다른 페이지나 사이트로 연결하는 링크(문자 또는 이미지)를 말합니다.

A태그를 사용하며 '<a href="사이트 또는 이동할 문서의 위치"> 링크에 사용될 문자 또는 이미지 </a>' 형식으로 사용합니다. 텍스트, 이미지, 버튼 등의 형태에 링크를 걸어 사용할 수 있습니다.

목차

1. A태그의 속성

2. A태그의 사용

3. A태그의 속성 값 변경

1. A 태그의 속성

@<a>

<a>는 'anchor', 즉, '닻'이라는 뜻입니다.

우리는 보통 인터넷 서핑, 웹서핑이라는 말을 많이 사용하는데 인터넷, 정보의 바다를 항해한다고도 표현합니다.

인터넷에서 정보의 바다를 항해하는 것은 대부분 링크를 클릭함으로써 이루어집니다.

그런 의미에서 html에서 링크를 표현하기 위해서 'anchor'의 약자인 <a> 태그를 사용합니다.

@href

링크를 클릭했을 때 이동할 페이지를 href 속성에 표현합니다.

href는 'Hypertext Reference'의 약자입니다.

@target

링크를 클릭했을 때 이동할 페이지를 띄울 위치를 지정해 줍니다.

target의 속성은

_blank : 새 창이나 탭에 링크된 페이지를 보여준다.

_self : 현재 창에 링크된 페이지를 보여준다.

_parent : 부모 프레임에 링크된 페이지를 보여준다.

_top : 해당 프레임을 포함한, 최고 상단 페이지에 링크된 페이지를 보여준다.

페이지를 띄울 프레임 이름 : 사용자가 지정한 프레임에 링크된 창을 띄운다.

정리하면 아래와 같은 구조로 사용하게 됩니다.

'<a href="사이트 또는 이동할 문서의 위치" target="페이지를 띄울 위치"> 링크에 사용될 문자 또는 이미지 </a>'

2. A태그의 사용

@코드로 보기

위와 같이 작성하게 되면 '네이버로 이동'이란 텍스트를 클릭하면 '_blank' 값에 의해 새창으로 네이버가 연결되게 됩니다.

또는 이미지를 넣어주고 이미지를 클릭시 이동할 수 있도록 링크를 걸 수도 있습니다.

3. A태그의 속성 값 변경

하이퍼링크는 기본적으로 방문이 되지 않았을 때에는 파란색, 방문이 되었을 때는 자주색으로 표현되며 밑줄을 가지고 있습니다. 기능적으로 편리하기는 하나 보기에 좋지 않은 경우가 많은데 그러한 속성 값들을 변경하는 방법들을 알아보겠습니다.

@ text-decoration-line 속성 (하이퍼링크 밑줄 없애기)

text-decoration-line 속성은 선이 생성되는 위치를 변경하는 값입니다.

주로 하이퍼링크의 밑줄을 없애기 위해서 'text-decoration-line' 속성을 none으로 지정하여 사용합니다.

text-decoration-line 속성은 다음의 4가지 값을 가질 수 있습니다.

none : 선 없음
underline : 밑줄
overline : 윗줄
line-through : 취소선

밑줄과 윗줄, 취소선을 동시에 적용할 수도 있습니다.

@코드로 보기

<style>

a {

text-decoration-line: none;

}

</style>

위와 같이 <style></style> 탭에 a태그에 대한 설정 값을 넣어 주거나

@코드로 보기

a태그 안에 직접 속성값을 넣어주시면 됩니다.

@ text-decoration-style 속성

text-decoration-style 속성은 선의 모양을 바꾸기 위하여 사용합니다.

text-decoration-style 속성은 다음의 5가지 값을 가질 수 있습니다.

사용방식은 text-decoration-line 속성의 방식과 같습니다.

실선　text-decoration-style: solid;
점선　text-decoration-style: dotted;
굵은 점선 text-decoration-style: dashed;
이중선　text-decoration-style: double;
물결선　text-decoration-style: wavy;

저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

비주얼스튜디오 코드(Visual Studio Code)의 FORM_INPUT과 BUTTON (0)	2023.02.21
비주얼스튜디오 코드(Visual Studio Code)의 FORM (0)	2023.02.20
비주얼스튜디오 코드(Visual Studio Code)의 LIST (0)	2023.02.18
비주얼스튜디오 코드(Visual Studio Code)의 TABLE (0)	2023.02.17
비주얼스튜디오 코드(Visual Studio Code)의 기본코드 (0)	2023.02.16

※리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미합니다.
HTML에서는 여러 요소들을 일렬로 나열한 목록이나 명단을 표현할 수 있는 태그를 제공하고 있습니다.

STYLE 속성을 이용하여 다양한 속성 부여도 가능합니다. CSS를 활용하여 다양한 연출이 가능하며 TABLE 태그와 같이 많이 사용되는 태그 중 하나입니다. CSS를 활용한 방법들은 다음 시간에 정리하도록 하고 기본적이 LIST태그에 대해서 알아보겠습니다.

목차

1. <ul></ul> 순서가 없는 목록

2. <ol></ol> 순서가 있는 목록

3. <dl></dl> 정의 목록

1. <ul></ul> 순서가 없는 목록

UNORDERED LIST의 약자로 HTML에서 순서가 없는 목록은 <ul> 태그로 시작하며, 여기에 포함되는 각각의 목록 요소는 <li> 태그로 시작된다. 각각의 목록 요소 앞에는 기본적으로 글머리 기호인 검은색의 작은 원(bullet)이 표시된다.

TYPE 값을 변경하여 목록 기호를 변경할 수 있다.

*list-style-type:none; 값으로 지정하면 기호를 표시하지 않을 수도 있다.

disc	검정색 작은 원 모양 (기본설정)
circle	흰색 작은 원 모양
square	사각형 모양
none	아무 모양도 없음.

@코드로 보기

</ul>

@결과

2. <ol></ol> 순서가 있는 목록

ORDERED LIST의 약자로 순서가 있는 HTML 목록은 <ol> 태그로 시작하며, 여기에 포함되는 각각의 목록 요소는 <li> 태그로 시작된다. 각각의 목록 요소 앞에는 기본 마커로 아라비아 숫자가 표시된다.

TYPE 값을 변경하여 목록 기호를 변경할 수 있다.

*list-style-type:none; 값으로 지정하면 기호를 표시하지 않을 수도 있다.

list-style-type 속성

decimal : 숫자 (기본설정)
upper-alpha or A : 영문 대문자
lower-alpha or a : 영문 소문자
upper-roman or I : 로마 숫자 대문자
lower-roman or i : 로마 숫자 소문자

@코드로 보기

</ol>

@결과

또는

@코드로 보기

</ol>

@결과

3. <dl></dl> 정의 목록

DEFINITION LIST의 약자로 HTML은 설명 목록이라고 해서 정의 리스트를 지원하는데, 용어와 그에 대한 정의를 모아놓은 목록으로써 <dl> 태그로 표시한다. <dt> 태그에는 용어의 이름이 들어가고, <dd> 태그에는 해당 용어에 대한 정의가 들어간다.

<dd> 태그 영역은 자동으로 들여 쓰기가 적용된다.

@코드로 보기

<dl>

</dl>

@결과

저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

비주얼스튜디오 코드(Visual Studio Code)의 FORM (0)	2023.02.20
비주얼스튜디오 코드(Visual Studio Code)의 하이퍼링크 (0)	2023.02.19
비주얼스튜디오 코드(Visual Studio Code)의 TABLE (0)	2023.02.17
비주얼스튜디오 코드(Visual Studio Code)의 기본코드 (0)	2023.02.16
비주얼스튜디오 코드(Visual Studio Code) 설정 및 단축키 모음 (0)	2023.02.15

※ <table> 태그는 데이터를 포함하는 셀(cell)들의 행과 열로 구성된 2차원 테이블을 정의합니다.

테이블은 <table> 요소와 자식 요소인 하나 이상의 <tr>, <th>, <td> 요소들로 구성됩니다.

<tr> 요소는 테이블의 각 행(row), <th> 요소는 각 열의 제목, <td> 요소는 하나의 테이블 셀(cell)을 정의합니다.

또한, <caption>, <col>, <colgroup>, <thead>, <tfoot>, <tbody>과 같은 요소들을 사용하여 좀 더 복잡한 테이블을 정의할 수도 있습니다.

목차

1. 속성

2. 기본 구조

1. 속성

@속성명 속성값설명

table	table전체를 감싸는 태그
caption	table의 제목이나 설명을 작성하는 태그. 테이블 가로폭의 가운데 오는 것이 기본
tr	테이블의 행을 의미하는 태그. 자손으로 th나 td가 반드시 있어야 한다.
th	테이블의 제목 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다. css기본값은 글자가 굵게 처리되고 셀에서 가로 가운데 정렬.
td	테이블의 일반 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다. css기본값: 왼쪽정렬

align	left center right	주변 텍스트에 따른 테이블의 정렬 방법을 명시함.
background-color bgcolor	rgb(x,x,x) #xxxxxx 색상명	테이블의 배경색을 명시함.
border	1 0	테이블의 레이아웃 용도로 사용되는 테두리를 사용할지 않을지를 명시함.
cellpadding	픽셀	셀(cell)에서 콘텐츠와 셀 경계 사이의 공간을 명시함.
cellspacing	픽셀	셀(cell)과 셀 사이의 공간을 명시함.
frame	void above below hsides lhs rhs vsides box border	테이블에서 보이는 바깥쪽 테두리 부분을 명시함.
rules	none groups rows cols all	테이블에서 보이는 안쪽 테두리 부분을 명시함.
summary	텍스트	테이블 콘텐츠의 개요를 명시함.
width	픽셀 %	테이블의 너비를 명시함.

colspan	같은 행의 칸들을 병합할 때 사용. ex) <td colspan="칸수">
rowspan	다른 행의 칸들을 병합할 때 사용. ex)<td rowspan="칸수">

colgroup	열을 그룹으로 묶을 수 있도록 해주는 태그
col	colgroup의 자손으로 열단위를 나눌 수 있다. span속성을 사용하여 몇 열을 그룹으로 묶을지 설정 ex) <col span="3"> => 3열을 그룹으로 묶음

2. 기본 구조

@코드로 보기

<!DOCTYPE html>

<head>

<title>board</title>

<style>

table {

border: 1px solid black;/* 표 테두리 (1px의 굵기 / 실선 / 검정색 )*/

border-collapse: collapse;/*테두리 1줄만 표시*/

}

th, td {

border: 1px solid black;

padding: 10px;/*셀 안쪽의 여백(패딩)*/

text-align: center;/*가운데 정렬*/

font-size: 10px;/*폰트 사이즈*/

}

th {

background-color: gray;/*th 열만 배경색 지정*/

}

</style>

</head>

<body>

<table>

</tr>

</tr>

</tr>

</table>

</body>

</html>

@결과

위에 같이 기본적으로는 <style></style> 탭 내에 테이블에 대한 기본 속성 값을 지정하여 주고 , <body></body> 탭에서는 테이블의 구조와 내용만 작성하는 형식을 주로 사용하며 '내용 6' 셀과 같이 인라인 스타일로 직접 속성값을 지정하여 주는 방식도 있습니다. CSS파일로 속성 값들을 따로 관리하는 방법은 나중에 따로 정리하도록 하겠습니다.

저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

비주얼스튜디오 코드(Visual Studio Code)의 하이퍼링크 (0)	2023.02.19
비주얼스튜디오 코드(Visual Studio Code)의 LIST (0)	2023.02.18
비주얼스튜디오 코드(Visual Studio Code)의 기본코드 (0)	2023.02.16
비주얼스튜디오 코드(Visual Studio Code) 설정 및 단축키 모음 (0)	2023.02.15
비주얼스튜디오 코드(Visual Studio Code) 다운로드 및 설치방법 (0)	2023.02.15

※이번 시간에는 비주얼스튜디오코드(Visual Studio Code)의 기본적인 구조와 태그들에 대해서 알아보겠습니다.

우선 전체적인 태그들과 해당하는 옵션들을 파악해 보면서 사용방법과 활용에 대해서는 다음 시간에 정리하도록 하겠습니다.

목차

1. 기본 구조

2. 블록 레벨 요소

3. 기본 태그

1. 기본 구조

@코드로 확인

 이 부분은 주석입니다.

<!DOCTYPE html>

<title>Document</title>

</head>

<body>

</body>

</html>

2. 블록 레벨 요소

<header> : 1.HTML 문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색등의 내용들을 포함할 수 있다.
2. 텍스트, 인라인 요소, 블록레벨 요소를 포함할 수 있지만 < header >, < footer > 태그는 포함할 수 없음.

<section> : 1.HTML문서에서 맥락이 같은 요소들을 주제별로 그룹화해 주는 태그이며, 섹션 주제에 대한 제목 요소를

포함하는 것이 좋다.
2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있음.

<nav> : 1.HTML문서의 메인 메뉴나 목차 등을 정의해 주는 태그
2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있음.

<alticle> : 1.HTML문서에서 독립적으로 배포 또는 재사용이 가능한 게시물, 블로그 포스팅 등을 의미하는 태그.
2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있음.

<aside> : 1. 메인 콘텐츠와 직접적으로 관련이 없는 영역을 의미하는 태그이며, HTML문서의 오른쪽이나 왼쪽의 사이드메뉴나 광고등의 영역으로 사용.
2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있음.

3. 기본 태그

<h></h> 태그(heading) : <h1>~<h6>까지 존재하며 제목태그로 사용된다. 숫자가 작을수록 폰트 사이즈가 크고 굵게

표현된다.

<p></p> 태그(pargraph) : 하나의 문단을 만들 때 사용. 문단은 새로운 줄에서 시작되며 문단 사이에는 공백이 생긴다.

<br> 태그(break) : 엔터를 입력하여 줄 바꿈을 하더라도 실제로는 줄 바꿈이 적용되지 않는다. <br> 태그를 이용하여

엔터 효과를 가지게 한다.

<hr> 태그(horizontal rules) : 단순히 웹 페이지에 수평선을 그어주는 태그.

<pre></pre> 태그 : 입력한 내용 그대로를 출력한다. 엔터, 스페이스, 탭 등이 적용된 형태로 출력된다.

<q></q> 태그(quote) : 짧은 문장을 인용할 때 쓰이는 태그, 브라우저에서는 큰따옴표로 출력된다.

<blockquote></blockquote> 태그 : 긴 문장을 인용할 때 쓰이는 태그. 브라우저에서는 들여 쓰기로 출력된다.

<abbr></abbr> 태그(abbreviation) : 축약 텍스트를 표시하는 태그. 밑줄이 그어진 축약 텍스트에 마우스를 올리면

말풍선으로 텍스트의 뜻이 표시된다.

@텍스트 포매팅(text formatting) 태그 : 텍스트에 효과를 주는 태그들을 의미한다.

<b></b> : 텍스트를 굵게 출력

<strong></strong> : 텍스트를 굵게, 강조하여 출력 (중요함을 의미)

<i></i> : 텍스트를 이탤릭체로 출력

<em></em> : 텍스트를 이탤릭체로, 강조하여 출력 (중요함을 의미)

<small></small> : 텍스트를 작게 출력

<sub></sub> : 아래첨자

<sup></sup> : 위첨자

<ins></ins> : 삽입된 텍스트에 밑줄 출력

<del></del> : 삽입된 텍스트에 취소선 출력

<mark></mark> : 삽입된 텍스트에 형광펜처럼 강조 표시

@목록 관련 태그

<ol></ol> : 순서 있는 목록의 시작과 끝을 나타낸다.

<ul></ul> : 순서 없는 목록의 시작과 끝을 나타낸다.

<li></li> : 목록의 각 항목을 나타낸다.

<dl></dl> : 설명 목록의 시작과 끝을 나타낸다.

<dt></dt> : 설명 목록의 이름(제목)을 나타낸다.

<dd></dd> : 설명 목록의 값(설명)을 나타낸다.

저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

비주얼스튜디오 코드(Visual Studio Code)의 LIST (0)	2023.02.18
비주얼스튜디오 코드(Visual Studio Code)의 TABLE (0)	2023.02.17
비주얼스튜디오 코드(Visual Studio Code) 설정 및 단축키 모음 (0)	2023.02.15
비주얼스튜디오 코드(Visual Studio Code) 다운로드 및 설치방법 (0)	2023.02.15
웹 개발 기본 다지기 (0)	2023.02.14

개발자첫걸음