웹 풀사이클 데브코스 TIL 6일차 - css, js 작성하고 연결하기

Inline Css 속성 찾기(검색)

CSS: Cascading Style Sheets

 

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

 

*HTML 태그 한쌍(<태그> </태그> 또는 <태그>를 element라고 부르기도 한다.

- 인라인

해당 태그에 style=""안에 속성을 넣어준다.

- 내부 스타일시트

head 태그 안, style태그 안에 작성한다.

 

• class는 .클래스이름 (중복 가능)
• id는 #아이디 이름 (중복 불가)
• 태그는 태그명

 

- 외부 스타일시트

style 태그 안 내용을 새로운 파일 login.css에 넣고 link로 연결해준다.

 

 

javascript

특정 html요소(element)를 선택해 제어할 수 있는 스크립트 언어

ex) 글자를 바꾸거나, 버튼을 비활성화 하거나, 색깔을 바꾸는 역할

 

스크립트 언어

독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌 프로그램을 제어하는 스크립트 역할을 하는 언어

프로그래밍 언어라고 부르지 않는다. 

스크립트언어를 실행하는 환경의 발전으로 스크립트만의 용도가 아니고 프로그래밍이 가능해졌다. -> 프론트와 백 모두를 만들 수 있어졌다.

 

• 인라인: 사용자의 상호작용이 있을 때만 가능 ex) 버튼을 클릭, 키보드 누름
• 내부 스크립트: HTML 문서 안에 작성
• 외부 스타일 시트: HTML 문서 밖에 작성하고 연결

 

함수

function a(){

}

특정 태그를 찾는 방법

• id: document.getElementById('')
• class: document.getElementByClassName('')
• tag: document.getElementByTagName('')

조건문

조건에 따라 다른 선택을 할 수 있도록 함.

id가 있으면 보여주고, 없으면 메세지를 보여준다.

인라인

 

내부 스크립트

위치: body 태그 바로 위 <script> </script> 내부

 

 

변수

== : 왼쪽과 오른쪽이 같은지 비교

= : 왼쪽에 오른쪽 값을 대입 

var : 사용하지 않는다.(let과 const로 나뉨)

let : 값을 미리 지정해두지 않아도 됨.

const : 값을 미리 지정해두어야함.  값이 바뀌지 않음! 

 

외부 스크립트

login.js파일에 넣어두고 연결해준다.