줄바꿈 word-break, 글자 흘러넘침 word-wrap 속성 정리
word-break
박스 내에 텍스트를 뿌릴 때 가끔,
글 길이가 너무 길면 내가 의도했던 디자인과 다르게 보기싫게 글이 박스 밖으로 삐져나올 때가 있다!
⇒ 그럴 때 써주는 css 속성이 word-break 이다.
word-break 속성 종류
- word-break: normal;
- word-break: break-all;
- word-break: keep-all;
normal ( 기본값 )
기본 줄 바꿈 규칙 ( 텍스트가 길면, 박스 밖으로 삐져나온다 )
break-all
텍스트가 문자( 글자 하나하나 )단위로 잘려 아래로 줄바꿈된다
( 글자단위가 의미없다면 주로 이거)
keep-all
한중일(CJK) 텍스트에서는 단어단위로 잘려 아래로 줄바꿈된다
( 단어 단위로 끊어져 있는게 나을 것 같다면 이걸 쓰자)
word-wrap
word-wrap
word-wrap은 너비와 높이가 지정된 인라인 요소, 또는 블록요소에 적용가능하며, 긴 텍스트를 강제로 자를때 사용한다
word-wrap 속성 종류
- word-wrap: normal;
- word-wrap: break-word;
nomal
줄바꿈이 일어나지 않는다 ( 박스 밖으로 길게 삐져나온다 )
break-word
박스 너비보다 텍스트가 길면, 자동으로 줄바꿈이 일어난다
( 비아시아 언어에서 단어 단위로 줄바꿈 )
<table> 태그
<td> 태그
<td> 태그는 HTML 테이블에서 하나의 데이터 셀 (data cell)을 정의할 때 사용한다.
HTML 테이블를 구성하는 셀(cell)은 두 종류로 구분할 수 있다.
<th>요소를 사용한 헤더 정보를 저장하는 헤더 셀<td>요소를 사용한 일반적인 데이터를 저장하는 데이터 셀
<th> 요소 내의 텍스트는 기본적으로 굵은 폰트 로 중앙 정렬 되며, <td> 요소 내의 텍스트는 일반적인 두께 의 폰트로 좌측 정렬 된다.
colspan 속성과 rowspan 속성을 사용하면 콘텐츠를 여러 셀에 걸쳐 나타낼 수 있다.
<tr> 태그
<tr> 태그는 테이블에서 셀들로 이루어진 하나의 행(row)을 정의할 때 사용한다.
<tr> 요소는 하나 이상의 <th> 요소(data cell)나 <td> 요소(header cell)를 포함할 수 있다.
<th> 태그
<th> 태그는 HTML 테이블에서 제목이 되는 헤더 셀(header cell)을 정의할 때 사용한다.
HTML 테이블를 구성하는 셀(cell)은 두 종류로 구분할 수 있다.
<th>요소를 사용한 헤더 정보를 저장하는 헤더 셀<td>요소를 사용한 일반적인 데이터를 저장하는 데이터 셀
Spanning
Spanning cells
- 테이블 구조의 기본 기능 중 하나는 여러 행이나 열을 포함하도록 셀을 확장하는 셀 범위이다.
- 스패닝 셀을 사용하면 복잡한 테이블 구조를 만들 수 있지만 마크업을 추적하기가 좀 더 어려워지는 부작용이 있다.
- 화면 판독기가 있는 사용자가 따라가기 더 어려울 수 있다.
- 다음을 추가하여 머리글 또는 데이터 셀 범위를 만든다.
colspanrowspan
Spanning Columns
- 경우에 따라 둘 이상의 열에 걸쳐 확장하기 위해 테이블의 항목이 필요할 수 있다.
td또는th요소의colspan속성으로 생성된 열 범위는 셀을 오른쪽으로 확장 하여 후속 열에 걸쳐 있다.
<table>
<tr><th colspan="2">Fat</th>
</tr>
<tr><td>Saturated Fat (g)</td>
<td>Unsaturated Fat (g)</td>
</tr>
</table>
Row Spans
- 둘 이상의
행에 걸쳐 확장하려면 테이블에 항목이 필요할 수도 있다. - rowspan 특성은
<th>또는<td>요소에서 사용되어 셀이 테이블 아래로 몇 개의 행을 확장해야 하는지를 나타낼 수 있다. - rowspan 속성으로 생성된 행 범위는 열 범위와 동일하게 작동하지만 이로 인해 셀이 여러 행에 걸쳐 아래쪽으로 확장된다.
<table>
<tr>
<th rowspan="3">Serving Size</th>
<td>Small (8oz.)</td>
</tr>
<tr>
<td>Medium (16oz.)</td>
</tr>
<tr>
<td>Large (24oz.)</td>
</tr>
</table>
Long Table
테이블의 기본 내용과 첫 번째 행과 마지막 행(서로 다른 내용을 포함할 수 있음)을 구별하는 데 도움이 되는 세 가지 요소가 있다.
→ 이러한 요소는 화면 판독기를 사용하는 사용자에게 도움이 되며, 표의 나머지 부분과 다른 방식으로 이러한 섹션의 스타일을 지정할 수도 있다.
<thead>
표의 제목은 <thead> 요소 안에 있어야 한다.
<tbody>
본문은 <tbody> 요소 안에 있어야 한다.
<tfoot>
바닥글은 <tfoot> 요소 안에 속한다.
<table>
<thead>
<tr>
<th>Date</th>
<th>Income</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<th>1st January</th>
<td>250</td>
<td>36</td>
</tr>
<!-- additional rows as above -->
<tr>
<th>31st January</th>
<td>129</td>
<td>64</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>7824</td>
<td>1241</td>
</tr>
</tfoot>
</table>
Adding Imgages
Images appear on web pages in two ways
- Part of the
inline content - As a
background image(by adding usingCSS)
Web-image formats
Bitmapped or raster images
일반적으로 컬러 픽셀 격자로 구성된다.
- Bitmapped
- raster images
The file formats
- PNG
- JPEG
- GIF
Vector images
Vector image는 수학적으로 정의된 path를 포함한다.
SVG format
- XML로 그리기
- XML(eXtensible Markup Language의 약자)은 그 자체로 특정 언어가 아니라 다른 마크업 언어를 만들기 위한 강력한 규칙 집합이다.
- XML은 메타 언어이다.
Packages use to handle Image formats
- 이미지 파일과 실제로 서버에 있을 수 있는 모든 미디어 파일에는 공식 미디어 유형(
MIME유형이라고도 함)과 접미사가 있다. - 예를 들어 SVG에는
MIME유형 image/svg+xml과 접미사 .svg 및 .svgz가 있다.
The img Element
-
<img>태그는 HTML 문서에서 이미지(image)를 정의할 때 사용한다. -
<img>요소로 정의된 이미지는 HTML 문서에 직접 삽입되는 것이 아니라, HTML 문서에 이미지가 링크 되는 형태이다.
⇒ 즉, <img> 요소는 이렇게 참조된 이미지를 위한 일종의 수용 공간 을 만들어 주는 것이다.
<img>요소에는src속성과alt속성을 반드시 명시해야만 한다.
src
이미지 파일을 찾을 수 있는 위치를 브라우저에 알려준다.
자신의 사이트에 있는 이미지를 가리키는 relative URL 이다.
src = "URL"
Source(Location) of the image
alt
이미지를 볼 수 없는 경우 이미지를 설명하는 이미지의 텍스트 설명을 제공한다.
- 모든 img 요소에는 이미지를 볼 수 없는 사용자를 위해 이미지 대신 텍스트를 제공하는 alt 속성도 포함되어야 한다.
- 대체 텍스트(
alt text라고도 함)는 동일한 정보와 기능을 전달하는 이미지 콘텐츠를 대체하는 역할을 해야한다. - 대체 텍스트는 이미지가 로드되지 않을 때 화면 판독기, 검색 엔진 및 그래픽 브라우저에서 사용된다.
Providing the Dimensions with width and height
- 너비 및 높이 속성은 이미지의 크기를 픽셀 수로 나타낸다.
- HTML로 이미지 크기를 조정하는 것은 피하는 것이 좋다.
→ 불필요하게 큰 파일을 강제로 다운로드하여 이미지 품질이 저하된다. - 이 속성은 현대 웹 개발 시대에 유용하지 않아졌다.
<img src="pizza.png" alt="" width="200" height="200">MIME Type
MIME 타입 이란 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘이다.
웹에서 파일의 확장자는 별 의미가 없다.
⇒ 그러므로, 각 문서와 함께 올바른 MIME 타입을 전송하도록, 서버가 정확히 설정하는 것이 중요하다. 브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지를 결정하기 위해 대게 MIME 타입을 사용한다.
문법
type/subtypeSVG File
SVG (Scalable Vector Graphics) 는 웹 친화적인 벡터 파일 포맷이다.
JPEG와 같은 픽셀 기반의 래스터 파일과 달리, 벡터 파일은 그리드 위의 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장한다.
⇒ 따라서 SVG와 같은 벡터 파일은 품질을 그대로 유지하면서 크기를 마음대로 조정할 수 있으므로 로고와 복잡한 온라인 그래픽에 아주 적합하다.
SVG는 XML (Extensible Markup Language) 코드로 작성되므로 모든 텍스트 정보를 모양이 아닌, 텍스트로 저장 한다.
⇒ 따라서 Google과 같은 검색 엔진이 SVG 그래픽을 키워드로 읽을 수 있으며, 이는 웹 사이트의 검색 순위를 높이는 데 큰 도움이 된다.
SVG 파일의 확장자는 .svg 이다.
SVG에는 사각형(rect), 원(circle), 경로(path)와 같은 모양을 정의하는 요소가 있다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 180">
<rect width="300" height="180" fill="purple" rx="20" ry="20" />
<text x="40" y="114" fill="yellow" font-family="'Verdana-Bold'" font-size="72">
hello!
</text>
</svg>
Adding SVG Images
HTML 문서에 SVG 이미지를 추가하는 방법은 두 가지가 존재한다.
• Adding SVG Images
• Inline in the HTML Source
<p>This summer, try making pizza
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" width="100" height="100">
<circle fill="#D4AB00" cx="36" cy="36" r="36"/>
<circle opacity=".7" fill="#FFF" stroke="#8A291C" cx="36.1" cy="35.9" r="31.2"/>
<circle fill="#A52C1B" cx="38.8" cy="13.5" r="4.8"/>
<circle fill="#A52C1B" cx="22.4" cy="20.9" r="4.8"/>
<circle fill="#A52C1B" cx="32" cy="37.2" r="4.8"/>
<circle fill="#A52C1B" cx="16.6" cy="39.9" r="4.8"/>
<circle fill="#A52C1B" cx="26.2" cy="53.3" r="4.8"/>
<circle fill="#A52C1B" cx="42.5" cy="27.3" r="4.8"/>
<circle fill="#A52C1B" cx="44.3" cy="55.2" r="4.8"/>
<circle fill="#A52C1B" cx="54.7" cy="42.9" r="4.8"/>
<circle fill="#A52C1B" cx="56" cy="28.3" r="4.8"/>
</svg>
on your grill.</p>
