CSS의 이해
Cascading Style Sheets의 약자로, HTML을 꾸며주는 언어이다.
문서를 통째로 한 번에 꾸미는것이 아니라, HTML 태그를 하나하나 꾸며준다.
HTML에 CSS를 적용하는 3가지 방법
- 인라인(inline): HTML 태그 안에 같이 작성
- 내부 스타일 시트(internal style sheet): HTML 문서 안에 같이 작성
- 외부 스타일 시트(external style sheet): HTML 문서 밖에 작성하고 연결
❄️인라인
태그안에 style=" 스타일속성: 값 ; "
❄️내부 스타일 시트
<head> 태그 안에 <style>태그를 사용하여 스타일을 지정함.
태그마다 class와 id를 줄 수 있는데
css에서 🗝️ class는 .class 🗝️ id는 #id
❄️외부 스타일 시트
html 태그 파일과 css 파일을 별개로 두고 쓰는 방법
각각 용도에 맞게 독립적으로 사용하니 코드가 더욱 깔끔해짐!
✨팁 html의 주석은 <!-- --> css의 주석은 /* */✨
html 파일
css 파일
JavaScript의 이해
javascript는 특정 HTML요소를 선택하여 제어할 수 있는 스트립트 언어이다.
최근에는 백엔드 언어로도 각광받고 있다.
스크립트 언어란?
독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌
프로그램 내부의 구성 요소 중 하나로 프로그램을 제어하는 스트립트 역할을 하는 언어.
최근 빠르게 발전하는 런타임 환경 덕분에
스트립트 언어만으로도 충분히 프로그래밍이 가능해져 역할이 확장되고있음!
HTML에 JavaScript를 적용하는 3가지 방법
- 인라인(inline): 사용자와의 상호작용이 있을 때만 가능 ex) 버튼 클릭, 키보드감지
- 내부 스크립트(internal script): HTML 문서 안에 같이 작성
- 외부 스크립트(external scirpt): HTML 문서 밖에 작성하고 연결
❄️인라인
스트립트를 사용할 때 밖에서 " 를 썼다면 안에서는 ' 를 사용하여야 한다!
onclick시 alert 함수는 버튼은 클릭했을 때, 웹안에서 창을 띄워주는 함수이다.
함수란?
특정 기능을 수행하는 코드 덩어리
함수를 다음과 같이 정의한다.
함수이름은 직관적으로 짓는게 좋다!✨
function 함수이름() {
/* 이 공간에
함수가 할 일을
코드로 작성해 준다! */
}
❄️내부 스크립트
<body> 태그안에 <script> 태그를 넣어 내부에서 스크립트를 사용함
✨팁 javascript의 주석은 /* */ , // ✨
🔑특정 태그(element) 찾는 방법
id로 찾기: document.getElementById('아이디');
class 이름으로 찾기: document.getElementsByClassName('클래스 이름');
tag 이름으로 찾기: document.getElementsByTagName('태그이름');
alert 함수에 id로 태그를 찾아 그 값을 창에 띄우게 만듦!
if문
조건에 따라 다른 결과를 선택할 수 있게 해줌
이것을 조건문이라고 부른다.
🔑조건문 == '' 는 !조건문 과 같다🔑
변수
변수는 무언가를 담을 수 있는 상자라고 생각하면 된다.
let 상자 이름 = 상자에 담을 데이터; (숫자, 문자, element...등)
✨프로그래밍에서는 = 는 대입이고 == 는 같다는 등호이다✨
변수를 사용하여 코드를 작성했더니 깔끔해지고 가독성이 좋아짐!
🔥let const 차이🔥
let은 선언만 하고 사용 할 수 있으며 재할당이 가능하다.
const는 선언과 동시에 초기화를 해주어야 하고 재할당이 불가능하다.
지금과 같이 하면 오류가 나서 재할당 해준 코드에서 멈춘다.
❄️외부 스크립트
html 태그 파일과 javascirpt 파일을 별개로 두고 쓰는 방법
각각 용도에 맞게 독립적으로 사용하니 코드가 더욱 깔끔해짐!
'공부 > 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js)' 카테고리의 다른 글
| 웹 서비스의 이해: 웹 생태계부터 웹 브라우저, 그리고 데이터베이스까지(4)-mariaDB 처음써보기, docker 설치 (0) | 2024.08.23 |
|---|---|
| 웹 서비스의 이해: 웹 생태계부터 웹 브라우저, 그리고 데이터베이스까지(3)-node.js 처음써보기, server-router 역할 (0) | 2024.08.22 |
| 웹 서비스의 이해: 웹 생태계부터 웹 브라우저, 그리고 데이터베이스까지(1)-HTML (0) | 2024.08.20 |
| 포트폴리오 / 협업 환경 구성(5)-협업툴 (0) | 2024.08.19 |
| 포트폴리오 / 협업 환경 구성(4)-branch 이름 규칙, merge (0) | 2024.08.16 |
