img 태그
HTML 문서에 IMAGE를 정의할 때 사용한다, 이미지가 링크되는 형태로 이미지를 위한 수용공간을 만들어주는 태그이다.
img태그는 src인 이미지 소스의 url과 이미지를 불러오지 못했을 때 보여줄 alt속성을 반드시 명시해야 한다.
추가적으로 HTML5에서는 기존 속성들인 align, border, vspace, hspace를 지원하지 않는다.
다음은 usemap속성에 대한 예시이다.
<!DOCTYPE html>
<html>
<body>
<h1>The map and area elements</h1>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>
폰트 관련 css
@font-face는 웹브라우저에게 글꼴 이름과 다운로드할 위치를 알려줍니다.
CSS
@font-face {
font-family: <a-remote-font-name>
src: <source> [, <source>]*;
[font-weight: <weight>];
[font-style: <style>];
}속성 값들의 내용은 아래와 같습니다.
- <a-remote-font-name> : font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다. </a-remote-font-name>
- <source> : 원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 local("Font Name") 형식으로 지정하는 속성이다.
- <weight> : 폰트의 굵기(font weight) 값. </weight>
- <style> : 폰트 스타일(font style) 값.
font-family에서 폰트들을 나열하되 대안까지 같이 작성합니다.
p {font-family:'나눔고딕', 'NanumGothic', ng}
visibility
visibility CSS 속성은 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨깁니다. visibility로 <table>의 행이나 열을 숨길 수도 있습니다.
문서를 숨기고, 레이아웃에서도 제외하려면, visibility를 사용하는 대신 display 속성을 none으로 설정하세요.
visible요소가 보임. hidden요소가 숨겨짐(그려지지 않음).
레이아웃에는 숨겨지지 않았을 때와 동일한 영향을 줍니다.
visibility를 visible로 설정한 자손은 화면에 보입니다. 숨겨진 요소는 포커스(탭 인덱스로 탐색 등)를 받을 수 없습니다.
collapse
- <table>의 행, 열, 행 그룹과 열 그룹에 적용하면 display를 none으로 설정한 것과 동일하게 요소를 숨기고 차지하던 공간도 제거합니다. 그러나 다른 행(열)의 크기는 collapse를 적용한 행(열)이 보이는 것처럼 취급해 계산합니다. 따라서 표의 너비나 높이의 재계산 없이 빠르게 행이나 열을 제거할 수 있습니다.
- 플렉스 아이템에 적용하면 요소를 숨기고 차지하던 공간도 제거합니다.
- XUL 요소에 적용하면 다른 스타일과 관계없이 크기의 계산 값으로 항상 0을 사용합니다. 그러나 margin은 바뀌지 않습니다.
- 다른 요소에서는 hidden과 동일합니다.
CSS 리스트 (list)
CSS를 이용하면 리스트에 다양한 효과를 적용할 수 있다.
CSS에서 사용할 수 있는 list-style 속성은 다음과 같다.
- list-style-type
- list-style-image
- list-style-position
list-style-type 속성
리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라고 한다.
list-style-type 속성을 이용하면 리스트에 다양한 마커(marker)를 적용할 수 있다.
list-style-image 속성
list-style-image 속성을 이용하면 마커(marker)로 자신만의 이미지를 사용할 수 있다.
list-style-position 속성
list-style-position 속성을 이용하면 리스트 요소의 위치를 설정할 수 있다.
list-style-position 속성의 기본 속성 값은 outside로 설정되어 있다.
list-style 속성 한 번에 적용하기
위에서 언급한 모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있다.
<style> ul { list-style: square inside url("/examples/images/img_list_marker.png"); } </style>CSS 텍스트(text)
CSS에서 사용할 수 있는 대표적인 text 속성은 다음과 같다.
속성 설명
| color | 텍스트의 색상을 설정함. |
| direction | 텍스트가 쓰이는 방향을 설정함. |
| letter-spacing | 텍스트 내에서 문자 사이의 간격을 설정함. |
| word-spacing | 텍스트 내에서 단어 사이의 간격을 설정함. |
| text-indent | 단락의 첫 줄을 들여쓰기할지 안 할지를 설정함. |
| text-align | 텍스트의 수평 방향 정렬을 설정함. |
| text-decoration | 텍스트에 여러 가지 효과를 설정하거나 제거함. |
| text-transform | 텍스트에 포함된 영문자에 대한 대소문자를 설정함. |
| line-height | 텍스트의 줄 간격을 설정함. |
| text-shadow | 텍스트에 그림자 효과를 설정함. |
| unicode-bidi | direction 속성과 같이 사용하여 텍스트의 기본 출력 방향을 설정함. |
| vertical-align | HTML 요소 내의 수직 방향 정렬을 설정함. |
| white-space | HTML 요소 내의 여백을 설정함. |
'웹 프로그래밍 기초' 카테고리의 다른 글
| [CSS3] overflow (0) | 2021.07.05 |
|---|---|
| [HTML] Mark Up literal (0) | 2021.06.06 |
| HTML/CSS 웹 프로그래밍 복습(1) (0) | 2021.05.19 |
| Staging website (0) | 2021.04.14 |
| Ant 경로 패턴 (0) | 2020.06.24 |
댓글