[인공지능사관학교: 자연어분석A반] CSS (4), JavaScript / 미니 프로젝트

Suhyeon Lee·2025년 8월 14일

인공지능사관학교

오전

1교시

지난 시간 복습

박스 모델
- 모든 요소들이 공간을 사각형으로 차지한다
- 구성 요소 4가지
  1. content: 글자나 내용을 작성하는 공간
  2. border: 컨텐츠를 감싸는 테두리 영역
    ☞ 요즘은 옅은 회색 테두리 or 테두리를 없애고(border: none;) round 주는 스타일 많이 사용
    ☞ border-radius는 꼭짓점을 부드럽게 깎아줌
    ☞ 원 만들기: border-radius 50% 이상 주기
  3. padding: 테두리와 컨텐츠 사이의 여백 → 테두리에 글자가 붙지 않고 안쪽으로 밀려 들어오게 하고 싶을 때
    ☞ 글자가 원래는 테두리의 시작점부터 시작하다 보니 테두리와 글자가 붙어서 출력되는데 padding을 주면 테두리와 글자 사이 여백이 생기게 됨 → 주의: 기본값 그대로 활용하면 내가 만든 테두리와 컨텐츠 사이의 공간을 늘리는 거라서 그만큼 전체적인 부피가 증가하게 됨
    ☞ box-sizing과 함께 써서 화면에 보여지는 영역을 유지하는 방식을 많이 사용(패딩으로 늘어난 만큼 컨텐츠 크기가 줄어들게 만듦 → 안 쓰면 패딩만큼 영역 증가)
  4. margin: 테두리 바깥쪽 여백 → 요소와 요소 사이 공백 추가해서 요소끼리 밀어낼 때
    ☞ margin: auto → 좌우 공백을 똑같이 부여(상하는 0 됨) == 가운데 정렬

박스 모델에서 가장 중요한 파트는 '여백' → padding, margin

position 속성
- 화면에 붙어서 항상 따라오는 친구들 만들 때 사용(position: fixed;)
- 함께 쓰는 속성: right, bottom → 원하는 위치 지정

flex 속성
- block 요소를 원하는 위치에 배정할 수 있게 레이아웃 설계할 때 사용
- "가로 배치": 공간을 쪼개서 쓰고 싶을 때 사용

선언 방식
1. 내부 방식
  - html 안에 style 태그 선언 후 태그 안에 css 작성
  - 단점 많음: 재사용성이 좋지 않음, 유지보수성이 좋지 않음, 보안에 취약 → 코드가 모두 오픈됨
  - 장점: 간단한 디자인 코드 테스트할 때 좋음
2. 인라인 방식
  - 태그 안에 style 속성 선언 후 css 작성
  - 단점 많음: 재사용성이 좋지 않음, 유지보수성이 좋지 않음, 보안에 취약, 코드 가독성 문제
3. 외부 방식 ★★★
  - 현업에서는 이것만 씀
  - HTML 파일과 CSS 파일 분리
  - <link rel="stylesheet" href="연결시킬 파일의 경로">

문제 1: 공지사항 페이지 CSS 작성하기

Goal

내가 한 것

화면설계서와 요구사항정의서

화면설계서: 화면 결과물 예시, 표본

요구사항정의서: 구현해야 할 내용을 글로 작성한 것

2교시

문제 2: 문의하기 페이지 CSS 작성하기

Goal
내가 한 것

주의점 : span 태그는 inline 요소이므로 margin을 적용해도 상하로는 적용되지 않는다.
해결책 :
1. display 속성을 block으로 지정하여 블록 요소로 변경
2. display: inline-block;

JavaScript ★★★★★

웹 개발에서 가장 중요한 언어
- 가장 중요한 역할을 함 → "기능"을 만들 수 있기 때문!
- 자바스크립트를 알아야 웹 개발을 할 수 있음
HTML과 CSS로 만든 페이지에 동적인 이벤트를 제어하기 위한 언어
html, css는 프로그래밍 언어라고 칭하지 않을 만큼 로우 레벨 수준의 언어
- 웹 페이지를 이루는 가장 기본적인 구성 요소 정도
- 대부분의 웹 개발자나 프론트엔드 개발자가 가장 많이 쓰는 언어는 "자바스크립트"
문법이 존재 → 조건문, 반복문, 배열, 객체, 함수, 클래스 등과 같은 개념이 다 있음!
- html, css는 사실 문법이라고 할 만한 게 없었음 → html: 태그, cs

3교시: JavaScript

HTML & CSS 제어를 통해 웹 브라우저를 풍부하게 하자!

JavaScript란

웹 페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어

역사

플래시와 액티브X → 웹 페이지에 다양한 기능 호출 → 어떤 사이트에 들어가든지 막 설치하다 보니까 점점 느려지기 시작함 → 스티브 잡스의 선언: 플래시와 액티브X 안 쓰겠다(아이폰 일체형 배터리 문제) → node.js

어디서 사용될까?

스크롤 올리면 새로운 데이터가 계속 보여짐
꼭 필요한 정보를 입력하지 않았을 경우

활용 분야

자바스크립트는 언어의 확장성이 뛰어남 → it 계열에 있는 모든 기술들은 자바스크립트 구현이 가능

특징

모든 웹 브라우저에서 동작
웹 브라우저에서 실행 결과를 즉시 확인
다양한 용도의 프로그램 개발
다양한 자바스크립트 공개 API
다양한 라이브러리와 프레임워크

원래 자바스크립트는 브라우저 종속적인 언어였음
(종속적 == 브라우저 안에서만 쓸 수 있다는 뜻 → 코드가 동작하는 공간이 브라우저)
'노드' 기술 등장 → 자바스크립트를 다른 데다가 빼다가 쓸 수 있는 가상 공간을 만듦
노드를 활용하면 어떤 플랫폼이든 가져다 쓸 수 있게 됨 → 언어 확장성 증대
단순히 웹 개발뿐만 아니라 모든 영역에서 활용이 되고 있고 그만큼 확장성과 효용성이 뛰어남
예: 우주복 데이터 전송도 자바스크립트로 이루어짐

주의: node.js가 서버인 건 아님
node.js는 환경일 뿐이고 우리가 거기에서 서버를 만드는 것

동향

입력과 출력

document.write();
- HTML 문서 내에 출력
  - 컴퓨터에게 '네가 지금 보고 있는 문서에 직점 써줘'라고 표현하는 것
- document는 지금 내가 보고 있는 HTML 파일을 가리킴
console.log();
- console 창에 출력
alert();
- 알림 팝업창으로 출력

자바스크립트는 결국 페이지가 있어야 동작하기 때문에 웹 페이지(.html)를 만들어 주어야 함

출력문
1. 사용자에게 보여주기 위한 출력
2. 개발자끼리 보기 위한 출력
공간이 다름 → 주석이 다름: 자바스크립트 주석은 //

어디다가 쓰는지 아는 것이 가장 중요

자바스크립트는 스크립트 태그를 헤드에 쓸 수도 있고 바디에 쓸 수도 있음
→ 헤드에 쓸 때와 바디에 쓸 때 쓰임새가 다름

헤드: 파일을 불러오거나 라이브러리 임포트할 때

바디: 웹 페이지의 기능을 제작할 때

JS
- 웹페이지의 기능을 제작할 때 사용하는 언어
- 사용법: 내부 방식으로 작성할 때는 <script> 태그를 활용한다.
- 출력문 3가지
  1. document → 현재 내가 보고 있는 HTML 파일의 모든 정보를 담고 있는 객체
    - document.write("안녕하세요"); ← '문서에 "안녕하세요" 써 줘'라고 명령
  2. console.log() → 개발자 도구의 콘솔창에 출력하는 방법
    - 사용처: 서버와 값을 주고 받는 경우 값을 검증하는 창이 콘솔창
    - error, log, warn 등 다양함
    - 팁: 개발이 완료되면 콘솔은 다 지운다 → 사용자가 콘솔창을 봤을 때 민감한 정보가 보이면 안 되기 때문
      
      → 이런 게 남아 있으면 안 됨! (이건 서버와 통신 성공했다는 메시지임)
  3. alert() → 개발자가 사용자에게 알림 메시지를 보낼 때 사용한다.
    - 사용처
      1. 단순 메시지 전송(도용 방지)
      2. 사용자의 상태 변화(구매, 취소, 탈퇴 등)
        
        안 알려주면 구매 버튼을 계속 눌러서 10번 구매되어버릴 수 있으니까
웹 개발에는 완벽한 보안이 존재하지 않음
- 다 확인할 수 있음(코드가 다 공개되어 있음)
- 파일들 보면 수정이 되는 파일도 있고 안 되는 파일도 있음
  - 보안 처리를 해 둔 파일 → 개발자가 수정을 막아둔 것
  - 수정이 되는 파일들도 있음 → 만약 여기 핵심 로직이 들어가 있다면 악용될 가능성 매우 커짐
  - 보안에 항상 신경쓰기