[1주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 7

CSS의 이해

 

CSS란?

 

Cascading Style Sheets 의 약자로, HTML을 꾸며주는 언어입니다.

문서를 통째로 한번에 꾸며주는 것이 아니라, HTML 태그를 하나하나 꾸며줍니다.

HTML에 CSS를 적용하는 방법은 다음과 같이 3가지가 있습니다.

• 인라인 (inline) : HTML 태그 안에 같이 작성합니다.
• 내부 스타일 시트 (internal style sheet) : HTML 문서 안에 같이 작성합니다.
• 외부 스타일 시트 (external style sheet) : HTML 문서 밖에 작성하고 연결합니다.

*HTML 태그 한쌍(<태그> 텍스트 </태그>) 또는 하나(<태그/>)을 우리는 element 라고 부르기도 합니다.

 

인라인 방법도 html 태그 안에 속성으로 넣어주는 건가? 라고 생각할수 있다

 

스타일 시트 : 즉, css html 태그들을 꾸며주는 코드들, 문장들을 아예 한 군대에 모아놓는것

*코드의 위치만 생각

 

일일이 input에 style을 적용한 모습

내부 스타일 시트

외부 스타일 시트

외부 스타일 시트를 만들어 내부 스타일 내역을 없앤 코드

 

 

Javascript란?

 

HTML에 Javascript를 적용하는 방법은 다음과 같이 3가지가 있습니다.

• 인라인 (inline) : 사용자와의 상호작용이 있을 때만 가능합니다.
  예를 들어, 버튼을 클릭 했을 때, 키보드를 눌렀을 때!
• 내부 스크립트 (internal script) : HTML 문서 안에 같이 작성합니다.
• 외부 스크립트 (external script) : HTML 문서 밖에 작성하고 연결합니다.

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

Javascript에서는 특정 태그를 찾을 때 다음과 같은 기능을 이용합니다.

• id로 찾기 : document.getElementById('아이디')
• class 이름으로 찾기 : document.getElementsByClassName('클래스 이름')
• tag 이름으로 찾기 : document.getElementsByTagName('태그 이름')

document.getElementById

이 HTML 해당 문서(의) 중에서 가져오겠다. 엘리먼트를 id 로

 

이 문서의 엘리먼트를 ID를 사용해 가져오겠다.

 

조건문

 

if문

 

조건에 따라 다른 결과를 선택할 수 있게 해줍니다.

우리는 이걸 조건문이라 부릅니다.

 

 

변수

변수의 예시

var, let, const

 

변수 지정하기 위해 사용하는 명령어

 

예전에 var가 let 과 const 역할을 동시에 실행하고 있었지만 분리되며 더 이상 var를 사용하지 않는다.

 

자바스크립트 부분도 따로 외부에 따로 만든후 관리하기 용이하게 만들수 있다.

login.js

 

login.css

html

<link>

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

릴레이션 의 약자인 rel 스타일시트로 login.css 파일과 연결될 예정이다~ 라고 말해주는 부분

 

<script>

<script type = "text/javascript" src="login.js"></script>

이 파일의 타입은 텍스트이긴한데 자바스크립트 역할을 합니다. 이 소스코드는 login.css 이 파일의 것을 가져올 것이다