[웹 개발] 프론트엔드의 기능과 구조 이해

웹 프론트엔드의 기본 구성 요소

HTML : 웹 페이지의 콘텐츠 구조를 정의한다. 모든 텍스트, 이미지, 링크 등은 HTML을 통해 웹 페이지에 배치된다.

CSS : HTML로 정의된 콘텐츠의 스타일과 레이아웃을 제어하며, 색상, 글꼴, 레이아웃 등이 CSS로 결정된다.

JavaScript : 웹 페이지에 동적인 기능을 추가해준다고 알고 있으면 된다.

 

HTML 태그 정리

<h1> ~ <h6> : 제목(헤딩) 태그로 h1에서 h6로 갈수록 중요도가 낮아진다.

<p> : 문단을 정의하는 태그다.

<strong> : 굵은 텍스트로 만들어주며, 의미적으로 중요성을 나타낸다.

<em> : 기울임 텍스트로 만들어주며, 의미적으로 강조할 때 쓴다.

<a href="URL"> : 링크를 생성해주고 href 속성을 사용하여 링크할 URL을 지정한다.

<img src=".png" alt="이미지 설명"/> : 이미지를 삽입해주는 태그로, src 속성으로 이미지 파일의 경로를 지정하고, alt 속성으로 대체 텍스트를 추가한다.

<ul> : 순서가 없는 목록을 생성하며, 항목은 <li> 태그로 감싸준다.

<ol> : 순서가 있는 목록을 생성하며, 마찬가지로 항목은 태그로 감싸준다.

 

<form> : 사용자 입력을 수집하여 서버로 제출할 때 사용하며 텍스트 입력, 라디오 버튼, 체크박스, 버튼 등 다양한 입력 요소를 포함하고 있다.

 

CSS 선택자와 속성

기본 선택자

• 태그 선택자: HTML 태그 이름을 사용하여 특정 태그를 선택한다.
• 클래스 선택자: 클래스 이름을 사용하여 특정 그룹의 요소를 선택하며, 클래스 이름 앞에 .을 붙인다
• 아이디 선택자: 고유한 ID를 가진 요소를 선택하며, ID 이름 앞에 #을 붙인다.

속성

• 배경과 색상
  • background-color: 요소의 배경색을 지정
  • color: 텍스트의 색상을 지정
• 텍스트 스타일
  • font-size: 텍스트의 크기를 지정
  • font-weight: 텍스트의 두께를 지정
  • text-align: 텍스트의 정렬을 지정(왼쪽, 가운데, 오른쪽 등)
• 레이아웃
  • margin: 요소의 외부 여백을 지정
  • padding: 요소의 내부 여백을 지정
  • border: 요소의 테두리를 지정

JavaScript 문법

JavaScript의 역할로는 웹 페이지에 동적인 기능을 추가하는 것이며, 사용자와의 상호작용, 데이터 검증, 애니메이션 효과 등을 구현하는 데 사용한다. 기본 문법으로는 변수 선언, 함수 정의, 조건문, 반복문 등이 있다.

 

변수 선언: let, const 키워드를 사용하여 변수를 선언한다. let은 값이 변하는 변수를, const는 값이 변하지 않는 변수이다.

데이터 타입으로는 문자열(string), 숫자(number), 불리언(boolean), 배열(array), 객체(object)가 있다.

 

함수 정의: JavaScript에서 함수는 코드를 재사용하기 위한 방법으로 

function greet(name) {
    return "안녕하세요, " + name + "님!";
}
let greeting = greet("홍길동");
console.log(greeting);

예시를 보면 이 함수는 인자로 받은 name에 맞춰 인사 메세지를 반환, 함수를 호출하여 인사말을 출력한다.

 

이벤트 처리: 버튼 클릭, 폼 제출 등 사용자의 행동에 반응하도록 이벤트를 처리하도록 만드는 것이며

<button id="myButton">클릭하세요</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
    alert("버튼이 클릭되었습니다!");
});
</script>

예시를 보면 클릭했을 때 알림 메시지가 나타나도록 이벤트 리스너를 추가하였고, 버튼의 ID를 선택하여 이벤트를 연결했다.

---

Django 프로젝트를 진행하며 프론트엔드 특강을 듣게 되었는데

직접 적용하기 위해서 실습을 좀 더 해보면서 궁금한 것들을 배우고

Bootstrap도 넣어서 Bootstrap을 활용하여 홈페이지 디자인을 좀 더 해보고 관련 내용을 추가해야 겠다.