1. 웹 페이지의 구성
HTML - 뼈대. 큰 구성
CSS - 꾸미기. 폰트/ 색상/ 크기/ 그림 넣기 등
JAVA - 실행 코드
2. HTML과 CSS
- HTML
<head>
웹페이지 타이틀
</head>
<style>
class의 스타일을 지정해준다. class 내의 요소들도 지정 가능.
*** class 정의를 내려야 스타일 지정도 가능
*** 한 class로 정의 내린 요소들은 한꺼번에 묶여서 스타일 지정됨. 만약 따로 정하고 싶다면 다른 class로 분리해야
class의 스타일 지정시
.classname {
color: red;
font-size: 30px;
}
classname 부분에 지정해준 class의 이름이 들어가면 된다.
같은 요소가 여러 개로 들어가 있어서 이를 구분하려고 class를 지정해주는 것.
해당 요소가 전 페이지에 1개밖에 없으면 class 별도 지정 필요 없음. 예를 들어, h1(제목)은 보통 한 개 밖에 없으니..
h1 {
color: red;
}
이런 식으로 짜줘도 된다는 것 !
</style>
<body>
웹페이지 메인 화면 구성
<div class=""> </div>
</body>
- CSS
*부트스트랩 적극 활용하기*
3. Javascript
//변수, 자료형, 함수, 조건문, 반복문
- 자료형: 리스트 & 딕셔너리
리스트는 말 그대로 리스트.
let b_list = [1,2,'hey',3]
number/ text 간의 구분은 없는 듯 하다. matlab으로 따지면 cell?
딕셔너리는 Tag가 붙은 리스트. 그림으로 표현하자면...
| name | age | height |
| Bob | 21 | 180 |
코드로 나타낼 때에는 {'name': 'Bob', 'age': 21}
['height'] = 180
이런 식으로 추가도 가능
matlab에서 table과 유사한 형태인 듯.
- 함수
- 기본 형태
function 함수이름(필요한 변수들) { 내릴 명령들 순차적 작성 }
- 조건문 : if (조건) {결과} elseif (조건) {결과} else {결과}
function is_adult(age){
if(age > 20) {
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}주의할 점: 조건에 괄호 필요!!!
- 반복문
for (let i = 0; i < 100; i++) { console.log(i); }++ means 하나씩 더해준다
4. 궁금한 점,,
폰트 설정 시 1개의 폰트 당 1개의 링크를 가져와서 읽어야 하는 건가?
전체 링크 하나를 가져온 후 속해 있는 폰트를 하나씩 읽어올 수는 없을까
'Development > Web development' 카테고리의 다른 글
| 웹개발 3주차 : (3) 과제에서 한 걸음 더 (0) | 2022.02.04 |
|---|---|
| 웹개발 3주차 : (2) DB 사용하기 (0) | 2022.02.04 |
| 웹개발 3주차 : (1) 파이썬 기본 문법과 크롤링 (0) | 2022.01.28 |
| 웹개발 번외편: 덕담 공유 페이지 만들기 (0) | 2022.01.27 |
| 웹개발 2주차 : JQuery & Ajax (0) | 2022.01.21 |