· iframe 높이 자동 계산


 <script type="text/javascript">

  function resizeIframe(obj)

  {

     obj.style.height = 0;

     obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';

  }

</script>


<iframe onload="resizeIframe(this)" name="my" frameborder="0" width="100%"></iframe>


· table 경계선 없애기

- border-collapse: collapse;


· table 화면에 꽉차게 넣기

- width: 100%;


· 둥근 테두리

- border-radius: 10px;(px값 높아질수록 둥그러진다 -> 원형태로 됨)


· 경계선 그림자

- box-shadow: 5px 5px 5px red;


· 마진과 패팅

- auto : 브라우저가 마진을 계산한다.

- length : 마진을 px, pt, cm단위로 지정할 수 있다.

- % :마진을 요소 폭의 퍼센트로 지정한다.

- ingerit : 마진이 부모 요소로부터 상속된다.


margin : 10px 20px 30px 40px

top   right  botttom  left


· 웹 페이지를 만들 때 wrap 설정해주기

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

#wrap{

width: 1000px;

height: 650px;

/* margin: 50px auto; */

text-align: center;

background-color: green;

}

#mydiv{

/* margin: auto; */

width: 50%;

background-color: yellow;

}

</style>

</head>

<body>

<div id="wrap">

<div id="mydiv">test</div>

<img src="image/b.jpg">

</div>

</body>

</html>


- <div id="wrap"> 설정을 안해주면 글자 흘러내린다


· 배경 설정하기

body{

background-image: url("image/a.jpg");

background-repeat: repeat; 

background-attachment: fixed;

} 

- 배경이미지 고정해놓기


· 리스트 스타일

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

ul{

list-style-type: square;

list-style-image: url("image/icon.png");

list-style-position: inside;

}

</style>

</head>

<body>

<ul>

<li>사과</li>

<li>포도</li>

<li>딸기</li>

</ul>

</body>

</html> 


· 블록요소를 인라인요소로 바꾸기

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

div{

display: inline;

}/*블록요소를 인라인요소로 바꾸기*/

        span{

display: block;

}/*인라인요소를 블록요소로 바꾸기*/

</style>

</head>

<body>

<div>테스트1</div>

<div>테스트2</div>

<div>테스트3</div>

</body>

</html> 



· 글자간 간격 주기

- letter-spacing: 10px;


· <a href>에 밑줄 없애기

- text-decoration: none;


· table에서 텍스트 수평 정렬 ->text-align: center;


· table에서 텍스트 수직 정렬 -> vertical-align: top;


· 레이아웃


· visibility: hidden;

- 숨겨지지만 자리는 차지함


· display: none;

- 숨겨지고 자리 차지도 하지않음


· z-index

- 숫자가 높을수록 앞에 나옴


· width와 max-width 차이

- 인터넷 창 크기가 작아져도 max-width(동적)는 같이 작아지지만, width(정적)는 가려짐

- min-width: 500px; : 100%유지하다가 인터넷 창 크기 자아지면 50%로 유지


· opacity

- 투명도 설정

저작자표시

'SK고용디딤돌' 카테고리의 다른 글

직무교육 6일차(JavaScript)  (0) 2017.07.17
직무교육 5일차(CSS)  (0) 2017.07.14
직무교육 3일차(CSS)  (0) 2017.07.12
직무교육 2일차(HTML)  (1) 2017.07.11
직무교육 1일차(HTML)  (0) 2017.07.10

wsu-css-cheat-sheet.pdf


문서의 구조 : HTML

문서의 스타일 : CSS(Cascading Style Sheets)


거대하고 복잡한 사이트를 관리할 때 필요

모든 페이지들이 동일한 CSS 공유


· CSS의 구성

- 선택자(selectors)

- 박스 모델

- 배경 및 경계선

- 텍스트 효과

- 2차원 및 3차원 변환

- 애니메이션

- 다중 컬럼 레이아웃

- 사용자 인터페이스


· CSS3의 문법

- 선택자(selector) { 속성 : 값 ; }

ex) p{background-color : yellow;}

- 주석 : /* ... */


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

div{

속성:값;

속성:값;

...

}

</style>

</head>

<body>

<div>css3 test</div>

</body>

</html>



· 적용 순서 : 임베디드 방식 -> 인라인 방식 -> css파일


· <link rel="stylesheet" href="css/a.css">

- html <head>안에 추가해주기


· 선택자 : HTML 요소를 선택하는 부분(선택자는 jQuery에서도 사용)


· 선택자 종류

- 타입 선택자

=HTML 요소 이름 선택

<style>

h1{

color:blue;

}

div{

color: green;

}

</style> 


- 전체 선택자 

= 페이지 안에 있는 모든 요소 선택

*{

background-color: yellow;

} 


- 클래스 선택자 : .

= 클래스가 부여된 요소를 선택

= 클래스 이름 중복 선언 O

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

.my1{

color: yellow;

}

</style>

</head>

<body>

<div class="my1">test</div>

<p class="my1">테스트1</p>

<p>테스트2</p>

</body>

</html> 

= p.my1{

color:red;

}

-> p 태그 중에서 클래스 이름이 my1인 것만 적용됨


- 아이디 선택자 : #

= 특정한 요소를 선택

= id 중복 선언 X -> 처음 등장하는 것 하나만 적용됨

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

#test1{

color: red;

text-align: center;

}

</style>

</head>

<body>

<p id="test1">테스트1</p>

</body>

</html> 


- 속성 선택자

= 특정한 속성을 가지는 요소를 선택

<style>

[src]{

border: 3px solid red;

}

        [class]{

color: red;

}

</style>

= p[class]{ } ->p태그 안에 있는 class 속성에만 적용


       [src="image/b.jpg"]{

border: 3px solid red;

}src가 일치하는 거

[src^="image"]{

border: 3px solid red;

}image로 시작하는 거

[src$="jpg"]{

border: 3px solid red;

} jpg로 끝나는 거 

[src*="c"]{

border: 3px solid red;

} src에 c가 들어있는 거 

       [name~="abc"]{

color: green;

} abc 있는거(공백포함)

[name|="abc"]{

color: green;

} abc- 있는거


<style>

[src="image/b.jpg"]{

border: 3px solid red;

}src가 일치하는 거

[src^="image"]{

border: 3px solid red;

}image로 시작하는 거

[src$="jpg"]{

border: 3px solid red;

} jpg로 끝나는 거

[src*="c"]{

border: 3px solid red;

} src에 c가 들어있는 거

p[class]{

color: red;

}

[name~="abc"]{

color: green;

}

[name|="abc"]{

color: green;

}

</style> 



- 의사 선택자(pseudo-selector)

<!-- 반응형 선택자 -->

<style>

div:hover{

color: red;

}/* hover : div 태그에 마우스 올라갔을 때 */

p:active {

background-color: yellow;

}/* active : p 태그 마우스로 클릭했을 때 */

[type="text"]:focus {

background-color: skyblue;

border: 2px solid white;

}/* focus : 마우스 커서가 위치했을 때 */ 

a:link{

color: blue;

}/*  */

a:visited{

color: green;

}/* a태그 클릭해서 방문했을 때 */

a:hover {

color: yellow;

} 


li:last-child {

color: red;

}마지막 요소만 적용됨

li:first-child {

color: red;

}

li:nth-child(3n) {

color: red;

} 


p:first-line {

background-color: yellow;

}

p:first-letter {

font-size: 50pt;

color: red;

}

p:before {

content: "CSS3";

color: green;

}

p:after {

content: "배우기";

color: green;

} 


<style>

[name="color"]:checked{

width: 20px;

height: 20px;

}

div{

width: 100px;

height: 50px;

background-color: yellow;

}

[type="checkbox"]:checked{

width: 20px;

height: 20px;

}

#test1:enabled{

background-color: skyblue;

}

#test2:disabled{

background-color: blue;

}

input:required{

background-color: green;

}

input:read-only{

background-color: lightgray;

}

</style> 


nth-of-type : 


nth-child


· 자손, 자식 형제 결합자

- s1 s2 : 자식+후손

- s1>s2 : 자식만

- s1 +(오른쪽에 있는 형제만)/~(동급 레벨 모든 형제) s2: 형제

<style>

.test1 ~ div{

color: red;

}

.fruit ~ ul>li{

color: yellow;

}

</style> 


· font - 웹폰트

- 모든 유저가 동일한 폰트를 볼 수 있고 라이센스 문제 해결

<style>

@font-face{

font-family: "나의글꼴";

src:url("font/NANUMGOTHIC.TTF");

}

*{

font-family : "나의글꼴";

}

</style> 


저작자표시

'SK고용디딤돌' 카테고리의 다른 글

직무교육 5일차(CSS)  (0) 2017.07.14
직무교육 4일차(CSS)  (0) 2017.07.13
직무교육 2일차(HTML)  (1) 2017.07.11
직무교육 1일차(HTML)  (0) 2017.07.10
SK고용디딤돌 1, 2주차 후기  (0) 2017.07.08

정규식.pptx

<a href> 태그


<a href="a.html">클릭</a>

<a href="http://localhost:8080/html5Test/" style="text-decoration: none;">JavaScript</a>

- 밑줄 없애기

<a href="a.html" target="_blank">클릭</a>

- target="_blank" 새로운 윈도우에서 새로운 창을 연다.


<a href="#my" target="_blank"> 클릭</a>

<a id="my">여기로 이동</a>

- 동일한 문서내에서 이동할 때 사용

<a href="a.html" target="_blank"><img src="image/a.jpg"></a>

- 이미지를 통해서 이동


Table 태그


th : 테이블 헤더

tr : 테이블 로우

td : 테이블 데이터

소스

<table border="3" cellspacing="10" cellpadding="5">
	<tr>
		<th>이름</th>
		<th>나이</th>
	</tr>
	<tr>
		<td>홍길동</td>
		<td>30</td>
	</tr>
	<tr>
		<td>이순신</td>
		<td>50</td>
	</tr>
</table>

실행결과

이름 나이
홍길동 30
이순신 50


<tr>

<td colspan="2">이순신</td>

</tr>

-  td 2개 차지함


<caption>주소록</caption>

- 표의 타이틀 지정함


<iframe src="a.html"></iframe>

- iframe으로 a.html 보기

frameborder="0"

- 테두리 없애기


- iframe에 youtube 영상 넣기

src 뒷부분에 ?autoplay=1입력 -> 자동재생

소스

<iframe width="560" height="315" src="https://www.youtube.com/embed/WyiIGEHQP8o" frameborder="0" allowfullscreen></iframe>

실행결과

소스

<a href = "https://ko.wikipedia.org/wiki/%EB%8F%84%EC%BF%84_%EB%8F%84" target="my">도쿄</a>
<a href = "https://ko.wikipedia.org/wiki/%EC%98%A4%EC%82%AC%EC%B9%B4_%EC%8B%9C" target="my">오사카</a>
<hr>
<iframe name="my" frameborder="0" width="1000" height="700"></iframe>

<audio src="media/test.mp3" autoplay="autoplay" controls="controls"></audio>

- 오디오 자동재생, 음량 조절 가능


source 태그 사용

소스

<video src="media/test.mp4" autoplay="autoplay" loop></video>
<audio controls autoplay>
	<source src="media/test.ogg" type="audio/ogg">
	<source src="media/test.mp3" type="audio/mp3">
</audio>


<div> 태그

소스

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<header><h1>한식레시피</h1></header>
	<nav>
		<ul>
			<li><a href="#kim">김치찌개</a></li>
			<li><a href="#deon">된장찌개</a></li>
			<li><a href="#soon">순두부찌개</a></li>
		</ul>
	</nav>
	<a id="kim"></a>
	<section>
		<hgroup>
			<h2>김치찌개 레시피</h2>
			<h3>백종원 레시피</h3>
		</hgroup>
		<article>
			<figure>
				<img src="image/kim.jpg">
				<figcaption>김치찌개완성</figcaption>
			</figure>
			<p>
			레시피 : 쌀뜬물 700ml, 돼지고기목살, 김치, 대파1/2뿌리, 청양고추 1~2개 국간장1숟가락, 간마늘숟가락1, 굵은고추가루1숟가락, 고운고추가루1숟가락, 새우젓1숟가락, 된장1/2숟가락 필요시 설탕or양파 뜬물 2컵반
			</p>
		</article>
	</section>
	<footer>
		본 문서의 권한은 <b>홍길동</b>에게 있습니다.
		©tesst.com
		<address>서울시 중구</address>
		<time>2017-07-11</time>
	</footer>
</body>
</html>

실행결과

Insert title here

한식레시피

김치찌개 레시피

백종원 레시피

김치찌개완성

레시피 : 쌀뜬물 700ml, 돼지고기목살, 김치, 대파1/2뿌리, 청양고추 1~2개 국간장1숟가락, 간마늘숟가락1, 굵은고추가루1숟가락, 고운고추가루1숟가락, 새우젓1숟가락, 된장1/2숟가락 필요시 설탕or양파 뜬물 2컵반

본 문서의 권한은 홍길동에게 있습니다. ©tesst.com
서울시 중구


소스


<form action="a.jsp">
	이름 : <input type="text" name="myname" required="required" autofocus="autofocus"><br>
	주소 : <input type="text" name="myaddr" autocomplete="on"><br>
	나이 : <input type="number" name="myage" placeholder="나이를 입력하세요"><br>
	날짜 : <input type="date"><br>
	시간 : <input type="time" min="09:00" max = "18:00"><br>
	이메일 : <input type = "email" placeholder="xx@xx형식으로 입력하세요"><br>
	<button>확인</button>
	</form>

실행결과

이름 :
주소 :
나이 :
날짜 :
시간 :
이메일 :

소스

<form>
	<fieldset>
	<legend>과목</legend>
	<input type="radio" value="국어" name="sub">국어<br>
	<input type="radio" value="영어" name="sub">영어<br>
	<input type="radio" value="수학" name="sub">수학<br>
	</fieldset>
	<button>클릭</button>
</form>

실행결과

과목 국어
영어
수학

- name값 동일하게 주면 하나만 선택가능

- fieldset, legend로 설정해주면 테두리 생김


저작자표시

'SK고용디딤돌' 카테고리의 다른 글

직무교육 5일차(CSS)  (0) 2017.07.14
직무교육 4일차(CSS)  (0) 2017.07.13
직무교육 3일차(CSS)  (0) 2017.07.12
직무교육 1일차(HTML)  (0) 2017.07.10
SK고용디딤돌 1, 2주차 후기  (0) 2017.07.08

+ Recent posts

티스토리툴바