목차 보기

시리즈·멀티캠퍼스 JAVA 풀스택 개발자 아카데미 6회차(1개의 글)

1.풀스택 개발자 아카데미 (1) - HTML/CSS현재

1. HTML

오늘날, 우리가 보는 다채로운 웹 페이지들은 단순한 텍스트나 이미지의 나열이 아니다. 이들은 모두 HTML, CSS, Javascript의 요소로 이루어져있고, 이 기술들이 유기적으로 결합되어 만들어진 것이다.

이러한 웹 페이지의 기틀, 뼈대가 되는 핵심 요소가 바로 HTML(Hyper Text Markup Language)이다. HTML은 Hyper Text Markup Language의 약자로, 웹 페이지의 뼈대와 구조를 만드는 마크업 언어다.

즉, 문서 간에 서로 링크가 설정되어 있어, 링크된 부분을 클릭하면 해당 문서로 이동할 수 있는 기능을 제공한다.

Hyper Text: 참조(하이퍼링크)를 통해 한 문서에서 다른 문서로 즉시 이동할 수 있는 텍스트 Markup Language: 문서의 구조나 서식을 정의하기 위해 사용되는 언어.

HTML은 프로그래밍 언어는 아니지만, 브라우저가 텍스트, 이미지, 비디오 등 다양한 컨텐츠를 구조화하고 표시할 수 있도록 표준화된 마크업 언어이며, 문서의 각 부분이 어떤 역할을 하는지 알려주기 위해 "태그"를 사용한다.

1.1. HTML의 역할: 정보의 나열

HTML만으로 구성된 웹 페이지는 정보를 단순히 나열하는 역할을 한다. 마치 책의 목차처럼 어떤 정보가 있는지 보여주지만, 디자인이나 동적인 기능은 없다. 종종 웹 페이지에서 CSS 로드가 되지 않아 다음과 같은 화면을 본적이 있을 것이다.

이처럼, HTML은 우리에게 예쁘게 보여주거나, 기능을 제공하는 것이 아니라, 그저 정보를 나열하고, 정보를 나열할 구조를 지정하는 것 뿐이다.

1.2. HTML의 구조

모든 HTML 문서는 다음과 같은 골격으로 구성된다.

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My First Web Page</title>
  </head>
  <body>
    <p>Hello World</p>
    <p>안녕하세요</p>
  </body>
</html>

2. 태그 - Tag

시작 태그(<tag>)와 종료 태그(</tag>)가 있다
- 시작 태그와 종료 태그 사이에 태그가 포함하고자 하는 내용을 넣는다.
- <br>, <img>, <hr>과 같이 종료 태그 없이 사용가능한 단독 태그도 있다.
<tag 속성="속성값">의 형태로 속성과 속성 값을 기입할 수 있다.
태그는 대소문자를 구분하지 않지만, 웹 표준에서는 소문자로 작성하는 것을 권장한다.

2.1. `<head>` 기본 태그

head 태그에는 문서의 정보를 작성한다. 웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 문서 정보를 포함한다. 이는 문서의 제목, Charset(문자셋)을 지정하거나, 외부 파일을 연결할 수 있다.

<title> 태그를 사용해 문서의 제목을 설정할 수 있다.
<link rel="" href=""> 태그를 통해 외부 파일을 링크할 수 있다.

2.2. 핵심 기본 태그

2.2.1. 텍스트 관련 태그

<h1> </h1>~<h6> </h6>
- 제목 태그: h1이 가장 크고, h6이 가장 작다. 줄 바꿈하여 출력된다.
<p> </p>
- 문단 태그: 문단을 나눌 때 사용한다.
- 브라우저의 기본 스타일에 따라 문단 위아래로 여백이 생긴다.
- 여러 번 사용해도 행 간격이 더 벌어지지 않는다.
<br />
- 줄바꿈 태그: 강제로 줄을 바꿀 때 사용하며, 여러 번 사용하여 여러 줄을 바꿀 수 있다.
<hr />
- 수평선 태그: 수평선을 삽입한다.

2.2.2. 텍스트 강조 및 장식 태그

<b>/<strong>: 굵은 글씨(Bold). <strong>은 의미적으로 더 중요할 때 사용한다.
<i>/<em>: 이탤릭체. <em>은 의미적으로 강조할 때 사용
<sub>: _{아래 첨자}
<sup>: ^{윗 첨자}
<ins>: 밑줄
<del>: ~~취소선~~

2.2.3. 특수 문자 엔티티 (Special Character Entities)

HTML에서 꺾쇠(<, >) 같은 문자들은 태그를 정의하는 데 사용된다. 즉, 이러한 문자들을 웹 페이지에 일반 텍스트로 표시하는 경우, HTML의 정의로 받아들일 수 있기 때문에, 특수한 방법으로 삽입해야 하는데, 이를 HTML 엔티티 또는 특수 문자 엔티티라고 부른다.

특수 문자 엔티티는 &문자; 또는 &#숫자;의 형태로 작성하며, 이는 브라우저에서 해당 특수 문자로 변환되어 보여진다.

2.2.3.1. 자주 사용되는 엔티티

문자	숫자 코드	엔티티 이름	설명
	` `	` `	non-breaking space. 줄바꿈이 없는 공백
<	`<`	`<`	less-than 부등호 (<)
>	`>`	`>`	greater-than 부등호 (>)
"	`"`	`"`	쌍따옴표(")
'	`'`	`'`	따옴표(')
&	`&`	`&`	앰퍼샌드(&) 기호
©	`©`	`©`	© Copyright. 저작권 표시 기호

2.2.4. 하이퍼링크 태그: `<a>`

<a>는 웹 페이지의 핵심 기능 중 하나로, 문서나 사이트를 연결해 준다.

href속성: 이동하고자 하는 곳의 위치(경로)를 지정한다.
- 예시: <a href="https://google.com/">구글로 이동</a>
- 결과: 구글로 이동
target속성: 연결된 문서를 보여줄 위치를 지정한다.
- _self: 현재 화면에서 이동한다(기본 값).
- _blank: 새 탭 또는 새 창에서 보여준다.

2.2.5. 목록 태그

start 속성: 시작 숫자를 지정 reversed 속성: 역순으로 표시

<ul> (Unordered List)
- 순서가 없는 목록
- 각 항목은 <li> (List Item) 태그로 표현
- type 속성을 사용하여 목록의 마커를 변경할 수 있다.
  - disc (검은 원)
  - circle (흰 원)
  - square (사각형)
<ol> (Ordered List)
- 순서가 있는 목록.
- 각 항목은 <li> 태그로 표현
- type 속성을 사용하여 숫자의 종류를 변경할 수 있다.
  - 1 (숫자)
  - a (소문자 영어)
  - A (대문자 영어)
  - i (소문자 로마 숫자)
  - I (대문자 로마 숫자)

<dl> (Definition List): 정의목록 태그
- <dt> (Definition Term) : 정의할 용어
- <dd> (Definition Description): 용어 설명
- 이 태그들 또한 Semantic. 의미적인 강조를 위해 사용한다.

2.2.6. 테이블 태그

<table>: 테이블을 선언하는 태그
- <table>에는 border, width, height와 같은 속성을 정의하는 경우도 있다. 하지만, 이 속성들은 모두 HTML4에서 사용하던 것으로, 현재는 **Deprecated(사용하지 않음)**을 권장한다.
- 만약 border, width, height 등의 속성을 정의하고 싶다면, CSS의 사용을 강력히 권장한다.
<caption>: 테이블의 제목을 표시
<tr>: 테이블 내에 한 행을 정의하는 태그
<td>: 테이블 내의 한 열, 즉 셀을 만들 때 사용되는 태그
- rowspan: 여러 행을 합칠 때 사용
- colspan: 여러 열을 합칠 때 사용
<thead>, <tbody>, <tfoot>
- 표의 제목, 본문, 바닥글 부분을 구분
- 시각 장애인을 위한 접근성을 높일 수 있음
- CSS를 사용하여 각 부분에 다른 스타일을 적용할 수 있도록 함

다음 사진은 rowspan과 colspan에 대해 보여준다.

다음 사진과 HTML을 통해 rowspan과 colspan을 다시 한 번 확인해 보자.

html

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td rowspan="2">3</td>
    <td>4</td>
  </tr>
  <tr>
    <td colspan="2">5</td>
    <td rowspan="2">6</td>
  </tr>
  <tr>
    <td>7</td>
    <td colspan="2">8</td>
  </tr>
</table>

2.2.7. 이미지 태그 `<img>`

웹 페이지에 이미지 삽입 시 사용
src: 이미지 파일의 결로를 지정하는 필수 속성
- 상대경로, 절대경로, URI 모두 사용할 수 있음
alt: 이미지가 출력되지 않을 때 대신 표시되는 텍스트
title: 마우스를 이미지에 올리면 나타나는 설명
width, height: 이미지의 가로, 세로 길이 지정
usemap: 이미지 맵을 지정할 수 있으며, 하나의 이미지에 여려개의 링크 영역을 만들고, 각 영역마다 다른 링크를 지정할 수 있다.
- usemap은 이미지 맵을 지정할 때 사용하며, 하나의 이미지에 여러 개의 링크 영역을 만들고, 각 영역마다 다른 링크를 지정할 수 있다.

2.2.8. 문서 삽입 태그 `<iframe>`

현재 HTML 문서 내에 다른 문사를 포함하고자 할 때 사용한다.

2.2.9. 입력 양식 태그

사용자로부터 데이터를 입력받을 때 사용한다.

<form>: 입력 양식을 구성하는 기본 골격이며, 입력된 데이터를 서버로 전송
- action: 폼의 내용을 전달할 문서의 URL을 지정
- method: 데이터를 전송하는 방식을 지정
  - get은 주소 뒤에 붙어서 전송되고, post는 눈에 보이지 않게 전송
<label>: 폼 요소에 캡션을 붙여 클릭 범위를 넓혀 사용자 편의성을 높임
- for 속성을 통해 <input> 태그와 연결
<input>: 다양한 유형의 데이터를 입력받기 위한 태그
- type: 입력 유형을 지정
  - text, password, checkbox, radio, button, file, submit, reset 등
- name: 입력 상자의 이름을 지정
- value: 초기값이나 태그가 지닌 값을 지정
- placeholder: 입력할 내용의 힌트를 표시
- maxlength: 최대 입력 길이를 지정
- readonly: 읽기 전용 필드로 만듦
- required: 필수 입력 필드로 지정
- autofocus: 페이지 로드 시 입력 커서를 표시
- hidden: 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 갖는 필드
<select>: 드롭다운 목록을 표시할 때 사용
<option> 태그로 각 항목을 정의
<textarea>: 여러 줄의 텍스트를 입력받을 때 사용
- rows와 cols 속성으로 세로 및 가로 길이를 지정

text

<div class="form-row vertical-align">
  <label for="password-check">Password Check:</label> <input
    type="password"
    id="password-check"
    name="password-check" placeholder="비밀번호 확인"
    required
  />
</div>

<div class="form-row">
  <label>Gender: </label> <input type="radio" id="gender-male" value="male" name="gender" />
  <label for="gender-male">Male</label>
  <input type="radio" id="gender-female" value="female" name="gender" />
  <label for="gender-female">Female</label>
  <input type="radio" id="gender-none" value="none" name="gender" checked />
  <label for="gender-none">None</label>
</div>

<div class="form-row">
  <label>Favorite:</label>
  <input type="checkbox" id="fav-html" value="html" name="favorite" checked />
  <label for="fav-html">HTML</label>
  <input type="checkbox" id="fav-java" value="java" name="favorite" />
  <label for="fav-java">Java</label> <input type="checkbox" id="fav-php" value="php" name="favorite" />
  <label for="fav-php">PHP</label>
</div>

2.3. HTML5 시멘틱 구조 태그

HTML5에서는 웹 문서의 구조를 더욱 명확하게 정의하기 위해 시멘틱(Semantic) 태그를 도입했다. 시멘틱은 '의미의', '의미론적인'이라는 뜻으로, 각 요소가 역할과 기능에 맞는 의미를 갖도록 영역을 구분한다.

HTML5 시멘틱 구조는 다음과 같은 이유로 사용한다.

소스만으로도 문서 내용 쉽게 이해: 태그만 보고도 어느 부분이 제목이고, 메뉴이고, 실제 내용인지 쉽게 구분
편리한 검색: 검색 엔진이 웹 페이지의 내용을 더 정확하게 파악하여 사용자에게 필요한 정보를 효율적으로 제공
- 예를 들어, <header>나 <nav> 부분은 검색하지 않고 <section>이나 <article> 태그 부분만 찾아서 검색이 가능해진다.
뛰어난 웹 접근성: 시각 장애인들이 사용하는 화면 판독기에서 시멘틱 태그를 통해 제목과 내용을 구별하여 사용자에게 정확한 내용을 전달할 수 있음
다양한 장치에 통일된 결과 제공: 태그에 역할이 정해졌기 때문에 어떤 장치(데스크톱, 모바일 등)에서든 동일하게 문서를 해독/표기가 가능

2.3.1. 주요 HTML5 시멘틱 태그

<header>: 웹 페이지의 헤더(제목, 로고 등) 부분 <nav>: 내비게이션(메뉴) 부분 <aside>: 사이드 바와 같이 본문 외의 부가적인 내용 <section>: 문서의 독립적인 섹션. 콘텐츠의 주된 내용을 포함 <article>: 독립적으로 배포되거나 재사용될 수 있는 콘텐츠 <footer>: 웹 페이지의 푸터(주소, 연락처, 저작권 등) 부분

3. CSS(Cascading Style Sheets; 계단식 스타일 시트)

CSS 또한 웹 페이지의 기본 구성 요소 중 하나이다. 1.에서 언급했던 것처럼, HTML은 정보를 나열하기만 하기 때문에, 이를 보기 쉽고, 가독성을 높이기 위해 CSS를 사용한다.

3.1. CSS, 모든 스타일의 시작

CSS는 이름처럼, 스타일이 위에서 아래로, 외부에서 내부로 적용되는 원리를 가진다. 이 때문에, CSS를 사용하면 체계적으로 웹 문서 전체의 디자인 통일성을 유지하고, 편리하게 관리할 수 있다.

CSS를 적용하는 방법은 3가지가 있다.

3.1.1. 외부 스타일 시트(`.css` 파일)

선택자(Selector): 스타일을 적용할 대상을 지정 (예: h1, .menu, #header)
속성(Property) & 값(Value): 어떤 스타일을 어떻게 적용할지 정의 (예: color: red;)

가장 구체적으로 대상을 명시한 스타일(인라인 스타일)이 가장 높은 우선순위를 가지며, 그 뒤로 ID, 클래스, 태그 선택자 순으로 적용된다.

css

div#box.container > p {
  display: flex;
  flex-direction: column;
  /* ... */
}

3.2. 박스 모델: 웹의 모든 요소는 '박스'

CSS의 박스 모델을 이해하는 것은 레이아웃의 첫걸음이라고 한다. 웹 페이지의 모든 요소는 사각형의 '박스'로 이루어져 있기 때문이다. 상하좌우로 여백이나 테두리를 설정하고, 이를 기준으로 위치를 잡는다.

마치 다양한 물건들을 박스에 담고, 차곡차곡 쌓아 정리하는 것과 같다.

Content: 콘텐츠가 표시되는 실제 영역
Padding: 콘텐츠와 테두리(border) 사이의 내부 여백
Border: 박스의 테두리
Margin: 박스와 다른 요소 사이의 외부 여백

display 속성은 이 박스가 화면에 어떻게 배치될지를 결정하는 중요한 속성이다.
한 줄을 모두 차지하는 block, 콘텐츠 크기만큼만 차지하며 옆으로 배치되는 inline, 그리고 이 둘의 특징을 합친 inline-block의 차이를 이해하는 것이 중요합니다.

3.3. 현대적 레이아웃의 핵심: Flexbox

과거 float 등을 이용한 복잡한 레이아웃 방식의 시대를 끝내고, Flexbox(플렉서블 박스)를 통해 간결하고 강력한 1차원 레이아웃 시스템을 사용할 수 있게 되었다. Flexbox는 아이템들을 담는 **플렉스 컨테이너(부모 요소)**와 그 안의 **플렉스 아이템(자식 요소)**으로 구성된다.

Flexbox를 사용하려면 먼저 부모 요소에 display: flex;를 선언해야 한다. 그 후, 아래와 같은 핵심 속성들로 아이템을 자유자재로 정렬할 수 있습니다.

flex-direction: 아이템이 쌓일 주축의 방향을 결정합니다. (row, column 등) justify-content: 주축(main-axis) 방향으로 아이템을 정렬합니다. (예: flex-start, center, space-between) align-items: 교차축(cross-axis) 방향으로 아이템을 정렬합니다. (예: stretch, center, flex-start)

3.4. 반응형 웹

PC, 태블릿, 모바일까지, 다양한 크기의 디바이스에서 웹사이트가 최적화된 모습으로 보여야 하는 것은 이제 선택이 아닌 필수이다. 다양한 웹 프레임워크와 CSS 프레임워크에서도 반응형 웹을 위한 기능을 제공하고 있고, 이는 세 가지 핵심 기술로 구현된다.

3.4.1. 뷰포트 (Viewport)

모바일 기기에서 웹 페이지의 보이는 영역을 제어하는 기술
HTML <head> 태그 안에 아래의 메타 태그를 추가하여, 기기의 화면 너비를 기준으로 페이지 너비를 설정하도록 브라우저에 알려주는 것이 반응형 웹의 시작

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 바로 이 아래 부분 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  ...
</html>

3.4.2. 유동형 그리드 (Fluid Grid)

px 같은 고정 단위 대신 % 같은 상대 단위를 사용하여 레이아웃을 만드는 기술
이를 통해 브라우저 창 크기에 따라 요소의 너비가 유연하게 변함
vw(뷰포트 너비), vh(뷰포트 높이) 같은 뷰포트 기준 단위 사용 시 글자 크기나 여백 등도 화면 크기에 비례하여 조절됨.

3.4.3. 미디어 쿼리 (Media Query)

화면의 크기나 환경을 감지하여 특정 조건에서만 다른 CSS 스타일을 적용하게 하는 기술
예를 들어 '화면의 최소 너비가 768px일 때'와 같이 조건을 지정하여 태블릿이나 데스크톱 환경에 맞는 레이아웃을 별도로 정의할 수 있다.

문자	숫자 코드	엔티티 이름	설명
	` `	` `	non-breaking space. 줄바꿈이 없는 공백
<	`<`	`<`	less-than 부등호 (<)
>	`>`	`>`	greater-than 부등호 (>)
"	`"`	`"`	쌍따옴표(")
'	`'`	`'`	따옴표(')
&	`&`	`&`	앰퍼샌드(&) 기호
©	`©`	`©`	© Copyright. 저작권 표시 기호

문자	숫자 코드	엔티티 이름	설명
	` `	` `	non-breaking space. 줄바꿈이 없는 공백
<	`<`	`<`	less-than 부등호 (<)
>	`>`	`>`	greater-than 부등호 (>)
"	`"`	`"`	쌍따옴표(")
'	`'`	`'`	따옴표(')
&	`&`	`&`	앰퍼샌드(&) 기호
©	`©`	`©`	© Copyright. 저작권 표시 기호

풀스택 개발자 아카데미 (1) - HTML/CSS

1. HTML

1.1. HTML의 역할: 정보의 나열

1.2. HTML의 구조

2. 태그 - Tag

2.1. <head> 기본 태그

2.2. 핵심 기본 태그

2.2.1. 텍스트 관련 태그

2.2.2. 텍스트 강조 및 장식 태그

2.2.3. 특수 문자 엔티티 (Special Character Entities)

2.2.3.1. 자주 사용되는 엔티티

2.2.4. 하이퍼링크 태그: <a>

2.2.5. 목록 태그

2.2.6. 테이블 태그

2.2.7. 이미지 태그 <img>

2.2.8. 문서 삽입 태그 <iframe>

2.2.9. 입력 양식 태그

2.3. HTML5 시멘틱 구조 태그

2.3.1. 주요 HTML5 시멘틱 태그

3. CSS(Cascading Style Sheets; 계단식 스타일 시트)

3.1. CSS, 모든 스타일의 시작

3.1.1. 외부 스타일 시트(.css 파일)

3.2. 박스 모델: 웹의 모든 요소는 '박스'

3.3. 현대적 레이아웃의 핵심: Flexbox

3.4. 반응형 웹

3.4.1. 뷰포트 (Viewport)

3.4.2. 유동형 그리드 (Fluid Grid)

3.4.3. 미디어 쿼리 (Media Query)

2.1. `<head>` 기본 태그

2.2.4. 하이퍼링크 태그: `<a>`

2.2.7. 이미지 태그 `<img>`

2.2.8. 문서 삽입 태그 `<iframe>`

3.1.1. 외부 스타일 시트(`.css` 파일)

문자	숫자 코드	엔티티 이름	설명
	` `	` `	non-breaking space. 줄바꿈이 없는 공백
<	`<`	`<`	less-than 부등호 (<)
>	`>`	`>`	greater-than 부등호 (>)
"	`"`	`"`	쌍따옴표(")
'	`'`	`'`	따옴표(')
&	`&`	`&`	앰퍼샌드(&) 기호
©	`©`	`©`	© Copyright. 저작권 표시 기호