AWS 클라우드환경 네이티브 수업 80일차
진행
1. HTML 태그 종류 별 정리
2. CSS
(CSS 개념, CSS 적용방식, CSS 선택자는 9/15 에 포함)
요약
1. HTML 태그 종류 별 정리
(a, b, body, dd/dl/dt, div, em, fieldset, head, hr, html, i, input, mark, meta, ol, script, small, strong, table, title, ul, )
2. CSS
(CSS 개념, CSS 적용방식, 박스 모델)
HTML 태그 종류별 정리
<a>
하이퍼링크(hyperlink)를 정의할 때 사용한다.
문법은 아래와 같고, URL을 어떻게 사용하냐에 따라 기능이 약간 다르다.
<a href=“URL”>
- 절대 주소(absolute URL)
ex) href=“http://www.naver.com” - 상대 주소(relative URL)
ex) href=“/images/blue.gif” - 같은 페이지 내에서 명시된 id를 가지고 있는 요소를 연결함.
ex) href=“#grimpan” - 스크립트
ex) href=“javascript:alert(‘안뇽~!!!’)” - href="#"
ex) href="#"
위에서 href="#" 가 종종 보이는데
보통 이를 사용하는 이유에 대해서 보자면
1. 클릭 이벤트 시 페이지 전환을 하지도 않고, 페이지 최상단으로 이동하지도 않는다.
2. 페이지 전환 없이 화면 최상단으로 이동
이를 구현하는 것은 아래와 같다.
# / #none의 차이를 눈여겨보자.
또한, 이 방법 외에도 여러 방법이 가능할 것임을 알아두자.
1.
<a href="#none" onclick="클릭!"> 버튼1 </a>
<a href=”javascript:;” onclick=”func()”></a>
2.
<a href="#" onclick="클릭!"> 버튼2 </a>
<input id="Topbtn" type="button" onclick="window.scrollTo(0,0);" value="TOP">
아래의 예제는 <a>를 사용한 예제이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a 요소</title>
</head>
<body>
<!-- a.html -->
<section>
<a href="https://www.google.com">구글</a>
<a href="https://www.daum.net">다음</a>
<a href="https://www.naver.com">네이버</a>
</section>
</body>
</html>
<b>
단순히 굵게 표현되는 텍스트를 만들 때 사용.
<b> 요소는 텍스트 자체에 주의를 끌기 위해 사용,
<strong> 요소는 콘텐츠 자체의 중요성을 강조할 때 사용
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>HTML i tag</title>
</head>
<body>
<p>이 문장은 일반 텍스트.</p>
<p><b>이 문장은 단순히 굵게 표현된 텍스트.</b></p>
</body>
</html>
<body>
문서의 본문 요소를 정의할 때 사용
단, 하나의 <body> 요소만 존재 가능
<dd/dl/dt>
dd : <dl> 요소에서 설명부분을 정의할 때 사용
dl : 용어와 그에 대한 설명을 리스트 형식으로 정의할 때 사용
dt : <dl> 요소에서 용어, 이름 부분을 정의할 때 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dl, dt, dd 요소 배우기</title>
</head>
<body>
<section>
<h1>정의형 목록을 마크업 하고자 할 때 사용한다</h1>
<dl>
<dt>책 제목</dt>
<dd>AWS Discovery Book</dd>
<dt>저자</dt>
<dd>향단이</dd>
<dd>방자</dd>
<dt>페이지 수</dt>
<dd>517 Page</dd>
<dt>가격</dt>
<dd>25,000원</dd>
</dl>
</section>
</body>
</html>
<div>
HTML 문서에서 특정 영역을 정의할 때 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML div tag</title>
<style>
div {
background-color: orange;
font-style: italic;
}
</style>
</head>
<body>
<p>HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다.</p>
<div><p>div 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다.</p></div>
<p>span 요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소입니다.</p>
</body>
</html>
<em>
기울임 글씨를 만들 때 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em, strong 요소 배우기</title>
</head>
<body>
<!-- em_strong.html -->
<section>
<h1>주민등록 번호 무단도용 안내</h1>
<p>
<em>최근 타인의 개인정보를 도용하여 회원가입을 하는 사례가 발생하고 있습니다.</em>
<strong>
이는 주민등록번호 제 21조(벌칙)제2항9호
(시행일<time datetime="2006-09-24">2006년 9월 24일</time>)에 의거하여
</strong>
3년 이하의 징역 또는 1000만원 이하의 벌금이 부과될 수 있으므로 주의하시기 바랍니다.
</p>
</section>
</body>
</html>
fieldset
아래의 예제 결과 값을 보면서 보면 한번에 이해가 된다.
filedset은 해당 태그 하위 요소들을 하나의 그룹으로 묶어서 주변에 박스 모양의 선을 그린다.
legend 요소로 해당 캡션을 설명한다.
name은 form의 정보를 다른 곳으로 보내는 매개체 역할을 한다. 변수처럼
<form name="writeForm" method="post" id="join">
<fieldset>
<legend>Basic Info</legend>
<label>User ID</label>
<input name="id" type="text" class="id" id="id"/>
<input type="button" onclick="dupCheck()" value="중복확인" class="dup"/><br/>
<label>Password</label>
<input type="password" name="pass" class="pass" id="pass"/><br/>
<label>Retype Password</label>
<input type="password" name="repass" class="pass"/><br/>
<label>Name</label>
<input type="text" name="name" class="name"/><br/>
<label>E-Mail</label>
<input type="email" name="email" class="email"/><br/>
<label>Retype E-Mail</label>
<input type="email" name="reemail" class="email"/><br/>
</fieldset>
</form>
<head>
문서의 메타데이터 집합을 정의할 때 사용
아래의 요소들은 head에 포함이 되어야 한다.
<title> / <style> / <base>
<link> / <meta> /
<script> / <noscript>
<script> / <noscript>는 Body 에서도 사용 가능.
<hr>
수평 가로선을 정의할 때 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hr 요소</title>
</head>
<body>
<!-- hr.html -->
<section>
<h1>뉴질랜드에 다녀온 이야기</h1>
<p>
아름다운 자연의 모습이 있는 뉴질랜드에 커다란 기대감을 가지고 여행을 갔다.
</p>
<hr>
<p>
내가 처음으로 본 것은 근육질의 겁나 큰 캥거루였습니다.
</p>
</section>
</body>
</html>
<html>
문서의 루트 요소를 정의할 때 사용.
DOCTYPE 선언을 제외한 모든 다른 HTML 요소를 포함하기 위한 컨테이너
<i>
보통 이탤릭체로 표현
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>HTML i tag</title>
</head>
<body>
<p><i>타이타닉호</i>는 영국의 화이트 스타 라인이 운영한 북대서양 횡단 여객선이다.<br>
1912년 4월 10일 영국의 사우샘프턴을 떠나 침몰</p>
</body>
</html>
input
입력을 받는 요소이다.
종류는 아래와 같다.
<h3>텍스트</h3>
문자열입력<input type="text"><br>
이메일<input type="email"><br>
전화번호<input type="tel"><br>
비밀번호<input type="password"><br>
숫자<input type="number"><br>
검색<input type="search"><br>
url<input type="url"><br>
<h3>버튼</h3>
버튼<input type="button"><br>
초기화<input type="submit"><br>
리셋<input type="reset"><br>
체크박스<input type="checkbox"><br>
라디오<input type="radio"><br>
<h3>첨부</h3>
파일첨부<input type="file"><br>
이미지첨부<input type="image"><br>
색깔<input type="color"><br>
<h3>날짜</h3>
년월<input type="month"><br>
년월일<input type="date"><br>
년월일시각<input type="datetime-local"><br>
시각<input type="time"><br>
주<input type="week"><br>
<h3>기타</h3>
슬라이드바<input type="range"><br>
숨김창<input type="hidden"><br>
위의 결과와 같이 보자
input 속성
| 속성 이름 | 뜻 | 예 |
| size | 해당 문자수만큼의 입력칸 너비를 제공 | <input type="text" size="20"> |
| pattern | 정규식을 쓸 수 있다. | <input type="text" pattern=".{3,20}"> |
| minlength | 최소로 써야하는 문자 갯수 해당 수를 못 채우면 제출이 안된다. |
<input type="text" minlength="6"> |
| maxlength | 최대로 입력할 수 있는 문자 갯수 해당 수를 넘으면 제출이 안된다. |
<input type="text" maxlength="20"> |
| placeholder | 입력칸에 기본적으로 표시되는 글. 입력할 때 사라진다. |
<input type="text" placeholder="여기 입력하세요~"> |
| value | 입력칸에 기본적으로 표시되는 글. 이건 입력할 때 기본적으로 있을 글을 설정한다. 안 사라진다. |
<input type="text" value="학생이름은 : "> |
| title | 제출을 했을 때 정해진 길이만큼의 입력값이 안들어 왔을 때 보여줄 안내문구 |
<input type="text" pattern=".{3,20} title="3~20자 사이로 입력하세요"> |
| autocomplete | 자동 완성 기능 | <input type="text" autocomplete="on"> |
| autofocus | 웹페이지가 로딩 되면 해당 입력창에 입력폼이 포커싱된다. | <input type="text" autofocus> |
| disabled | 작동 불가 (회색처리 되고 입력이 안된다.) | <input type="text" disabled> |
<mark>
형광펜으로 칠한 것처럼 하이라이트된(highlighted) 텍스트를 표현할 때 사용.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>HTML i tag</title>
</head>
<body>
<p>우리는 두 마리의 <mark>고양이</mark>가 있움.
</p>
</body>
</html>
<meta>
메타데이터(metadata)를 정의할 때 사용
언제나 <head> 요소 내부에 위치해야 함.
<ol>
순서가 있는 HTML 리스트(list)를 정의할 때 사용
해당 태그 안에 있는 내용들이 <li> 요소를 가지고 있다면
순서대로 아라비아 숫자나 알파벳으로 표현된다.
아래의 예를 보면, 역순과 순서의 시작점도 조정할 수 있다.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>ol 요소 배우기</title>
</head>
<body>
<ol>
<li>아메리카노</li>
<li>카페라떼</li>
<li>핫초코</li>
</ol>
<ol reversed>
<li>HTML</li>
<li>JAVA</li>
<li>ReAct</li>
<li>JSP</li>
<li>PHP</li>
</ol>
<ol type="A" start="3">
<li>녹차</li>
<li>홍차</li>
<li>자스민차</li>
</ol>
</body>
</html>
<script>
스크립트 코드를 요소 내부에 직접 명시해서 실행시키거나
src 속성을 사용하여 외부 스크립트 파일을 참조가 가능하게 하는 태그이다.
<small>
글자 크기가 작은 텍스트를 정의할 때 사용.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>HTML i tag</title>
</head>
<body>
<p>일반적인 크기의 텍스트입니다.</p>
<p><small>크기가 작은 텍스트입니다.</small></p>
</body>
</html>
<strong>
굵은 글씨체를 만들 때 사용한다. (볼드체)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em, strong 요소 배우기</title>
</head>
<body>
<!-- em_strong.html -->
<section>
<h1>주민등록 번호 무단도용 안내</h1>
<p>
<em>최근 타인의 개인정보를 도용하여 회원가입을 하는 사례가 발생하고 있습니다.</em>
<strong>
이는 주민등록번호 제 21조(벌칙)제2항9호
(시행일<time datetime="2006-09-24">2006년 9월 24일</time>)에 의거하여
</strong>
3년 이하의 징역 또는 1000만원 이하의 벌금이 부과될 수 있으므로 주의하시기 바랍니다.
</p>
</section>
</body>
</html>
<table>
데이터를 포함하는 cell의 행과 열로 구성된 2차원 테이블을 정의할 때 사용.
하나 이상의 <tr>, <th>, <td> 요소들과 <table>로 구성된다.
구조는 아래와 같다.
- <tr> : 테이블의 각 행을 정의
- <th> : 각 열의 제목을 정의
- <td> : 하나의 테이블 Cell(내용)을 정의
<table>
<tr>
<th>이름</th>
<th>번호</th>
<th>성적</th>
</tr>
<tr>
<td>이진아</td>
<td>01056488888</td>
<td>A+</td>
</tr>
</table>
<title>
해당 문서의 제목(title)을 정의할 때 사용.
텍스트만 사용이 가능.
<ul>
순서가 없는 내용을 리스트화 할 때 사용한다. (<ol> 참고)
<li> 요소를 사용.
원이나 사각형으로 리스트화 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ul 요소 배우기 </title>
</head>
<body>
<ul>
<li>아메리카노</li>
<li>카페라떼</li>
<li>핫초코</li>
<li>차
<ul>
<li>녹차</li>
<li>홍차</li>
<li>자스민차</li>
</ul>
</li>
</ul>
</body>
</html>
CSS (Cascading Style Sheets)
HTML 같은 마크업 언어가 몸체를 구성한다면
CSS는 옷과 악세사리처럼 꾸미기를 담당한다.
디자인적 요소만 빼서 처리할 수 있기 때문에 내용 바꾸기가 용이해진다.
CSS의 문법적 구조는
선택자와 선언부(속성 과 값)로 이루어져 있다.
구조는 아래와 같다.
선택자 {속성:값; 속성:값....}
예)
/* p태그의 색을 검은색으로 크기는 25px로 지정*/
p {color:black; font-size:25px;}
- 선언부는 콜론(:)으로 구분
- 각 선언은 세미콜론(;)으로 끝, 선언블록은 중괄호({ })로 묶음.
CSS 적용 방식
HTML에 CSS를 적용하는 방식은 아래의 3가지가 있다.
1. Inline
2. embedded (내부 스타일 시트)
3. external (외부 스타일 시트)
1.Inline 방식
- 디자인 속성을 Body에 직접 작성하는 형식
- 일일히 세부적으로 쓸 수 있지만 체계를 유지하는 데에는 방해
=> 꼭 필요한 경우가 아니라면 사용X
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Inline Style Sheet</title>
</head>
<body>
<h1 style="color:#FF0000"> Inline방식</h1>
<p style="color:#00f"> < style > style 요소 내에 직접 css 코드를 적용합니다.</p>
</body>
</html>
위에서 참고 사항.
< => <
> => >
=> 띄어쓰기 한 칸
2. embedded 방식
- HTML에 스타일을 기술.
- <head> 태그 안에 <style> 태그 부분에 작성
- html 과 css 가 한 파일에 있다.
- css의 재활용이 안됨.
=> 특별한 경우가 아니면 외부 스타일시트 사용할 것
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Embedded Style Sheet</title>
<style>
h1{
color: #FFFF00;
background : #111111;
}
p{
color : #0000FF;
background : #ff9912;
}
.all {
margin : 200px;
}
#one{
background : #998899;
}
</style>
</head>
<body>
<!-- Embedded.html -->
<h1 class = "all"> Embedded 방식</h1>
<p id = "one"> < style > style 요소를 Embedded 방식으로 css 코드를 적용합니다.</p>
<p class = "all"> < style > style 요소를 Embedded 방식으로 css 코드를 적용합니다.</p>
</body>
</html>
3. external
- css 를 작성하는 기본 방법
- 별도의 파일에 CSS 문서를 작성, html 문서에서 불러와 사용
- url을 통해 다른 서버의 css를 불러오는 것도 가능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>External Style Sheet</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- External.html -->
<h1 > External 방식</h1>
<p > < style > 요소를 사용하여 외부에 생성한 css 파일을 연결합니다.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>External Style Sheet</title>
<style>
@import url(css/style.css);
</style>
</head>
<body>
<!-- External.html -->
<h1 > External 방식</h1>
<p > < style > 요소를 사용하여 외부에 생성한 css 파일을 연결합니다.</p>
</body>
</html>
아래는 css 파일
/*
External 방식의 css 파일. html파일이 있는 곳에 css폴더를 만들고 그 안에 파일을 만들었음
*/
@charset "UTF-8";
h1 {
color: #f00;
}
p {
color: #00f;
}
CSS 박스 모델 (Box model)
모든 HTML 요소는 box 로 구성되며, 이것을 박스 모델(box model)이라 한다.
패딩(padding), 테두리(border), 마진(margin), 내용(content)으로 구분.
- content : 텍스트나 이미지가 들어있는 내용 부분
- padding : 내용과 테두리 사이의 간격 / 눈에 보이지 않음.
background-color 속성으로 설정하는 배경색의 영향을 함께 받음. - border : 감싸는 테두리.
- margin : 테두리와 이웃하는 요소 사이의 간격 / 눈에 보이지 않음.
background-color 속성으로 설정하는 배경색의 영향을 받지 않음.
'코딩수업 > AWS 클라우드환경 네이티브' 카테고리의 다른 글
| 9/16 CSS 속성 ( 배경, 테두리, 박스, 위치, Animation ) (2) | 2022.09.16 |
|---|---|
| 9/15 CSS 선택자, CSS 속성(Font, Text, Color) (0) | 2022.09.15 |
| 9/13 데이터 베이스(DB) 자바와의 연결, HTML 시작 및 기초, 구조, 요소의 구조 (1) | 2022.09.13 |
| (미안)9/7 데이터베이스(DB) (0) | 2022.09.07 |
| 9/6 데이터베이스(DB) 집합 연산자(교집합, 차집합, 대칭 차집합), VIEW (0) | 2022.09.07 |
댓글