스파르타 코딩클럽 1주차: HTML, CSS, JS

소소·2022년 2월 12일
0
post-thumbnail

시작하기 전에,

코딩에 대해서는 '코'도 아니고, 'ㅋ'정도 알고 있는 것 같다.
그 ㅋ도 흐리다...ㅎㅋ

대학 때 사이버 교양으로 들은 java... (사실 오래되어서 자바가 맞는지 확신도 없다) 가 전부이기 때문이다.

아무튼, 이번에 '코'까지는 배워봐야겠다 싶어서 코딩 강의를 신청했다.
내일배움카드로 신청할 수 있는 스파르타 코딩클럽의 웹개발반이다.
OT에서 개발일지 쓰는 걸 추천해주셔서 배운 걸 기록도 해보려고 한다.

시작하며,

  • '브라우저(ex크롬)'의 역할: 클라이언트가 '서버'에 요청(ex 주소창에 www.naver.com 입력) → '서버'가 준 것을 받아와서 보여줌 (ex 크롬에 네이버 홈페이지가 뜸) ※그래서 내 페이지만 수정, 인터넷 끊겨도 유지 가능, 이 준 것이 뜯어보면 데이터, 특수한 경우 데이터만 받아서 갈아 끼우기도 함 (ex극 예매시 업데이트)

  • 서버가 전달하는 건 코드 (HTML, CSS, JS 등)
    HTML: 뼈대 (ex 사전은 뉴스 옆에 있어)
    CSS: 꾸미기 (ex 사전은 굵은 글씨야)
    JS: 움직이는 것 (ex 클릭하면 이동하는 것 등)

  • 메모장에 해도 되지만, 편하게 해주는 툴이 있음. 예를 들면 파이참이 있고, 파이썬을 쓰기에 가장 편한 툴임.

1. HTML: 뼈대

- 암기보다는 하면서 익히기
- 외우는 게 아니라, 가져다가 써서 만드는 것 (다 외우고 있는 개발자는 없음)
  • 열기: 파이썬→ new- html file
  • 구조
    • head: body를 제외한 모든 것 (홈페이지 위의 탭 아이콘-이름, CSS, JS 다 포함)
      • title: 탭 이름이 바뀜
    • body: 눈에 보이는 모든 것 (화면 내용이 바뀜)
  • 그외 알아둘 것
    • 태그(<>): ex <title;> → 타이틀 태그 (;은 문자로 입력이 안되어 임시로 넣음)
    • div태그: 묶어서 쓰는 것, 부모, 자식 묶는 개념
    • (자주 사용하는 키) ctrl+alt+l (싹 정리됨), tab
    • url 입력: url + tab
    • 별표(*): 모든 태그에 다 적용한다는 뜻

2. CSS: 꾸미기

- 이번에 배운것 정도만 익숙해지고, 다른 건 외울 필요 없음.
  • ''영수의 바지''초록색'으로 바꿔줘.'
    '명찰'을 달고 (class="mytitle") > '명찰' 지칭함 (style - .mytitle{})
    (class="mytitle"로 지정한 후 위로 가서 style에 .mytilte{}로 사용)
    • 이름이 직관적임 (ex color, font-size)
- 거의 항상 같이 다니는 거

background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg(이미지는 강의 때 사용했던 것)");
background-size: cover;
background-position: center;
- 여백 개념: 맵 밖, 맵 안 (조금 헷갈릴 수 있으니 주의)

margin 위 오른쪽 아래 왼쪽 (시계방향)
padding, padding-top 등으로도 쓸 수 있음
  • css 중첩적용: "A명찰 B명찰"

  • 폰트적용: 구글링

    • css폰트를 구글링하면 해당하는 코드가 나옴
    • w3schools, mdn 사이트 활용해도 좋음 (ex css border css w3schools, css border mdn으로 구글 검색)
  • 부트스트랩: 남이 만든 예쁜 CSS쓰기

    • "..." 에는 ... 지우고 이미지 넣으면 됨 (이미지 주소 복사)
  • 기타 가능한 기능

    • 코드 일부 파일로 분리하기 가능함
    • 주석 처리: Ctrl+슬래쉬(/) (메모나 잠시 삭제 등 위함, 풀 때도 키 같음)
    • 마우스 오른쪽 - 검사: 거기에 쓰인 코드 볼 수 있음 (마우스 대면 어느 부분인지도 보여줌)
  • 기타 참고

    • div는 화면상 보이지 않음 (확인하고 싶으면 background-color를 통해 볼 수 있음)
    • 박스 속성은 가로세로 개념이 존재하지만, 글 속성은 존재하지 X. 글 속성→ 박스 속성으로 변환 가능함 (display:block)

3. JS(자바 스크립트): 움직이는 것

  • 개발자 도구: 오른쪽키→ 검사
    • 계속 파이참과 왔다갔다하며 확인하기 어려운 만큼 즉석에서 바로 수정할 수 있도록 만든 것.
    • console은 파이썬 코드창에서 이어진다고 생각하면 됨.
  • 변수, 자료형, 함수, 조건문, 반복문

변수

- 변수 이름을 지을때는 남이봐도 알아보기 쉽게. 아니면 나중에 내가 봐도 이 변수가 뭐지?? 할 수 있음.
  • a라는 박스2담았다:
    let a = 2 ▷ 이후 a+2를 입력하면 5가 나옴

  • 문자열도 담을 수 있음 ('' 나 "" 사용):
    let first_name = 'bumkyu'

자료형

- 구글링하기: ex '자바 스크립트 리스트 추가'로 구글링하면 나옴.
- 검사도구에서 키보드 '↑' 누르면 이전에 타이핑한 함수들 나옴.
- '리스트'와 '딕셔너리'는 서로의 요소로 쓰일 수 있음.
  • 리스트(list): 순서가 중요한 담기, []로 씀 ※컴퓨터는 0번째부터 셈
    let a_list = ['수박','참외','배]
    a_list[0]=수박
  • 딕셔너리(dict)
    이름이 뭐니? ▷ '이름'에 대응하는 값(value)을 말해달라는 것
    let a_dict : {'name':'bob','age':27} ※순서는 안 중요함
    key - value , key - value
    a_dict[name] = bob

  • %: 나머지

let a = 100
a%8 = 4 (a를 8로 나눈 나머지가 나옴)
  • 메일의 도메인 구하는 방법: .split 사용
let my email= 'abcde@gmail.com'
my email.split(@)
=값 ["abcde", "gmail.com"]
my email.split(@)[1]
= 값 "gmail.com"
my email.split(@)[1]('.')
= 값 ["gmail","com"]
my email.split(@)[1]('.')[0]
= 값 'gmail'

함수

: (수학) 값을 넣으면 값이 나오는 것, (프로그래밍) 부르면 정해진 동작을 하는 것

- Shift+엔터: 줄 바뀜

funtion sum(num1, num2){ (Shift+엔터)
(tab) return num1+num2
}
위의 sum임의로 이름을 지정한 것
num1, num2라는 변수를 받아서 num1+num2return해라
return은 끝내고 나를 변신시켜줘! 하는 것

let result = sum(2+3)
▷ 이후 result 입력하면: 5가 나옴

funtion mysum(){
alert ('안녕!')
alert ('또 안녕!')
}
▷ 이후 mysum 입력했을 때: 알람창으로 '안녕!' '또 안녕!' 두 개 뜸.

조건문

let age ('24')
if (age > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}

▷ 이러면 '성인입니다'가 뜸

if (age > 20) {
console.log('성인입니다')
} else if(age>10) {
console.log('청소년입니다')
} else {
console.log('아동입니다')
}

- console.log : console 창에 띄운다는 것

- && = and라는 뜻
- || = or라는 뜻 (엔터 위 키 쉬프트 누르고 나오는 거)

- and or 보다 if문을 가장 많이 쓰므로 if만 알아둬도 괜찮음.
- if else문을 가장 많이 씀.

반복문

모두 나열하기 너무 긴 것들을 짧게 요약 (요게 헷갈림)

  • for(let i = 0; i<10; i++){
    console.log(i)
    }
    ▷ 이 경우 1,2,3,4,5,6,7,8,9 가 인출됨

  • list 와 찰떡궁합
    let people = ['철수','영희','민수','형준','기남','동희']
    people. length 입력하면: 6이 나옴
    for(let i = 0; i<people.length; i++){
    console.log(people[i])
    }
    ▷이 경우 철수, 영희, 민수, 형준, 기남, 동희 인출. (0부터 카운트)

  • let scores = [
    {'name':'철수', 'score':90},
    {'name':'영희', 'score':85},
    {'name':'민수', 'score':70},
    {'name':'형준', 'score':50},
    {'name':'기남', 'score':68},
    {'name':'동희', 'score':30},
    ]
    socres 입력 ▷
    [
    {'name':'철수', 'score':90},
    {'name':'영희', 'score':85},
    {'name':'민수', 'score':70},
    {'name':'형준', 'score':50},
    {'name':'기남', 'score':68},
    {'name':'동희', 'score':30},
    ]
    인출
    scores[0] 입력▷ '{'name':'철수', 'score':90}' 인출
    scores[1]['score'] 입력▷ {'name':'영희', 'score':85} 에 해당하는 '85'인출

  • for(let i = 0; < scores.length; i++){
    console.log(score[i])
    }
    ▷scores와 같은 값 인출

  • for(let i = 0; < scores.length; i++){
    console.log(score[i]['name'])
    }
    ▷socres 내에서 이름만 인출 (철수, 영희, 민수, 형준, 기남, 동희)

  • for(let i = 0; < scores.length; i++){
    let name = scores[i]['name']
    let score = scores[i]['score']
    console.log(name,score)
    }
    ▷ 철수 90, 영희 85 ... 이런 식으로 인출

  • for(let i = 0; < scores.length; i++){
    let name = scores[i]['name']
    let score = scores[i]['score']
    if (score<70) {
    console.log(name,score)
    }
    ▷ (조건에 맞는) 형준 50 기남 68 동희 30 세 명 인출

마치며,

생각보다 어렵다.
그나마 다행인 건 얼마 전 컴활을 준비해서 좀 더 익숙한 느낌으로 배울 수 있었다.
그리고, 강의 중간중간 예제 할 때마다 10분 주시는데 10분 안에 절대 못함ㅠ
나만 그런가 했는데, 나만은 아니었다.
스터디(스온스)에서 같은 생각하는 사람들을 알게됨ㅠㅠㅋㅋㅋ

그래도 저게 대체 뭐야? 싶었던 프로그래밍 화면을 다루고,
내가 입력하는대로 결과값이 나오고, 화면이 만들어지는 게 재미있다.
예전부터 배우고 싶었던 것인 만큼 새롭게 알게되는 것들이 뿌듯하기도 하다.

똑같이 따라한 것 같은데 작동이 안 되면 답답하지만
코드 비교하고 다시해 보고, 그래도 안 되면 예시나 답 그대로 입력하거나 복붙.
복붙한 걸 뜯어보면 뭘 잘못 입력했는지 보이기도 하는 것 같다.

그리고 이번에 velog를 처음 써보는데, 글을 쓰는 방식이 (특히 꾸미거나 배치하는 게) 좀 잘 쓸 수 있는 방법을 찾아봐야겠다.

1주차 개발일지 겸 후기 끝!

아래 사진은 참여한 스온스~ 더 자주 가고 싶었는데 어쩌다보니 두 번 밖에 못 갔다ㅠ 다음 주는 더 열심히 참석해야지.

유령옷 입고 춤추는 거 귀여움ㅠㅠㅋㅋㅋ

profile
코딩 입문한 초보입니다:)

0개의 댓글