HTML 과 CSS 기초 2

표

표 만들기 태그

• <table> : 표를 만드는 태그
• <tr> : 표의 행을 만드는 태그
• <td> : 표의 열을 만드는 태그
• <th> : 표의 제목 을 만드는 태그, 굵은 글씨로 가운데 정렬이된다.

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

• colspan : 오른쪽에 있는 칸들을 합쳐서 가로로 길게 만든다.

<td colspan="2"></td>

• rowspan : 아래쪽에 있는 칸들을 합쳐서 세로로 길게 만든다.

<td rowspan="2"></td>

시맨틱 구조

1. 의미 없는 컨테이너 태그

• <div> : HTML에서 의미를 가지지 않는 블록 단위의 컨테이너 태그로, 여러 요소를 하나의 그룹으로 묶어 페이지의 구조를 나누거나 레이아웃을 구성할 때 사용
• <span> : HTML에서 특별한 의미나 레이아웃 기능 없이 텍스트의 일부분을 감싸는 인라인 컨테이너 태그

2. 의미를 가지는 구조 태그 : 시맨틱 태그

HTML에서 요소의 겉모양이 아니라 의미와 역할을 명확히 드러내는 태그로, 해당 영역이 어떤 목적을 가지는지 브라우저/검색엔진/접근성 도구가 이해할 수 있도록 돕는 태그를 말한다.

• <header> : 페이지의 머리글 영역, 제목, 로고
• <nav> : 메뉴, 링크 목록
• <main> : 페이지에서 가장 핵심이 되는 주요 내용
• <section> : 주제별로 나눈 컨텐츠 영역
• <article> : 게시글, 블로그처럼 독립적으로 의미를 가지는 컨텐츠
• <aside> : 본문과 간접적 또는 관련없는 사이드 컨텐츠
• <footer> : 저작권, 작성자 정보, 하단 정보 영역

박스 모델

박스모델은 HTML 요소 하나하나를 사각형 상자로 보고 내용(content), 안쪽 여백(padding), 테두리(border), 바깥 여백(margin)으로 구성된 구조로 이해하는 개념이다.

👉 브라우저는 위 네 영역을 합쳐 요소의 실제 크기와 화면에서 차지하는 공간을 계산한다.

CSS 활용

안쪽 여백 (padding)

박스 모델에서 내용과 테두리 사이의 안쪽 여백을 의미하며, 요소 내부의 컨텐츠가 테두리에 너무 붙지 않도록 공간을 만들어 가독성과 디자인 완성도를 높인다.

h1 { padding: 20px; } /* 네 방향 모두 */
h1 { padding: 10px 20px; } /* 상하, 좌우 */
h1 { padding: 10px 20px 30px; } /* 상, 좌우, 하 */
h1 { padding: 10px 20px 30px 40px; } /* 상, 우, 하, 좌(시계 방향) */

테두리 (border)

박스 모델에서 요소의 테두리 영역을 의미하며, padding과 margin 사이에 위치해 요소의 경계를 시각적으로 구분해 주는 역할을 한다.

border-width: 테두리 두께
border-style: 테두리 형태 (solid, dashed, dotted 등)
border-color: 테두리 색상
border: 위 세 속성을 한 번에 지정하는 축약 속성
border-radius: 모서리를 둥글게 처리

바깥 여백 (margin)

박스 모델에서 요소의 바깥쪽 여백을 의미하며, 요소와 요소 사이의 간격을 조절하는데 사용한다. 위 아래 마진은 상황에 따라 마진 병합(마진이 더 큰 쪽으로 합쳐짐)이 발생할 수 있어 레이아웃 이해에 중요하다.

h1 { margin: 20px; } /* 네 방향 모두 */
h1 { margin: 10px 20px; } /* 상하, 좌우 */
h1 { margin: 10px 20px 30px; } /* 상, 좌우, 하 */
h1 { margin: 10px 20px 30px 40px; } /* 상, 우, 하, 좌(시계 방향) */
h1 { margin: 0 auto; } /* 가로 가운데 정렬 */

box-sizing

CSS에서 요소의 너비와 높이를 어떤 기준으로 계산할지 결정하는 속성으로, 박스 모델의 크기와 계산 방식을 제어한다.

• contect-box : width와 height에 내용(content)만 포함하고 padding과 border를 바깥으로 더함. (실제 크기와 맞지않음)
• border-box : padding과 border를 너비/높이에 포함시켜 요소의 실제 크기를 예측하기 쉽게 만듦. (더 많이 사용)

float

float는 CSS에서 요소를 문서의 일반적인 흐름에서 살짝 분리해 왼쪽이나 오른쪽으로 띄우는 속성으로, 주로 이미지 옆에 텍스트를 배치하거나 과거에는 다단 레이아웃을 구성하는 데 사용되었다.

<style>
    img {
        float: left;
        margin-right: 20px;
    }
</style>

    <img src="./spring1.png" alt="봄">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    Omnis voluptate adipisci ex aperiam praesentium error, expedita impedit, 
    repudiandae libero aspernatur illo ratione ut explicabo quasi. 
    Quidem neque rem ut reprehenderit!

float 사용전 (이미지의 bottom에 텍스트가 붙어서 출력되는걸 알 수 있다.)

float 사용 후 (텍스트가 이미지 바로 옆에 배치되었지만 만약 아래 컨텐츠가 더 있었다면 같이 올라 가니 주의해야함)

clear

clear 속성은 float가 적용된 요소로 인해 흐트러진 레이아웃을 정리하기 위해 사용하는 CSS 속성으로, 앞에 떠 있는 (float된) 요소의 영향을 받아 나란히 배치되지 않도록 하고 그 아래로 내려가게 만드는 역할을 함. float가 적용된 요소들의 흐름이 끝나는 지점에 빈 태그 <div>를 하나 넣고 아래와 같이 스타일을 부여한다

.clear { clear: both; }

텍스트 스타일

font-family

- 텍스트에 사용할 글꼴의 우선순위 목록을 지정한다.

- 앞의 글꼴이 없으면 다음 글꼴로 대체된다.

h1 { family: "Noto Sans KR", Arial, sans-serif }

웹폰트

사용자의 컴퓨터에 해당 글꼴이 설치되어 있지 않아도, 웹페이지가 서버에서 글꼴 파일을 직접 내려받아 동일한 글꼴로 표시해 주는 기술을 말한다.

CSS 텍스트 속성

font-size

- 글자의 크기를 지정

- px, em, rem, % 등 단위 사용

• px : 화면의 고정된 크기 단위, 지정한 값이 그대로 적용
• em : 부모 요소의 글자 크기를 기준으로 계상되는 상대 단위. 부모가 16px이면 1em = 16px, 1.5em = 24px이 됨.
• rem : 문서 최상위 요소(HTML)의 글자 크기를 기준으로 계산
• % : 기준 요소 대비 비율로 크기를 지정. 글자 크기에서는 보통 부모의 글자 크기를 기준으로 계산되며, 레이아웃에서는 부모의 크기 대비 비율로 동작

h1 { font-size: 20px; }

 

font-weight

- 글자의 두께를 지정

- normal, bold 또는 숫자 (100~900) 사용

- 실제 지원 여부는 글꼴에 따라 다름

p { font-weight: 700; } /* bold */

 

font-style

- 글자를 기울일지 여부 설정

p { font-style: italic; }

 

for-variant

- 소문자를 작은 대문자 형태로 표시

p { font-variant: small-caps }

 

line-height

- 줄과 줄 사이의 간격을 지정

- 가독성에 매우 큰 영향

- 숫자만 쓰면 글자 크기의 배수로 계산됨

p { line-height: 1.6; }

 

letter-spacing

- 글자와 글자 사이의 간격 조절

p { letter-spacing: 1px; }

 

word-spacing

- 단어 사이의 간격을 조절

p { word-spacing: 4px; }

 

text-decoration

- 밑줄, none, underline, overline 등 장식효과

p { text-decoration: underline; }

position

position은 HTML 요소로 문서의 기본 흐름에서 어떻게 배치할지 결정하는 CSS 속성으로, 요소의 위치 기준과 이동 방식을 제어한다.

1. position: static;

모든 HTML 요소의 기본 위치 지정 방식으로, 요소가 문서의 일반적인 흐름에 따라 위에서 아래, 왼쪽에서 오른쪽 순서대로 배치된다.

2. position: relative;

요소를 문서의 일반적인 흐름에 두면서, top / left / right / bottom 속성을 이용해 자기 자신의 원래 위치를 기준으로 이동시키는 위치 지정 방식이다.

3. position: fixed;

요소를 브라우저 화면(뷰포트)을 기준으로 고정시키는 위치 지정 방식으로, 스크롤을 내려도 해당 요소가 항상 같은 위치에 머무는 특징을 가지는 방식이다.

4. position: absolute;

요소를 문서의 일반 흐름에서 완전히 제거한 뒤, 가장 가까운 position이 지정된 부모 요소 (relative, absolute, fixed 중 하나)를 기준으로 위치를 잡는 방식. 만약 해당 부모가 없다면 브라우저 화면을 기준으로 배치되며, top / left / right / bottom 값을 이용해 정확한 위치를 지정할 수 있어 아이콘 겹치기나 특정 요소 위에 배치해야 할 UI를 만들 때 사용된다.

z-index

CSS에서 position을 쓰다 보면 요소들이 화면에서 겹치는 상황이 발생하는데 이때 어떤 요소를 위에 표시할지 결정하는 속성으로, 값이 클수록 더 위에 배치된다.