70일차. HTML & CSS

 

70일 차 회고.

 

 잠을 3시간밖에 못 자서 하루 종일 피곤했다. 지난 토요일에 못 들은 AWS 특강을 혼자서 따라 해보고 있는 중인데 너무 따라만 하는 것 같아서 괜찮을까 싶다.

 

 

 

 

1. Web

 

 

1-1. Web

 

Web Browser

• 웹 서버와 통신하며 HTML 문서나 파일을 받아 화면에 출력하는 응용 소프트웨어
• 렌더링(Rendering)
  • 서버로부터 받은 HTML, CSS, JS 등을 해석하여 시각적으로 화면에 표시하는 과정 

 

Web Standards(웹 표준)

• HTML
  • 웹 페이지의 구조를 정의한다.
• CSS
  • 웹 페이지의 스타일과 레이아웃을 지정한다.
• Script
  • 웹 페이지의 동작 및 상호작용을 구현한다.

 

Cross-Browsing(크로스 브라우징)

• 웹 페이지가 모든 브라우저에서 동일하게 작동하고 의도한 대로 보이도록 구현한다.

 

Web Accessibility(웹 접근성)

• 장애인, 고령자 등 모든 사용자가 웹 사이트의 정보에 차별 없이 접근하고 이용할 수 있도록 보장한다.
• 다양한 플랫폼, 기기, 브라우저 환경에서도 접근이 가능하도록 고려해야 한다.

 

SEO(Search Engine Optimize, 검색 엔진 최적화)

• 웹 페이지를 검색 엔진 알고리즘에 맞춰 최적화하여 검색 결과 상위에 노출되도록 한다.
• 검색 엔진 프로세스
  • Crawling
    • 웹 크롤러가 웹 콘텐츠를 수집한다.
  • Indexing
    • 수집된 콘텐츠를 주제별로 색인한다.
  • Ranking
    • 검색 의도에 따라 콘텐츠에 순위를 매겨 결과로 제공한다.

 

통신 프로토콜

• HTTP(Hyper Text Transfer Protocol)
  • 클라이언트-서버 모델 기반 통신 프로토콜
  • 특징
    
    • Connectionless
      • 요청-응답 후 연결을 종료한다. 
    • Stateless
      • 요청 간 상태를 유지하지 않는다. 
  • 주요 Method
    • GET
      • 데이터 조회(SELECT)
    • POST
      • 데이터 생성(INSERT)
    • PUT
      • 데이터 전체 수정(UPDATE)
    • DELETE
      • 데이터 삭제
  • 상태코드
    
    • 1XX
      • 정보
    • 2XX
      • 성공
    • 3XX
      • 리다이렉션
    • 4XX
      • 클라이언트 오류
    • 5XX
      • 서버 오류
• HTTPS(Hyper Text Transfer Protocol Secure)
  
  • HTTP에 SSL/TLS 암호화를 추가한 보안 프로토콜
  • 모든 요청/응답 데이터를 암호화하여 전송한다.
  • CORS(Cross-Origin Resource Sharing)
    • 웹 애플리케이션이 다른 출처의 리소스에 접근할 수 있도록 브라우저가 허용하는 방식
    • 보안 정책의 일환으로, 명시적으로 허용된 출처에만 요청할 수 있다.
  • CSRF
    • 사용자가 의도하지 않은 요청을 특정 웹사이트에 보내도록 유도하는 공격 방식
• FTP(File Transfer Protocol)
  • 파일 전송
• SMTP(Simple Mail Transfer Protocol)
  • 이메일 전송
• SSH(Secure Shell)
  • 원격 서버에 안전하게 접속하기 위한 프로토콜

 

로그인

• Authentication(인증)
  • 사용자가 주장하는 신원을 확인하는 절차
• Authorization(인가)
  • 인증된 사용자가 특정 자원 또는 기능에 접근할 수 있는 권한이 있는지 확인하는 절차

 

 

 

2. HTML

 

 

2-1. HTML Element

 

Element

• Element
  • HTML 문서의 기본 구성단위
  • 콘텐츠를 감싸는 태그로 이루어진다.
• Tag
  • 요소의 시작과 끝을 나타낸다.
• Content
  • 태그 내부에 들어가는 내용

 

Document and Website Structure

• Header
  • <header>
  • 문서나 섹션의 머리말 역할을 하는 영역
  • 주로 로고, 제목, 내비게이션 등을 포함한다.
• Main Content
  • <main>
  • 문서의 주요 콘텐츠가 위치하는 영역
  • 페이지에서 고유하고 중심적인 내용을 포함한다.
• Navigation Bar
  • <nav>
  • 사이트의 다른 페이지나 섹션으로 이동할 수 있는 링크 메뉴
• Sidebar
  • <aside>
  • 부가 정보를 제공하는 보조 영역
    • 광고, 링크, 인용 등
• Footer
  • <footer>
  • 문서나 섹션의 맨 아래 부분
  • 저작권, 연락처, 저자 정보 등 포함

 

 

2-2. HTML Tags

 

 

Headings/Paragraph

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

<p>Paragraph</p>

 

Hyperlinks

• href : 이동할 주소 지정

<a href="https://example.com">Text</a>

 

Image

• src : 이미지 경로
• alt : 이미지 대체 텍스트
• title : 마우스 오버 시 툴팁 표시

<img src="image.jpg" alt="Image Description" title="Tooltip Text" />

 

Audio

• controls : 재생 컨트롤 표시
• autoplay : 자동 재생
• muted : 음소거 상태로 시작
• loop : 반복 재생

<audio src="audio.mp3" controls autoplay muted loop></audio>

 

Video

• controls : 재생 컨트롤 표시
• autoplay : 자동 재생
• muted : 음소거 상태로 시작
• loop : 반복 재생

<video src="video.mp4" controls autoplay muted loop></video>

 

Text Formatting

<b>bold</b>
<i>italic</i>
<big>big</big>
<small>small</small>
<sub>subscript</sub>
<sup>superscript</sup>
<ins>inserted</ins>
<del>deleted</del>
<mark>marked</mark>

 

List

• Unordered List

<ul>
    <li>List 1</li>
    <li>List 2</li>
</ul>

• Ordered List
  • type
    • 기본 : 숫자
    • "a", "A", "i", "I" 등 사용 가능

<ol>
    <li>List 1</li>
    <li>List 2</li>
</ol>

• Description List

<dl>
    <dt>Term</dt>
    <dd>Definition</dd>
</dl>

 

Div / Span

• Div
  • 전체 구역을 묶는 블록 요소

<div>Block Area</div>

• Span
  • 텍스트 일부를 감싸 스타일이나 스크립트를 적용할 때 사용하는 인라인 요소

<span>Inline Area</span>

 

Button

• type
  • button
  • submit
  • reset

<button type="button">Click</button>

 

Form

• name : 폼의 이름
• action : 데이터를 보낼 서버 주소
• method : GET 또는 POST
• onsubmit : 제출 시 실행할 JavaScript 함수

<form name="myForm" action="/submit" method="post" onsubmit="return validateForm();"></form>

 

 

 

3. CSS

 

 

3-1. CSS

 

CSS(Cascading Style Sheet)

• HTML 문서에 디자인과 레이아웃을 적용하는 스타일 언어
• 웹 페이지의 시각적인 표현을 제어할 수 있다.
  • 글꼴, 색상, 여백, 정렬, 애니메이션 등

 

3-2. CSS Selector

 

 

Selector

• 기본 선택자

/* Select all elements */
* {
    margin: 0;
    padding: 0;
}


/* Select all <a> elements */
a {
    color: blue;
}

/* Select element with id="demo" */
#demo {
    font-size: 16px;
}

/* Select all <span> and <div> elements */
span, div {
    background-color: lightgray;
}

/* Select elements with class="spacious" */
.spacious {
    padding: 10px;
}

• 결합 선택자
  • 인접 형제 결합자 : A + B
    • A 요소 바로 다음에 오는 형제 요소 B 선택
  • 일반 형제 결합자 : A ~ B
    • A 요소 이후에 나오는 모든 형제 요소 B 선택
  • 자식 결합자 : A > B
    • A 요소의 직계 자식인 B 요소만 선택
  • 자손 결합자 : A B
    • A 요소 내부에 포함된 모든 B 요소 선택
• 가상 선택자

/* Apply when mouse hovers over <a> */
a:hover {
    color: green;
}

/* Apply to visited <a> links */
a:visited {
    color: purple;
}

/* Apply to the first line of <p> */
p::first-line {
    font-weight: bold;
}

/* Add content before <p> */
p::before {
    content: "※ ";
    color: red;
}

 

Display

• none
  • 요소를 화면에서 완전히 제거하며, 공간도 차지하지 않는다.
• block
  • 요소가 한 줄 전체를 차지하며, 블록 형식으로 배치된다.
• inline
  • 요소가 내용만큼의 공간만 차지하며, 한 줄에 배치된다.
• inline-block
  • inline처럼 배치되지만, block처럼 width와 height를 지정할 수 있다.

 

Visibility

• visible
  • 요소가 화면에 보이도록 설정한다.
• hidden
  • 요소가 보이지 않지만, 공간은 그대로 유지한다.
• collapse
  • 테이블의 행이나 열을 숨기고 공간도 제거한다.
  • 테이블 요소에만 적용된다.
• inherit
  • 부모 요소의 visibility 속성 값을 상속받는다.

 

Box

• Content
  • 실제 콘텐츠가 표시되는 영역
• Padding
  • Content 영역과 Border 사이의 내부 여백
• Border
  • Padding 영역을 감싸는 테두리 영역
• Margin
  • 요소 바깥의 여백
  • 다른 요소와의 간격을 조정한다.

 

Position

• static
  • 문서의 흐름에 따라 배치된다.
• relative
  • 원래 위치를 기준으로 이동된다.
• absolute
  • 가장 가까운 조상 중 position: relative 요소를 기준으로 절대 위치가 지정된다.
• fixed
  • 브라우저 화면을 기준으로 위치가 고정된다.
  • 스크롤과 무관하게 유지된다.
• sticky
  • 스크롤 위치에 따라 relative에서 fixed로 전환된다.

 

Flex

• flex-direction
  • 요소들이 어떤 방향으로 배치될지를 설정한다.
• flex-wrap
  • 공간이 부족할 때 요소들을 줄 바꿈 할지를 설정한다.
• justify-content
  • 가로 방향 정렬을 설정한다.
• align-items
  • 세로 방향 정렬을 설정한다.
• align-content
  • 여러 줄일 때 줄 간 간격을 설정한다.
  • flex-wrap이 적용된 경우에만 유효하다.
• order
  • 요소의 배치 순서를 변경할 수 있다.
• flex-grow
  
  • 요소가 남는 공간을 얼마나 차지할지를 비율로 설정한다.
• align-self
  • 개별 요소에 대해 세로 정렬 방식을 설정한다.
  • align-items보다 우선된다.

 

 

2-3. CSS Framework

 

Bootstrap

• 클래스 기반의 구성으로 빠르게 디자인 구현이 가능하다.
• 버튼, 모달, 폼, 카드 등 다양한 UI 요소를 제공한다.
• 미디어 쿼리를 활용한 반응형 레이아웃을 지원한다.
• 기본 스타일이 강하게 적용되어 있어 커스터마이징이 필요할 수 있다.

 

Tailwind CSS

• 미리 정의된 유틸리티 클래스들을 조합하여 커스터마이징 된 스타일로 구현이 가능하다.
• 빠른 시각적 프로토타이핑이 가능하다.
• 별도의 컴포넌트 스타일 없이 HTML 안에서 직접 스타일을 지정한다.
• JavaScript 프레임워크와 잘 어울린다.