[Week 1] html + css + javascript

Resta·2022년 1월 7일

WIL

목록 보기

1/3

html, css 기본 내용, pycharm 사용법
간단한 웹 페이지 만들기 + 부트스트랩 이용
javascript 기초 문법
숙제 - 기획서(레이아웃)보고 나만의 쇼핑몰 메인 페이지

html 기초

HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다.
head 안에 들어가는 대표적인 요소들: meta, script, link, title 등

pycharm 사용시 자주 쓰게 되는 단축키 (Win:ctrl / Mac:cmd)

ctrl+alt+L : 코드 정렬

tab : 들여쓰기

shift+tab : 내어쓰기

태그 자동완성 기능 : ex) p + tab

ctrl+(+/-) : 행 접기 / 펴기

ctrl+/ : 주석달기

ctrl+w : 영역 선택 [단어 > 문장 > 행 > 전체 행 순으로 사용 가능]
(--기본적으로 창 닫기 단축키이므로 파이참 외 사용에 유의해야 함--)

CSS : 선택자

tag / class / id 선택자에 속성부여
복수의 속성부여 가능 : 중복되면 가장 나중에 부여한 속성이 우선순위를 가짐
tag / class / id 선택자(중복x) : 포괄적인 선택자보다 구체적인 선택자가 더 우선순위를 가짐

선택자별 약속된 문법

tag : tag

class : '.'+class

id : '#'+class

'*' : 모든 구성요소

예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>example</title>
    <style>
        h5 {
            color: red;
        }
        .class {
            color: lightpink;
        }
        #id {
            color: paleturquoise;
        }
    </style>
</head>
<body>
    <h5>hello world</h5>
    <p class="class">hello world</p>
    <p id="id">hello world</p>
</body>
</html>

CSS 실습

구글웹폰트 입히기
부트스트랩 : css를 미리 모아둔 것

javascript

크롬 개발자도구 console 이용 (개발자도구 단축키 : F12)
변수 & 기본연산
리스트 & 딕셔너리
함수
조건문
반복문

변수 대입

a = 1 의 의미 : 오른쪽에 있는 것을 왼쪽에 넣는 것
let : 변수 선언
let a = 1
let b = 2
기본 연산 : 사칙연산, 문자열 더하기 등

리스트 & 딕셔너리

리스트 : 순서

let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_list = [1,2,'hey',3] // 로 선언 가능
b_list[1] // 2 를 출력 (0부터 시작)
b_list[2] // 'hey'를 출력
// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력

let a_dict = {} // 딕셔너리 선언

let a_dict = {}  // 딕셔너리 선언
let b_dict = {'name':'Bob','age':21}
b_dict['name'] // 'Bob'을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력

함수

function

function sum(num1, num2) {
	console.log('num1: ', num1, ', num2: ', num2);
	return num1 + num2;
}
//결과
sum(3, 5); // 8
sum(4, -1); // 3

조건문

function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else {
		alert('청소년이에요')
	}
}
is_adult(25)

and 조건 : &&
or 조건 : \\

반복문

for (let i = 0; i < 100; i++) {
	console.log(i);
}

for (1. 시작조건; 2. 반복조건; 3. 더하기) {
	4. 매번실행
}

주로 리스트와 함께 쓰임

1주차 숙제 : 기획서(레이아웃)보고 나만의 쇼핑몰 메인 페이지

기본 html 요소 사용
부트스트랩에서 component 가져와서 사용
주문하기 버튼 클릭시 javascript - alert 주문이 완료되었습니다 팝업 뜨게

느낀점)

javascript 어려움.. 반복 연습하면서 익숙해지기
모르는 부분, 궁금한 부분이 생기면 무조건 구글링
css를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기인데..
정렬병 있는 나로서는 계속 마진을 조정한다. 상하좌우가 예쁘게 떨어지지 않으면 불-편