01. 기본 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<!--내용-->
</body>
</html>
02. 구역 나타내기
<div></div> 태그 : 콘텐츠 분할, 구역 나누기
클래스 속성을 이용해 그림자 입힌 예시 🔻
<div class="shadowbox">
<p>shadowbox</p>
</div>
<h1>~<h6> 태그 : 구획 제목 요소
제목 태그, 콘텐츠 목차 만들 수 있음
<h1>hello</h1>
<h2>css</h2>
<h3>javascript</h3>
<h4>bootstrap</h4>
<h5>html</h5>
<h6>programs</h6>
<p></p> 태그 : 문단 정의
자동으로 위, 아래쪽에 여백이 추가됨
<p>웹개발 1주차</p>
<p>html, css</p>
03. 자주 사용하는 CSS
- margin(바깥 여백)
- padding(안쪽 여백)
- border-radius(모서리 둥글게)
- text-align(가로 정렬)
- color(색 지정) => 배경화면 색 지정 background-color
- width(가로 값)
- height(세로 값)
- background-position(배경화면 요소 위치 지정)
04. 폰트 넣기
구글 폰트 > 폰트 클릭 > type tester > select 버튼 > href 링크 복사해서 <head> 태그 사이에 > css 태그 복사해서 <style> 태그 사이에
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
05. 부트스트랩
CSS 요소 사용할 수 있는 곳
https://getbootstrap.com/docs/5.2/getting-started/introduction/
Get started with Bootstrap
Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.
getbootstrap.com
⭐ 화면이 설정해둔 값을 넘어가도 그대로 보이게 할 수 있는 방법
500px에서 95%만 보이다가 넘어가도 500px로 보이게 🔻
width: 95%;
max-width: 500px;
06. Javascript
- 리스트
let a_list = [1,2,3]
a_list[0] //1
a_list.length //3 - 딕셔너리
let a_dict = {}
let b_dict = {'name':'yeon'}
b_dict['name'] //'yeon'
- if, if-else
키 입력하고 롤러코스터 탈 수 있는지 알아보기
function rollercoaster(height){
if (height >= 120){
alert("You can ride the rollercoaster!")
}else{
alert("You can't ride the rollercoaster.")
}
}
rollercoaster(120) //You can ride the rollercoaster!- for
0-9까지 1씩 증가
for(let i=0; i<10; i++){
console.log(i)
}
'개발일지 [스파르타코딩클럽] > 웹개발' 카테고리의 다른 글
| [웹개발] #3주차 파이썬 기초, mongoDB (0) | 2022.11.27 |
|---|---|
| [웹개발] #2주차 jQuery 이용한 페이지 만들기 (0) | 2022.11.20 |
| #1주차 과제 [팬명록 만들기] (0) | 2022.11.11 |