0805 SeSAC(새싹) 3기 1일차
💻
html -> 웹페이지를 만들기 위한 언어
html -> 웹페이지를 만들기 위한 언어
*태그
<html> -> html 문서를 시작하겠다. 웹문서를 시작하겠다.
<head>
<title>안뇽?</title>
</head>
<body>
<div>
하이~
</div>
</body>
</html>div의 형제태그는 없다.
head와 body가 형제태그
부모태그 -> 자신보다 한단계 위에있는 태그 -> parent tag
자식태그 -> 한단계 아래 태그 -> children tag
조상태그 -> 위에 태그 -> ancestor tag
후손태그 -> 아래 태그 -> descentant tag
형제태그 -> 대등한 태그 -> sibling tag
html 태그는 부모태그 X.
부모태그는 항상 하나이다
html -> 사용자한테 정보 전달(일방향)
javascript -> 양방향 소통 프로그래머 연산 작업 가능
css -> 서식, 테마
jQuery -> 언어X -> javascript의 줄임말 세트
📚
실습
8월 달력!
-
css를 활용하여 휴일은 빨간색으로 표현할 것
-
8월 16일을 클릭하면 "아싸 휴일이다!"라는 알림이 뜨게 할 것
(javascript alert) -
31일에는 이미지 하나를 넣을 것!! (이미지 태그 사용법)
-
8월 15일을 클릭하면 광복절에 대한 정보가 나오는 페이지가 뜨게 할 것 (힌트 : 하이퍼링크로 네이버 광복절 페이지 연결)
<html>
<head>
<meta charset="UTF-8">
<title> 8월 달력 </title>
</head>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<style>
.month {
color:blue;
font-size:2em;
text-align:center;
}
.holiday {
color: red;
}
</style>
<script type="text/javascript">
function holyday(){
alert('아싸 휴일이다!');
}
</script>
<body>
<div class="month">
8월
</div>
<table width= "100%" border=0 cellspacing=0 cellpadding=15 style="text-align:center;">
<tr>
<td class="holiday">일</td>
<td>월</td>
<td>화</td>
<td>수</td>
<td>목</td>
<td>금</td>
<td class="holiday">토</td>
</tr>
<tr>
<td class="holiday">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td class="holiday">7</td>
</tr>
<tr>
<td class="holiday">8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td class="holiday">14</td>
</tr>
<tr>
<td><a href="https://terms.naver.com/entry.naver?docId=524241&cid=46625&categoryId=46625" target="_blank" class="holiday" style="text-decoration: none;">15</a></td>
<td class="holiday">
<span onclick="holyday();">
16
</span>
</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td class="holiday">21</td>
</tr>
<tr>
<td class="holiday">22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td class="holiday">28</td>
</tr>
<tr>
<td class="holiday">29</td>
<td>30</td>
<td><img src="star.png" width=30 height=30></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>.my_class{}을 쓰면 my_class가 클래스 이름이라는 뜻
#my_class{}을 쓰면 my_class가 아이디라는 뜻
my_class{} my_class라는 태그에 적용됨
"태그 > 클래스 > 아이디" -> @그래서 id가 제일 우선순위@
모든 태그에는 class라는 속성(서식)과 id라는 속성(다른 태그와 구분하기 위한) 적용 가능
class는 중복 가능, id는 고유의 것
.my_class{color:red;}
#my_id1{color:blue;}
<div class="my_class" id="my_id1">하하하</div>그럼 하하하는 무는 색? -> 범위가 더 작게 잡은 것이 우선할 것이라고 자의적으로 해석한다.
class > id
그래서 blue.
cascade(폭포수 치다)
.my_class{color:red; font-size: 50px;}
#my_id1{color:blue; text-align: center;}
<div class="my_class" id="my_id1">하하하</div>그럼 하하하는 어떻게? 이미 클래스 속성이 있고(크기가 50px), color끼리만 경합이 붙어서 색은 blue. 정렬도 센터.
애당초 클래스 태그를 잘 안쓴다.
float -> 다른 정렬들을 다 무시하고 이 속성을 적용한 태그만 이기적으로 정렬이 적용됨
<div style="text-align:center;">
<span>하하</span>
<img src="cat.jpg" style="float:left">
</div>이러면 센터를 무시하고 이미지만 왼쪽정렬.
position
default - 기본값
fixed -> 태그를 화면 스크롤과 관계없이 그 위치에 고정되게 만들어 버린다.
단, 해당 태그를 block이 아닌 inline-block 속성으로 바꿔버린다.
relative -> absolute를 위해 존재함, absoulte의 기준이 됨.
absoulte -> 가장 가까운 조상태그 중에 relative를 가진 놈을 찾아서 그를 기준으로 좌표를 잡음.
absoulte는 좌표를 잡아야한다
depth 조정은 z-index로 조정 position이 absoulte일때 유효
z-index가 클수록 앞으로 튀어나온다.
height: 200vh; vh? "vertical height" => 스크롤 생김
display
block : 자기가 한 줄 다 먹음
inline : 크기라는 개념없이 한 줄 안에 들어가기 때문에 height 속성을 무시
inline-block : 크기라는 개념 O. 같은 줄을 공유하되 height 속성을 적용함
none : 없어진다. 그냥 눈에 안보임.
div -> block
span -> inline
table -> inline-block
div는 weight의 디폴트가 100% -> block의 속성을 갖고있기 때문에.
body는 기본적으로 position이 relative
br은 엔터
Author And Source
이 문제에 관하여(0805 SeSAC(새싹) 3기 1일차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gordthemun/0805-SSAC싹-3기-1일차-5yzffo9h저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
