오늘은 Html의 tag에 대해서 더 배워보고, div와 css에 대해서 배워보도록 하겠습니다.
| 목차 | |
| 1. | tag |
| 2. | div |
| 3. | css |
| 4. | 예제 문제 |
| 5. | 느낀 점 |
1. tag
◈ textarea
<body>
<!--
textarea : 다중라인 입력
input type = "text" : 단일라인 입력
readonly, disabled, required(필수) 가능
innerText로 인지
시작태그와 끝태그 사이의 공백, enter, 띄어쓰기 전부 값으로 인지
form 태그 안에서 사용하면 name 속성의 변수 값으로 전송 가능
content = "안녕하세요 enter 열공해보아요"
-->
<textarea name="content" id="" cols="50" rows="10">
안녕하세요
열공해보아요
</textarea>
</body>
▷ 출력
◈ select
<body>
<!--
select : 제시된 항목 중 하나를 선택하게 하는 태그
콤보박스, 드롭다운박스 형태로 쓰이는 태그
select 태그 안에 option 태그를 넣어서 목록을 구성
option value = "전송값" value에 값이 없으면 공백으로 전송
selceted : 기본 설정값을 결정
disabled : 비활성화
-->
<form action="">
<label for="m">해당 월 선택</label><br>
<select name="month" id="m">
<option value="1">1월</option>
<option value="2">2월</option>
<option value="3">3월</option>
<option value="4">4월</option>
</select>
<input type="submit" value="전송">
</form>
<!-- 통신사 선택 select 생성 (SKT KT LG 알뜰폰 기타)-->
<hr>
<form accept="">
<label for="p">통신사 선택</label><br>
<select name="통신사" id="p">
<option value="">선택하세요</option>
<option value="SKT">SKT</option>
<option value="KT">KT</option>
<option value="LG">LG</option>
<option value="알뜰폰">알뜰폰</option>
<option value="기타">기타</option>
</select>
<input type="submit" value="선택">
</form>
</body>
▷ 출력
◈ a
<!--
a 태그
- 다른 페이지로 이동하게 하는 태그
- 시작 태그와 끝 태그 안에 글자를 입력하면 => 클릭 시 이동
- href 속성
- 이동할 url, 값이 없다면 현재 페이지에서 새로고침
- url 값이 http:// 로 시작하면 url로 인식, 없으면 파일로 인식
- tel : 전화번호로 연결. 모바일용에서 사용
- mailto : 이메일로 연결
- target : _self, _blank 가장 많이 쓰임.
- _self : 기본값, 현재 화면에서 페이지 교체
- _blank : 새창에서 연결
- parent : 부모 창에서 링크를 새로 연결
결제 팝업창(자식 창)에 대한 정보를 반영하여
원래의 창(부모 창)에 반영되어 변경되는 경우 사용
- _top : 최고 조상에서 링크를 연결.
다중 팝업이 뜰 경우 메인 창에서 값을 연결할 때 사용
부모X, 조상x self와 같음.
- download 속성
- 파일을 다운로드 할 경우 사용
- href에 파일의 경로가 있고, 속성이 download인 경우 해당 파일을 다운로드
-->
<a href="http://www.naver.com">네이버</a>
<a href="http://www.naver.com" target="_blank">naver</a>
<!-- 파일로 인식 -->
<a href="02_select.html">select 연습 파일</a>
<!-- 다운로드 (다운로드 파일이 없으면 error) -->
<a href="02_select.html" download="">select 다운로드</a>
<!-- 전화로 인식 -->
<a href = "tel:+82010...">문의전화</a>
<!-- 메일로 연결 -->
<a href="mailto:...@gmail.com">이메일로 문의하기</a>
▷ 출력
◈ a 싱커
<!--
a 싱커 기능 : 책갈피 기능
id = a 태그의 href 속성으로 일치시키면 해당 id로 이동
아이디 기호 : "#id"
클래스 기호 : ".class"
로렘 입숨 검색(: 의미 없는 문장)
-->
<h3 id = "top">a 싱커 기능 연습</h3>
<a href="#Aen">Aen</a>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<p>
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</p>
<p>
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
</p>
<p id ="Aen">
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<!-- 생략 -->
<a href="#top">처음으로</a>
▷ 출력
...
◈ img
<!--
img 태그
- src : 그림 경로
- alt : 그림이 없을 때 나타나는 글자
- width : 그림의 가로길이
- height : 그림의 세로길이
- 이미지 size => pixel 표시 %단위로도 가능.
-->
<!--
이미지 형식
html 문서에서 사용되는 이미지 포멧 jpg(jpeg), png 대표적
jpg : 손실 압축 포멧
- 이미지의 해상도가 손상되어도 용량을 많이 줄일 수 있는 포멧
- 가장 많이 사용
png : 무손실 압축 포멧
- 해상도의 손실을 줄이고 압축, 투명 배경 이미지를 사용할 때 사용
- 용량은 크지만 화질이 뛰어남.
이미지 파일들은 헤더 영역에 image/jpeg image/png 등의 형식을 가지고 있기
때문에 파일의 확장자명과 관계없이 헤더 정보를 보고 그림을 판단함.
이미지의 리소스가 잘못된 정보를 가지고 있는 경우 : 액박이 떴다라고 표현함.
-->
<img src = "../image/강아지2.jpg" alt ="강아지 그림">
<img src = "../image/강아지2.jpg" alt ="강아지 그림" width="100" height="100">
<img src = "../image/강아지2.jpg" alt ="강아지 그림" width="50%" height="50%">
▷ 출력
◈ button
<!--
input button과 같은 역할
input type = "button" value = "버튼 이름"
<button>버튼 이름</button>
type = "button" : 일반 버튼 => js 기능 줄 때 주로 사용
type = "reset" : 취소 버튼
type = "submit" : 전송 버튼 => form 태그 안에서 데이터를 서버로 전송
form 태그 안에서 button의 타입을 주지 않으면 기본값은 submit
-->
<button>일반 버튼</button>
<button type="submit">submit</button>
<button type="reset">reset</button>
<form action="">
<input type="text" name="name" value="영이">
<button>submit</button>
</form>
▷ 출력
◈ list
<!--
list를 나타내느 태그 종류 3가지
1. 순서가 있는 리스트 ol => li
2. 순서가 없는 리스트 ul => li
3. 설명, 정의 리스트 dl => dt / dd
ol 태그의 속성
- type : 순서를 정해주는 형태
- 1, A, a, i, I
- start : 시작값 지정
ul 태그의 속성
- type : 구분기호
- desc(기본), circle(동그라미), square(사각형)
상하위 구조를 만들 때 사용
- 메뉴바 / 서브메뉴 구조에 사용
-->
<ul>
<li>아침</li>
<li>점심</li>
<li>저녁</li>
</ul>
<ol type="A">
<li>아침</li>
<li>점심</li>
<li>저녁</li>
</ol>
<ul>
<li>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</li>
<li>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</li>
</ul>
<dl>
<dt>정의1(타이틀)</dt>
<dd>설명....</dd>
<dt>정의2(타이틀)</dt>
<dd>설명....</dd>
<dt>정의3(타이틀)</dt>
<dd>설명....</dd>
</dl>
<!-- 리스트 중첩 가능. -->※ ul, ol 잘 사용 안 함
▷ 출력
◈ table
<!--
table : 표를 나타내는 태그 (표 전체 테두리 박스)
tr : 행 (하나의 행을 의미)
th/td : 열 (tr 안의 한 칸)
th : 제목열 (가운데정렬, 굵은 글씨)
td : 일반열 (왼쪽 정렬, 일반 글씨)
- 3행 4열 테이블 생성
- tr * 3 / td * 3*4 = 12개
- css에서 모양, 색, 크기, 선 지정 가능.
- border : 테두리 두께
- borderColor : 테두리 색
- width : 너비
- colspan / rowspan : 셀 병합 (병합된 셀이 생길 때 원래 셀을 지워줘야함.)
thead / tbody / tfoot => 순서를 바꾸어 써도 head / body / foot 순서대로 나열
HTML5(-> 시맨틱 태그)
-->
<table border = "1" width = "200">
<tr>
<th width = "100">이름</th>
<th>국어</th>
<th>영어</th>
</tr>
<tr>
<th rowspan="2">영이</th>
<th>70</th>
<th>80</th>
</tr>
<tr>
<th colspan="2">78</th>
</tr>
</table>
<table border = "1">
<caption>테이블 제목</caption>
<thead>
<tr>
<th>제목1</th>
<th>제목2</th>
<th>제목3</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</tbody>
<tfoot>
<tr>
<th>푸터1</th>
<th>푸터2</th>
<th>푸터3</th>
</tr>
</tfoot>
</table>- li, ol, tr과 같이 여러 개를 생성하고 싶을 때, *n을 같이 입력하면 n개만큼 생성됨 (ex : tr*3)
- Ctrl + Alt + 방향키 : 입력할 곳을 늘림
▷ 출력
◈ iframe
<!--
iframe : 또다른 창을 삽입할 때 사용
브라우저 안에 다른 브라우저를 삽입
리소스 사용 증가
유튜브 가져올 때
-->
<iframe src="http://www.daum.net" frameboder = "0"></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/mFbILexYSQg?si=2gyblw42lhPwrTdT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>- 브라우저 삽입을 막아놓은 사이트 있음(ex : google, naver 등)
▷ 출력
2. div
<!--
div : 영역을 만들어주는 태그 box
레이아웃을 분리하는 역할
- 컨테이너 역할을 하는 태그
- 가장 많이 쓰이는 태그 (80%~)
- 시멘틱 웹(태그) : div에 의미를 부여한 개념
- header => <div id = "header"></div>
- nav => <div id = "nav"></div>
- aside
- section
- main
- article
- footer => <div id = "footer"></div>
-->
<!--
태그를 분류하는 방법
- block, inline, inline - block
- block
- 태그 혼자 한 라인을 차지
- 새 라인에서 시작
- 가로 / 세로 길이 조절이 가능
- 여백 지정 가능
- p. h1 ~ h6, form, table, div
- inline
- 한 라인에서 계속 유지되는 태그
- 컨텐츠 자체가 태그의 크기
- 가로 / 세로 길이 조절 불가능.
- 여백 지정 불가능
- 폰트지정 가능
- span ...
- inline - block
- 한 라인에서 유지되는 태그
- 가로 / 세로 조절이 가능
- 여백 지정 가능
- input, img
-->
<div>Hello</div>
<div>Hi</div>
<header>Header tag</header>
<main>Main tag</main>
<footer>Footer tag</footer>
▷ 출력
3. css
◈ link
- html 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<style>
/* css 파일 */
/* 선택자 {스타일;} */
input{
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<!--
css : html 요소에 스타일을 지정할 때 사용
스타일을 지정하는 방법 3가지
1. 각 태그마다 스타일 속성을 붙여서 사용하는 방법
- 해당 태그 요소에만 적용
- 재사용성이 낮음.
- 적용되는 우선순위는 가장 높음.
2. head 태그 안에 style 태그를 이용하는 방법
- 해당 페이지에만 적용.
- 재사용성이 중간
- 연습할 때 사용
3. 별도의 css 파일을 생성해서 링크로 연결하는 방법
- 실무에서 가장 많이 쓰이는 방법
- 여러 페이지에 적용 가능
- 이미 만들어져 있는 css 파일을 가져와서 연결도 가능
- head 태그 안에 link 태그로 연결하여 사용
-->
<input type="text" style="width: 50px;"><br>
<input type="text"><br>
<input type="text"><br>
</body>
</html>
- css 파일
input{
font-size: large;
background-color: aquamarine;
}※ 이미지
▷ 출력
◈ 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
선택자(seclector) : 요소를 선택하게 하는 이름
선택자{ 속성: 값; 속성: 값; }
- 태그선택자(태그명) => 같은 태그명을 모두 선택
- 클래스 선택자(.클래스명) => 같은 클래스를 가지는 모든 태그
- id 선택자(#id명) => id는 무조건 1개 or 0개
- 가상선택자(선택자 : 가상 클래스명)
- 어떤 조건이나 상황에서 스타일을 적용하도록 만든 선택자
- 앞에 다른 선택자가 오고, 뒤에 가상 클래스 선택자 추가로 나옴
- :hover => 요소에 마우스 커서를 올렸을 때 (가장 많이 사용)
- :focus => 요소가 포커스를 받고 있을 때
- :nth-child(a) / :nth-of-type(a)
a번째에 해당하는 요소
- 1 : 첫 번째 요소
- even : 짝수 요소
- odd : 홀수 요소
- 2n, 3n, 5n : 배수 요소
- 연산도 가능(2n-1)
- :after / :before
- :after : 요소 뒤에 가상요소를 삽입
- :before : 요소 앞에 가상요소를 삽입
선택자 조합
- 여러 선택자를 이용하여 요소를 선택
- 자식 관계
선택자1>선택자2>선택자3 (table>thead>tr>td)
- 조상 관계
선택자1 선택자2 (table td)
선택자1은 선택자2의 바로 위 조상일 수도 있고, 한참 위 조상일 수도 있음.
- 본인 : 선택자를 붙여서 사용
선택자1선택자2(div.a)
선택자1과 선택자2를 모두 만족하는 요소
(div#a) (div.b) (.a.b)
- 불가능한 조합
(divinput X) (.ainput X) : 띄어쓰기를 안 하면 구분이 안 되는 조합 X
(#a#b) : 말이 안 되는 조합 X (id는 하나 입력이 됨)
선택자1, 선택자2 : 선택자1과 선택자2 모든 태그 (or)
선택자 우선순위
- 아이디 선택자 > 클래스 선택자 > 태그 선택자
- 우선순위가 같다면 아래에 있는 내용이 적용
-->
<style>
p{
color: blue;
}
div{
color: brown;
}
.a{
font-weight: 700;
}
div.a{
font-style: italic;
}
div, .a{
background-color: aqua;
}
p:hover{
color: yellow;
}
#red{
color: crimson;
}
</style>
</head>
<body>
<p class="a">Hello Hong Gil Dong</p>
<p id = "red">안녕하세요. 홍길동입니다</p>
<p>안녕하세요.</p>
<div class="a">Hello</div>
<div>Hi</div>
</body>
</html>
▷ 출력
◈ 가상 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
가상 선택자
- :first-child : 첫 번째 요소
- :last-child : 마지막 요소
- :after / before
-->
<style>
ul >li>a:first-child{
font-weight: 700;
}
ul>li>a::after{
content: " | ";
}
ul>li>a.last::after{
content: "";
}
/* li.links a::after{
content: " / ";
}
ul a.last a::after{
content: " ";
} */
.links{
text-decoration: dashed;
}
</style>
</head>
<body>
<ul>
<li class="links">
<a href="http://www.naver.com">naver1</a>
<a href="http://www.naver.com">naver2</a>
<a href="http://www.naver.com">naver3</a>
<a href="http://www.naver.com">naver4</a>
<a href="http://www.naver.com"class ="last">naver5</a>
</li>
<li class="links">
<a href="http://www.google.com">google1</a>
<a href="http://www.google.com">google2</a>
<a href="http://www.google.com">google3</a>
<a href="http://www.google.com">google4</a>
<a href="http://www.google.com"class ="last">google5</a>
</li>
<li class="links">
<a href="http://www.daum.net">daum1</a>
<a href="http://www.daum.net">daum2</a>
<a href="http://www.daum.net">daum3</a>
<a href="http://www.daum.net">daum4</a>
<a href="http://www.daum.net"class ="last">daum5</a>
</li>
</ul>
<style>
ol>li:first-child{
color: red;
}
/* 짝수 요소만 색을 blue로 변겅 */
ol>li:nth-child(even){
color: blue;
}
/* 3의 배수 요소만 색을 변경 */
ol>li:nth-child(3n){
color: green;
}
</style>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>7</li>
<li>8</li>
<li>10</li>
</ol>
<style>
/* div > p:nth-child(2){ 요소1 선택
color: red;
} */
div>p:nth-of-type(2){ /* 요소2 선택 */
color: red;
}
</style>
<div>
<h1>제목</h1>
<p>요소1</p>
<p>요소2</p>
<p>요소3</p>
</div>
</body>
</html>
▷ 출력
◈ 속성 선택자
<!--
속성선택자
태그가 가지고 있는 속성을 선택하는 문법
input 태그에서 주로 사용
태그[속성=값]
-->
<style>
input[type=password]{
background-color: aqua;
}
button[type=submit]:hover{
background-color: blueviolet;
}
button.btn{
background-color: aqua;
}
</style>
</head>
<body>
<form action="">
<div>
<label for="id">User ID : </label>
<input type="text" name = "id" id="id" placeholder="8자 이상" required>
</div>
<div>
<label for="pw">User PW : </label>
<input type="password" name = "pw" id="pw" required>
</div>
<div>
<label for="pin">User PW : </label>
<input type="password" name = "pin" id="pin" required>
</div>
<button class = "btn" type="submit">login</button> <br>
<button type="submit">login</button>
</form>
▷ 출력
◈ color
<!--
색 속성(color 관련 속성)
- color : 글자색
- background-color : 배경색
- border-color : 테두리색
색 지정 방법
- 이미 지정된 이름을 사용하는 방법 : black, red, blue
- 색상 코드를 이용하는 방법 : 16진수 코드 #03c75a
- rgb 코드를 사용하는 방법 : rgb(255, 0, 0)
- rgba 코드를 사용 : a (투명도 0 ~ 1)
a : 투명도 0.x
-->
<style>
div.border{
width: 100px;
height: 30px;
border: 1px solid rgba(214, 56, 56, 0.692);
}
div.a{
width: 100px;
height: 30px;
color: #03c75a;
}
div.b{
width: 100px;
height: 30px;
background-color: #03c75a;
}
</style>
</head>
<body>
<div class="border">테두리색</div>
<div class="a">글자색</div>
<div class="b">배경색</div>
</body>
▷ 출력
4. 예제 문제
◎ 문제
▶ 1번
<!--
성적표
번호 이름 성적
1 길동 90
2 순이 80
3 영철 70
합계 ???
-->
▶ 2번
<!--
div 3를 만들어
naver, google, daum 사이트 연결이 되게 하고,
새 창에 띄우도록 설정
각각 색을 달리하여 스타일 주기
-->
▶ 3번
◎ 정답
▶ 1번
<table border="1">
<caption>성적표</caption>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>성적</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>길동</th>
<th>90</th>
</tr>
<tr>
<th>2</th>
<th>순이</th>
<th>80</th>
</tr>
<tr>
<th>3</th>
<th>영철</th>
<th>70</th>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">
합계 :
</th>
<th>
???
</th>
</tr>
</tfoot>
</table>※ style
table에 전체적으로 형식을 바꾸고 싶을 때 사용하고, 주로 특정한 부분에만 형식을 바꾸고 싶을 때 이용함.
(ex : <table border = "1" style = "width: 100%;">)
▷ 출력
▶ 2번
<style>
div.naver{
width: 50px;
height: 50px;
background-color: green;
}
div.google{
width: 50px;
height: 50px;
background-color: yellow;
}
div.daum{
width: 50px;
height: 50px;
background-color: skyblue;
}
</style>
</head>
<body>
<a href="http://www.naver.com" target="_blank"><div class="naver">네이버</div></a>
<a href="http://www.google.com" target="_blank"><div class="google">구글</div></a>
<a href="http://www.daum.net" target="_blank"><div class="daum">다음</div></a>
</body>
▷ 출력
▶ 3번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 과제 -->
<style>
input.name{
background-color: rgb(211, 79, 105);
}
input.pass{
background-color: rgb(130, 155, 223);
}
input.password{
background-color: rgb(83, 206, 113);
}
input.email{
background-color: rgb(211, 79, 189);
}
</style>
</head>
<body>
<form action="">
<table border="1">
<caption><h3>회원가입</h3></caption>
<thead>
<tr>
<th>
아이디
</th>
<th>
<input class = "name" type="text" name ="아이디">
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
비밀번호
</th>
<th>
<input class = "pass" type="password" name="비밀번호">
</th>
</tr>
<tr>
<th>
비밀번호 확인
</th>
<th>
<input class = "password" type="password" name="비밀번호 확인">
</th>
</tr>
<tr>
<th>
이메일
</th>
<th>
<input class = "email" type="email" name="이메일">
</th>
</tr>
<th>
성별
</th>
<th>
<input type="radio" name="성별" id="남자"><label for = "남자">남자</label>
<input type="radio" name="성별" id="여자"><label for = "여자">여자</label>
</th>
</tr>
<tr>
<th>
전화번호
</th>
<th>
<input type="number" name="010">-<input type="number" name="1234">-<input type="number" name="5678">
</th>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">
<button type="submit" name="회원가입">회원가입</button>
</th>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
5. 느낀 점
오늘 배운 용어들이 너무 많아서 수업을 듣는 내내 어지러웠지만 막상 문제들을 풀어보니 내용 정리도 되었고 어느 정도 용어에 대해서 이해를 하였다. 하지만 부모, 조상관계에 대한 내용을 이해를 완전히 하지 않았기에 이 부분에 대해서 복습을 신경써서 해야 할 것 같다.
'Front-end > Css' 카테고리의 다른 글
| Css 기초(실습) - AWS 풀스택 과정 15일차 (0) | 2024.08.02 |
|---|---|
| Css 기초(flex) - AWS 풀스택 과정 14일차 (0) | 2024.08.01 |
| Css 기초(media) - AWS 풀스택 과정 13일차 (0) | 2024.07.31 |
| Css기초(z-index, animation) - AWS 풀스택 과정 12일차 (0) | 2024.07.30 |
| Css 기초(font, box, position) - AWS 풀스택 과정 11일차 (0) | 2024.07.29 |