1 . 표
- 구조
<table>
<tr>
<td> </td>
. . . . . . . . .
</tr>
</table>
- td : 셀
- tr : 제목 셀, 굵은 글씨로 표시되며 가운데 정렬 됨
- ex
2 . 시멘틱 구조
- <span> : html에서 특별한 의미나 레이아웃 기능 없이 텍스트의 일부분을 감싸는 인라인 컨테이너 태그
- <div> : html에서 의미를 가지지 않는 블록 단위의 컨테이너 태그로 여러 요소를 하나의 그룹으로 묶어 페이지의 구조를 나누거나 레이아웃을 구성할 때 사용
- 시멘틱 태그 : html에서 요소의 겉모양이 아니라 의미와 역할을 명확히 드러내는 태그로, 해당 영역이 어떤 목적을 가지는지 브라우저/검색엔진/접근성 도구가 이해할 수 있도록 도움
- <header> = 페이지의 머리글 영역, 제목, 로고
- <nav> = 메뉴, 링크 목록
- <main> = 핵심 내용이 들어간 부분
- <section> = 주제별로 나눈 컨텐츠 영역
- <aricle> = 게시글, 블로그처럼 독립적으로 의미를 가지는 컨텐츠
- <aside> = 부과영역, 본문과 간접적 또는 관련 없는 사이드 컨텐츠(광고 등)
- <footer> = 카피라이터, 저작권, 작성자 정보, 하단 정보 영역
- ex
3 . 박스 모델
- 박스 모델 : html 요소 하나하나를 사각형 상자로 보고 내용(content), 안쪽 여백(padding), 테두리(border), 바깥 여백(margin)으로 구성된 구조로 이해하는 개념
- 브라우저는 위 네 영역을 합쳐서 요소의 실제 크기와 화면에서 차지하는 공간을 계산함
- 1 . 안쪽 여백(padding)
- 박스 모델에서 내용과 테두리 사이의 안쪽 여백을 의미
- 요소 내부의 컨텐츠가 테두리에 너무 붙지 않도록 공간을 만들어 가독성과 디자인 완성도를 높임
- {padding: 20px;} : 네 방향 모두 20px
- {padding: 10px 20px;} : 상하 10px, 좌우 20px
- {padding: 10px 20px 30px;} : 상 10px, 좌우 20px, 하 30px
- {padding: 10px 20px 30px 40px;} : 상 10px, 우 20px, 하 30px 좌 40px (시계방향)
- 2 . 테두리(border)
- 박스 모델에서 요소의 테두리 영역을 의미
- padding과 magin 사이에 위치해 요소의 경계를 시각적으로 구분해 주는 역할을 함
- border-width : 테두리 두께
- border-style : 테두리 형태(solid, dashed, dotted 등)
- border-color : 테두리 색상
- border : 위 세 속성을 한 번에 지정하는 축약 속성
- border-radius : 모서리를 둥글게 처리
- 3 . 바깥 여백(margin)
- 박스 모델에서 요소의 바깥쪽 여백을 의미
- 요소와 요소 사이의 간격을 조절할 때 사용
- 위아래(세로) 마진은 상황에 따라 마진 병합이 발생할 수 있음 => 큰 값 하나만 적용
- {margin: 20px;} : 네 방향 모두 20px
- {margin: 10px 20px;} : 상하 10px, 좌우 20px
- {margin: 10px 20px 30px;} : 상 10px, 좌우 20px, 하 30px
- {margin: 10px 20px 30px 40px;} : 상 10px, 우 20px, 하 30px 좌 40px (시계방향)
- {margin: 0 auto;} : 양쪽을 동일하게 만듦 => 센터 정렬
- ex
=> 마진 병합이 일어남 => 더 큰 50px로 적용됨
- box-sizing : CSS에서 요소의 너비와 높이를 어떤 기준으로 계산할지 결정하는 속성으로 박스 모델의 크기 계산 방식을 제어
- content-box : width와 hright에 내용(content)만 포함하고 padding과 border를 바깥으로 더함
- border-box : padding과 border를 너비/높이에 포함시켜 요소의 실제 크기를 예측하기 쉽게 만듦
- 위의 예제 box1에 box-sizing을 border-box로 설정
=> padding과 borderfmf 포함하기 때문에 같은 300px이라도 박스 크기 자체가 달라짐
4 . float
- float : CSS에서 요소를 문서의 일반적인 흐름에서 살짝 분리해 왼쪽이나 오른쪽으로 띄우는 속성
- 주로 이미지 옆에 텍스트를 배치하거나 과거에는 다단 레이아웃을 구성하는 데 사용되었음
- 이미지를 출력하고 텍스트를 작성하면 이미지의 끝단인 베이스라인에 맞춰 글자가 출력됨
- clear : clear 속성은 float가 적용된 요소로 인해 흐트러진 레이아웃을 정리하기 위해 사용하는 CSS 속성
- 앞에 떠 있는 (float) 요소의 영향을 받아 나란히 배치되지 않도록 하고 그 아래로 내려가게 만드는 역할을 함
- float 적용 전
- float 적용 후
- img { float : left; margin-right : 20px;}
5 . 2단 레이아웃
- 코드 예제
- 코드 결과
- CSS 작성 코드 - clear 없는 코드
- 코드 결과
- CSS 작성 코드 - clear 사용
- 코드 결과
5 - 1 . 실습 예제
- 위에서 작성한 코드를 바탕으로 3개를 병렬로 나열하기
- 실행 결과
6 . 텍스트 스타일
- font-family
- 텍스트에 사용할 글꼴의 우선순위 목록 지정
- 앞의 글꼴이 없을 경우 다음 글꼴로 대체됨
=> ex) h1{font-family: "Note Sans KR", Arial, Sans-serif;}
- 우선 순위 1, 2,3 설정
- 웹폰트
- 사용자의 컴퓨터에 해당 글꼴이 설치되어 있지 않아도 웹페이지가 서버에서 글꼴 파일을 직접 내려받아 동일한 글꼴로 표시해 주는 기술
=>ex) 글꼴 파일이 있는 사이트에서 원하는 글꼴 옆에 웹 폰트를 적어놓은 칸이 있음. 전체 복사 후 CSS에 붙여 넣기
- font-size
- 글자 사이즈 조정
- px, em, rem, % 등 단위 사용
- px : 화면의 고정된 크기 단위, 지정한 값이 그대로 적용(기본 16px)
- em : 부모 요소의 글자 크기를 기준으로 계산되는 상대 단위. 부모가 16px이면 1em =16px, 1.5em = 24px
- rem : 문서 최상위 요소(html)의 글자 크기를 기준으로 계산, html{font-size: 14px;}일 때 1rem = 14px
- % 기준 요소 대비 비율로 크기를 지정, 글자 크기에서는 보통 부모의 글자 크기를 기준으로 계산되며 레이아웃에서는 부모의 크기 대비 비율로 동작
- font-weight
- 글자의 두께 지정
- nomal, bold 또는 숫자 100~900 사용
- 실제 지원 여부는 글꼴에 따라 다름
=> ex) p {font-weight: 700;}
- font-style
- 글자를 기울일지 여부 설정
- italic -> 기울임 꼴
- font-variant
- 소문자를 작은 대문자 형태로 표시
- line-height
- 줄과 줄 사이의 간격 지정
- 가독성에 큰 영향
- 숫자만 쓰면 글자 크기의 배수로 계산됨
=> p{line-height: 1.6;} -> 글자 크기의 1.6배로 계산
- letter-spacing
- 글자와 글자 사이 간격 조절
=> p{letter-spacing: 1px}
- word-spacing
- 단어 사이의 간격을 조절
=> p{word-spacing: 1px;}
- text-decoration
- 밑줄, none, underline, overline 등 장식 효과
=> ex) p{text-decoration: underline;}
7 . position
- HTML 요소를 문서의 기본 흐름에서 어떻게 배치할지 결정하는 CSS 속성
- 요소의 위치 기준과 이동 방식 제어
- 가장 많이 쓰는 값 : static, relative, absolute, fixed
7 - 1 . position - static
- 기본값 : static
- 요소가 문서의 일반적인 흐름에 따라 위에서 아래, 왼쪽에서 오른쪽 순서대로 배치됨
- 마음대로 위치를 이동할 수 없음
- 요소끼리 절대 겹쳐지지 않음
7 - 2 . position - relative
- 요소를 문서의 일반적인 흐름에 두면서 top/left/right/bottom 속성을 이용해 자기 자신의 원래 위치를 기준으로 이동시키는 위치 지정 방식
7 - 3 . position - absolute
- 요소를 문서의 일반 흐름에서 완전히 제거한 뒤 가장 가까운 포지션이 지정된 부모 요소(relative, absolute, fixed 중 하나)를 기준으로 위치를 잡는 방식
- 만약 해당 부모가 없다면 혹은 부모가 static이라면 브라우저 화면을 기준으로 배치되며 top/left/right/bottom 값을 이용해 정확한 위치를 지정할 수 있어 아이콘 겹치기나 특정 요소 위에 배치해야 할 UI를 만들 때 이용
- 부모가 static인 경우
- 부모가 relative인 경우
7 - 4 . position - fixed
- 브라우저 화면(뷰 포트)을 기준으로 고정시키는 위치 지정 방식
- 스크롤을 움직여도 해당 요소가 항상 같은 위치에 머무는 특징을 가지는 방식
- 앵커(북마크) 기능 사용 가능
=> <p><a href="#bookmark">이동</a></p>를 클릭하면 <p id="bookmark"> 내용(도착</p>의 출력 화면이 맨 위로 올라오게 됨
=<a href="#">은 화면 맨 위로 이동되는 특성을 가지고 있음
'web' 카테고리의 다른 글
| Git (0) | 2026.06.15 |
|---|---|
| JavaScript - 1 (0) | 2026.06.15 |
| HTML, CSS - 3 (0) | 2026.06.13 |
| 2 . HTML, CSS - 1 (0) | 2026.06.11 |
| 1 . 웹, 웹 서비스 (0) | 2026.06.10 |