728x90
2021년 01월 13일 9시 ~ 15시 30분 zoom으로 수업 진행
| 종류 | 기능 | 패턴 |
| 타입 선택자 | css를 적용할 대상으로 html 요소의 이름을 선택 | p { } |
| 전체 선택자 |
html 페이지 내부의 모든 태그를 선택 |
* { } |
| id 선택자 | css를 적용할 대상으로 웹 페이지에 포함된 여러 요소 중에서 특정 아이디를 갖는 요소를 선택 |
# { } |
| class 선택자 | 특정 집단의 여러 요소를 한 번에 선택할 때 사용 특정 집단을 class 라고 하며, 같은 클래스 이름을 가지는 모든 요소를 선택 |
. { } |
| 인접 형제 선택자 | A 요소를 뒤따르는 B 요소를 선택 A와 B 사이에 다른 요소가 존재하면 선택하지 않는다 |
A + B { } |
| 일반 형제 선택자 | A요소가 앞에 존재하면 B를 선택 A가 B보다 먼저 등장하지 않으면 선택하지 않는다 |
A ~ B { } |
| 속성 선택자 | 속성이 정의된 태그만 선택 | A[title] { } |
| 가상 클래스 선택자 | 특정 이벤트가 발생된 태그를 선택 | a:hover { } |
| 종속 선택자 | 타입 선택자와 id 선택자, class 선택자가 혼합된 형태 | li.acls01 { } |
| 하위 선택자 | 앞 요소의 모든 하위 요소를 선택 앞요소 공백 뒷요소 로 표현 |
div span { } |
| 자식 선택자 | 직계 자식을 선택한다 | A > B { } |
| 그룹 선택자 | 여러 선택자를 같이 사용하고자 할 때 사용 여러 선택자를 쉼표로 구분하여 연결한다. |
A, B, C { } |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 선택자</title>
<link href="resources/css02.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>선택자</h1>
<article>
<h3>타입 선택자</h3>
<pre>태그 이름을 지정하여 선언</pre>
</article>
<article>
<h3>id 선택자</h3>
<ul>
<li id="sid01">요소에 id를 지정하고</li>
<li id="sid02">style에서 지정된 id 값을 사용</li>
<li id="sid03">#으로 구분</li>
</ul>
</article>
<!-- id 선택자는 페이지내에서 하나만 존재해야 한다. -->
<article>
<h3>전체 선택자</h3>
</article>
<!-- 클래스 선택자 -->
<!--
여러 요소에 공통적으로 적용
-->
<article>
<h3>클래스 선택자</h3>
<ol>
<li class="scls" id="scls01">요소에 class를 지정하고</li>
<li class="scls">style에서 지정된 class 값을 사용</li>
<li class="scls">.(dot)으로 구분한다.</li>
</ol>
<!-- id선택자가 class 선택자보다 우선순위가 높음, id를 scls01로 지정한 li의 글씨가 검정이고 나머지는 변해있지 않은 것을 볼 수 있다.-->
</article>
<article id="at">
<h3>자식 선택자</h3>
<div>
<p>자식1</p>
</div>
</article>
<!-- 인접 선택자 -->
<article>
<h3>인접 선택자</h3>
<b>지정한 요소 다음</b>
<span>에 나오는 요소 선택</span>
<b>확인용추가용</b>
</article>
<!-- 속성 선택자 -->
<article>
<h3>속성 선택자</h3>
<p title="a">속성이 정의된</p>
<p title="b">태그만 선택하는</p>
<p>선택자</p>
<p name="c">name 속성 정의</p>
</article>
<!--
0113
-->
<!-- 가상 클래스 -->
<article>
<h3>가상 클래스 선택자</h3>
<ul>
<li>특정 이벤트가 발생된 태그</li>
<li><a href="http://www.naver.com">네이버</a></li>
<li><a href="http://www.daum.net">다음</a></li>
<li><a href="http://www.google.com">구글</a></li>
<li><input type="checkbox">체크박스</li>
</ul>
</article>
<!-- 종속 선택자 -->
<article>
<h3 class="acls01">종속 선택자</h3>
<ol>
<li class="acls01">타입 선택자와</li>
<li class="acls02">id 선택자(#)</li>
<li class="acls01">class 선택자(*)</li>
<li class="acls02" id="sidli">가 혼합된 형태입니다.</li>
</ol>
</article>
<!-- 하위 선택자 -->
<article>
<h3>하위 선택자</h3>
<div>
<span>특정 요소 하위의</span>
<p>
<span>요소를 지정할 때 사용</span>
<p>
<span>한번 더</span>
</p>
</p>
</div>
</article>
<!-- 그룹 선택자 -->
<article>
<h3>그룹 선택자</h3>
<p>여러 요소에</p>
<pre>각각 같은 속성을</pre>
<strong>머라구써있었지</strong>
</article>
</body>
</html>
css02.css
/*
주 석
*/
pre {
text-align: center;
}
h1 {
text-align: right;
color: tomato;
}
/*
id 선택자
*/
#sid01 {
color: green;
}
#sid02 {
color: burlywood;
}
#sid03 {
color: cadetblue;
}
/*전체 선택자*/
/*
* {
text-align: right;
margin: 0;
padding: 0;
}
*/
/*클래스 선택자*/
.scls {
background-color: darkgray;
color: cornsilk;
}
#scls01 {
color: black;
}
/*자식 선택자*/
#at > div > p {
color: silver;
}
/*인접 선택자*/
h3 + b {
background-color: slategrey;
color: white;
}
span + b {
background-color: yellowgreen;
color: blue;
}
/*왜 안될까? span의 뒤에 오는 b 가 없기때문, 만들어주면 바뀌는걸 볼 수 있다*/
/*속성 선택자*/
/* p {
color: skyblue;
} */
p[title] {
color: skyblue;
}
p[title = "b"] {
background-color: tomato;
}
p[name = "c"] {
color : green;
}
/* 가상 클래스 선택자 */
/*
link : 방문 전 링크 선택
visited : 방문 후 링크 선택
hover : 마우스를 요소에 올라가 있는 동안 선택
action : 마우스 클릭을 할 때 선택
*/
a:link {
color: pink;
}
a:visited {
color:gray;
}
a:hover {
background-color: purple;
}
input:checked {
width: 50px;
height: 150px;
}
/* 종속 선택자 */
li.acls01 {
background-color: green;
}
li.acls02 {
color: salmon;
}
li.acls02#sidli {
color: slateblue;
}
/* 하위 선택자 */
/* 자식은 바로 아래 태그만 적용*/
/*하위는 내 밑ㅇ으로 모든 태그 적용*/
div span {
color: slategrey;
}
/* 그룹 선택자 */
p, pre, strong {
color : teal;
}
css 선택자 우선순위
| !important |
| 인라인 스타일 |
| 아이디 선택자 |
| 클래스 선택자 |
| 태그 선택자 |
<!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 type="text/css">
/* 태그 선택자 */
div {
width: 300px;
height: 300px;
background-color: orange;
}
/*클래스 선택자*/
.test1 {
background-color: yellow;
/*클래스 선택자가 태그 선택자보다 우선순위가 높다*/
}
/*아이디 선택자*/
#test1 {
background-color: coral;
/*아이디 선택자가 클래스 선택자보다 우선순위가 높다*/
}
/*-------------------------------------------*/
#test2 {
width: 300px;
height: 300px;
background-color: peachpuff;
}
.test3 {
background-color: black;
color: whitesmoke;
}
p {
background-color: royalblue;
color: whitesmoke !important;
/*!important 키워드를 통해 우선순위를 제일 높일 수 있다*/
}
</style>
</head>
<body>
<h1>선택자 우선순위</h1>
<p>
기본적으로 css 속성은 위에서부터 아래로 적용, 같은 태그에 여러개의 css 속성이 적용된 경우
우선순위에 따라 스타일이 적용된다.
</p>
<pre>
태그 선택자 < 클래스 선택자 < 아이디 선택자 < 인라인스타일 < !important
</pre>
<hr>
<div id="test1" class="test1" style="background-color: orchid;">
우선순위 테스트
</div>
<div id="test2" class="test3">
우선순위 테스트
같은 태그지만 아이디 선택자의 우선순위가 더 높기때문에 아이디 선택자의 내용물이 실행된다.
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>단락</title>
<style type="text/css">
div {
text-align: center;
/*텍스트 중앙 정렬*/
text-transform: capitalize;
/*들어가있는 영어의 앞글자를 대문자로 바꿔준당*/
letter-spacing: 10px;
/*자간 설정*/
font-size: 30px;
}
p {
text-indent: 30px;
/*들여쓰기!*/
}
#one {
text-decoration: overline;
/*밑줄긋기*/
}
#two {
text-align: right;
/*텍스트 우측 정렬*/
}
</style>
</head>
<body>
<div>
<h1>칼 간 삼성…최고 성능 '스마트폰 두뇌' 내놨다abc aaa</h1>
<p><b>hi hello한국 경제</b>|황정수 기자</p>
</div>
<p id="one">
5G 스마트폰 AP '엑시노스 2100' 글로벌 공개<br>
<q>작년 갤럭시폰서 제외 '굴욕'</q>
</p>
<p id="two">
삼성전자 시스템LSI사업부는 스마트폰 애플리케이션프로세서(AP)인 ‘엑시노스’ 등과 같은 시스템반도체의 설계와 판매를 담당한다. 2010년대 중반엔 “미국 퀄컴보다 AP 기술력이 낫다”는 평가를 받기도 했다.<br>
스텝이 꼬이기 시작한 것은 2019년께부터다. 엑시노스 칩이 들어간 스마트폰이 금방 뜨거워진다는 얘기가 나오더니 작년 초엔 삼성의 전략 스마트폰인 갤럭시S20의 국내 모델에 사용하지 못하는 ‘굴욕’을 맛봤다.<br>
시스템LSI사업부가 1년 넘게 ‘와신상담’한 끝에 신제품 ‘엑시노스 2100’ AP를 내놨다. 사업부의 ‘명운’을 걸고 개발한 제품이라는 평가가 나온다. <br>
칼 간 삼성…최고 성능 '스마트폰 두뇌' 내놨다<br>
<br>
최신 5㎚ 공정에서 생산<br><br>
삼성전자는 12일 ‘엑시노스 2100’을 공식 출시하고 상세한 기능을 공개했다.<br>
제품은 경기 화성사업장의 5㎚(나노미터·10억분의 1m) 극자외선(EUV) 공정에서 생산한다. 이 공정은 삼성전자 파운드리(반도체수탁생산)사업부의 최신 라인이다.<br>
5㎚ 칩은 7㎚ 칩보다 로직 면적(크기)이 25% 줄고 전력효율은 20% 이상 좋아졌다는 게 회사 측 설명이다.<br>
설계 최적화로 AP를 구성하는 중앙처리장치(CPU)와 그래픽처리장치(GPU)의 성능은 각각 30%, 40% 개선됐다. 스마트폰이 데이터를 처리하는 속도가 그만큼 빨라졌고, 고화질 영상도 끊김없이 볼 수 있게 됐다는 의미다.<br>
엑시노스 2100에는 1초에 26조회 인공지능(AI) 연산을 할 수 있는 신경망처리장치(NPU)도 들어갔다. <br>
<br>1년반 동안 칼 갈아<br> <br>
엑시노스 2100은 삼성전자가 보유한 시스템반도체 설계·생산 역량을 집약한 제품으로 평가된다. “삼성전자의 AP 사업이 위기에 처했다”는 시장 일각의 평가를 반전시킬 카드인 셈이다.<br>
시스템LSI사업부는 고(故) 이건희 회장이 1997년 당시 삼성 최고의 반도체 인재로 꼽혔던 진대제 부사장에게 ‘사업부장’을 맡길 정도로 핵심적인 사업부다. <br>
2000년대 초반엔 미국 애플의 자체 AP 개발을 돕기도 했다. 2015년 퀄컴의 ‘스냅드래곤 810’ AP가 발열 논란에 휩싸였을 때는 “엑시노스가 더 좋다”는 평가도 많았다. <br>
묘하게 일이 안 풀린 것은 2019년 하반기부터다. 그해 9월 세계 최초로 5세대(5G) 이동통신 AP 엑시노스 980을 ‘공개’했는데 ‘양산’은 화웨이 자회사 하이실리콘의 ‘기린 990 5G’보다 늦었다. <br>
10월엔 엑시노스 AP용 자체 CPU 개발을 담당했던 미국법인의 개발팀이 해체되기도 했다. <br>
더 큰 충격도 있었다. 2020년 초 삼성전자 무선사업부가 갤럭시 국내 모델에서 엑시노스를 제외한 것이다. 내부에선 “엑시노스의 역할이 퀄컴과의 가격 협상용 지렛대로 전락했다”는 푸념까지 나왔다. <br>
삼성전자 AP ‘중흥’ 이끈다 <br>
<br>칼 간 삼성…최고 성능 '스마트폰 두뇌' 내놨다 <br><br>
시스템LSI사업부가 지난해 ‘갤럭시 쇼크’ 이후 손을 놓고 있었던 것은 아니다. 지난해 세계 5위권 스마트폰 업체 중국 비보를 고객사로 확보하고 ‘엑시노스 980’ ‘엑시노스 1080’ 같은 5G AP를 납품했다.<br>
외부 고객사 확보를 통해 시스템LSI사업부의 존재 가치와 수익성을 동시에 높일 수 있었다. <br>
엑시노스 2100은 14일 공개 예정인 삼성전자의 프리미엄 스마트폰 갤럭시S21 국내 모델에 들어갈 것으로 알려졌다. 이를 발판으로 작년 3분기 기준 12% 수준으로 하락한 세계 시장 점유율이 다시 반등할 것이란 전망도 나온다. <br>
강인엽 삼성전자 시스템LSI사업부장(사장·사진)은 이날 온라인으로 열린 출시 설명회에서 “GPU 성능 향상을 위해 미국 AMD와 협업하고 있다”며 “차기 엑시노스 AP엔 더 뛰어난 성능의 GPU를 넣을 수 있을 것”이라고 강조했다. <br>
</p>
<br>
<p>
<img src="https://img.hankyung.com/photo/202101/AA.24983397.1.jpg" alt="기사첨부사진">
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배경</title>
<style type="text/css">
h1 {
background-image: url("image/V.png");
background-position: center;
}
pre {
background-image: url("image/jin1.png");
background-position: center;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>강아지 고양이</h1>
<pre>
강아지는 개의 새끼를 일컫는다.[1] 갓 태어난 강아지의 체중은 견종에 따라 크게 차이가 나며
소형 견종들은 100~200g, 대형 견종들은 400~500g, 초대형 견종들은 700g 까지 나간다.[1]
강아지는 성체로 발달하는 과정에 있으므로 자라면서 털색이나 체형 등이 달라질 수 있으며[2],
정서적인 변화를 겪기도 한다.[3] 여러가지 견종이 있으며, 사람의 지시를 잘따르는 동물이다.
죽은 강아지를 자신의 소유가 아니라 산과 공원의 장소에 묻으면 불법이며, 최대 100만원 이하의 벌금을 낸다.[4]
고양이는 인류로 부터 오랫동안 반려동물로 사랑받아 왔다. 실례로 고대 이집트의 벽화에는 고양이를 새 사냥에
이용하는 그림이 있다. 고양이와 인간의 공생관계는 농경의 발달로 이집트 문명이 발생했을 무렵 곡식을 저장하는
창고에 모여든 쥐를 따라온 것이 시작으로 알려져 있다. 때문에 고양이는 길들여진 동물인 가축의 특성을 전혀
지니고 있지 않으며, 가축이라기보다는 인간과 공생관계라고 보는 것이 맞다.
</pre>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
dl, dt, dd, p {
margin: 0;
padding: 0;
}
.box {
border: 3px double palevioletred;
width: 600px;
}
dt{
background-color: paleturquoise;
text-align: center;
font-size: 20pt;
border-bottom: 5px double dodgerblue;
letter-spacing: 15px;
padding: 15px;
}
.line {
border-bottom: red 5px dotted;
}
</style>
</head>
<body>
<dl class="box">
<dt>S강의장 오전반</dt>
<dd class="line">
<h2>정수인</h2>
<p>선생님 배경 크기 지정은 못 하나요?</p>
</dd>
<dd>
<h2>박성민</h2>
<p>강아지?</p>
</dd>
</dl>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body {
width: 300px;
}
img {
width: 100px;
height: 100px;
}
h1 {
float: left;
/*왼쪽으로 딱 붙여버리고 남는 공간 제거*/
background-color: orange;
}
</style>
</head>
<body>
<h1>강아지 고양이</h1>
<p>
강아지는 개의 새끼를 일컫는다.[1] 갓 태어난 강아지의 체중은 견종에 따라 크게 차이가 나며
소형 견종들은 100~200g, 대형 견종들은 400~500g, 초대형 견종들은 700g 까지 나간다.[1]
강아지는 성체로 발달하는 과정에 있으므로 자라면서 털색이나 체형 등이 달라질 수 있으며[2],
정서적인 변화를 겪기도 한다.[3] 여러가지 견종이 있으며, 사람의 지시를 잘따르는 동물이다.
죽은 강아지를 자신의 소유가 아니라 산과 공원의 장소에 묻으면 불법이며, 최대 100만원 이하의 벌금을 낸다.[4]
고양이는 인류로 부터 오랫동안 반려동물로 사랑받아 왔다. 실례로 고대 이집트의 벽화에는 고양이를 새 사냥에
이용하는 그림이 있다. 고양이와 인간의 공생관계는 농경의 발달로 이집트 문명이 발생했을 무렵 곡식을 저장하는
창고에 모여든 쥐를 따라온 것이 시작으로 알려져 있다. 때문에 고양이는 길들여진 동물인 가축의 특성을 전혀
지니고 있지 않으며, 가축이라기보다는 인간과 공생관계라고 보는 것이 맞다.
<span>
<img src="image/jin1.png">
</span>
강아지는 개의 새끼를 일컫는다.[1] 갓 태어난 강아지의 체중은 견종에 따라 크게 차이가 나며
소형 견종들은 100~200g, 대형 견종들은 400~500g, 초대형 견종들은 700g 까지 나간다.[1]
강아지는 성체로 발달하는 과정에 있으므로 자라면서 털색이나 체형 등이 달라질 수 있으며[2],
정서적인 변화를 겪기도 한다.[3] 여러가지 견종이 있으며, 사람의 지시를 잘따르는 동물이다.
죽은 강아지를 자신의 소유가 아니라 산과 공원의 장소에 묻으면 불법이며, 최대 100만원 이하의 벌금을 낸다.[4]
고양이는 인류로 부터 오랫동안 반려동물로 사랑받아 왔다. 실례로 고대 이집트의 벽화에는 고양이를 새 사냥에
이용하는 그림이 있다. 고양이와 인간의 공생관계는 농경의 발달로 이집트 문명이 발생했을 무렵 곡식을 저장하는
창고에 모여든 쥐를 따라온 것이 시작으로 알려져 있다. 때문에 고양이는 길들여진 동물인 가축의 특성을 전혀
지니고 있지 않으며, 가축이라기보다는 인간과 공생관계라고 보는 것이 맞다.
</p>
</body>
</html>
float
html 요소가 주변의 다른 요소들과 자연스럽게 어울릴 수 있게, 요소를 원하는 위치에 배치하는 속성
속성 값으로 left, right, none 등이 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 600px;
border: 1px dotted red;
}
#w01 {
float: left;
width: 200px;
padding: 15px;
background-color: palevioletred;
}
#w02 {
float: right;
width: 200px;
padding: 15px;
background-color: powderblue;
}
#w03 {
clear: left;
/* 왼쪽에 있는 것을 취소? 뭔말이고 */
padding: 10px;
background-color: royalblue;
}
</style>
</head>
<body>
<h1>S강의장 오전반</h1>
<div id="wrapper">
<div id="w01">
선생님 배경크지 지정은 못하나요? 아아 넵넵
</div>
<div id="w02">
강아지는 개의 새끼를 일컫는다.갓 태어난 강아지의 체중은 견종에 따라 크게 차이가 나며 소형 견종들은 100~200g, 대형 견종들은 400~500g, 초대형 견종들은 700g 까지 나간다.
</div>
<div id="w03">
강아지는 성체로 발달하는 과정에 있으므로 자라면서 털색이나 체형 등이 달라질 수 있으며 정서적인 변화를 겪기도 한다.
</div>
</div>
</body>
</html>
display
웹 페이지의 레이아웃을 결정하는 속성
| 속성 값 | 기능 |
| 블록 (block) | 새로운 라인에서 시작하고 해당 라인의 모든 너비를 차지하게 하는 속성 |
| 인라인 (inline) | 새로운 라인에서 시작하지 않고, 요소의 내용만큼의 너비를 차지하게 하는 속성 |
| 인라인-블록 (inline-block) | 인라인 요소와 비슷하지만 너비와 높이를 설정할 수 있다. |
<!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 type="text/css">
/*
inline : 줄바꿈 x , span 과 비슷
block : 앞뒤로 줄바꿈 , div와 비슷
none : 박스 생성x, 공간차지
*/
div {
display: inline;
}
</style>
</head>
<body>
<div>
<h1>제목</h1>
<div id="menu1">
<a>메뉴 1</a>
</div>
<div id="menu2">
<a>메뉴 2</a>
</div>
<div id="menu3">
<a>메뉴 3</a>
</div>
</div>
</body>
</html>
overflow
요소의 내용물이 지정된 범위를 벗어나게 될 경우 처리하는 속성
| 속성 값 | 기능 | 결과 ( 빨간색이 지정 범위 ) |
| visible | 기본값, 내용물이 범위를 넘어가도 그냥 보여준다 |  |
| hidden | 내용물이 해당 범위를 넘어가면 넘어간 부분을 숨긴다. |  |
| scroll | 범위를 넘어가면 스크롤바를 생성하여 해당 범위에서만 보이게 한다. |
 |
| auto | 넘어갈 경우 스크롤바를 만들어주어 해당 범위내에서만 보이게 한다. 넘어가지 않을 경우 스크롤바를 생성하지 않음 |
 |
<!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 type="text/css">
#body {
border : 1px solid red;
width: 300px;
height: 200px;
overflow: visible;
/*
overflow: hidden;
내용물이 해당 범위를 넘어갈 경우 숨겨버린다.
overflow: auto;
내용물이 해당 범위를 넘어갈경우 스크롤을 만들어서 해당 범위 내에서만 보이게 한다.
넘어가지 않을 경우는 스크롤이 생기지 않음
overflow: scroll;
넘어가지 않아도 스크롤바가 생겨있음
overflow: visible;
기본값 , 넘어가도 보인다.
*/
}
</style>
</head>
<body>
<div id="body">
<h1>S강의장 오전반</h1>
<p>강아지는 개의 새끼를 일컫는다.[1] 갓 태어난 강아지의 체중은 견종에 따라 크게 차이가 나며
소형 견종들은 100~200g, 대형 견종들은 400~500g, 초대형 견종들은 700g 까지 나간다.[1]
강아지는 성체로 발달하는 과정에 있으므로 자라면서 털색이나 체형 등이 달라질 수 있으며[2],
정서적인 변화를 겪기도 한다.[3] 여러가지 견종이 있으며, 사람의 지시를 잘따르는 동물이다.
죽은 강아지를 자신의 소유가 아니라 산과 공원의 장소에 묻으면 불법이며, 최대 100만원 이하의 벌금을 낸다.[4]
고양이는 인류로 부터 오랫동안 반려동물로 사랑받아 왔다. 실례로 고대 이집트의 벽화에는 고양이를 새 사냥에
이용하는 그림이 있다. 고양이와 인간의 공생관계는 농경의 발달로 이집트 문명이 발생했을 무렵 곡식을 저장하는
창고에 모여든 쥐를 따라온 것이 시작으로 알려져 있다. 때문에 고양이는 길들여진 동물인 가축의 특성을 전혀
지니고 있지 않으며, 가축이라기보다는 인간과 공생관계라고 보는 것이 맞다.</p>
</div>
</body>
</html>
position
html 문서 상에서 요소를 배치하는 방법을 지정한다. 기본값은 static
| 속성 값 | 기능 |
| relative | static이었을 때의 위치를 기준으로 top, left, right, bottom 방향으로 지정한 만큼 이동 |
| absolute | static 속성을 가지고 있지 않은 부모 요소를 기준으로 움직인다. 부모 요소중에 포지션이 static이 아닌 부모가 없다면 body를 기준으로 한다. |
| fixed | 특정 위치에 고정시킨다. |
<!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 type="text/css">
#box {
width: 550px;
border: 1px dotted red;
position: relative;
}
p {
width: 130px;
height: 100px;
color: white;
}
.myred {
background-color: tomato;/*빨간색 눈이 넘 아파서 도마토 색으로 바꿈*/
position: relative;
}
.myred:hover {
z-index: 100;
}
.myblue {
background-color: cornflowerblue;
position: absolute;
left: 100px;
top: 30px;
z-index: 2;
/*숫자가 높을 수록 위로 올라오는것*/
}
.myblue:hover {
z-index: 100;
}
.mygreen {
background-color: forestgreen;
position: relative;
left: 30px;
top: -30px;
}
.mygreen:hover {
z-index: 100;
}
#fixed {
width: 100px;
height: 300px;
background-color: gainsboro;
position: fixed;
right: 50px;
top: 100px;
}
/*
position | 기본값은 static
relative 는 static일때 배치되는 위치에서 얼마만큼 이동하는 것
*/
</style>
</head>
<body>
<div id="box">
<p class="myred">박스의 크기와 위치를 잘 살펴 보아야 합니다.</p>
<p class="myblue">박스의 포지션 속성을 바꿔가며 테스트 해보아야 합니다.</p>
<p class="mygreen">포지션을 이해하기 위해서는 시험해보고 관찰해 보는 것이 절대적으로 필요합니다.</p>
</div>
<div id="fixed">
fixed!!
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<!-- 화면을 이동해도 fixed는 고정된 자리에 있다.-->
</body>
</html>
참고
'기록 > 자바_국비' 카테고리의 다른 글
| [배운내용정리] 0115 자바 국비교육 _ Javascript (0) | 2021.01.15 |
|---|---|
| [배운내용정리] 0114 자바 국비교육 _ HTML_CSS (0) | 2021.01.14 |
| [배운내용정리] 0112 자바 국비교육 _ HTML (0) | 2021.01.13 |
| [배운내용정리] 0111 자바 국비교육 _ HTML (0) | 2021.01.11 |
| [배운내용정리] 0108 자바 국비교육 _ HTML (0) | 2021.01.10 |
