기초/웹 개발 왕초보 입문

1주차_화면만들기 2

Hyeon_E 2022. 11. 21. 00:37

파일 관리하기 

<head>
<link rel="stylesheet" href="./styles.css" />
</head>

css파일과 html파일을 분리해서 관리

 

- 파일의 경로를 표현할때 현재 디렉토리를 표현하는 점(.)과 슬래시(/)를 꼭 포함하여 작성해야함


게시판 리스트 만들기

<table class="table table-striped table-hover">

 

 

클래스는 각 값에 띄어쓰기로 구분, 새로운걸 넣고 싶다면 띄어쓰기를 하고 넣어주면 됨


Javascript 기본

웹사이트 안에서 어떤 동작을 만들어 낼때는 자바스크립트 사용

사용자와 상호작용하는 웹사이트를 만들때 필요

 

Javascript 기본문법 : 변수

let a = 10;
console.log(a);

- 대부분의 코드는 각 줄 마지막에 세미콜론(;)을 생략해도 동작하지만 생략하지 않는 것을 권장

지시자를 쓰고 변수명을 쓰고 변수에 들어갈 값을 씀

ex) let 변수명 = 값;

 

Javascript 기본문법: 제어문(1) 조건문

조건문은 조건이 참인지 거짓인지에 따라서 그 안에 있는 코드가 실행될지 안될지를 판단

- 개발자도구 console를 이용해 코드작성 중 코드 내 줄바꿈이 필요할 경우, 반드시 shift + enter를 누르기

if 조건문을 확인 후 거짓이면 그 다음 조건을 확인, 모든 조건이 아닐때는 else문 안에 코드 실행

 

Javascript 기본문법: 제어문(2) 반복문

코드를 반복할때 사용하는 문법

i를 0번부터 2보다 작을때까지 1씩 증가시키면서 반복

for문은 3부분으로 나누어져 있는데

첫번째 부분, 선언부: 변수를 만들거나 초기화를 하는 부분

두번째 부분, 조건부: 반복문을 언제까지 반복시킬 것인지에 대한 조건

세번째 실행이 되는 부분

 

Javascript 기본문법:  함수와 이벤트

<head>
    <script>
      function myfunc() {
        alert("test");
      }
      myfunc();
    </script>
</head>

함수를 만들때는 function이라는 지시어 사용하고 자신이 사용하고 싶은 함수이름을 쓰면 됨

함수는 만드는 부분이 있고 사용하는 부분이 있음

실행결과

<body>
    <button onclick="myfunc();">함수호출</button>
</body>

이벤트를 이용해 함수 출력

 

버튼을 클릭하면 onclick이벤트로 함수 myfunc이 실행됨