JavaScript
HTML, CSS위주
MoonjuLee
2022. 7. 27. 19:56
※ 두서없이 정리할 예정입니다!(죄송합니다..)
1. 형식 설명
<!--기본 시작 틀-->
<!---->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
1. <html lang="en"> 는 <!-- en은 영어를 뜻하고, lang은 검색엔진을 위한 내용(택)-->
2. <meta charset="UTF-8"> <!--한글깨지면 무조건 이 라인 없는 것임, 다른 meta는 아직..-->
3. <head></head> <!-- head는 해당 문서에 대한 정보인 메타데이터(metadata)의 집합을 정의함.-->
4. <title></title> <!--해당 문서의 제목(title)을 정의함.-->
5. <body></body> <!--해당 문서의 콘텐츠 영역을 정의함.-->
6. <h1></h1> <!-- 바디태그 밑에 콘텐츠를 표시해준다. h1~6까지 존재하며 그 이후의 숫자는
브라우져가 임의로 설정한다.-->
7. <a></a> <!-- 다른 콘텐츠와 연결되는 하이퍼링크(hyperlink)를 정의함.
<a href="주소"></a>형식으로 쓴다.-->
8. <script></script> <!-- 자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의함.
html에서 javaScript로 바꿔 쓸거야 라는 의미?-->2. 내부 추가적인 것들
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> DIV와 CSS의 만남 </title>
<!--내부 스타일시트라고 부름-->
<style>
/* 요게 스타일시트의 주석*/
#sleepy{ /* 아이디는 # */
border: 50px;
border-style: groove;
border-color: red;
}
.fighting{ /* class속성으로 접근시 . */
color: yellow;
font-size: 100px;
font-weight: bolder;
background-color: rgb(32, 245, 13);
}
</style>
</head>
<body>
<!--division(영역) 나누는데 쓰이는 태그, 곧 레이아웃을 잡을 때 사용 정말 많이 사용함 웹 디자이너가-->
<!--태그 안에 직접 style을 주는 걸 inline style이라고 부름. 내부 스타일 시티에서 설정한것 보다 우선순위가 높음-->
<!-- w3c(저명한 곳 가서 배우기 추천)의 권장은 id는 페이지내에서 유일한 값을 주고
class는 여러번 나와도 상관없음-->
<div id="sleepy" style="border-color: black;">
나중에 이 시간을 후회하지 않게
</div>
<div class="fighting">
힘내자
</div>
</body>
</html>3. CSS 정리
첫번째 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 디자이너들은 보통 필요한 걸 미리 만들어 두고 사용함*/
.fg_white{
color: white;
}
.fg_blue{
color: blue;
}
.fg_green{
color: green;
}
.fg_black{
color: black;
}
.bg_white{
background-color: white;
}
.bg_blue{
background-color: blue;
}
.bg_green{
background-color: green;
}
.bg_black{
background-color: black;
}
</style>
</head>
<body>
<h1>clazz 선택자</h1>
<div class="bg_white fg_green">헐크</div>
<div class="bg_black fg_white">캡틴 아메리카</div>
<div class="bg_blue fg_white">아이언맨</div>
<div class="bg_green fg_blue">토르</div>
</body>
</html>
2번째 코드
<!--위의 코드를 조금 변형한 코드(사용법 연습)-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Selector</title>
<style>
/* CSS 선택자*/
/* 태그 선택자*/
div { /* div 태그 전부 선택*/
color: yellow;
background-color: black;
}
/* id 접근자 */
#hj {
font-size: 50px;
color: blue;
}
/* class 접근자*/
div.dy { /* div 태그 이면서 class가 dy인 것만, 빈 공백없으면 and로 연산 */
color: white;
background-color: magenta;
}
#merong.aaa{ /* id가 merong이면서 class가 aaa 인것 */
font-size: 1000px;
}
</style>
</head>
<body>
<div class="dy">마징가</div>
<div id="hj">태권브이</div>
<div>그랜다이저</div>
<p class="dy">난 p태그</p>
<div id="merong" class="aaa">손오공</div>
<div class="dy">완다</div>
</body>
</html>
1. 마징가는 style -> div.dy 적용
2. 태권브이는 style -> #hj 와 div 동시 적용(상충하는 스타일은 #hj를 적용)
3. 그랜다이저 style -> div 적용
4. 난 p태그 style -> 적용되는 접근자가 없으므로 초기상태
5. 손오공 style -> #merong.aaa 와 div 동시 적용
6. 완다 style -> div.dy 적용
3번째 코드
위에 코드에 덮붙혀 알아야 할 내용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* { /* 모든 것이라는 뜻*/
background-color: red;
}
/* 자식 선택자 */
/* 스페이스는 자식포함해서 자식의 자식.. 그 자식들 모두 포함*/
#ydg > .ggg { /*ydg.ggg = id가 ydg이면서 class가 ggg인 태그 and 연산*/
background-color: green;
font-size: 50px;
border: 5px solid brown; /* 축약기법*/
/* border-style: solid;
border-color: brown; */
}
div,p { /* 여러개 선택은 , */
color: blueviolet;
}
</style>
</head>
<body>
<!--들여쓰기(identation)가 중요 안 그럼 눈 빠짐
부모 자식 관계가 잘 보이도록 ... -->
<div id="ydg">
<div class="ggg">자식1</div>
<div class="ggg">자식2
<div class="ggg">후손1</div>
<div class="ggg">후손2</div>
<div class="ggg">후손3</div>
</div>
<div class="ggg">자식3</div>
</div>
<p>나는 p태그</p>
</body>
</html>
어떻게 적용될지 생각해보자.4. html / CSS 정리
<!--참고용 코드 1번-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--외부 스타일시트 파일 불러오기-->
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="./mystyle.css">
</head>
<body>
<div id="wrapper">
<div id="header">머릿글</div>
<div id="middle">
<div id="side">메뉴</div>
<div id="content">내용</div>
</div>
<div id="footer">바닥글</div>
</div>
</body>
</html
<!--참고용 코드 2번-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 레이아웃 잡을 땐 항상 border 속성을 활용한다.
눈에 보이야 생각이 이어짐 */
div {
display: inline-block; /*div는 default가 block이라 옆에 아무도 못옴*/
width: 200px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<!--table>tr*4>td*4 4의 tr과 4개의 td, 다른것도 가능-->
<!-- 부모 넓이를 500을 주면 자식은 2개만 넣어지고 밑으로 내려와짐 -->
<div id="container" style="width: 900px;">
<div class="kjw">로제</div>
<div class="kjw">제니</div>
<div class="kjw">지수</div>
<div class="kjw">리사</div>
</div>
</body>
</html>
<!--참고용 코드 3번-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--외부 스타일시트 파일 불러오기-->
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="./mystyle.css">
</head>
<body>
<div id="wrapper">
<div id="header">머릿글</div>
<div id="middle">
<div id="side">메뉴</div>
<div id="content">내용</div>
</div>
<div id="footer">바닥글</div>
</div>
</body>
</html>