ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • Week 1 - HTML, CSS, JavaScript 기초
      예대 출신의 코딩 도전기 2021. 7. 4. 17:27
      예대 출신의 코딩 도전기 - 1주차 개발일지 
      #틀린 사항이 있으면 댓글에 알려주시면 감사하겠습니다!

       

      1) 서버/클라이언트/웹의 동작 개념

      1.1) HTML을 받는 경우

      웹브라우저는 클라이언트가 서버에 1) 요청을 보내고, 2) 받은 HTML 파일을 그려준다.

      1.1)

      1.2) 데이터만 받는 경우

      서버에서 데이터만 받는 경우가 더 많다. 이를 JSON 형식이라고 한다고 한다. (추후 배워야할 부분)

      1.2)

      Note to self : 추후 강의에서 이부분을 더 다룰지 모르겠지만, 더 깊은 이해를 위해 스스로 좀더 서버, 클라이언트 개념에 대해 찾아봐야할 것 같다.

      웹의 동작 방식에 대한 글 :

      Common questions - Web 개발 학습하기 | MDN

      2) 환경 구성 (필수 프로그램 설치)

      수업에서 사용하는 IDE는 PyCharm이다. 이전에 들은 다른 무료 강의에서 VScode를 사용했었는데, 첫인상은 무언가 무거운 느낌이다.

      사용버젼은 PyCharm Professional이고, 스파르타코딩클럽을 통해 4개월 무료 사용 라이센스 코드를 얻어 등록하였다.

      그 외에 JetBrains, AWS에 가입하였다.

      3) HTML, CSS 기본 개념

      3.1) 뼈대를 구성하는 HTML, 이를 꾸며주는 CSS

      • HTML은 구역과 텍스트를 나타내고, CSS는 각 구역을 꾸며준다.
      • HTML 내 style속성으로 꾸미기를 할 수 있지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS파일이 탄생. HTML 코드 내에 CSS파일을 불러와서 적용한다.

      3.2) HTML 기초

      • HTML은 문서의 형태를 기반으로 한다.
      • <>로 이루어진 다양한 tag로 이루어짐. 보통 열고(<>), 닫는(</>)태그로 구성됨
      • HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다.
        • head 안의 대표적 요소들: meta, script, link, title 등
        • body 안의 대표적 요소들: h1~h6의 제목(heading) 요소, 
      <!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>나는 구역을 나누죠 division의 약자입니다</div>
    <p>나는 문단이에요. paragraph의 약자입ㄴ다.</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
        <li> 리스트 만들 때 써요 </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>

      정렬의 중요성

      코드의 생김새 파악과 오류 해결을 위해 코드의 정렬은 매우 중요하다!
      PyCharm에서 cmd+alt+L로 자동정렬 기능을 사용할 수 있다. (win의 경우 ctrl+alt+L)

       

      #주석처리

      코드를 쓰는 과정에서 내가, 혹은 다른 사람에게 메모를 남기는 용도로 사용 or 추후 지우는 등 수정이 필요한 코드에 쓰는 식으로 활용한다.

      단축키 : cmd + /  거의 모든 IDE에서 동일 단축키를 활용

       

      #CSS 구글링 할 때 Tip

      - w3schools

      - mdn

      위 두 곳의 문서에서 사용법 참고하기

      4) Bootstrap(부트스트랩) 활용하기

      Bootstrap이란?
      세계에서 가장 인기있는 HTML, CSS, JS 프레임워크
      • 남이 작성해둔 CSS 템플릿을 적용하는 것.
      • 적용 : 분리되어있는 CSS파일을 HTML 내에 불러오는 것이다. 즉 <head>부분에 부트스트랩 시작 템플릿을 사용해야 한다. (하단 코드스니펫 참고) (CDN 방식)
      • <!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>부트스트랩 CND으로 불러오기</title>
</head>

<body></body>
         
      Note to Self
      Bootstrap 환경 구축에는  1.라이브러리 파일을 설치해 추가 / 2. CDN을 이용해 추가 하는 방식이 있다고 한다. 위의 방식은 2번에 해당하는 방식이다.
      html의 <link>에 있는 https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css 주소를 확인해보면 css 스타일시트가 보인다. (주소의 .css앞의 .min을 지워주어야 제대로 보인다. 이유는 무엇?)

      5) JavaScript 맛보기

      자바스크립트란?
      • 프로그래밍 언어 중 하나로, 웹페이지에 '생동감을 불어넣기 위해' 만들어진 프로그래밍 언어. (웹페이지의 움직임 등)
      • 모든 브라우저의 표준이 되는 프로그래밍 언어.
      • 브라우저 환경에서 웹페이지 조작, 클라이언트와 서버의 상호작용에 관한 모든 일을 수행할 수 있다.
      • HTML, CSS와 완전히 통합할 수 있다.

      HTML의 <head>~</head> 안에 <script>~</script>를 만들어 그 안에 JS 작성.

      Note to Self : JS로 작성한 프로그램을 스크립트(script) 라고 부른다. 스크립트는 보다시피 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행된다.

      자바스크립트 관한 글 : https://ko.javascript.info/intro 

       

      5.1) JavaScript의 기초 문법

      변수

      let num = 20
// num이라는 변수에 20이라는 값을 넣는다.
// let으로 변수를 선언한다.
변수명은 쉽게 알아볼 수 있게 쓰는 것이 중요. 띄워쓰기, 언더바(_)외에 다른 특수문자는 사용 불가
let first_name = 'Bob' // snake case라고 한다.
또는
let firstName = 'Bob' // camel case라고 한다. 회사마다 규칙이 존재

       

      자료형

      • list (순서 O)
        • 선언시 대괄호 []를 사용
        • let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let b_list = [1,2,'hey',3] // 로 선언 가능

b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력

// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력

// 리스트의 길이 구하기
b_list.length // 5를 출력
      • dict (key + value 구조)
        • 선언할 때 중괄호 {} 사용
        • let my_dict= {} //딕셔너리 선언. 변수 이름은 필요한대로.
my_dict['key'] = 'value' // 이렇게 키, 밸류 값을 dict에 더할 수 있다.

//또는

let dict2={'name':'Bob','age':21} //로 선언가능
dict2['name'] // 'Bob'을 출력
dict2['age'] //21 출력
      • 리스트와 딕셔너리의 조합
        • list []에  dict {}를 넣어 활용할 수 있음. #순서를 표시할 수 있고, 정보를 묶을 수 있게된다.
      //예를 들어 고객정보를 딕셔너리를 활용해 묶을 수 있다.
let customer1 = {'name': '김모씨', 'phone': '010-1234-5678'};
let customer2 = {'name': '박모씨', 'phone': '010-9876-5432'};
//여기에 순서를 나타내기 위해 리스트를 활용하면 더욱 깔끔해진다.
let customer_list = [
    {'name': '김모씨', 'phone': '010-1234-5678'},
    {'name': '박모씨', 'phone': '010-9876-5432'}
]

//indexing으로 원하는 순서의 정보를 불러올 수 있다.
customer_list[1]['name'] // '박모씨' 출력
      위와 같이 응용하면 다루기 쉬워지며, 새로운 정보값을 더할 때 .push() 함수를 이용해 간단히 추가가 가능하다.
        • 반대로  dict에 list를 value로 넣을 수도 있음 
          • a_dict['my_list][2] -> dict의 my_list라는 key에 대입되어있는 value값인 리스트의 3번째 값 불러오기.

      함수 Function

      • 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차
      • 기본구조
      • // 만들기
function 함수이름(필요한 변수들) {
	내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);

//예시 두 숫자를 입력받으면 더한 값을 결과로 돌려주는 함수
function sum(num1, num2) {
	return num1 + num2;
}

sum(3,4); // 7 출력
sum(10,-8); // 2 출력
      • Return을 만나면 함수가 종료되고 함수에 의해 반환된 값이 지정되어 나온다.

      조건문

      • 특정 조건을 만족했을 시 어떤 작업을 수행할 때 사용한다.
      • 기본구조 
        function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else {
		alert('청소년이에요')
	}
}

is_adult(25)​

// if, else if, else 

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

is_adult(12)

//else if는 원하는 조건이 채워질 때까지 반복해 사용 가능
         
      • AND 조건과 OR 조건
        • && <- And 조건, 둘 다 만족
        • || <- Or 조건, 둘 중 하나만 만족해도
          • 예시
      function is_adult(age, gender){
	if (age > 65 || age < 10) {
		alert('탑승하실 수 없습니다')
	} else if(age > 20 && gender == '여'){
		alert('성인 여성')
	} else if (age > 20 && gender == '남') {
		alert('성인 남성')
	} else {
		alert('청소년이에요')
	}
}

is_adult(25,'남')

      반복문

      • 반복조건이 일치하지 않을 때가지 계속 주어진 수식을 반복하며 값을 출력한다.
      • 기본 구조
      • for (1. 시작조건; 2. 반복조건; 3. 더하기) {
	4. 매번실행
}

1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3

와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.

//예시 -> 0~99까지 출력하고 싶다면

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

       

       

      1주차 개발일지 마무리 하며

      1주차 과제로 만든 미니 쇼핑몰 페이지는 다른 게시물로 분리해 올려보려고 한다.

       

      일단 실습 위주의 수업이라 손에 익히며 배우는 점이 좋다. 하지만 이론적인 부분에서 기본 개념만 알고 넘어가다보니 스스로 아쉬운 것이 많아 더욱 찾아보며 학습을 병행하도록 해야할 것 같다.

       

      예를 들어 JS에서 사칙연산 등이 가능하지만 해당 수식이 어떻게 쓰이는지 등은 생략하고 넘어가거나, 자료형에서 당장 필요한 list, dict만 다루는 점 등 추가적으로 어떤 것이 있는지 알아보려한다.

       

      '프레임워크', '라이브러리' 와 같은 용어의 정확한 의미 등을 찾아 배울 필요성이 느껴진다.

       

      평소에 웹페이지를 보며 HTML 구조 등을 나눠보는 연습을 하면 구상에 도움이 될 것 같다.

      '예대 출신의 코딩 도전기' 카테고리의 다른 글

      개발일지 Week 3 / Python 웹스크래핑, MongoDB  (0) 2021.08.10
      Week 2 / JQuery, Ajax 기초와 다뤄보기  (0) 2021.07.14
      M1 Mac 환경에 Homebrew(홈브루) 설치하는 법  (0) 2021.07.12
      HTML/CSS 기초를 활용해 미니 쇼핑몰 웹페이지 만들기  (0) 2021.07.06
      예대 출신의 코딩 도전기 -시작 / Week 0  (0) 2021.07.03

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바