02.13(2일차)
<pre>
1 select & option
select는 몇가지 옵션을 제공한다.
-애트리뷰트
1)value - 선택에 대해서 제출되는 값
2)disabled - 엘리먼트를 비활성화 시킨다
2 textarea
여러줄의 텍스트를 입력할수있다
-애트리뷰트
1) cols - 한 줄에 입력할수 있는 글자 수
2) rows - 입력할 수 있는 줄의 수
3 input type radio
라디오 버튼 중에서 한가지만 선택할 수 있다
버튼을 그룹화하기 위해 name을 일치시켜야 한다
-애트리뷰트
1) cheack
페이지가 로드되었을 때 버튼을 선택된 상태로 만든다
</pre>
===================================================
<h1>img</h1>
<p>iamge (이미지)</p>
<img
src="이미지 주소"
alt="HTML동물"
width="400">
===================================================
<pre>
애트리뷰트
1.src (source)
이미지의 소스(주소)
2.alt (alternative)
이미지에 대한 설명
3.width
이미지의 넓이
</pre>
===================================================
<h1>svg</h1>
<pre>
scalable vector graphic의 약자
수학적인 방법으로 그래픽을 표현한다
확대해도 깨지지 않는다
로고나 아이콘 등을 표현할 때 사용된다
</pre>
<svg height="150" width="200">
<ellipse
cx="100"
cy="75"
<!-- 중심잡기 -->
rx="90"
ry="60"
<!-- <가로 세로 정하기> -->
fill="#333"
<!-- 색 -->
<!-- 왼쪽 위 기준 -->
/>
<text
fill="#fff"
font-size="45"
font-family="Verdana"
x="35"
y="90"
<!-- 왼쪽 아래 기준 -->
>
>
LOGO
</text>
</svg>
===================================================
<h1>HTML 엔티티(entity)</h1>
<pre>
문서에서 예약된 문자나 이모티콘등을 표현할때 사용된다
*예약된 문자: HTML 코드로 사용중인 문자
</pre>
<h3>Entity name</h3>
<ul>
<li>1 < 2</li>
<li>©y</li>
</ul>
<h3>Entity number</h3>
<ul>
<li>😀</li>
<li>💀</li>
</ul>
===================================================
시멘틱 태그 - 엘리먼트의 이름이 목적과 같은 태그
layout태그에서 해당이된다.
논시메틱 태그 - div 가 비중이큼
===================================================
CSS
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 이론</title>
</head>
<body>
<h1>CSS 기초</h1>
<style>
/* 엘리먼트의 이름으로 선택한다. */
p{
color: red;
font-style: italic;
/* 기울임꼴 */
}
</style>
<p>Cascading style sheet</p>
<h1>엘리먼트 선택자</h1>
<style>
ul{
border: 1px solid;
/* border 경계선 */
/* solid 실선 */
}
</style>
<ul>
<li>list ltem</li>
<li>list ltem</li>
<li>list ltem</li>
</ul>
<h1>클래스 선택자</h1>
<pre>
한개의 엘리먼트가 여러개의 클래스를 가질 수 있고
다른 엘리먼트가 같은 클래스를 가질 수 있다.
</pre>
<style>
/* .클래스 */
.underline{
text-decoration: underline;
/* 밑줄 */
}
.italic{
font-style: italic;
/* 기울임체 */
}
</style>
<ul>
<li class="italic underline">list item </li>
<li class=" italic">ilst item</li>
<li>list item</li>
</ul>
<h1>id 선택자</h1>
<style>
/* id */
#first {
text-decoration:underline;
}
</style>
<ul>
<li id="first">list item</li>
<li>list ltem</li>
<li>list ltem</li>
</ul>
<h1>자식 선택자</h1>
<p>범위를 제한할 때 사용된다.</p>
<style>
/* 부모 자식 */
main ul{
border: 1px solid;
}
</style>
<nav>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</nav>
<main>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</main>
<h1>가상 클래스</h1>
<p>특별한 상태의 엘리먼트를 선택할수있다.</p>
<style>
/* 선택자: 가상 클래스 */
/* hover - 커서가 엘리먼트 위에 있는 상태 */
li:hover{
text-decoration: underline;
}
</style>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul> -->
<!-- <h1>문제 1</h1>
<style>
.font-bold{
font-weight: 700;
}
</style>
<br>
<p1>
시계는 살 수 있지만 <span class="font-bold">시간</span>은 살 수 없습니다.
</p1> -->
<h1>CSS 길이 단위</h1>
<style>
body{
font-size: 16px;
}
.px{
font-size: 16px;
}
.rem{
font-size: 1rem;
}
.em{
font-size: 1em;
}
.percent{
font-size: 100%;
}
.vw{
font-size: 10vw;
}
.vh{
font-size: 10vh;
}
</style>
<h3>font size: 16px (pixel)</h3>
<p>절대값</p>
<p class = "px">Lorem rsafkdhsdjkfn sadfhjsadjkf asdf</p>
<h3>font size: 16rem (root element))</h3>
<p>루트 엘리먼트(htm)에 상대적이다. 1rem = 루트엘리먼트의 폰트 사이즈</p>
<p>폰트사이즈의 기본은 구글 글꼴크기 설정의 기반이다.</p>
<p class = "rem">Lorem rsafkdhsdjkfn sadfhjsadjkf asdf</p>
<h3>font size: 16em (element)</h3>
<p>부모에 상대적이다. 1em = 부모의 폰트사이즈</p>
<p class = "em">Lorem rsafkdhsdjkfn sadfhjsadjkf asdf</p>
<h3>font size:100%</h3>
<p>부모에 상대적이다. 100% = 부모의 폰트사이즈</p>
<p class = "percent">Lorem rsafkdhsdjkfn sadfhjsadjkf asdf</p>
<h3>font size:10vw</h3>
<p>뷰포트의 넓이(vieport width)에 상대적이다. 100w = 뷰포트의 넓이</p>
<p class = "vw">Lorem rsafkdhsdjkfn sadfhjsadjkf asdf</p>
<!-- 가로로 늘리면 길이가 달라짐 -->
<h3>font size: 10vh</h3>
<p>뷰포트의 높이(viewport height)에 상대적이다. 100vh = 뷰포트의 높이</p>
<p class = "vh">Lorem rsafkdhsdjkfn sadfhjsadjkf asdf</p>
<!-- 세로로 늘리면 길이가 달라짐 -->
<!-- 만약에 루트엘리먼트의 폰트 사이즈가 19px이고 부모의 폰트사이즈가 20px라면 엘리먼트의 폰트 사이즈(2rem)는 몇 px일까요?
1. 16px * 2 = 32px
부모의 폰트사이즈가 20px이라면 자식의 폰트사이즈(0.8erm)는 몇 px일까요?
2. 20px * 0.8 = 16px
뷰포트의 넓이가 1000px일 때 엘리먼트의 폰트사이즈는(20vw)는 몇 px일까요?
3. 1000px * 0.2 = 200px -->
</body>
</html>