오늘부터 태어나서 처음으로 블로그를 써보려고 한다.
이유는 복습&나중에 포트폴리오가 될 수도 있을 것 같아서..
각설하고 내용 정리를 시작해보겠음
[OT]
① 2배속 수강 금지 ② 수요일 수업 못들었으면 목요일까진 듣기 ③ 수업중 컴퓨터 이용 금지 ④ 펜과 노트로 필기하기
⑤ AI, GPT 활용 금지 ⑥ 블로그 작성하기 -> 바로 6번 때문에 작성하기로 마음먹었다!
[1강]
◎ 컴퓨터간 통신에서 IP = 아파트 동(우리집 컴퓨터) / Port = 세부 주소(크롬, 카카오톡, 게임 등 세부 프로그램)으로 보면 됨
◎ Port가 열려있다 = Listening/Listen 상태이다 = 그 포트를 통해서 데이터를 송수신 할 수 있다는 것
◎ 인터넷이란 Inter-network의 약자로 최초로는 문서를 주고 받기위해 만들어짐. 그 흔적이 소스코드에 남아 있는데 인터넷 아무 페이지에서나 우클릭 - 페이지 소스보기 를 하면 [ <!doctype html> ] 이라는 글자를 볼 수 있는데 document type의 약자임
◎ 인터넷 송수신의 Protocol(약속) = HTTP(Hyper Text Transfer Procotol)
◎ HTTP 프로토콜 중 GET / POST 관련 기본사항
- GET IP주소 포트번호 HTTP/1.1 하면 해당 내용을 요청할 수 있음
→ 실생활에서는 웹 브라우저가 이 역할을 대신해줘서 IP/도메인만 알면 되는 것!!
◎ URL 작성과 관련한 약속
- Protocol(HTTP, HTTPS, FTP, SSH 등)://서버주소(or DNS):Port번호(/파일경로)
>> 여담이지만 이 약속을 처음 만드신 분(팀 버너스리)이 나중에 인터뷰로 ‘//’은 당시 프로그래밍 관례였지만 사실 불필요했고, 지금 돌아보면 빼도 됐다고 밝혔..
◎ HTML(Hypertext Markup Language) : HTTP 상에서 보여지는 글자 등을 예쁘게 꾸밀수 있도록 만든 언어 ▶ [숙제1] HTML TAG 공부하기
[참고 페이지] https://www.advancedwebranking.com/html/
HTML Study - AWR SEO Guide
This study looks at 11 mm index pages gathered from Top 20 Google results to uncover how people write HTML markup as new web tech emerge.
www.advancedwebranking.com
평균적으로 웹페이지는 25개의 태그로 이루어져있다고 한다. 즉, 30개 안쪽으로만 알면 웬만한 건 다 안다는 것!
하나씩 공부해보자..
0. <html> </html> : HTML 작용 범위를 지정하는 태그, 맨 위의 <!DOCTYPE> 를 제외한 모든 내용을 이 태그로 둘러싸야함
>> 근데 실제로 소스보기 해보면 조금 다르다.. 실전에서는 뭔가 더 세부적인 설정이 있는듯. 현재는 HTML5 버전이라고 한다.
1. <head> </head> : 문서 메타데이터. 제목, 문자셋, SEO/OG 태그, CSS/JS 로딩 지시 등 화면에 직접 표시되지 않는 정보 작성
* SEO : 검색해서 나올때 뜨는 파란글씨 제목, 검색결과 요약문, 원본 URL, 크롤링/색인 등을 설정
* OG : 링크를 카톡/트위터/페북 등에 붙였을 때 썸네일/제목/요약 설정
* CSS : 페이지의 디자인/레이아웃 정의(색상, 폰트, 간격, 그리드, 반응형 등)
* JS : 페이지의 동작/로직(메뉴 토글, 폼 검증, API 호출 등)
2. <body> </body> : 브라우저에 실제로 렌더링 되는 콘텐츠 본문(텍스트, 이미지, 버튼 등)이 들어가는 영역
3. <html> </html> : 문서의 루트 요소. lang 속성으로 문서 언어 지정(<html lang="ko"> 형식), 접근성/SEO에 중요
4. <title> </title> : 브라우저 탭의 페이지 제목. 즐겨찾기/검색결과의 링크 제목으로도 쓰임
5. <meta> : 문자set(charset="utf-8"), 뷰포트, 설명/키워드, OG/Twitter 카드 등 메타정보를 선언 → 닫는 태그 안씀
6. <div> </div> : 블록 컨테이너. 레이아웃/그룹화에 사용 → 스타일/레이아웃/JS 제어의 단위가 됨
7. <a> </a> : 링크/앵커. href로 목적지, target/rel로 동작 제어
* vs <button> : <a>는 다른 주소로 이동(link)에, <button>은 현재 페이지에서 행동(action)에 주로 사용(폼 제출 등)
8. <script> </script> : 자바스크립트 관련. html을 읽다가 멈추고 src로 외부파일 받고-실행하고 다시 html 읽음
* defer를 쓰면 html을 읽으면서 파일을 미리 받아두고, html 다 읽은 뒤 실행함(버벅임 방지) > 초보때 걍 디폴트로 쓰면 됨
** 더 고수가 되면 <script type="module" src=~></script> 등으로 요즘 방식으로 쓸 수 있음
9. <link> : 외부 리소스 연결 선언. 주로 CSS(rel="stylesheet"), 아이콘, 프리로드/프리페치 등 사용 → </link>안씀
10. <img> : 이미지 삽입. alt와 함께 쓰면 내용 요약, 목적 설명 등에 쓰임
11. <p> </p> : 문단 구분용. 인라인 콘텐츠를 감싸는 기본 블록 텍스트 단위. 끝나면 한줄 띄어짐.
* p 안에는 텍스트, <a>, <span>, <strong>, <img>, <br> 이런건 들어갈 수 있지만, 자체적으로 블록을 형성하는 <div>, <section>, <article>, <header>, <footer>, <h1~h6>, <table>, <form> 같은 것들은 들어갈 수 없음
12. <span> </span> : 텍스트 내에서 일부만 스타일 조정하거나, 스크립트 훅 등을 걸기 위한 용도로 사용됨
13. <li> </li> : 목록항목. 반드시 <ul> 또는 <ol> 안에서만 쓰임
14. <ul> </ul> : 순서 없는 불릿 포인트
15. <br> </br> : 강제 줄바꿈. 주로 시/주소 등 의미있는 줄나눔에 쓰임
16. <style> </style> : 문서 내부에 CSS 직접 작성. 보통은 외부 CSS를 <link>로 불러오는 것을 권장
17. <h1> </h1> : 문서, 섹션의 최상위 제목
18. <h2> </h2> : 다음 수준의 제목. 제목 계층을 논리적으로 구성해 스크린리더/SEO에 도움
19. <input> : 사용자 입력 필드. type에 따라 텍스트, 이메일, 체크박스, 라디오 날짜 등 다양. </input> 없음
20. <form> </form> : 입력 제출 컨테이너. 폼안에 input, select, textarea, button 등이 들어감. action(어디로 보낼지)과 method(어떻게 보낼지)가 핵심임(GET/POST). HTML 검증(required, pattern)과 함께 보내야 제출이 안막힘
21. <strong> </strong> : 강조를 의미(중요성)
22. <h3> </h3> : 생략
23. <table> </table> : 표(데이터 그리드). 내부를 caption(표 제목), thead(머리글), tbody(본문), tfoot(합계/요약)로 구조화
24. <tr> </tr> // <td> </td> : 행(row). 표의 가로 한 줄. 각 행 안에 셀들이 들어감: 머리글 셀은 <th>, 일반 셀은 <td>
내용이 너무 길어져서 나머지는 ② 에 이어서...
'해킹스터디' 카테고리의 다른 글
| [Normaltic 웹해킹 입문] 2강 관련 복습&리뷰-②(DB) (0) | 2025.10.29 |
|---|---|
| [Normaltic 웹해킹 입문] 2강 관련 복습&리뷰-① (3) | 2025.10.29 |
| [Normaltic 웹해킹 입문] 1강 주요 과제-APM 환경에서 로그인 페이지 만들기(php 이용, DB 연동X) (0) | 2025.10.28 |
| [Normaltic 웹해킹 입문] 1강 주요 과제-APM 웹 개발 환경 세팅(VBox 이용) (1) | 2025.10.24 |
| [Normaltic 웹해킹 입문] 1강 관련 복습&리뷰-② (0) | 2025.10.24 |