[프로그래머스] 웹 서비스의 이해(2)

Lina Hongbi Ko·2024년 8월 21일

프로그래머스

Programmers_BootCamp

목록 보기

7/76

2024년 8월 21일

✏️ CSS

: Cascading Style Sheets
HTML을 꾸밈

💡 CSS 적용 방법

인라인(Inline) : html태그 안에 작성
- style 속성 사용해서 꾸밈
내부스타일시트(Internal Style Sheet) : html 문서 안에 작성
- head태그 안, style태그 내에 모아서 꾸밈
외부스타일시트(External Style Sheet) : html 문서 밖에 작성 & 연결
- head 태그 안, link태그를 넣고 외부 파일 연결

🔍 인라인 적용예시

<h1 style="color:rgb(173, 6, 6); text-align:center">Login</h1>

🔍 내부스타일시트 적용예시

<style>
	h1 {color: rgb(173, 6, 6); text-align: center}
</style>

🔍 외부스타일시트 적용예시

<html>
	<head>
    	<meta charset="UTF-8">
        <title>Login</title>
        <link rel="stylesheet" href="login.css">
    </head>
</html>

/* login.css */

h1 {color: rgb(173, 6, 6); text-align: center}

✏️ Javascript와 스크립트 언어

💡 JavaScript

: html요소를 선택하고 제어할 수 있는 스크립트 언어

💡 스크립트언어

: 프로그램을 제어하는 스크립트역할(프로그램 내부의 구성 요소 중 하나)하는 언어
*자바스크립트는 최근 빠르게 발전하고 있어서 스크립트언어만으로도 충분히 프로그래밍이 가능해져 역할이 확장되고 있음

💡 JavaScript 적용방법

인라인(Inline) : 사용자와의 상호작용이 있을때만 가능
ex)버튼을 클릭했을때
- css는 모든 속성을 인라인에 쓸 수 있지만 자바스크립트는 상호작용이 있을때만 가능
- on~ 속성을 넣어서 사용 ex) onclick, onchange 등
내부 스크립트(Internal script) : html 문서 안에 같이 작성
- body태그 안, script 태그 내에서 작성
외부 스크립트(External script) : html 문서 밖에서 작성 및 연결
- head 태그 안이나 body태그 안의 맨끝에 script태그를 넣어주고 외부 파일 연결

🔍 인라인 적용예시

<input onclick="alert('clicked!')" id="btn_login" type="button" value="login">

🔍 내부스타일시트 적용예시

<script>
/* 나만의 함수 만들고 버튼 클릭하면 호출하기 */
function myFunction() {
	alert('clicked');	
}
</script>

🔍 외부스타일시트 적용예시

<html>
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <script type="text/javascript" src="login.js"></script>
    </head>
    <body>
    	<input onclick="myFunction()" id="btn_login" type="button" value="login">
    </body>
</html>

// login.js

function myFunction() {
	alert('clicked');
}

💡 함수

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

형태 : function 함수이름 () { 함수가 할 일 }

ex)
function fncName() {
	console.log("hello world!");
}

💡 특정태그(element)찾는 방법

id로 찾기: document.getElementById("id")
class로 찾기: document.getElementsByClass("class")
tag로 찾기: document.getElementsByTagName("tagName")

ex)

... 생략 ...
	<body>
    	<form>
			<input id="text_id" type="text">
			<input type="password">
			<input onclick="alertId()" type="button" value="login">
		</form>
        
        <script>
        	function alertId() {
            	alert(document.getElementById('text_id').value;
            }
        </script>
    </body>
</html>

💡 조건문

: if문
조건에 따라 결과를 다르게 할 수 있음

형태 : if(조건) { 조건에 맞다면 코드 작성} else{ 조건에 맞지 않다면 코드 작성}

... 생략 ...
	<body>
    	<form>
			<input id="text_id" type="text">
			<input type="password">
			<input onclick="alertId()" type="button" value="login">
		</form>
        
        <script>
        	function alertId() {
            	if(!document.getElementById('text_id').value) {
                	alert('아이디를 입력해주세요');
                } else {
                	alert(document.getElementById('text_id').value);
                }
            }
        </script>
    </body>
</html>

💡 변수

: 데이터를 담는 상자

형태 : let 상자이름 = 상자에 담을 데이터
-> 오른쪽의 데이터를 왼쪽의 상자에 담는다는 느낌
종류 : var, let, const
- var : 이제 사용하지 않음
- let : 상자 안의 데이터를 넣고 계속 바꿀 수 있음 (먼저 들어간 값을 빼고 바꿀값 넣음)
- const : 상자 안의 데이터를 계속 바꿀 수 없음(상수이기 때문에 초기화_initialize 해야함)

ex)

let userId = document.getElementById("text_id").value;
if(!userId) {
 	alert("please write your ID");
} else {
	alert(userId.value);
}

let number1 = 10;
number1 = 20;

const number3 = 30;
number3 = 40;


console.log(number1); // 20
console.log(number3); // error