HTML = 태그 공부하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YOON | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>CSS = <style> ~ </style>로 꾸미기
div로 묶어서 바꿔주는게 좋음..<head> 내에서 <style> ~</style>의 클래스 선언으로 꾸며준다*class속성 중첩 가능!<div> ~~~ </div>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> YOON | HTML 기초</title>
<style>
.section{
color: rebeccapurple;
}
</style>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div class = "section">나는 구역을 나누죠</div>굉장히 많은 속성들을 꾸밀 수 있다..
-
background-image, background-size, background-position
color, width, height, border-radius, margin, padding 등등... -
배경관련
background-color
background-image
background-size -
사이즈
width
height -
폰트
font-size
font-weight
font-famliy
color -
간격
margin : 12h 3h 6h 9h; | auto; -> 시계방향으로 줄 수 있음 | 자동채우기
*글속성과 박스속성에 따라 다르기 때문에.. 자동으로 정렬이 안 될 수도 있으므로..
글속성 -> 박스속성 (display:block;)
padding
padding-top
CSS_font바꾸기
이 주소에서 폰트를 가져온다.
https://fonts.google.com/?subset=korean
- 해당 사이트에서 원하는 폰트를 찾는다.
- 해당 폰트의 LINK와 css 코드를 복붙.
- 이때 Link는
<title> ~ <style> 사이에 CSS코드는 <style>안에서.. 참고로 전체 글꼴을 바꾸려면 *{}클래스를 이용한다
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> YOON | HTML 기초</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
*{
font-family: 'Jua', sans-serif;
}
.section{
color: rebeccapurple;
}
</style>
</head>CSS_분리
다음과 같이 css 코드만 따로 묶어놓은 파일을 생성한 후 html에서 link로 불러오면 조금 더 깔끔하게 작성할 수 있다
Bootstrap_'남이 만든 CSS'
이용하기 전 준비단계 bootstrap 사이트와의 연결
여기서 js연결 = 드라마틱한 효과들..을 사용할 수 있음
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title> YOON | 부트스트랩 연습하기</title>
</head>
<body>
<h1> 내용 </h1>
</body>
</html>
이 주소에서 가져와서 사용한다.
https://getbootstrap.com/docs/4.0/components/alerts/
굉장히 다양한 속성들을 간단하게 사용할 수 있을듯..
참고로 CSS문법은 W3schools가 유명하다..
https://www.w3schools.com/cssref/default.asp
JS_<script> ~ </script>로 적용하기
브라우저에 적용되는 유일한 언어 cmd+option+i.console ~= script
<head> 내의 <script> ~</script> 안에서 작성한다
문법은 뭐,, 자료형 및 구조 = 파이썬, 문법 = C언어 라고 생각하는게 좋을듯!
hello