내일배움캠프 프론트엔드 트랙에 합류하신 여러분들,
프론트엔드 개발자로서 첫 도약을 위해, 프론트엔드 기본구성에 대해 팀원과 함께 알아봅시다.
HTML? CSS? 그게 뭔가요?
프론트엔드 기본 구성 요소
HTML
HTML로 프로그래밍한다는 뜻은 hwp/docs로 프로그래밍한다는 말과 같습니다
•
뜻: HyperText Markup Language
•
정의 및 역할: HTML은 웹 페이지의 구조와 내용을 정의하는 데 사용됩니다. 웹 페이지의 텍스트, 링크, 이미지 및 기타 요소들을 마크업하여 사용자에게 정보를 전달합니다. 보통 뼈대로 비유합니다.
•
기본 구성 요소: 태그(tag)와 속성(attribute)으로 구성되며, 태그는 요소의 종류를, 속성은 요소의 특성을 정의합니다.
•
예시: <p> 태그는 문단(Paragraph)을, <img> 태그는 이미지(Image)를 나타내며, <a> 태그는 앵커(anchor)로 href 속성을 통해 하이퍼링크를 생성합니다.
CSS
개발자에게 가장 어려운 건 디자인…
•
뜻: Cascading Style Sheets
•
정의 및 역할: CSS는 웹 페이지의 스타일을 지정하는 데 사용됩니다. 색상, 폰트, 레이아웃 등의 시각적 요소를 조정하여 웹 페이지의 외관을 디자인합니다. 보통 피부 등 외관으로 비유합니다.
•
작동 방식: 선택자(selector)를 사용하여 HTML 요소를 지정하고, 해당 요소에 적용할 스타일 규칙을 정의합니다.
•
예시: .text-color { color: blue; }는 클래스가 text-color인 HTML 요소의 텍스트 색상을 파란색으로 설정합니다.
Javascript
자바스크립트는 되도록 에러를 피하려는 경향이 있습니다.
현대에 와서는 오히려 문제가 되는 특징입니다…
•
뜻: Java + Script
◦
자바(Java)와는 전혀 관계 없습니다! 유력한 가설은 당대에 가장 유명한 프로그래밍 언어인 자바의 이름을 베껴 인기에 편승하려고 했다는…
◦
스크립트(Script) 언어는 특정 소프트웨어(이 경우엔 브라우저)를 제어하는 언어를 뜻합니다.
•
정의 및 역할: 자바스크립트는 웹 페이지에 상호작용성을 추가하는 프로그래밍 언어입니다. 사용자의 행동에 반응하여 웹 페이지의 내용이나 스타일을 동적으로 변경할 수 있습니다. 보통 근육으로 비유합니다.
•
기능: 웹 페이지에 애니메이션, 폼 검증, 데이터 로딩 등을 구현할 수 있으며, 웹 애플리케이션의 복잡한 기능을 가능하게 해줍니다.
•
예시: document.getElementById('app').innerHTML = 'Hello World!';는 id 속성 값이 app인 HTML 요소의 내용을 "Hello World!"로 변경합니다.
1. 팀 노션 내부에 오늘 진행할 스터디 문서를 생성해주세요.
•
새로 만들기 클릭 > 데일리 스터디 템플릿 클릭하여 생성 후 사용
2. 40분 타이머를 맞춘 뒤 개인별로 아티클을 읽고 요약을 진행해주세요.
•
임베드 된 타이머를 40분으로 맞춰주세요.
◦
대표로 한명이 Zep 화면 공유를 통해 타이머를 팀원들에게 보여주면 더 좋겠죠?
•
토글을 복사해 팀원 모두 40분간 아티클을 읽고, 요약과 인사이트를 작성해주세요.
3. 개인별 요약내용을 읽고 공통내용과 의미 있었던 인사이트를 공유해요.
•
공통 인사이트와 의미 있었던 의견을 작성해주세요.
제출 방법
•
개발 블로그에 위 3가지의 답을 작성해주세요.
•