1. 외부 스타일 시트

<!-- 외부 스타일 시트 -->
<link type="text/css" href="../css_styles/style.css" rel="stylesheet">

</head>
<body>
<!-- 상위폴더 -->
<img src="../html5/images/css3/5장/sydney.png"> 


<h3> 세계 3대 미항 </h3>

<ul>
  <li>시드니(sydney)</li>
  <li>리우데자네이루(Roi de janeiro), 브라질</li>
  <li>나폴리(Napoles), 이탈리아</li>
</ul>

</body>
</html>

 

 

★ 2.  클래스 선택자, id 선택자

- 공통점 : 요소의 특정 부분에만 스타일 지정
- 차이점

1. 클래스 선택자 : 문서안에서 여러번 반복할 스타일이라면 클래스 선택자로 정의 
: 마침표(.) 다음에 클래스 이름 지정


2. id 선택자 : 문서안에서 한번만 사용할 스타일이라면 id 선택자로 정의
: 파운드(#) 다음에 id 이름 지정

 

</head>

<style>

/* class는 : .클래스명 */

.bluetext {
color:blue; 
}

.redtext {
color:red; 
}

/* 
#greentext {
color:green;
}
*/
</style>

<body>

 

<h3>클래스 선택자 - 특정부분에 스타일 지정하기</h3>

<pre>
모든 국민은 주거의 자유를 침해받지 아니한다.
주거에 대한 압수나 수색을 할 때에는 검사의 신청에 의하여 법관이 발부한 영장을 제시하여야 한다.
모든 국민은 거주·이전의 자유를 가진다.
대통령은 제4항과 제5항의 규정에 의하여 확정된 법률을 지체없이 공포하여야 한다. 

<span class="bluetext">
제5항에 의하여 법률이 확정된 후 또는 제4항에 의한 확정법률이 정부에 이송된 후 5일 이내에 대통령이 공포하지 아니할 때에는 국회의장이 이를 공포한다.
모든 국민은 법률이 정하는 바에 의하여 국가기관에 문서로 청원할 권리를 가진다. 
</span>

<span class="bluetext">
누구든지 체포 또는 구속의 이유와 변호인의 조력을 받을 권리가 있음을 고지받지 아니하고는 체포 또는 구속을 당하지 아니한다. 
체포 또는 구속을 당한 자의 가족등 법률이 정하는 자에게는 그 이유와 일시·장소가 지체없이 통지되어야 한다.
</span>

<span class="redtext">
모든 국민은 통신의 비밀을 침해받지 아니한다. 
모든 국민은 거주·이전의 자유를 가진다. 
모든 국민은 인간다운 생활을 할 권리를 가진다. 
모든 국민은 법률이 정하는 바에 의하여 선거권을 가진다.
</span>

<span class="redtext">
모든 국민은 학문과 예술의 자유를 가진다. 
국회의원이 회기전에 체포 또는 구금된 때에는 현행범인이 아닌 한 국회의 요구가 있으면 회기중 석방된다.
</span>

국군의 조직과 편성은 법률로 정한다. 
헌법재판소의 조직과 운영 기타 필요한 사항은 법률로 정한다. 
헌법개정안이 제2항의 찬성을 얻은 때에는 헌법개정은 확정되며, 대통령은 즉시 이를 공포하여야 한다.
</pre>

 

 

3. ID 선택자  - 특정부분에 스타일 지정하기

<h3>ID 선택자  - 특정부분에 스타일 지정하기</h3>

<pre>
<div id="vcolor">
국가는 대외무역을 육성하며, 이를 규제·조정할 수 있다.
공무원인 근로자는 법률이 정하는 자에 한하여 단결권·단체교섭권 및 단체행동권을 가진다.
법률이 헌법에 위반되는 여부가 재판의 전제가 된 경우에는 법원은 헌법재판소에 제청하여 그 심판에 의하여 재판한다.
</div>

<span id="redcolor">
국회나 그 위원회의 요구가 있을 때에는 국무총리·국무위원 또는 정부위원은 출석·답변하여야 하며,
국무총리 또는 국무위원이 출석요구를 받은 때에는 국무위원 또는 정부위원으로 하여금 출석·답변하게 할 수 있다.
</span>

<div id="container">
학교 교육 및 평생교육을 포함한 교육제도와 그 운영, 교육재정 및 교원의 지위에 관한 기본적인 사항은 법률로 정한다.
국회의 정기회는 법률이 정하는 바에 의하여 매년 1회 집회되며,
국회의 임시회는 대통령 또는 국회재적의원 4분의 1 이상의 요구에 의하여 집회된다.
</div>

대통령·국무총리·국무위원·행정각부의 장·헌법재판소 재판관·법관·중앙선거관리위원회
위원·감사원장·감사위원 기타 법률이 정한 공무원이 그 직무집행에 있어서
헌법이나 법률을 위배한 때에는 국회는 탄핵의 소추를 의결할 수 있다.
</pre>
</body>
</html>

 

 

4. 텍스트 그림자

<가로길이: 양수->오른쪽> <세로길이: 양수->아래로> <번짐정도> <색상>

text-shadow: 10px 10px 10px #000;

<style>

h1 {
font-size: 100px; /* 글자크기 */
font-family: "돋움"; /* 글꼴 */
}

/* 텍스트 그림자 <가로길이: 양수->오른쪽> <세로길이: 양수->아래로> <번짐정도> <색상>    */
#shadow1 {
color: orange; /* 글자색 */
text-shadow: 10px 10px 10px #000;  /* #000 : 검정 */
}

#shadow2 {
color: orange; /* 글자색 */
text-shadow: -10px -10px 10px #000;  /* #000 : 검정 */
}

#shadow3 {
color: green; /* 글자색 */
text-shadow: -10px -10px 10px #f00;  /* #000 : 검정 */
}

</style>
</head>
<body>
  <h1 id="shadow1">HTML5</h1>
  <h1 id="shadow2">HTML5</h1>
  <h1 id="shadow3">CHRISTMAX</h1>
</body>
</html>

 

 

5. display 속성 - 화면 배치방법 결정하기

<style>
/* margin : 요소간의 여백(바깥여백) */
/* padding: 콘텐츠 내용과 테두리 사이의 (바깥여백) */

/* 상위요소 하위요소 */
#inline img{
  display: inline; /* 항목을 가로로 한줄로 배치 */
  margin: 10px;
}

#block img{
  display: block; /* 항목을 세로로 한줄로 배치 */
  margin: 20px;
}

</style>

 

<h3>display 속성 - 화면 배치방법 결정하기</h3>

   <!-- 중요
   1. 블록 레벨 요소
      . 요소를 삽입했을 때 혼자 한줄을 차지하는 요소
      . 항목을 아래로 한줄로 배치
      . 요소의 너비가 100%
      . 예) <div><p><hn>...
   
   2. 인라인 레벨 요소.. display 속성을 지정안하면 인라인이 디폴트
      . 요소를 삽입했을 때 혼자 한줄을 차지하지 않는 요소
      . 항목을 옆으로 한줄로 배치
      . 화면에 표시하는 컨텐츠만큼 영역을 차지하고, 나머지 공간에는 다른 요소가 올 수 있음
      . 예) <img><span>...
    -->
    
    inline 속성 <br>
    <div id="inline">  
     <img src="../html5/images/css3/8장/pic1.jpg" width="300" height="300">
     <img src="../html5/images/css3/8장/pic2.jpg" width="300" height="300">
     <img src="../html5/images/css3/8장/pic3.jpg" width="300" height="300">
    </div>
    
    block 속성 <br>
    <div id="block">
     <img src="../html5/images/css3/8장/pic1.jpg" width="300" height="300">
     <img src="../html5/images/css3/8장/pic2.jpg" width="300" height="300">
     <img src="../html5/images/css3/8장/pic3.jpg" width="300" height="300">
    </div>
</body>
</html>

 

 

6. display - 화면 배치방법 결정하기

 

 1. 블록 레벨 요소
      . 요소를 삽입했을 때 혼자 한줄을 차지하는 요소
      . 항목을 아래로 한줄로 배치
      . 요소의 너비가 100%
   
   2. 인라인 레벨 요소

      . display 속성을 지정 안하면 인라인이 디폴트
      . 요소를 삽입했을 때 혼자 한줄을 차지하지 않는 요소
      . 항목을 옆으로 한줄로 배치
      . 화면에 표시하는 컨텐츠만큼 영역을 차지하고, 나머지 공간에는 다른 요소가 올 수 있음
      
   3. inline-block
      . 요소는 inline 레벨로 배치하면서, 내용은 block 레벨로 지정 (너비, 높이, 마진)
    

<style>

nav ul li{
display: inline-block;  /* 요소는 inline 레벨로 배치하면서, 내용은 block 레벨로 지정(너비, 높이, 마진) */
margin: 20px; /* margin : 요소간의 공백(바깥쪽 여백) */
} 

ul{
background-color: #6741f4; /* 배경색 */
text-align:center; /* 가운데 정렬 */
}

a{
text-decoration: none;  /* 밑줄 없애기 */
color: white;  /* 글자색 : 흰색 */
font-weight: bold; /*글자굵기 : 굵게 */
}


</style>
</head>
<body>

<h3>display - 화면 배치방법 결정하기</h3>
<nav>
<ul>
<li><a href="#"> 애완견 종류 </a></li>
<li><a href="#"> 입양하기 </a></li>
<li><a href="#"> 건강 돌보기 </a></li>
<li><a href="#"> 더불어 살기 </a></li>
</ul>
</nav>


</body>
</html>

 

7. float 속성

'떠있다'라는 의미로 요소를 왼쪽이나 오른쪽에 배치
clear 속성 : float 속성 해제하기
예) float: left / clear: left 

.left-img {
/* 이미지를 왼쪽에 배치 */
float: left; 
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
}

.right-img {
/* 이미지를 오른쪽에 배치 */
float: right; 
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
}

</style>
<h2>견과류</h2>

<h3>아몬드</h3> 
<img src="../images/css3/견과류/아몬드.png" width="200" class="left-img">
각종 영양분이 풍부한 식품으로 적당히 먹으면 건강에도 좋고, 씹는 맛이 좋아서 술안주로도 적당하다.
그러나 탄수화물(대표적으로 밤)과 지방(대표적으로 호두와 피칸)이 많다는 점은 유의해야 한다.

<p>
불포화 지방산이 풍부하므로 포화 지방산보다야 사정이 낫지만,
지방이 1그램당 9kcal의 열량이라는 사실은 피해갈 수 없다.
따라서 다이어트를 한다면 하루 섭취량을 제한할 필요가 있다.
다른 지방이 많이 든 식품과 마찬가지로 과식할 경우,
소화가 덜 된 지방과 섬유소 때문에 복부가 빵빵하게 부풀며
설사의 위험이 존재하므로 적당히 먹자.
</p>

<p>
[1]그리고 옥살산이 많이 들어있다보니
요로결석 환자의 경우에도 섭취를 제한해야 할 필요가 있다.
견과류는 몸에 좋고 다이어트에 좋은 음식이니 많이 먹어도 살이 안 찐다는 인식을 많이 볼 수 있는데,
당연한 얘기지만 많이 먹어서 살이 안 찌는 음식은 없다.
같은 칼로리를 먹어도 그 칼로리를 견과류로 대체하면 건강 및 다이어트에 좋은 영향을 미친다는 뜻이지
섭취 칼로리양 자체를 높여도 다이어트가 된다는 말은 아니다.
</p>

<p>
특히나 견과류는 대부분이 지방 덩어리기 때문에 양 대비 칼로리가 어마어마하다.
생각없이 손에 집히는대로 먹다간 오히려 살이 더 불어나니 주의.
과식이 우려된다면 한 봉지에 다양한 견과가 들어있는
식품을 하루에 한 봉지씩 먹는 것도 좋은 방법이다.
보통 한 봉지에 들어가는 견과류는 20g 정도이며 칼로리는 대략 100칼로리 정도 된다.
정월대보름에는 부럼이라 하여 이것을 이로 깨서 먹으면 부스럼이 생기지 않는다고 하여 자주 먹는다. 
</p>

<br>
<br>

<h3>피스타치오</h3>
<img src="../images/css3/견과류/피스타치오.png" width="200" class="right-img">

스페인산과 튀르키예산 피스타치오를 비교하면 열매 색깔도 약간 누르스름한 초록색이고 크기도 작지만 맛은 훨씬 좋다.
미국산 피스타치오 몇 알이 튀르키예산 한 알에 응축된 듯한 맛을 뽐낸다.
일반적으로 이란산과 튀르키예산을 최고로 친다.

<p>
오늘날에도 원산지인 튀르키예 동남부 지방, 특히 가지안테프(Gaziantep)는 피스타치오 생산지로 이름이 높다.
전 세계 생산량의 40%가 가지안테프에서 생산된다.
값도 한국에 비하면 매우 싼데, 2013년 수확물 기준으로 껍질 까지 않은 피스타치오 1kg 기준으로
가지안테프 현지에서는 1등급 피스타치오가 120리라 (6만 원), 2등급이 48리라 (2만 2천 원),
3등급은 30리라(1만 5천 원) 정도 한다.
</p>

<p>
하지만 2013년은 튀르키예에서도 피스타치오가 흉작이었던 때라서 저 정도지,
평상시에는 2등급 피스타치오조차도 30리라 정도다.
하지만 한국에서는 피스타치오 커넬(속껍질까지 제거한 것) 1kg에 약 3만원에 판다.
한국에 튀르키예산 공급이 적음은 운송 비용과 관세도 문제지만,
가장 큰 이유는 생산되는 피스타치오가 거의 다 자국 내에서 소비되거나 유럽으로 수출되기 때문.
2010년 통계에 의하면 튀르키예 내에서 생산된 피스타치오는
</p>

<p>
총 12만 8천 톤이었지만 그중 70%가 자국 내에서 유통, 소비되었고
수출량은 1938톤 (3034만 2천 달러어치)에 그쳤고 대부분 이탈리아,
독일 등 유럽 국가에 수출되었다.
이미 100% 튀르키예에서 수입하고 있는 헤이즐넛과는 달리,
튀르키예산 피스타치오는 수입하고 싶어도 살 수가 없는 셈.
다만 수입 식료품 판매점(외국인 마트)의 경우, 각 판매점마다 다르지만
2020년 이후에 튀르키예산 피스타치오(생피스타치오가 아닌 볶음+가염 피스타치오)를 수입하여 판매하는 곳이 가끔씩 있는 편이다.
</p>
</body>
</html>

 

 

8. position - static 속성

static 속성 
. 문서의 흐름대로 배치한다.
. left나 top 속성을 지정할 수 없다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2024-12-04 / 3일차 / position-static 속성</title>
<style>

/* 기준이 되는 부모 요소 */
.box0 {
float: left;
width: 100px;
top: 300px;
background-color: #0094ff;
padding: 20px;
}

.box1 {
float: left; /* 왼쪽에 배치 */
width: 300px;
background-color: #ff0000;
padding: 20px;
}

</style>
</head>
<body>
<h3>position - static 속성</h3>

<div class="box0"> 박스 1 </div>
<div class="box1"> 박스 1 </div>


</body>
</html>

 

 

9. position - relative 속성

relatice 속성
. 자연스럽게 배치
. 고정되어 있지 않고, 다른 요소에 의해 바꿀 수 있다.
. 상대적인 위치를 사용하기 때문에 다른 요소와 조화를 이룬다.
. left나 top 속성을 이용해 위치를 옮길 수 있다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2024-12-04 / 3일차 / relative 속성</title>

<style>

/* 기준이 되는 부모 요소 */
.box0 {
float: left;
width: 100px;
background-color: #0094ff;
margin-right: 10px;
padding: 20px;
}

/* 상대적 기준이 되는 부모 요소 */
.box1 {
float: left; /* 왼쪽에 배치 */
width: 300px;
background-color: #ff0000;
margin-right: 10px;
padding: 20px;
}

/* 나(작은 상자) */
.box2 {
position: relative; /* 무조건 바로 이전 */
float: left; /* 왼쪽에 배치 */
left: -50px;
top: 30px;
width: 100px;

/* box1을 기준으로 왼쪽으로 50px 이동 */
/* box1을 기준으로 왼쪽으로 30px 이동 */
background-color: #00ff00;
padding:20px;
}



</style>

</head>
<body>
<h3>position - relative 속성</h3>

<div class="box0"> 박스 0 </div>
<div class="box1"> 박스 1 </div>
<div class="box2"> 박스 2 </div>


</body>
</html>

 

 

 

10.  position-absolute 속성

. 문서의 흐름과는 상관없이 원하는 위치에 요소에 배치한다. 
. 요소의 위치는 가장 가까운 부모요소나 

positionL:relative인 요소(이 예제에서는 #wrap 테두리)
. left나 right, top, bottom 속성을 이용해 네 모서리에서 얼마나 떨어졌는는지 지점한다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2024-12-04 / 3일차 / position-absolute 속성</title>

<style>

/* 기준이 되는 부모 요소 */
#wrap {
position: relative;
width: 300px;
height: 300px;
border: 5px solid #ccc;
}


/* 자식 (위치를 지정할 작은 상자) */
.box {
position : absolute;
width: 50px;
height: 50px;
background-color: #0094ff;
}

/* 왼쪽 위*/
#box1 {
top: 0;
left: 0;
}

/* 오른쪽 위 */
#box2 {
top: 0;
right: 0;
}

/* 왼쪽 아래 */
#box3 {
bottom: 0;
left: 0;
}

/* 오른쪽 아래 */
#box4 {
bottom: 0;
right: 0;
}

/* 중심, 300-50/2 = 125*/
#box5 {
top: 125px;
left: 125px;
}

</style>
</head>
<body>
<h3> position-absolute 속성 </h3>


<div id="wrap">
<div class="box" id="box1"> 박스1 </div>
<div class="box" id="box2"> 박스2 </div>
<div class="box" id="box3"> 박스3 </div>
<div class="box" id="box4"> 박스4 </div>
<div class="box" id="box5"> 박스5 </div>
</div>

</body>
</html>

 

 

11.  z-index 속성 - 요소 쌓는 순서 정하기

 . z-index 값이 크면 값이 작은 요소보다 위에 쌓인다.
 . z-index 값을 명시하지 않으면 1부터 시작해서 1씩 커진다.
 . 항상 가장 위에 배치할 요소는 z-index:999; 로 준다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 2024-12-05 / 3일차 </title>

<style>
/* 기준이 되는 부모 요소 */
#wrap {
position: relative;
width: 300px;
height: 300px;
border: 5px solid #ccc;
}


/* 자식 (위치를 지정할 작은 상자) */
.box {
position : absolute;
width: 100px;
height: 100px;
background-color: #0094ff;
}

#box1 {
top: 0;
left: 0;
background-color: orange;
z-index: 1; /* 맨아래 */
}

#box2 {
top: 40px;
right: 40px;
background-color: green;
z-index: 3; /* 맨위 */
}

#box3 {
top: 20px;
left: 80px;
background-color: blue;
z-index: 2; /* 중간 */
}

</style>
</head>

<h3>z-index 속성 - 요소 쌓는 순서 정하기</h3>
   <!-- 
      - z-index 값이 크면 값이 작은 요소보다 위에 쌓인다.
      - z-index 값을 명시하지 않으면 1부터 시작해서 1씩 커진다.
      - 항상 가장 위에 배치할 요소는 z-index:999;로 준다.
    -->

<body>

<div id="wrap">
<div class="box" id="box1"> 박스1 </div>
<div class="box" id="box2"> 박스2 </div>
<div class="box" id="box3"> 박스3 </div>
</div>

</body>
</html>

 

 

12. 오디오, 비디오

<audio src=" " controls>

<video src=" " controls>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 2024-12-06 / 4일차 / 오디오,비디오 </title>
</head>
<body>

<h3> 오디오 </h3>
<audio src="./multimedia/just-relax.mp3" controls></audio>

<h3> 비디오 </h3>
<video src="./multimedia/small.mp4" controls></video>

</body>
</html>

 

 

 

13. 연결선택자 - 하위선택자

 . 하위선택자 - 지정한 모든 하위 요소에 스타일 적용하기(자식과 손자들)
 형식 : 상위요소 하위요소{속성: 속성값; ......} 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 2024-12-06 / 4일차 / 연결선택자 - 하위선택자 </title>

<style>

#container ul {
border : 1px dotted blue;
}

</style>
</head>
<body>

<h3> 연결선택자 - 하위선택자 </h3>
<!-- 하위선택자 - 지정한 모든 하위 요소에 스타일 적용하기(자식과 손자들) -->

<header><h3>예약방법 및 요금</h3></header>

<section id ="container">

<p>끌레르 팬션에 예약하려면?</p>
<ul>
<li>예약방법
<ul>
<li>직접 통화</li>
<li>문자 남기기</li>
</ul>
</li>

<li>요금
<ul>
<li>1인: 30,000</li>
<li>2인: 60,000</li>
<li>3인: 90,000</li>
<li>4인: 100,000</li>
</ul>
</li>
</ul>
</section>
</body>
</html>

 

 

 

14. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 2024-12-06 / 4일차 / 연결선택자 - 자식선택자 </title>

<style>

/* 연결선택자 
       2.  자식선택자 - 자식 요소에만 스타일 지정하기
       형식 : 상위요소  > 하위요소{속성: 속성값; ......} 
*/
 

#container > ul {
border : 5px dotted blue;
}

</style>
</head>
<h3> 연결선택자 - 자식선택자 </h3>
<!-- 자식선택자 - 자식 요소에만 스타일 지정하기 -->

<header><h3>예약방법 및 요금</h3></header>

<section id ="container">

<p>끌레르 팬션에 예약하려면?</p>
<ul>
<li>예약방법
<ul>
<li>직접 통화</li>
<li>문자 남기기</li>
</ul>
</li>

<li>요금
<ul>
<li>1인: 30,000</li>
<li>2인: 60,000</li>
<li>3인: 90,000</li>
<li>4인: 100,000</li>
</ul>
</li>
</ul>
</section>
</body>
</html>

 

 

'HTML5, CSS3' 카테고리의 다른 글

[HTML5] 목록을 만드는 태그  (6) 2024.12.12

1. 링크

http://ko.wikihow.com" target = "_blank">호그와트

http://www.naver.com" target = "_blank">네이버

http://www.google.com" target = "_blank">구글

 

 

2. 제목 태그

<h2>목록을 만드는 태그</h2>

 

 

3. 문단표시

<p>
해리 포터의 마법 세계에는 그리핀도르, 슬리데린, 래번클로, 후플푸프 등 4개 기숙사가 있습니다. <br>
호그와트 마법 학교의 신입생들은 분류 모자가 성격과 야심에 따라 분류 모자가 기숙사를 배정해`준다. <br>
그러나 각 기숙사의 "장점"과 "단점"은 무엇일까? 간단히 소개해보도록 하겠다. <br>
</p>

 

 

4. 문단 나누는 단락표시

<hr>

 

 

 

5. 순서없는 목록

<ul>
  <li>그리핀도르는 용기의 기숙사이다.</li>
  <li>슬리데린은 야망의 기숙사이다.</li>
  <li>래번클로는 지성의 기숙사이다. </li>
  <li>후플푸프는 의리의 기숙사이다.</li>
</ul>

 

 

6. 순서있는 목록

<ol type = "1">
   <li> 괴롭힘 당하는 사람을 발견했다. 당신의 반응은? 
<ol type="A">
   <li>일진과 다른 사람들 사이에 끼어든다. 나는 내 손을 더럽히는 것을 두려워하지 않는다.</li>
   <li>자리를 피한다. 괴롭힘 당할 만한 짓을 했을 것이다.</li>
   <li>사실을 말해주며 끼어든다. 일진들은 자존감이 낮다는 것을 알고 있었어?</li>
   <li>일진에게 그만하라고 말한다. 너희가 하는 짓은 보기 좋지 않다고.</li>
</ol>
</li>

 

 

7. d1 : 사전식 목록 만들기 / dt : 제목 / dd : 설명

<dl>
   <dt>목욕하기</dt>
     <dd>어떤 사람들은 목욕을 즐기고 또 어떤 사람들은 샤워를 즐긴다. <br>
             하지만 거품 목욕에 맛있는 음료와 좋은 책에서 오는 편안함을 거부할 수 있는 사람은 하나도 없을 것이다. <br>
             스트레스를 평소보다 많이 받았다면 오늘은 욕조에서 편히 쉬어보도록 하자. <br>
             물의 따스함이 근육의 긴장을 풀어주고 스트레스를 해소할 것이다. <br>
      </dd>

 

 

8 . 테이블 

<table> ~ </table> : 테이블
<tr> ~ </tr> : 행
<td> ~ </td> : 열
<th> ~ </th> : 제목 셀

<table border="1">

<!-- 1행 -->
<tr>
  <th>1행1열(제목)</th>
  <td>1행2열</td>
  <td>1행3열</td>
  <td>1행4열</td>
</tr>

<!-- 2행 -->
<tr>
  <th>1행1열(제목)</th>
  <td>1행2열</td>
  <td>1행3열</td>
  <td>1행4열</td>
</tr>


<!-- 3행 -->
<tr>
<th>1행1열(제목)</th>
  <td>1행2열</td>
  <td>1행3열</td>
  <td>1행4열</td>
</tr>
</table>

 

 

9. <thead> ~ </thead> : 제목 셀 그룹
<tbody> ~ </tbody> : 본문 셀그룹
<tfoot> ~ </tfoot> : 요약 셀 그룹


정렬 - 가로
<td align="left" | "right" | "center">
정렬 - 세로
<td valign="top" | "middle" | "bottom">

<!-- 제목 셀 그룹-->
<thead>
    <tr align="center" style="background-color:gray">
       <th>방 이름</th>
       <th>대상</th>
       <th>크기</th>
       <th>가격</th>
     </tr>
</thead>


<!-- 본문 셀 그룹-->
<tbody>
  <tr align="center">
    <td>유채방</td>
    <td>여성 도미토리</td>
    <td rowspan="3">4인실</td>
    <td rowspan="5">1인 20,000원</td>
  </tr>

<tr align="center">
    <td rowspan="2">동백방</td>
    <td>동성 도미토리</td>
</tr>

<tr align="center">
    <td>가족 1팀</td>
</tr>

<tr align="center">
   <td>천혜향방</td>
   <td>-</td>
   <td>2인실</td>
</tr>
</tbody>


<!-- 요약 셀 그룹-->
<tfoot>
<tr align="center" style="background-color:gray">
       <th colspan="4">바깥채 전체를 렌트합니다.</th>
</tr>
</tfoot>

 

 

 

10. nav : 문서를 연결하는 네비게이션 링크  (주로 메뉴)

<nav>
         <ul id="menu">
            <li><a href="#menu1">펜션소개</a></li>
            <li><a href="#menu2">부대시설</a></li>
            <li><a href="#menu3">이용/취소안내</a></li>
            <li><a href="#menu4">위치안내</a></li>
            <li><a href="#menu5">커뮤니티</a></li>
         </ul>
 </nav>

 

 

 

11. section : 컨텐츠 영역, 주제별로 컨텐츠를 묶을때 사용

* article: 독립적인 콘텐츠 영역

<section>
      <article>
         <br><br>
         <hr>
         <br>
         <a id="menu1"><h3>펜션소개</h3></a>
         
         <center>
            <table border="1" width="1000">
            <tr>
               <td rowspan="7" width="30%">
                <img src="https://www.pensionzava.com/_psjava/_data/ykpension/info/PSJ-1556697139_0.jpg" width="400">
                <!-- 이미지 우클릭 > 이미지 주소 복사 -->
                  <td>펜션 주소: </td>
                  <td>전라남도 여수시 돌산읍 평사로 407 </td>
               </tb>
            </tr>
            
            <tr>
               <td>예약문의: </td>
               <td>1661-3148 (월 ~ 금 9시 - 12시, 오후 1시 ~ 6시) </td>
            </tr>
            
            <tr>
               <td>입/퇴실안내: </td>
               <td>입실 오후 3시부터, 퇴실 낮 11시까지 </td>
            </tr>
            
            <tr>
               <td>픽업여부: </td>
               <td>불가능 </td>
            </tr>
            
            <tr>
               <td>할인이벤트: </td>
               <td>2%적립, 최대 37%할인 </td>
            </tr>
            
            <tr>
               <td>카드이벤트: </td>
               <td>무이자할부 (하나,현대,국민,신한,삼성,비씨,NH카드) </td>
            </tr>
            
            <tr>
               <td>부대시설: </td>
               <td>수영장,온수수영장,개별테라스바베큐,공동야외바베큐 </td>
            </tr>
            
            <tr>
               <td colspan="3">
                  <div align="center">
                     <input type="button" value="예약하기">
                     <input type="button" value="예약확인/취소">
                  </div>
               </td>
            </tr>
         </table>
      </center>
 <p><a href="#menu"> [ 메뉴로 ]</a></p>

 

 

12. form 로그인 

화면 입력 값 → submit (전송버튼)에 의해 톰캣으로 전달 →  DB (CRUD판단 *입력, 조회, 수정, 삭제) 

→ action에서 지정한 결과 페이지로 이동 (</form action="07_form_next.html" method="get">)

<h3>로그인</h3>

<form action="07_form_next.html" method="get">
   ID: <input type="text" name="userID" size="30">
   비밀번호: <input type="password" name="userPassword" size="30">
<br><br>

<input type="submit" value="전송">
<input type="reset" value="취소">
</form>

 

 

 

13. 로그인_기초

<fieldset> : 폼 요소들을 그룹으로 묶음
<legend> : 그룹의 제목
placeholder : input에 힌트 표시하기
autofocus : 폼이 실행 하자마자 원하는 항목의 입력박스에 커서 표시하기
required : 필수항목 지정하기
   
<form action="이동할 페이지">  

이동할 페이지가 없으면 404에러 (FILE NOT FOUND 에러)

<form action="08_login_next.html" method="get">
<fieldset>
<legend> 로그인 정보 </legend>
<table>
   <tr>
     <th align="right"><lable for="la_id">아이디</lable></th>
     <td><input type="text" id ="la_id" name="userID" size="30" placeholder="공백없이 아이디 입력" autofocus required></td> 
   </tr>

   <tr>
     <th align="right"><lable for="la_password">비밀번호</lable></th>
     <td><input type="password" id ="la_password" name="userPassword" size="30" placeholder="영문자 숫자 10자 이상"
     required></td>
    </tr>

    <tr>
      <th align="right"><lable for="la_repassword">비밀번호 확인</lable></th>
      <td><input type="password" id ="la_repassword" name="re_userPassword" size="30" placeholder="비빌번호 확인"
      required></td>
    </tr>

    <tr align="right"> 
        <td colspan="2">
        <br>
       <div align="center">
       <input type="submit" value="전송">
       <input type="reset" value="취소">
      </td>
    </tr>
    </table>
    </fieldset>
</form>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2024-12-04 / 2일차 / form-로그인-next페이지</title>
</head>
   <body>
    미리 회원가입 한경우 => 로그인 성공 <br>
    미리 회원가입 안 한경우 => 로그인 성공 <br>
   </body>
</html>

 

 

14. 로그인_심화

* <label for ="user_id"> = <input id="user_id">

<form action="09_register_next.html" method="get">
  <fieldset>
  <legend>가입자 정보</legend>
  <table border="1">
 
<!--사용자에게는 보이지는 않지만 서버로 넘겨지는 값을 갖는다. -->
  <input type="hidden" name="pageNum" value= "100" size="30">
    <tr>
       <th align="right"><label for="user_id">아이디1</label></th>
       <td><input type="text" id="user_id" name="userID" size="30" placeholder="공백 없이 입력" autofocus required></td>
    </tr>

<!-- 회원 수정인 경우 : ID는 변경이 되면 안됨으로 disabled(비활성화) 속성을 주고, id는 뿌려준다.-->
    <tr>
      <th align="right"><label for="user_id">아이디2</label></th>
      <td><input type="text" id="user_id" value="test" name="userID" size="30" disabled></td>
    </tr>

    <tr>
       <th align="right"><label for="user_pwd">비밀번호</label></th>
       <td><input type="password" id="user_pwd" name="userPasswod" size="30" placeholder="영문 숫자 8자 이상" required>
       </td>
    </tr>

    <tr>
      <th align="right"><label for="user_rePwd">비밀번호 확인</label></th>
      <td><input type="password" id="user_rePwd" name="reuserPassword" size="30" placeholder="비밀번호 확인 필수"
     required></td>
   </tr>

   <tr>
     <th align="right"><label for="user_name">이름</label></th>
     <td><input type="text" id="user_name" name="userName" size="30" placeholder="이름 입력" required></td>
   </tr>

   <tr>
     <th align="right"><label for="user_email">이메일</label></th>
     <td><input type="email" id="user_email" name="userEmail" size="50" placeholder="이메일 입력" required></td>
   <!-- type="email" => "@" 체크 -->
   </tr>

<tr>
   <th align="right"><label for="user_blog">블로그</label></th>
   <td><input type="url" id="user_blog" name="userBlog" size="60" placeholder="블로그 사이트 입력"></td>
   <!-- type="url" => "http://주소" 체크 -->
</tr>

<tr>
   <th align="right"><label for="user_msg">남기고 싶은 말</label></th>
   <td><textarea id="user_msg" name="userMessage" cols="50" rows="5"></textarea></td>
</tr>

<tr>
   <td colspan ="2" align="center">
   <input type="submit" value="저장">
   <input type="reset" value="취소">
</td>

</tr>
   </input>
   </table>
   </fieldset>
</form>

 

 

15. 라디오박스(단일 선택), 체크박스(다중 선택)

* checked : 필수 기본 값 체크

<form action="" method="post">

<fieldset>
  <legend>수강과목<small>(단일선택)</small></legend>
   <table>
   <tr>
     <td><label><input type="radio" name="conversation" value="low" checked>영어회화(초급)</label></td>
   </tr>

   <tr>
     <td><label><input type="radio" name="conversation" value="middle">영어회화(중급)</label></td>
   </tr>

   <tr>
      <td><label><input type="radio" name="conversation" value="high">영어회화(고급)</label></td>
   </tr>
</table>
</fieldset>

<fieldset>
   <legend>관심분야<small>(다중선택)</small></legend>
   <table>
   <tr>
     <td><label><input type="checkbox" name="language" value="grammer">문법</label></td>
   </tr>

   <tr>
     <td><lable><input type="checkbox" name="language" vlaue="voca">어휘</label></td>
   </tr>

   <tr>
      <td><lable><input type="checkbox" name="language" vlaue="conv">회화</label></td>
   </tr>

   <tr>
     <td><lable><input type="checkbox" name="language" vlaue="listening">듣기</label></td>
   </tr>
 </table>
</fieldset>

<fieldset>
<legend> 선호색상 </legend>
   <table>
     <tr>
        <td><label><input type="color" id="preColor" value="#00FF00"></label></td>
     </tr>
  </table>
</fieldset>

</form>

 

 

 

16. 폼과 관련된 태그들

검색, 우편번호 검색, 파일 첨부하기, 조회기간 선택

<form action="#" method="post"></form>
  <fieldset>
  <legend> 검색 </legend> 
   <table>
   <tr>
     <td><input type="search"></td>
     <td><input type="submit" value="검색"></td>
   </tr>
</table>
</fieldset>

<fieldset>
<legend> 우편번호 검색 </legend>
<table>
<tr>
   <td colspan="2">
   <!-- 버튼 클릭시 zipcodeSearch()함수 호출-->
   <input type="button" value="우편번호 검색" onclick="zipcodeSearch()">
   </td>
</tr>
</table>
</fieldset>

<fieldset>
<legend> 파일첨부 하기 </legend>
<table>
   <tr>
     <td><input type="file" name="attachFile"></td>
   </tr>
</table>
</fieldset>

<fieldset>
<legend> 조회기간 선택 </legend>
<table>
  <tr>
     <td><label for="smonth"> 현재월 </label></td>
     <td><input type="month" id="smonth" value="2024-12"></td>
  </tr>

<tr>
   <td><label for="startDay"> 시작일 </label></td>
   <td><input type="date" id="startDay"> ~ </td>
</tr>

<tr>
   <td><label for="endDay"> 종료일 </label></td>
   <td><input type="date" id="endDay"></td>
</tr>

<tr>
   <td><label for="startWeek"> 개강주 </label></td>
   <td><input type="week" id="startWeek"></td>
</tr>

<tr>
   <td><label for="startTime"> 시작 시간 </label></td>
   <td><input type="time" id="startTime"></td>

   <td><label for="endTime"> 종료 시간 </label></td>
   <td><input type="time" id="endTime"></td>
</tr>
</table>
</fieldset>

 

 

 

<script type="text/javascript">
function zipcodeSearch() {
  alert("우편번호를 입력하세요!!");
}
</script>

 

 

17. select box

<form action="#" method="post">
<fieldset>
<legend> 수강신청 </legend>
<table>
   <tr>
     <td><label for="stdNum">학번</label></td>
     <td><input type="number" id="stdNum" min="0" max="100" value="1" autofocus required">학번</td>
     <td></td>
   </tr>

   <tr>
     <td><label for="stdName">이름</label></td>
     <td><input type="text" id="stdName" size="30"></td>
   </tr>

   <tr>
     <td><label for="인문대학"></label></td>
     <td>
       <select size="5" id=major" multiple> <!-- multiple: ctrl 시작과 끝 클릭시 전체 선택, 기본설정  -->
       <optgroup label="공과대학"> <!--  optgroup: 같은 옵션끼리 묶기. -->
          <option value="computer">컴퓨터공학</option>
          <option value="multi">멀티미디어공학</option>
          <option value="electro">전자공학</option>
          <option value="chemistry">화확공학</option>
          <option value="mecha">기계공학</option>
          <option value="materials">신소재공학</option>
       </optgroup>

      <optgroup label="공과대학">
        <option value="kor">국문과</option>
        <option value="end">영문과</option>
        <option value="china">중국어과</option>
        <option value="philasophy">철학과</option>
        <option value="japan">일본어학과</option>
        <option value="france">프랑스학과</option>
    </optgroup>
    </td>
    </tr>
</table>
</fieldset>
</form>

 

 

18. 폼과 관련된 태그들

<form action="#" method="post">
<fieldset>
<legend> 지원현황 </legend>

<table>
   <tr>
      <td><label for="mem_number">참여인원<small>(최대10명)</small></label></td>
      <td><input type="number" id="mem_number" value="1" min="0" max="10" step="1"></td>
   </tr>

<tr>
   <td><label for="m_number">지원물품<small>(1인당 5개)</small></label></td>
   <td><input type="number" id="m_number" value="5" min="0" max="50" step="5"></td>
</tr>

<tr>
   <td><label for="level">희망단계<small>(상,중,하)</small></label></td>
   <td><small>상</small><input type="range" id="level" value="1" min="1" max="3" step="1"></td>
</tr>
</table>
</fieldset>

<fieldset>
<!-- 전체 100% 중에서 20%로 진행 -->
<legend> progress 태그 - 진행상태 보여주기 </legend>
<table>
<tr>
  <td><label> 진행률 20% </label></td>
  <td><progress value="20" max="100"></progress>
</tr>

<tr>
<!-- 전체크기(min~max)는 1024~10240이며, value가 high를 벗어나면 노랑, high이내는 green으로 반환해라-->
<!-- 전체 1중에서 0.7 진행 -->
<!-- meter: 전체 크기중에서 얼마나 차지하는지를 표시할 때 사용
예) 하드디스크 용량, 유권자 투표율 -->
   <td><label> 트래픽 초과 </label></td>
   <td><meter value="9000" min="1024" max="10240" high="8000" low="1024"></meter></td> <!-- 노랑 -->
</tr>

<tr>
<!-- 전체크기 1중에서 0.7을 차지하고 있음, 적정도를 0.7로 설정 -->
   <td><label> 적절한 트래픽 </label></td>
   <td><meter optimum="0.7" value="0.7"></meter></td> <!-- 초록 -->
</tr>
</table>
</fieldset>
</form>

 

 

 

19. <mark> 형광펜 효과
<span> 줄안에서 인라인에서 묶기
<div> 블럭 단위로 묶기 
<img src="이미지"> 이미지 가져오기

<div style="background-color: pink"> 

<p>
  세상에 스트레스를 안 겪어본 사람은 없을 것이다. <br>
  스트레스는 직장 생활, 가족, 드라마, 인간 관계, 돈 문제 등 다양한 상황에서 <br>
  겪게 될 수 있다. 사실 약간의 스트레스는 육체적, 정신적으로 성장할 수 있는 <br> 
  기회를 주기 때문에 이로운 작용을 하지만 과도하거나 만성 스트레스에 이르면 <br> 
  당연히 해롭다. 스트레스를 장기간 받게 되면 긴장성 두통을 비롯한 다양한 질환을 <br>
  겪을 수도 있어 인간 관계와 학교, 직장에서 제대로 된 생활을 하지 못하게 된다. <br>
</p>

<p>
  [1] 스트레스가 당신의 삶을 장악해버리기 전에 이 글을 통해 스트레스를 관리하는 <br>
  법과 건강에 악영향을 끼치기 전에 예방하고 해결하는 법을 배워보자. <br>
</p>

</div>

<h3>부정적인 생각 재구성하기</h3>
<img src="../image/image1.jpg" width=500 height=350 alt="부정적인 생각 재구성">

<p>
  <font size="5"> 1. </font> <b>스트레스가 우리 인식에서 시작됨을 알기.</b><br>
</p>

<p>
<mark style="background-color: aqua">우리 몸은 "투쟁 도피 반응"을 이끌어내는 
위험한 상황에 매우 효율적</mark>으로 반응한다. <br>
예를 들어 차가 당신을 향해 다가오고 있을 때 반사적으로 피하는 것이 여기에 속할 것이다. <br>
</p>

<p>
  [2] 이 반응은 심장을 뛰게 해 심박수를 높이며 근육을 긴장시킨다.<br>
  그런데 문제는 우리 몸이 이런 반응을 별 위협도 되지 않는 상황에서 무의식적으로 이끌어낸다는 점이다.<br>
  교통 체증, 마감 시간이 임박한 경우, 가족 문제 등이 여기에 속한다.<br>
</p>

<p>
  [3] 따라서 우리는 일단 몸이 스트레스를 느끼기 시작할 때 <br>
  "브레이크를 걸어주는" 방법을 배워서 진정시킬 줄 알아야 한다.[4] <br>
</p>

 

 

'HTML5, CSS3' 카테고리의 다른 글

[CSS3] 외부 스타일 시트  (3) 2024.12.12

+ Recent posts

티스토리툴바