[HTML/CSS] CSS 적용 - 외부 CSS Style변경, 글자 스타일 지정, 목록 스타일 지정하기

외부 CSS Style변경

📌

<!DOCTYPE html>
<!-- src/main/webapp/5.css2.html -->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 외부 스타일 설정 -->>
<link rel ="stylesheet" href="css2.css">
</head>
<body>
<h3>여행(travel)의 어원</h3>
<p>여행을 뜻하는 영어 단어 'travel'의 어원은 'travail(고통, 고난) 이라고 합니다.
교통이 발달하지 않은 과거에는 여행이 고통이나 고난이었던 거지요.
여행이 오락이나 쾌락으로 여겨지게 된것은 교통수단이 조금더 발달된 19세기에 이르러서 입니다.
</p>
</body>
</html>

href="css2.css"

@charset "UTF-8";
/* src/main/webapp/5.css2.html -*/
h3{
color : blue;
}
p{
color : green;
}

2. 글자 스타일 지정

text-shadow : 글자에 그림자 넣는 속성
2px 2px 10px gray : 그림자 색상과 형태를 지정
<span> :  특정 부분 글자를 CSS로 꾸미기 위해 영역 지정
text-decoration : 글자모양 다양한 형태로 지정 가능

font-size : 글자 크기 지정
font-family : 글꼴 지정
line-height : 줄간격(글 라인 간격) 지정 
font-weight : 글자 굵기

📌

<!DOCTYPE html>
<!-- src/main/webapp/5/css3.html -->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* h2 태그의 글자 색상을 파란색으로*/
 h2 { 
    color : 	#000080; ㅡ
    /* offset-x | offset-y | blur-radius | color */
    text-shadow : 2px 2px 10px gray; /* 글자의 그림자 표시 */
   }
   /* p 태그의 글자 색상을 #444444으로 : 16진수 RGB형태 색상
                                        (Red Green Blue : 0~255까지로 표시)
                                         255  255   255 : 흰색
                                         FF    FF    FF : 릔색. #FFFFFF
                                         0     0     0  : 검정
    */
   P {
   color : #444444;
   font-size : 18px; /* 글자 크기 지정 */
   font-family :'바탕';/* 글꼴 지정 */
   line-height : 150%; /* 줄간격(글 라인 간격) 지정 */
   }
   /* span 태그의 글자 색상을 #0e9bdc으로 */
   span {
     color : #0e9bdc;
     font-weight : bold; /* 글자를 두껍게. <b> 태그의 기능 */
     text-decoration : underline; /* 글자모양 다양한 형태로 */
   }
</style>
</head>
<body>
<h2>세렝게티 국립공원</h2>
<p><span>탄자니아의 킬리만자로산 서쪽</span>에 위치한 세렝게티(Serengeti)의 
광활한 평원은 면적이 1,500,000㏊이며, 사바나 지역에 있습니다. 
<span>사자, 코끼리, 들소, 얼룩말</span> 
등 약 300만 마리의 대형 포유류가 살고 있습니다.</p>
</body>
</html>

3. 목록의 글머리 형태 변경

list-style-type : 각 항목에 붙는 글머리 형태 지정
 square 속성 값
   - 각 항목 앞에 정사각형 포인트

📌

<!DOCTYPE html>
<!-- src/main/webapp/5/css4.html -->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* li 태그 속성 변화 가능. */
 li {
/*   list-style-type : decimal; */
/*   list-style-image : url('../4/img/rain.png') /* 이미지로도 바꿔서 처리 가능 */
     list-style-type : none;
 }
 /* span 태그의 글자를 굵게 표시하기 */
  span {
  font-weight : bold;
  }
</style>
</head>
<body>
<h3>제주여행 정보</h3>
<ul type="disc"> <!-- type="disc | circle | square" -->
  <li><span>축제 : </span>제주 축제 및 행사</li>
  <li><span>여행 : </span>추천 여행 코스</li>
  <li><span>맛집 : </span>제주 맛집</li>
</ul>
</body>
</html>

저작자표시 (새창열림)

'수업(국비지원) > HTML, CSS' 카테고리의 다른 글

[HTML/CSS] CSS선택자(selector) - CSS 이용한 디자인과 내용 구분 (0)	2023.04.17
[HTML/CSS] CSS선택자(selector) (0)	2023.04.17
[HTML/CSS] CSS 적용 (0)	2023.04.17
[HTML/CSS] HTML의 기본 구조 - 테이블 삽입하기 (0)	2023.04.17
[HTML/CSS] HTML의 기본 구조 - 오디오,비디오 삽입하기, 링크걸기 (0)	2023.04.17