프로그래머스 데브코스 웹 풀사이클 2주차 3일차

CSS

Cascading Style Sheets 의 약자로, HTML요소들을 꾸며준다.

• 인라인 : HTML 태그 안에 같이 작성
• 내부 스타일 시트 : HTML 문서 안에 같이 작성
• 외부 스타일 시트 : 별도의 파일에 저장하고 연결

CSS 인라인 방식

    <h1 style="color: red; text-align: center"">Login</h1>

다음과 같이 태그 안에 style을 이용해 꾸며주는 방식을 사용한다.
하나의 태그에 여러 style을 주고 싶으면, 세미콜론(;)을 이용해 구분해 준다.

CSS 내부 스타일 시트 방식

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

와 같은 인라인 방식에서

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

헤드태그 안에 style태그에 적어주면 동일한 방식으로 동작한다.
class, id 등 선택자를 이용해 같은 선택자를 가진 태그들에 공통으로 스타일을 줄 수도 있다.
class는 앞에 .을, id는 앞에 #을 붙여서 사용한다.

CSS 외부 스타일 시트 방식

새로운 파일(CSS파일) 생성후, 이전 내부 스타일 시트 방식에서의 style태그 안의 내용을 해당 파일로 관리해 주는 방식이다. html 파일의 head태그에서 link 태그를 이용해 해당 파일과 html파일을 연결해 준다.
login.html

<link rel="stylesheet" href="login.css" />

login.css

h1 {
  color: rgb(173, 6, 6);
  text-align: center;
}
.login_inputs {
  font-size: 25px;
}
#login_btn {
  font-size: 25px;
  width: 100px;
  height: 40px;
}

HTML,CSS 파일 내의 주석을 다는 방식

• HTML : <!--와 -->사이에 쓰는 내용은 파일에 적용이 되지않는다.
• CSS : /* 와 */사이에 쓰는 내용은 파일에 적용이 되지않는다.

JavaScript

• JavaScript는 HTML요소를 제어할 수 있는 스크립트 언어이다
• 스크립트 언어란? 독립적인 프로그램을 개발할 수 있는 언어가 아닌, 프로그램 제어를 위한 언어이다. 하지만, 요즘에는 런타임 환경이 발전하여 스크립트 언어만으로도 충분히 프로그래밍이 가능하다.
• 인라인, 내부 스크립트, 외부 스크립트 방식이 있다.

JavaScript 인라인 방식

사용자와의 상호작용이 있을 때만, 사용이 가능하다.

<input id="login_btn" type="button" value="login" onclick="alert('Clicked!')"/>

다음과 같이 on~~ 메소드를 이용한다.

JavaScript 함수

HTML내의 script 태그 안에 직접 JavaScript로 함수를 생성할 수 있다.

<script>
/* 나만의 함수 만들고, 버튼을 클릭하면 호출하기 */
function myFunction() {
	alert("1");
	alert("2");
	alert("3");
}
</script>

JavaScript 내부 스크립트

script 태그 내에 함수를 구현 하고, 사용하는 방식

CSS와 같이 선택자를 통해 특정 태그를 찾을수 있다.

• id로 찾기 : document.getElementById('아이디명')
• class로 찾기 : document.getElementByClassName('클래스명')
• tag로 찾기 : document.getElementByTagName('태그명')

<form>
    ID : <input class="login_inputs" type="text" id="login_id" />
    <br />
    PW :
	<input class="login_inputs" type="password" />
	<br />
	<input id="login_btn" type="button" value="login" onclick="popId()" />
</form>

...

function popId() {
        alert(document.getElementById("login_id").value);
}

에서 로그인 버튼을 누르면

다음과 같이 ID에 입력한 값이 잘 alert되는 것을 확인할 수 있다.

JavaScript 조건문

if(조건절) {
조건에 맞을때 실행할 코드
}
else {
조건에 맞지 않을때 실행할 코드
}

다음과 같은 구조로 나타난다.

ex) 아이디 값이 입력되어있지 않으면, 입력해달라고 alert하는 코드

function popId() {
	if (document.getElementById("login_id").value == "") {
		alert("아이디를 입력해주세요");
	} else {
		alert(document.getElementById("login_id").value);
	}
}

JavaScript 변수

변수란 ? 값을 담아두는 상자 같은 개념

변수 정의 방법?
let 변수이름 = 변수에 넣을 값(데이터)

ex)

let userId = document.getElementById("login_id").value;

긴 값들을 하나의 변수로 수정하니 가독성이 올라가고 수정시에도, 변수만 수정해주면 되는 장점이 있다.

let, var, const

• var : 과거에 쓰던 변수방식이다.
• let : 변수를 선언하는 방식으로, 추후 재할당이 가능하다.
• const : 처음 선언할 때, 값을 할당하며 선언해야 하며, 추후 재할당이 불가능하다.

JavaScript 외부스크립트

CSS외부 스타일시트처럼 새로 js파일을 생성 후, script 내용을 작성 후, script 태그로 연결해준다.

오늘의 소감

드디어 프론트엔드의 3요소인 HTML, CSS, JavaScript를 모두 다뤄보았다.
이 세가지만으로도 간단한 웹사이트는 만들수 있을 정도로 중요한 것을 배웠고, 이것들로 여러가지를 만들어 볼 생각에 두근두근하기도 한다. JavaScript에 대해서는 더 많이 공부해봐야겠다는 생각이 든다.