728x90
1. HTML 기본 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>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 - 꾸미기
1) 구글 웹 폰트 - 폰트 및 적용 link, style code제공
https://fonts.google.com/?subset=korean2) 부트스트랩 컴포넌트 - CSS Lib
https://getbootstrap.com/docs/5.0/components/buttons/
3) 이모티콘 모음
https://kr.piliapp.com/facebook-symbols/4) 이미지 어둡게 처리
//이미지 태그 내 (0.5 수치 조정하여 밝기 조절)
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))◎ JavaScript - 움직임(동적)구현
1) 변수선언
- 변수선언 (let, var)
let num = 20
var num = 20
- 변수 표현방식
let first_name = 'itoh'; //snake case
let firstName = 'itoh'; //camel case
- 변수 유형
let a_list = [1,2,'hey',3] //list
let a_dict = {'name':'itoh','age':24} //dictionary [key, value의 묶음]
let names = [{'name':'itoh','age':24},{'name':'msj','age':23}] //list와 dict의 조합형2) 기본함수
// 나눗셈의 나머지
let a = 20
let b = 7
a % b = 6
// 특정 문자로 문자열을 나누기
let myemail = 'test@gmail.com'
let result = myemail.split('@') // ['test','gmail.com']
result[0] // test
result[1] // gmail.com
let result2 = result[1].split('.') // ['gmail','com']
result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com
myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!3) 조건문
// if
if(age > 20){
alert('성인이에요')
// if, else if...else
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}4) 반복문
// for
/**
for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
}
**/
for (let i = 0; i < 100; i++) {
console.log(i);
}728x90
'IT > Web' 카테고리의 다른 글
| [Web] 개발환경 구성하기 (0) | 2023.01.09 |
|---|