웹 풀사이클 데브코스 TIL 7일차

CSS

• Cascading Style Sheets
• 인라인 방식: HTML 태그 안에 작성
• 내부 스타일 시트: HTML 문서 안에 같이 작성
• 외부 스타일 시트: HTML 문서 밖에 작성하고 연결
• HTML 태그를 엘리먼트라고 한다.

인라인 방식

각각의 HTML 태그안에 Style 속성에 css를 적어둔다.

내부 스타일 시트

HEAD 태그 안에 Style 태그안에 다 써놓는다.

• 태그
• 클래스 (.)
• ID (#)
  로 태그를 선택하고 css를 적용한다.

외부 스타일 시트

HTML과 CSS 파일을 분리시킨다.
.css 파일을 만들고

• <link rel="stylesheet" href="login.css">
  와 같은 방식으로 연결시켜준다.
• HTML 주석 다는법: <!-- -->
• CSS 주석 다는법: /* */

자바스크립트

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

• 인라인: 사용자와의 상호작용이 있을 때만 가능, on 속성들을 사용한다.
• 내부 스크립트 : <script> 태그 안에 쓴다.
• 외부 스크립트스크립트언어프로그램을 제어하는 스크립트(대본) 역할을 하는 언어. 최근들어 역할이 확장되고 있음.

함수

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

function myFunction(){

}

내부 스크립트

특정 엘리먼트를 찾는 방법

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

조건문

• 조건에 따라 다른 결과를 택할 수 있게 해준다.
• if(조건){

}
else{

}

• !document.getElementById('txt_id').value 이 표현과 document.getElementById('txt_id').value == "" 표현은 같다.

변수

• 데이터를 담는 상자라고 할 수 있다.
• let 변수이름 = 담을 데이터

let, var, const

• var: 현재 사용하지 않는다. 과거에 사용
• let: 상자 안의 값을 계속 바꿀 수 있음
• const: 상자 속 값이 변하지 않음. const 변수에 값을 다시 넣으려하면 오류가 난다.

외부 스크립트

• .js 파일을 만든다
• <script type="text/javascript" src="파일이름.js"></script> 태그를 넣어야한다.

후기

자바 스크립트의 기본적인 개념들과 CSS에 대해서도 알아보았다. 이제 이를 바탕으로 본격적인 웹 프로그래밍을 할 수 있을 것 같다.

키워드: 프로그래머스 데브코스, 국비지원교육, 코딩부트캠프