HTML/CSS

4일차_CSS

알 수 없는 사용자 2015. 6. 21. 07:54

-------------------------------
4. Grouping Selectors
- 여러개의 선택자를 동시 사용.
- 구분자로 , (comma)를 사용.

CSS 표현 -> 선택자1, 선택자2, ... {속성:값}


5. 하위 요소 선택
CSS 표현 -> 부모선택자 > 자식선택자 {속성:값}
CSS 표현 -> 조상선택자   자손선택자 {속성:값}

<div>     부모선택자(조상선택자)
 <div>     자식선택자(자손선택자)
  <div>     자손선택자
  </div>
 </div>
</div>

6. 속성 선택
CSS 표현 -> [속성=값] {속성:값}

<a href="">
<a href="" target="">   ->   a[target=_blank] {text-tecoration:none;}
<img src="" alt="">
<img src="" alt="" width="" heigth="">     ->  img[width] {속성:값}


7. shadow 선택
- 특정 대상이 특정 상황에 놓인 경우에 한해서 선택되는 경우
CSS 표현 -> 특정대상:hover {속성:값}

- 특정 대상이 특정 위치에 놓인 경우에 한해서 선택되는 경우
CSS 표현 -> 특정대상:first-child {속성:값}


<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>

<style type="text/css">
 div { font-size: 10pt; color: #666666; }
 h1 { font-size: 12pt; color:#53CF7C; }
 
 /* 선택자 선택자 { 속성: 값; ... } */
 /* text-decoration 속성은 텍스트에 대한 장식 지정 */
 div#menu a { color: #666666; text-decoration: none; }
 div#menu a:hover { color: #000000; text-decoration: underline; }
</style>

</head>
<body>
<div>
 <!-- id="", class="", name="" 식별자 지정 -->
 <div id="menu">
  <h1>CSS Tutorial</h1>
  <p><a href="">CSS HOME</a></p>
  <p><a href="">CSS Introduction</a></p>
  <p><a href="">CSS Syntax</a></p>
  <p><a href="">CSS Selectors</a></p>
 </div>
</div>
</body>
</html>


-----------------------------------------------
CSS  적용 방법

1. CSS  적용 범위
- 인라인 단위 적용 방법 : 특정 태그에만 적용되는 CSS. 웹페이지 내에서 특정 부분에만 적용하는 스타일 지정시 사용.
<태그명 style="CSS속성:값; CSS속성:값; ...">데이터</태그명>


- 페이지 단위 적용 방법 : 특정 페이지에만 적용되는 CSS. 웹페이지 전체의 스타일 지정시 사용.
<style type="text/css">
 선택자 { CSS속성:값; CSS속성:값; ... }
</style>


- 파일 단위 적용 방법 : 특정 파일 단위로 적용되는 CSS. 웹사이트 전체의 스타일 지정시 사용.
<link rel="stylesheet" type="text/css" href="파일명.css">
-> 별도의 .css 파일을 만들어서 그 안에 스타일 내용을 작성한다.

 

http://www.w3schools.com/stdtheme.css

 


----------------------------------------------
CSS Text

1. color - Sets the color of text
2. line-height - Sets the line height
3. text-align - Specifies the horizontal alignment of text
4. text-decoration - Specifies the decoration added to text
5. vertical-align - Sets the vertical alignment of an element

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>

<style type="text/css">
  /* 선택자 { 속성:값; 속성:값; ...} */
  div { width: 550px; line-height: 170%;}
  h1 { font-size:15pt;}
  h2 { font-size:9pt; color:gray; font-weight: normal;}
  p { margin-top:25px; margin-bottom:25px; }
  p#img { text-align: center; }
</style>

</head>
<body>
<!-- 뉴스 기사 전체 -->
<div id="news0003251960">
 <!-- 제목 영역 -->
 <div>
  <h1>"구글 유튜브, 1조원 게임 스트리밍 서비스 인수"</h1>
  <h2>기사입력 2014-05-19 08:38 | 최종수정 2014-05-19 09:09</h2>
 </div>
 <!-- 내용 영역 -->
 <div>
  <p id="img"><img src="http://imgnews.naver.net/image/277/2014/05/19/2014051908351937334_1_99_20140519090908.jpg"></p>
  <p>[아시아경제 조유진 기자] 구글 유튜브가 비디오게임 스트리밍 서비스 트위치를 인수한다. 인수금액은 10억달러(약1조250억원)로 인수가 성사되면 전액 현금으로 지급될 예정이다. </p>
  <p>18일(현지시간) 미국 버라이어티 등 외신에 따르면 구글의 동영상 서비스 유튜브가 비디오 게임 스트리밍 업체 트위치(Twitch)를 인수하는 계약을 체결했다. </p>
  <p>이번 거래는 규제 당국의 심사를 거친 뒤 발표될 예정이다. </p>
  <p>트위치는 2011년 6월 저스틴 칸과 에미트 시어가 게임 콘텐츠에 중점을 둔 스트리밍 서비스로 시작했으며, 서비스 2년 만에 게임전용 방송국으로 인기를 얻고 있다.</p>
  <p>트위치 사이트의 월간 사용자 수는 4500만명이며, 동영상을 업로드하는 활동 이용자 수는 100만명이 넘는다.</p>
  <p>조유진 기자 tint@asiae.co.kr</p>
 </div>
</div>
</body>
</html>

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>

<style type="text/css">
 table#form01  tr > td:first-child { text-align: right; }

 input[type=text]:focus { background-color: #FFE6E6 ; }

</style>

</head>
<body>
<div>
 <h1>회원가입</h1>
 <form>
 <table id="form01">
  <tr>
   <td>이름</td><td><input type="text" placeholder="이름"></td>
  </tr>

  <!-- HTML5 전용 속성 -->
  <tr>
   <td>전화</td><td><input type="text" placeholder="010-XXXX-XXXX" pattern="010-[0-9]{4}-[0-9]{4}"></td>
  </tr>

  <!-- HTML5 전용 폼 태그 -->
  <tr>
   <td>이메일</td><td><input type="email" placeholder="이메일"></td>
  </tr>

  <tr>
   <td>성별</td><td><input type="radio" name="gender" value="male">Male <input type="radio" name="gender" value="female">Female</td>
  </tr>
  <tr>
   <td>취미</td><td><input type="checkbox" value="1">운동 <input type="checkbox" value="2">여행 <input type="checkbox" value="3">감상</td>
  </tr>
  
  <!-- HTML5 전용 폼 태그 -->
  <tr>
   <td>생년월일</td><td><input type="date"></td>
  </tr>
  
  <!-- HTML5 전용 폼 태그 -->
  <tr>
   <td>수강 횟수</td><td><input type="number" min="0"></td>
  </tr>
  
  <tr>
   <td style="vertical-align: top;">자기 소개</td><td><textarea style="width: 400px; height:100px;" placeholder="간단한 자기 소개를 부탁합니다." ></textarea></td>
  </tr>
  <tr>
   <td></td><td><input type="submit"></td>
  </tr>
 </table>
 </form>
</div>
</body>
</html>

 

---------------------------------------
CSS Background

1. background-color - Sets the background color of an element
2. background-image - Sets the background image for an element
3. background-position - Sets the starting position of a background image
4. background-repeat - Sets how a background image will be repeated

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>

<style type="text/css">
 
 table tr > td:first-child { text-align: right;  }
 
 input[type=text]:focus { background-color:  #FFE6E6  ; }
 
 table { border: 1px solid #FFCCFF ;}
 
 tr { background-color: #FFEBFF ; }

</style>

</head>
<body>
<div>
 <h1>회원가입</h1>
 <form>
 <table id="form01">
  <tr>
   <td>이름</td><td><input type="text" placeholder="이름

"></td>
  </tr>

  <!-- HTML5 전용 속성 -->
  <tr>
   <td>전화</td><td><input type="text" placeholder="010

-XXXX-XXXX" pattern="010-[0-9]{4}-[0-9]{4}"></td>
  </tr>

  <!-- HTML5 전용 폼 태그 -->
  <tr>
   <td>이메일</td><td><input type="email" placeholder="

이메일"></td>
  </tr>

  <tr>
   <td>성별</td><td><input type="radio" name="gender"

value="male">Male <input type="radio" name="gender"

value="female">Female</td>
  </tr>
  <tr>
   <td>취미</td><td><input type="checkbox" value="1">운

동 <input type="checkbox" value="2">여행 <input type="checkbox" value="3">감

상</td>
  </tr>
  
  <!-- HTML5 전용 폼 태그 -->
  <tr>
   <td>생년월일</td><td><input type="date"></td>
  </tr>
  
  <!-- HTML5 전용 폼 태그 -->
  <tr>
   <td>수강 횟수</td><td><input type="number"

min="0"></td>
  </tr>
  
  <tr>
   <td style="vertical-align: top;">자기 소개</td><td><textarea style="width: 400px;

height:100px;" placeholder="간단한 자기 소개를 부탁합니다." ></textarea></td>
  </tr>
  <tr>
   <td></td><td><input type="submit"></td>
  </tr>
 </table>
 </form>
</div>
</body>
</html>

 

 


<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>

<style type="text/css">
 table#form01 { background-image: url('smiley.gif') ;
     background-repeat: no-repeat;
     background-position: top right;}
 table#form01  tr > td:first-child { text-align: right; background-color: #C2C2C2; }
</style>

</head>
<body>
<div>
 <h1>회원가입</h1>
 <form>
 <table id="form01" >
  <tr>
   <td>이름</td><td><input type="text" placeholder="이름"></td>
  </tr>

  <!-- HTML5 전용 속성 -->
  <tr>
   <td>전화</td><td><input type="text" placeholder="010-XXXX-XXXX" pattern="010-[0-9]{4}-[0-9]{4}"></td>
  </tr>

  <!-- HTML5 전용 폼 태그 -->
  <tr>
   <td>이메일</td><td><input type="email" placeholder="이메일"></td>
  </tr>

  <tr>
   <td>성별</td><td><input type="radio" name="gender" value="male">Male <input type="radio" name="gender" value="female">Female</td>
  </tr>
  <tr>
   <td>취미</td><td><input type="checkbox" value="1">운동 <input type="checkbox" value="2">여행 <input type="checkbox" value="3">감상</td>
  </tr>
  
  <!-- HTML5 전용 폼 태그 -->
  <tr>
   <td>생년월일</td><td><input type="date"></td>
  </tr>
  
  <!-- HTML5 전용 폼 태그 -->
  <tr>
   <td>수강 횟수</td><td><input type="number" min="0"></td>
  </tr>
  
  <tr>
   <td style="vertical-align: top;">자기 소개</td><td><textarea style="width: 400px; height:100px;" placeholder="간단한 자기 소개를 부탁합니다." ></textarea></td>
  </tr>
  <tr>
   <td style="background-color: white;"></td><td><input type="submit"></td>
  </tr>
 </table>
 </form>
</div>
</body>
</html>

 

-----------------------------------
CSS Font

1. font-size - Specifies the font size of text
2. font-style - Specifies the font style for text
3. font-family - Specifies the font family for text


-----------------------------------
CSS Tables

1. Table Borders - border: 1px solid black;
2. Collapse Borders - border-collapse:collapse;
3. Table Width and Height - width:100%; height:50px;
4. Table Text Alignment - text-align:right; vertical-align:bottom;
5. Table Padding - padding:15px;
6. Table Color - background-color:green; color:white;

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>

<style type="text/css">
 
 table { border-collapse:collapse; }
 table, td { border: 1px solid #B2CCFF; }
 td { padding: 5px; }
 
 td.back01 { background-color:#E0EBFF ;  }

</style>

</head>
<body>
<div>
 <h1>회원가입</h1>
 <form>
 <table id="form01">
  <tr>
   <td class="back01">이름</td><td><input type="text" placeholder="이름

"></td>
  </tr>

  <!-- HTML5 전용 속성 -->
  <tr>
   <td class="back01">전화</td><td><input type="text" placeholder="010

-XXXX-XXXX" pattern="010-[0-9]{4}-[0-9]{4}"></td>
  </tr>

  <!-- HTML5 전용 폼 태그 -->
  <tr>
   <td class="back01">이메일</td><td><input type="email" placeholder="

이메일"></td>
  </tr>

  <tr>
   <td class="back01">성별</td><td><input type="radio" name="gender"

value="male">Male <input type="radio" name="gender"

value="female">Female</td>
  </tr>
  <tr>
   <td class="back01">취미</td><td><input type="checkbox" value="1">운

동 <input type="checkbox" value="2">여행 <input type="checkbox" value="3">감

상</td>
  </tr>
  
  <!-- HTML5 전용 폼 태그 -->
  <tr>
   <td class="back01">생년월일</td><td><input type="date"></td>
  </tr>
  
  <!-- HTML5 전용 폼 태그 -->
  <tr>
   <td class="back01">수강 횟수</td><td><input type="number"

min="0"></td>
  </tr>
  
  <tr>
   <td style="vertical-align: top;" class="back01">자기 소개</td><td><textarea style="width: 400px;

height:100px;" placeholder="간단한 자기 소개를 부탁합니다." ></textarea></td>
  </tr>
  <tr>
   <td></td><td><input type="submit"></td>
  </tr>
 </table>
 </form>
</div>

</body>
</html>

 

 


//Table.css
@CHARSET "EUC-KR";
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}

 

 


<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="Table.css">

<style type="text/css">
 table#form01 { background-image: url('back03.jpg') ;
     background-repeat: no-repeat;
     background-position: top right;}
 table#form01  tr > td:first-child { text-align: right; background-color: #C2C2C2; }
</style>

</head>
<body>
<div>
 <h1>회원가입</h1>
 <form>
 <table id="customers" >
  <tr class="alt">
   <td>이름</td><td><input type="text" placeholder="이름"></td>
  </tr>

  <!-- HTML5 전용 속성 -->
  <tr>
   <td>전화</td><td><input type="text" placeholder="010-XXXX-XXXX" pattern="010-[0-9]{4}-[0-9]{4}"></td>
  </tr>

  <!-- HTML5 전용 폼 태그 -->
  <tr class="alt">
   <td>이메일</td><td><input type="email" placeholder="이메일"></td>
  </tr>

  <tr>
   <td>성별</td><td><input type="radio" name="gender" value="male">Male <input type="radio" name="gender" value="female">Female</td>
  </tr>
  <tr class="alt">
   <td>취미</td><td><input type="checkbox" value="1">운동 <input type="checkbox" value="2">여행 <input type="checkbox" value="3">감상</td>
  </tr>
  
  <!-- HTML5 전용 폼 태그 -->
  <tr>
   <td>생년월일</td><td><input type="date"></td>
  </tr>
  
  <!-- HTML5 전용 폼 태그 -->
  <tr class="alt">
   <td>수강 횟수</td><td><input type="number" min="0"></td>
  </tr>
  
  <tr>
   <td style="vertical-align: top;">자기 소개</td><td><textarea style="width: 400px; height:100px;" placeholder="간단한 자기 소개를 부탁합니다." ></textarea></td>
  </tr>
  <tr class="alt">
   <td></td><td><input type="submit"></td>
  </tr>
 </table>
 </form>
</div>
</body>
</html>


--------------------------------------------
The CSS Box Model

1. Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent
2. Border - A border that goes around the padding and content. The border is inherited from the color property of the box
3. Padding - Clears an area around the content. The padding is affected by the background color of the box
4. Content - The content of the box, where text and images appear

----------------------------------------------
CSS Border

1. border - Sets all the border properties in one declaration

CSS 표현 -> border : 굵기 선의종류 색상;

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="Table.css">

<style type="text/css">
 table#form01 { background-image: url('back03.jpg') ;
     background-repeat: no-repeat;
     background-position: top right;}
 table#form01  tr > td:first-child { text-align: right; background-color: #C2C2C2; }
 
 input { border : 1px dashed black; font-size: 13pt; }
 textarea { border : 1px dashed black; }
</style>

</head>
<body>
<div>
 <h1>회원가입</h1>
 <form>
 <table id="customers" >
  <tr class="alt">
   <td>이름</td><td><input type="text" placeholder="이름"></td>
  </tr>

  <!-- HTML5 전용 속성 -->
  <tr>
   <td>전화</td><td><input type="text" placeholder="010-XXXX-XXXX" pattern="010-[0-9]{4}-[0-9]{4}"></td>
  </tr>

  <!-- HTML5 전용 폼 태그 -->
  <tr class="alt">
   <td>이메일</td><td><input type="email" placeholder="이메일"></td>
  </tr>

  <tr>
   <td>성별</td><td><input type="radio" name="gender" value="male">Male <input type="radio" name="gender" value="female">Female</td>
  </tr>
  <tr class="alt">
   <td>취미</td><td><input type="checkbox" value="1">운동 <input type="checkbox" value="2">여행 <input type="checkbox" value="3">감상</td>
  </tr>
  
  <!-- HTML5 전용 폼 태그 -->
  <tr>
   <td>생년월일</td><td><input type="date"></td>
  </tr>
  
  <!-- HTML5 전용 폼 태그 -->
  <tr class="alt">
   <td>수강 횟수</td><td><input type="number" min="0"></td>
  </tr>
  
  <tr>
   <td style="vertical-align: top;">자기 소개</td><td><textarea style="width: 400px; height:100px;" placeholder="간단한 자기 소개를 부탁합니다." ></textarea></td>
  </tr>
  <tr class="alt">
   <td></td><td><input type="submit"></td>
  </tr>
 </table>
 </form>
</div>
</body>
</html>

 

------------------------------------------
CSS Margin

1. margin - A shorthand property for setting the margin properties in one declaration

CSS 표현 -> margin: 값; margin: 값1 값2 값3 값4;

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>

<style type="text/css">
 div#main { width: 912px; margin: auto; }
 div#header { margin:3px; height: 100px; background-color: #FFCCCC;}
 div#menu { margin:3px; float:left; height: 300px; width: 200px; background-color: #CCFFCC;}
 div#content { margin:3px; float: left; height: 300px; width: 700px; background-color: #C2D6FF;}
 div#footer { margin:3px; clear:both; height:50px; background-color: #D1FFF0 ; }
</style>

</head>
<body>
<!-- 전체 영역을 하나의 큰 틀로 묶는다 -->
<div id="main">

<!-- 화면 상단부 - 주로 메인메뉴 또는 타이틀 표시하는 영역 -->
<div id="header"><h1>Main Title of Web Page</h1></div>

<!-- 서브메뉴 영역-메뉴 목록 출력하는 영역 -->
<div id="menu">
 <h2>Menu</h2>
 <ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
 </ol>
</div>

<!-- 콘텐츠 영역-페이지마다 다른 내용의 콘텐츠가 출력되는 영역 -->
<div id="content">Content goes here</div>

<!-- 화면 하단부 - 회사 이름 등이 출력되는 영역 -->
<div id="footer">Copyright (c) W3Schools.com</div>

</div>
</body>
</html>


-----------------------------------------
CSS Padding

1. padding - A shorthand property for setting all the padding properties in one declaration

CSS 표현 -> padding: 값; padding: 값1 값2 값3 값4;


<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>

<style type="text/css">

 div { font-size: 10pt; color: #666666; }
 h1 { font-size: 12pt; color:#53CF7C; }
 div#menu a { color: #666666; text-decoration: none; }

 p { border: 1px solid  #B2CCFF;
   width: 200px;
   padding: 5px;
   margin-top : 1px;
   margin-bottom : 1px; }
   
 p:hover { color: #000000; text-decoration: underline;
    background-color:#E0EBFF ; }

</style>

</head>
<body>
<div>
 <div id="menu">
  <h1>CSS Tutorial</h1>
  <p><a href="">CSS HOME</a></p>
  <p><a href="">CSS Introduction</a></p>
  <p><a href="">CSS Syntax</a></p>
  <p><a href="">CSS Selectors</a></p>
 </div>
</div>
</body>
</html>

 

 

---------------------------------------------------
CSS Navigation Bar

 

//Menu.css
@CHARSET "EUC-KR";
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

 

 


<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="Menu.css">

</head>
<body>
<div>
 <h1>w3schools.com</h1>
 <div>
  <ul>
   <li><a href="">HOME</a></li>
   <li><a href="">HTML</a></li>
   <li><a href="">CSS</a></li>
   <li><a href="">JAVASCRIPT</a></li>
   <li><a href="">MORE...</a></li>
  </ul> 
 </div>

</div>
</body>
</html>

 

------------------------------------------------

저작자표시 (새창열림)