· 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

+ Recent posts

티스토리툴바