[3주차 파트 01] css , js

CSS

Cascading Style Sheets의 약자로 html을 꾸며주는 언어

• 적용하는 방법
  - 인라인 : html 태그에 바로 사용

  <button style="background-color: cadetblue">
  	```
  
  
  - 내부 스타일 시트 : html 문서 안에 사용 (head 태그 안에 넣으면 됨)

  	<style>
  		h1 {
    		color: burlywood;
  			}

  ```
  • 외부 스타일 시트 : html 문서 밖에서 사용

    style.css 파일에 스타일 적용 후
    
    html 파일에 <link rel='stylesheet' href='./style.css'>

JavaScript

특정 HTML 요소를 선택하여 제어할 수 있는 스크립트 언어

• 스크립트 언어
  - 프로그램을 제어하는 스크립트 역할을 하는 언어
  

• 적용하는 방법

  	- 인라인 : 사용자와 사용작용시에만 

  • 내부 스크립트
  • 외부 스크립트

• 함수

  	- 특정 기능을 수행하는 코드 덩어리

  • function 함수 이름 () {여기에 기능 정의 } 구조

• 특정 태그를 찾는 방법

  	- id : document.getElementById()

  • class 이름 : document.getElementsByClassName()
  • tag 이름 : document.getElementsByTagName()

• 조건문

  조건에 따라 다른 결과를 보여줄 수 있음
  

//아이디 입력창이 입력 된 경우와 입력되지 않은 경우

const popId = () => {
            if(document.getElementById('login_id').value !== ''){
                alert(document.getElementById('login_id').value)
            }
           else{
            alert('아이디를 입력해주세요')
           }
        }

• 변수

  	- let,var : 재할당이 가능

  • const : 재할당이 불가능