프론트 1주차 세션 회고

멋쟁이 사자처럼 in cau

프론트 1주차 세션 회고

zza.___.lng 2023. 3. 28. 15:51

프론트엔드의 역할

Get 방식

페이지 조회
- URL에 폼 데이터를 추가하여 서버로 전달하는 방식

POST 방식

데이터의 기록을 삭제 및 수정하는 방식
- 폼 데이터를 별도 첨부 후 서버에 전달하는 방식, 보안성 높음

웹 표준(3단계로 구분)

HTML = 구조

웹 문서의 구조를 만듦
태그를 사용해서 문서의 구조를 명시 = <>

CSS = 표현

Cascading = 우선순위 = 위에서 아래로 계단식으로 우선순위 결정
웹 문서를 꾸미기 위해 사용

<head>
    <link rel = "stylesheet" href="경로">
</head>

JavaScript = 동작

사용자 동작에 반응하고 동적인 효과를 냄
라이브러리 - 호출해서 사용 가능하도록 재사용 가능한 기능을 미리 구현한 도구
프레임워크 - 프로그램 생성 시 필요한 여러 기능을 쉽게 구현하게 도와주는 도구

<body>
	<script src="경로/대상 파일"></script>
</body>

문서 객체 모델 DOM

웹 문서를 하나의 객체로 정의
요소를 부모와 자식 요소를 구분

HTML

HTML 구조

<!DOCTYPE html> 웹 문서의 유형을 지정
<html> 웹 문서의 시작
<head> 웹 브라우저에 문서 정보를 전달
<body> 웹 브라우저에 내용 표시

시맨틱 태그 - 웹 접근성, 코드 가독성, 검색 엔진 최적화

<header> 페이지의 머리글, 제목, 로고, 메뉴, 검색관련, 작성자의 이름 등등으로 구성
<nav> 페이지의 내비게이션 영역. (사이트 내, 외부로 이동). 메뉴, 목차 등등
<main> 메인 컨텐츠 영역. 문서 내에서 반드시 한 번만 사용
<section> 본문의 여러 내용을 포함하는 부분을 의미
<article> 본문의 주 내용이 들어가는 부분을 의미
<aside> 간접 컨텐츠, 보조 컨텐츠를 의미 
<footer> 하단 바닥글을 의미. 회사정보, 저작권, 연락처 등등

아래는 이해가 잘 되지 않아서 찾아보다가 태그의 이름을 보고 페이지 내에서 역할이나 위치를 알 수 있도록 보기 쉽게 정리해놓은 분이 계셔서 공유합니당.

https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EC%9D%84-%EC%A7%80%EC%A0%95#%3Carticle%3E

🏷️ HTML 시맨틱(Semantic) 태그의 쓰임새

시맨틱 태그 (Semantic Tag) 사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록(=의미가 통하는, semantic) 만든 태그들이다. semantic 태그가 나오기 이전 아래 그림과 같이 태

inpa.tistory.com

텍스트 관련 주요 태그

<h> 제목을 뜻하는 태그, h1~h6까지 사용이 가능하며 숫자가 커질수록 글자 크기는 작아짐
<p> 텍스트 단락. 내용이 길면 웹 브라우저 창의 너비에 맞게 자동으로 줄 바꿈
<br> 원하는 위치에 줄바꿈
<strong> 중요한 텍스트를 굵게 표시할 때 사용. 화면 낭독기에서 강조해서 읽어줌(?)
<em> 중요한 텍스트를 기울여 표시할 때 사용. 화면 낭독기에서 강조해서 읽어줌
<span> 문장의 어느 한 부분에 스타일을 적용하고 싶을 때 사용
<u> 텍스트에 밑줄을 칠 때 사용하지만 알아보니 화면 낭독기에서 강조해서 읽지도 않고, 
span을 이용해 밑줄을 칠 수 있기 때문에 잘 사용하지 않음

텍스트 요소로 쓰이는 태그들을 사용 예시와 함께 정리한 블로그인데, 이해하기 쉬워서 공유합니당.

https://velog.io/@mangozoo20/HTML-%ED%85%8D%EC%8A%A4%ED%8A%B8-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC

HTML 텍스트 태그 정리

HTML에서 텍스트 요소로 쓰이는 태그들을 정리해보았다.

velog.io

목록 관련 주요 태그

<ol> 순서 있는 목록의 시작과 끝을 나타냄(목록의 순서대로 번호 표시)
<ul> 순서 없는 목록의 시작과 끝을 나타냄(작성한 순서대로 표시되지만 번호는 없음)
<li> 목록의 각 항목들을 나타냄

그 외 주요 태그

<img> 이미지파일 삽입
ex) <img src="규한팍.jpg" width="100"> --> 규한팍.jpg 파일을 100의 width로 설정하여 삽입

<a> href 특성을 통해 다른 URL로 연결되는 하이퍼링크 생성
ex) <a href="https://cjy3458.tistory.com/">재영이 블로그</a> --> 웹 페이지의 출력된 "재영이 블로그"를
클릭하면 연결된 주소로 이동

CSS

CSS의 구조 - 선택자는 중괄호 안에 내용을 적용 시킬 요소를 선택하는 것

CSS 기본 선택자

전체 선택자 - 문서의 모든 요소에 스타일을 적용 —> *을 넣으면 됌
TYPE 선택자 - 특정 태그를 사용한 모든 요소에서 스타일을 적용
CLASS 선택자 - 마침표를 사용해서 특정 부분만 선택해서 여러번 적용(CLASS는 여러 엘리먼트에 동시에 적용 가능)
ID 선택자 - #을 사용해서 특정 부분만 선택(ID는 하나만 적용 가능)
그룹 선택자 - 여러 요소에 같은 스타일을 적용 (?)

class와 id의 차이점을 설명해보세요라는 질문을 멋쟁이 사자처럼 11기 면접 때 받은 적이 있다. 너무 긴장해서 말도 더듬고 횡설수설했어서 보다 자세히 알기 위해 찾아보다 가장 이해하기 쉽게 정리되어 있다고 생각하는 글을 공유합니당.

https://www.nextree.co.kr/p8468/

CSS: 선택자(Selector) 이해

웹 표준은 이제 더 이상 무시할 수 없는 키워드입니다. World Wide Web(WWW)의 의미대로 가능한 많은 사람이 웹을 이용하기 위해서는, 모든 브라우저에서 ‘똑같이 보이는 것’이 아니라 ‘각 브라우

www.nextree.co.kr

박스 모델 - HTML의 요소가 박스 모양으로 구성 / CSS에서 가장 중요

느낀점

멋사 11기 면접을 보면서 id와 class의 차이점에 대한 질문을 받았던게 생각이 났고, 그때 했던 대답을 기억해보면"id는 단 하나의 요소에만 지정이 가능한 선택자이고, class는 여러 요소를 유형별로 동일한 선택자를 이용해 관리할 수 있는 것입니다. css에서는 id 선택 시 #을 사용하고 class는 .을 사용합니다."라고 대답을 했었다. 차이점을 알지만 직접 사용할 때가 되면 여전히 헷갈리고 실수할 때가 많아서 계속 사용해보면서 익숙해져야겠다는 생각이 들었다.

실제로 과제를 하면서 분명 전에 사용해본 기능인데도 기억이 잘 나지 않아서 찾아보고 사용하는 경우가 많았다. 모든걸 외우는 것을 불가능하고 개발자는 항상 구글링을 생활화해야 한다고 들었지만 기본적이고 사용 빈도가 높은 태그들은 즉각 나올 수 있을 정도로 익숙해지려고 노력해야겠다.

+++(2023.03.28 수정)

과제하는데 css가 이렇게 어려운지 처음 알았다. 원하는 형태로 정렬하고 원하는 요소를 원하는 위치에 둔다는 것이 쉬운 일이 아니라는 것을 깨달았다. 역시 세상은 원하는대로 되지 않는다. 원하는 형태로 정렬하는 방법이 다양해서 여기저기 찾아보다가 다 뒤죽박죽으로 사용해서 반성중이고, 머릿속에 잘 정리되서 가장 편리한 방법을 사용할 수 있게 되었으면 좋겠다.