[CSS] CSS 활용 (IMG,TABLE), Display, list 꾸미기

일단 해보는 코딩/CSS

[CSS] CSS 활용 (IMG,TABLE), Display, list 꾸미기

eun_zoey2 2022. 6. 20. 15:50

728x90

배경 이미지

일반적으로 웹 페이지에 이미지를 삽입할 대에는 <img> 태그를 사용해서 직접 삽입하는데, CSS를 이용하면 HTML 요소의 배경에 이미지를 삽입할 수 있다. 배경 이미지는 <img> 태그를 이용해서 이미지를 삽입했을 때와 달리 배경 이미지 위에 버튼이나 다른 HTML 요소를 넣을 수도 있다.

속성 값	의미
no-repeat	배경 이미지 반복되지 않음
repeat-x	배경 이미지가 수평 방향으로 반복됨
repeat-y	배경 이미지가 수직 방향으로 반복됨

<..생략>
<style>
body { background-image: url( "tree.png" );
	background-repeat : no-repeat;
	background-position : right top; }
p { width:600px; line-height:180%; }
</style>
</head>
<body>
<h3>배경 이미지 삽입</h3>
<p>웹 페이지에 배경 이미지를 삽입하는 데에는 background-image 속성을 이용한다.
배경 이미지가 바탕화면보다 작을 때에는 배경 이미지가 수평과 수직 방향으로 반복된다.</p>
<..생략>

<..생략>
<style>
body { background-image: url( "tree.png" ); color:red;}
p { width:600px; line-height:180%; color:white;}	
</style>
</head>
<body>
<h3>배경 이미지 삽입</h3>
<p>웹 페이지에 배경 이미지를 삽입하는 데에는 background-image 속성을 이용한다.
배경 이미지가 바탕화면보다 작을 때에는 배경 이미지가 수평과 수직 방향으로 반복된다.</p>
<..생략>

테이블 꾸미기

background-position 속성 값

속성값	의미
left top	테이블의 좌측 상단
center top	테이블의 중앙 상단
right top	테이블의 우측 상단
left center	테이블의 좌측 중앙
center center	테이블의 중앙
right center	테이블의 우측 중앙
left bottom	테이블의 좌측 하단
right bottom	테이블의 우측 하단

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table { border-collapse: collapse; }	/* 태그 선택자 */
table, th, td { border:solid 5px #cccccc; }	/* 집합 선택자 */
table { border-top : solid 3px orange; }	/* 태그 전택자 */
th { padding:10px; background-color: #eeeeee; } /* 태그 선택자, table header 첫줄 제목 */
td { padding:10px; taxt-align:center; }	/* 태그 선택자, table cell */
#col1, #col2, #col3 { width:100px }	/* 집합적 id 선택자 */
#col4 { width:250px; }		/* 단독 id 선택자 */
.bold { font-weight:bold; }		/* 클래스 선택자 */
</style>
</head>
<body>
<h3>놀이공원 이용권</h3>
<table>
<tr><th id="col1">종류</th><th id="col2">대인</th><th id="col3">소인</th><th id="col4">비고</th></tr>
<tr><td class="bold">주간권</td><td>20,000원</th><td>10,000원</td><td rowspan="3">공원입장 및 놀이시설 이용<br>(일부 놀이기구 별도 요금)</td></tr>
<tr><td class="bold">야간권</td><td>15,000원</th><td>8,000원</td></tr>
<tr><td class="bold">2일권</td><td>30,000원</th><td>15,000원</td></tr>
</table>
</body>
</html>

Display 방식

HTML 요소를 브라우저 화면에 표시하는 디스플레이 방식에는 인라인 (inline) 과 블록(block) 방식 두 가지가 있다.

=> 인라인 방식에는 수평방향으로 해당 요소를 화면에 표시하고 줄 바꿈이 없다.

=> 블록 방식에는 HTML 요소가 전체 행을 차지하기 때문에 앞 뒤로 자동 줄 바꿈이 일어난다.

=> 인라인-블록 방식은 두가지 특성을 모두 가지게 된다.

HTML 요소의 디폴트 인라인/블록 방식

인라인	블록
<span>, <a>, <img>,<input>,<textarea>,<br>, <bitton>,<select>,<option>,<script> 등	div>,<p>,<h1~h6>,<form>,<table>, <ul>,<ol>,<li>,<video>,<header>,<footer>,<script> 등

Display 속성

속성 값	의미
inline	HTML 요소를 인라인 방식으로 설정
block	HTML 요소를 블록 방식으로 설정
inline-block	HTML 요소를 인라인-블록 방신으로 설정
none	HTML 요소를 화면에 표시하지 않음

<..생략>
<style>
 *{ margin:0; padding:0;}
div, span { border:solid 3px black; background-color : yellow;}
#a { width:100px; height:100px; margin:20px; }	/* inline 방식 적용 */
#b { display:block; width:100px; height:100px; margin:20px;}
#c { display: inline-block; width:100px; height:100px; margin:20px; }

</style>
</head>
<body>
<h3>인라인과 블록</h3><br>
<p>글자1<span id="a">요소 A</span>글자2 <span id="b">요소B</span>글자3<span id="c">요소C</span>글자4</p>
<..생략>

목록 꾸미기

HTML의 목록 태그인 <ul>, <ol>, <li> 태그는 화면에 표시될 때 블록방식으로 처리되기 때문에 일반적으로 수직방향으로 배치된다.

그러나 웹 페이지에서 수평방향으로 배치되기 위해서는 |(vertical bar:pipe)을 사용한다.

목록의 글머리 기호(list-style-type) 설정, 글 머리 이미지 삽입(list-type-image), 그리고 수평 방향의 목록( | ) 작성 등을 만들 수 있다.

<..생략>
<style>
 li { list-style-type: square; } 
				 /* square(정사각형), none(없음), circle(속이 빈), disc(속이 찬) */
</style>
</head>
<body>
<h3>곤충관 체험 프로그램</h3>
<p>서울 대공원에서 한 겨울에 나비와 함게하세요.
흰나비 등 나비 1,000여 마리와 나비 번데기를 곤충관 내 유리 온실에 설치된 나비 전시장에서 만나보실 수 있습니다.</p>
 <ul>
   <li>기간 : 2022.12.01~2022.12.30</li>
   <li>장소 : 곤충관내 특별 전시장</li>
   <li>대상 : 동물원 관람객 누구나 </li>
 </ul>
<..생략>

<..생략>
  <style>
    li { list-style-image: url("icon.png");}
  </style>
</head>
<body>
  <h3>곤충관 체험 프로그램</h3>
  <P>서울대공원에서 한겨울에 나비와 함게하세요. 흰나비 등 나비 1,000여 마리와 나비 번데기를 곤충관 내 유리 온실에 설치된 나비 전시장에서 만나보실 수 있습니다.
  </P>
  <ul>
    <li>기 간 : 2023.12.21 (토) ~ 12.25(수) 5일간</li>
    <li>곤충관내 특별 전시장</li>
    <li>동물원 관람객 누구나</li>
  </ul>
<..생략>

<..생략>
  <style>
   ul { background-color: orange; padding: 10px; text-align: center; color:white; }
   li {display: inline; margin-left: 2px;}
   a:link, a:visited, a:active {color:white; text-decoration:none;}
   a:hover {color: black; text-decoration: none;}
   /* link : 링크, visited: 한 번 클릭했을 때, active: 현재 클릭, hover: 커서를 올렸을 때 */
    </style>
</head>
<body>
  <h3>수평방향 목록 만들기</h3>
  <ul>
    <li><a href="#">회사 소개</a></li>
    <li>|</li>
    <li><a href="#">제품 소개</a></li>
    <li>|</li>
    <li><a href="#">고객 센터</a></li>
    <li>|</li>
    <li><a href="#">찾아오시는 길</a></li>
  </ul>
<..생략>

저작자표시

'일단 해보는 코딩 > CSS' 카테고리의 다른 글

[CSS] 레이아웃 배치 설정 (float, clear 설정) (0)	2022.06.21
[CSS] 회원가입, 로그인폼 만들기 (0)	2022.06.21
[CSS] 선택자(Selector)종류와 사용법 (0)	2022.06.17
[CSS] 박스 모델 꾸미기 (0)	2022.06.17
[CSS] 글자 스타일 (0)	2022.06.16

현재글[CSS] CSS 활용 (IMG,TABLE), Display, list 꾸미기

잰니의 성장블로그✈