HTML&CSS | CSS 자주사용하는 함수
페이지 정보
작성자 굿스웹 작성일19-07-18 07:11 조회763회 댓글0건관련링크
본문
position: fixed; 브라우저창
position: relative; 부모창
position: absolute; 자식창
position: fixed; 는 말그대로 브라우저 웹사이트 노출하는부분에 대상으로 고정합니다.
position: relative; 은 부모 창으로서 position: absolute; 잡아주는 역할로서 position: absolute; 을 사용할려면 꼭필요하죠.
노출 층 설정은 z-index:1 ~~~~ 숫자 높을수록 상위에노출됩니다.
예
<style>
.box{position: relative;width: 500px; height: 500px; background: #000}
.box2{position: absolute;width: 200px; height: 200px; z-index: 20;left: 60px;top: 60px;background: #fff}
.box3{position: fixed;width: 200px; height: 200px; z-index:10;left: 200px;top: 100px;background:#FF0000}
</style>
<div class="box">
<div class="box2"></div>
<div class="box3"></div>
</div>
box3은 box내부에있더라도position: fixed을 사용하면 상관없이 브라우저 창에 기준으로 위치를 잡아서 노출합니다. 또한box3은 z-index:10이고 box2가 z-index:20일경우 box2하위에노출됩니다.
position: relative;
position: absolute;
position: fixed;
border:1px solid #ccc
border:1px solid #0066FF
vertical-align:middle
min-height:500px;
[진하게]
font-weight: bold;
[정렬]
float:left;
text-align:center;
[마지막 라인 자르기]
*:before, *:after
.row:after, .row:before {
content: '';
display: block;
clear: both;
height: 0;
}
[공백]
padding:5px 0px 10px 0px;
↑→↓←
border:1px solid #dde4e9;
font-weight:bold; 진하게
margin:0 auto; width:200px;
font-size:1.6em;
letter-spacing:4px;
line-height:1.5em
text-decoration:none
textarea : 사이즈 잠금
resize: none;
- margin : 전체 여백을 설정합니다.
- margin-top : 위쪽 여백을 설정합니다.
- margin-bottom : 아래쪽 여백을 설정합니다.
- margin-left : 좌측 여백을 설정합니다.
- margin-right : 우측 여백을 설정합니다.
- border-width : 외곽선의 전체 굵기를 설정합니다.
- border-top-width : 위쪽 외곽선 굵기를 설정합니다.
- border-bottom-width : 아래쪽 외곽선 굵기를 설정합니다.
- border-left-width : 좌측 외곽선 굵기를 설정합니다.
- border-right-width : 우측 외곽선 굵기를 설정합니다.
- border-color : 외곽선 전체색을 설정합니다.
- border-top-color : 외곽선 위쪽색을 설정합니다.
- border-bottom-color : 외곽선 아래쪽색을 설정합니다.
오후 4:38 2015-07-21 border-left-color : 외곽선 좌측색을 설정합니다.
- border-right-color : 외곽선 우측색을 설정합니다.
- border-style : 외곽선의 전체스타일을 설정합니다.
└ dashed : 긴 점선으로 설정합니다.
└ dotted : 짧은 점선으로 설정합니다.
└ double : 두줄로 설정합니다.
└ groove : 외곽선이 입체적으로 들어가 보입니다.
└ hidden : 외곽선을 표시하지 않습니다.
└ inset : 외곽선 안쪽 전체가 들어가 보이게 합니다.
└ none : 외곽선을 표시하지 않습니다. 굵기가 0입니다.
└ outset : 외곽선의 안쪽 전체가 나와 보이게 합니다.
└ ridge : 외곽선이 입체적으로 나와 보이게 합니다.
└ solid : 단순한 선으로 설정합니다.
- border-top-style : 외곽선의 위쪽스타일을 설정합니다.
- border-bottom-style : 외곽선의 아래쪽스타일을 설정합니다.
- border-left-style : 외곽선의 좌측스타일을 설정합니다.
- border-right-style : 외곽선의 우측스타일을 설정합니다.
- border : 외곽선 전체의 굵기, 색, 스타일을 설정합니다.
*굵기, 색, 스타일을 공백으로 구분하며 순서는 상관없음. ex) border-top: 10px red solid;
- border-top : 외곽선 위쪽의 굵기, 색, 스타일을 설정합니다.
- border-bottom : 외곽선 아래쪽의 굵기, 색, 스타일을 설정합니다.
- border-left : 외곽선 좌측의 굵기, 색, 스타일을 설정합니다.
- border-right : 외곽선 우측의 굵기, 색, 스타일을 설정합니다.
- padding : 외곽선 안의 전체여백을 설정합니다. (하단 설정법 참조)
- padding-top : 외곽선 안의 상단여백을 설정합니다.
- padding-bottom : 외곽선 안의 하단여백을 설정합니다.
- padding-left : 외곽선 안의 좌측여백을 설정합니다.
- padding-right : 외곽선 안의 우측여백을 설정합니다.
- width : 해당내용의 너비를 설정합니다.
- height : 해당내용의 높이를 설정합니다.
- float : 텍스트나 이미지를 영역에 구애받지 않고 정렬합니다.
└ left : 좌측으로 정렬합니다.
└ right : 우측으로 정렬합니다.
└ none : 정렬하지 않습니다.
- clear : 텍스트나 이미지를 정렬할 수 없게 합니다.
└ none : 설정하지 않습니다.
└ left : 좌측정렬을 금지합니다.
└ right : 우측정렬을 금지합니다.
└ both : 양측정렬을 금지합니다.
- display : 해당내용을 나타낼지를 설정합니다.
└ none : 나타내지 않습니다.
└ block : 나타냅니다.
# margin, border, border-width, border-color,border-style, padding의 설정
*설정단위에는 pt, px, %, cm등의 단위와 thin(가는), medium(중간), thick(굵은)이 존재.
*전체여백의 설정은 설정 갯수에 따라 아래와 같이 변합니다. 공백으로 구분합니다.
- margin : 상하좌우;
- margin : 상하 좌우;
- margin : 상 좌우 하;
- margin : 상 우 좌 하;
ex)"margin : 10px 20px 10ox"는 상단/하단 10px, 좌욱 20px로 설정한 것과 같습니다.
<IMG WIDTH="15" height="15" SRC="./images/main/n01.gif" alt='<?php echo $rs_reg[CODE_DESC]?>'>
<html>
<head>
<style type="text/css">
<!--
#boxmargin {
background-color : #90d0f0;
margin-top : 10px;
margin-bottom : 10px;
margin-left : 10px;
margin-right : 10px;
}
#boxborder {
border-style : ridge;
border-color : blue;
border-top-width : 20px;
border-bottom-width : 20px;
border-left-width : 20px;
border-right-width : 20px;
width : 260px;
height : 120px;
}
#boxpadding {
background-color : #a0d0a0;
padding-top : 10px;
padding-bottom : 10px;
padding-left : 10px;
padding-right : 10px;
}
#element_width {
background-color : #d07090;
width : 160px;
height : 20px;
}
// -->
</style>
</head>
<body>
<div id="boxmargin">
바깥측 여백(margin)을 준 후 위치입니다.
<div id="boxborder">
<div id="boxpadding">
안쪽 여백(padding)을 주었습니다.
<div id="element_width">:: 내용1(element_width) ::</div>
</div>
<div id="boxpadding">
<div id="element_width">:: 내용2(element_width) ::</div>
</div>
</div>
바깥측 여백(margin)을 준 후 위치입니다.
</div>
</body>
</html>
[줄간격 조절하기]
<br style="line-height:12px;">
[게시판 코딩 줄바꿈]
내용이 긴 문장을 쓰는 입력칸
<textarea name=변수명 rows=행의길이 cols=열의길이 wrap="virtual" or "physical" or "off">
</textarea>
wrap=virtual
화면에 맞게 자동 줄바꿈, 전송시는 입력대로 전송
wrap=physical
화면에 자동 줄바꿈 및 전송시에도 줄바꿈
wrap=off
기본적으로 자동 줄바꿈 하지 않는다.
wrap=soft
디폴트이며, 텍스트는 줄바꿈하고 엔터문자(carriage return)나 줄공급(line feed) 없이 보여줌.
wrap=hard
텍스트가 줄바꿈하고, 엔터문자(carriage return)와 줄공급(line feed)하여 보여줌.
ul 에 margin-bottom: 20px 먹히지않고 li가벗어날떄
ul:after{clear: both;display: block; content: ""} 이렇게하면 잘적용됩니다.
position: relative; 부모창
position: absolute; 자식창
position: fixed; 는 말그대로 브라우저 웹사이트 노출하는부분에 대상으로 고정합니다.
position: relative; 은 부모 창으로서 position: absolute; 잡아주는 역할로서 position: absolute; 을 사용할려면 꼭필요하죠.
노출 층 설정은 z-index:1 ~~~~ 숫자 높을수록 상위에노출됩니다.
예
<style>
.box{position: relative;width: 500px; height: 500px; background: #000}
.box2{position: absolute;width: 200px; height: 200px; z-index: 20;left: 60px;top: 60px;background: #fff}
.box3{position: fixed;width: 200px; height: 200px; z-index:10;left: 200px;top: 100px;background:#FF0000}
</style>
<div class="box">
<div class="box2"></div>
<div class="box3"></div>
</div>
box3은 box내부에있더라도position: fixed을 사용하면 상관없이 브라우저 창에 기준으로 위치를 잡아서 노출합니다. 또한box3은 z-index:10이고 box2가 z-index:20일경우 box2하위에노출됩니다.
position: relative;
position: absolute;
position: fixed;
border:1px solid #ccc
border:1px solid #0066FF
vertical-align:middle
min-height:500px;
[진하게]
font-weight: bold;
[정렬]
float:left;
text-align:center;
[마지막 라인 자르기]
*:before, *:after
.row:after, .row:before {
content: '';
display: block;
clear: both;
height: 0;
}
[공백]
padding:5px 0px 10px 0px;
↑→↓←
border:1px solid #dde4e9;
font-weight:bold; 진하게
margin:0 auto; width:200px;
font-size:1.6em;
letter-spacing:4px;
line-height:1.5em
text-decoration:none
textarea : 사이즈 잠금
resize: none;
- margin : 전체 여백을 설정합니다.
- margin-top : 위쪽 여백을 설정합니다.
- margin-bottom : 아래쪽 여백을 설정합니다.
- margin-left : 좌측 여백을 설정합니다.
- margin-right : 우측 여백을 설정합니다.
- border-width : 외곽선의 전체 굵기를 설정합니다.
- border-top-width : 위쪽 외곽선 굵기를 설정합니다.
- border-bottom-width : 아래쪽 외곽선 굵기를 설정합니다.
- border-left-width : 좌측 외곽선 굵기를 설정합니다.
- border-right-width : 우측 외곽선 굵기를 설정합니다.
- border-color : 외곽선 전체색을 설정합니다.
- border-top-color : 외곽선 위쪽색을 설정합니다.
- border-bottom-color : 외곽선 아래쪽색을 설정합니다.
오후 4:38 2015-07-21 border-left-color : 외곽선 좌측색을 설정합니다.
- border-right-color : 외곽선 우측색을 설정합니다.
- border-style : 외곽선의 전체스타일을 설정합니다.
└ dashed : 긴 점선으로 설정합니다.
└ dotted : 짧은 점선으로 설정합니다.
└ double : 두줄로 설정합니다.
└ groove : 외곽선이 입체적으로 들어가 보입니다.
└ hidden : 외곽선을 표시하지 않습니다.
└ inset : 외곽선 안쪽 전체가 들어가 보이게 합니다.
└ none : 외곽선을 표시하지 않습니다. 굵기가 0입니다.
└ outset : 외곽선의 안쪽 전체가 나와 보이게 합니다.
└ ridge : 외곽선이 입체적으로 나와 보이게 합니다.
└ solid : 단순한 선으로 설정합니다.
- border-top-style : 외곽선의 위쪽스타일을 설정합니다.
- border-bottom-style : 외곽선의 아래쪽스타일을 설정합니다.
- border-left-style : 외곽선의 좌측스타일을 설정합니다.
- border-right-style : 외곽선의 우측스타일을 설정합니다.
- border : 외곽선 전체의 굵기, 색, 스타일을 설정합니다.
*굵기, 색, 스타일을 공백으로 구분하며 순서는 상관없음. ex) border-top: 10px red solid;
- border-top : 외곽선 위쪽의 굵기, 색, 스타일을 설정합니다.
- border-bottom : 외곽선 아래쪽의 굵기, 색, 스타일을 설정합니다.
- border-left : 외곽선 좌측의 굵기, 색, 스타일을 설정합니다.
- border-right : 외곽선 우측의 굵기, 색, 스타일을 설정합니다.
- padding : 외곽선 안의 전체여백을 설정합니다. (하단 설정법 참조)
- padding-top : 외곽선 안의 상단여백을 설정합니다.
- padding-bottom : 외곽선 안의 하단여백을 설정합니다.
- padding-left : 외곽선 안의 좌측여백을 설정합니다.
- padding-right : 외곽선 안의 우측여백을 설정합니다.
- width : 해당내용의 너비를 설정합니다.
- height : 해당내용의 높이를 설정합니다.
- float : 텍스트나 이미지를 영역에 구애받지 않고 정렬합니다.
└ left : 좌측으로 정렬합니다.
└ right : 우측으로 정렬합니다.
└ none : 정렬하지 않습니다.
- clear : 텍스트나 이미지를 정렬할 수 없게 합니다.
└ none : 설정하지 않습니다.
└ left : 좌측정렬을 금지합니다.
└ right : 우측정렬을 금지합니다.
└ both : 양측정렬을 금지합니다.
- display : 해당내용을 나타낼지를 설정합니다.
└ none : 나타내지 않습니다.
└ block : 나타냅니다.
# margin, border, border-width, border-color,border-style, padding의 설정
*설정단위에는 pt, px, %, cm등의 단위와 thin(가는), medium(중간), thick(굵은)이 존재.
*전체여백의 설정은 설정 갯수에 따라 아래와 같이 변합니다. 공백으로 구분합니다.
- margin : 상하좌우;
- margin : 상하 좌우;
- margin : 상 좌우 하;
- margin : 상 우 좌 하;
ex)"margin : 10px 20px 10ox"는 상단/하단 10px, 좌욱 20px로 설정한 것과 같습니다.
<IMG WIDTH="15" height="15" SRC="./images/main/n01.gif" alt='<?php echo $rs_reg[CODE_DESC]?>'>
<html>
<head>
<style type="text/css">
<!--
#boxmargin {
background-color : #90d0f0;
margin-top : 10px;
margin-bottom : 10px;
margin-left : 10px;
margin-right : 10px;
}
#boxborder {
border-style : ridge;
border-color : blue;
border-top-width : 20px;
border-bottom-width : 20px;
border-left-width : 20px;
border-right-width : 20px;
width : 260px;
height : 120px;
}
#boxpadding {
background-color : #a0d0a0;
padding-top : 10px;
padding-bottom : 10px;
padding-left : 10px;
padding-right : 10px;
}
#element_width {
background-color : #d07090;
width : 160px;
height : 20px;
}
// -->
</style>
</head>
<body>
<div id="boxmargin">
바깥측 여백(margin)을 준 후 위치입니다.
<div id="boxborder">
<div id="boxpadding">
안쪽 여백(padding)을 주었습니다.
<div id="element_width">:: 내용1(element_width) ::</div>
</div>
<div id="boxpadding">
<div id="element_width">:: 내용2(element_width) ::</div>
</div>
</div>
바깥측 여백(margin)을 준 후 위치입니다.
</div>
</body>
</html>
[줄간격 조절하기]
<br style="line-height:12px;">
[게시판 코딩 줄바꿈]
내용이 긴 문장을 쓰는 입력칸
<textarea name=변수명 rows=행의길이 cols=열의길이 wrap="virtual" or "physical" or "off">
</textarea>
wrap=virtual
화면에 맞게 자동 줄바꿈, 전송시는 입력대로 전송
wrap=physical
화면에 자동 줄바꿈 및 전송시에도 줄바꿈
wrap=off
기본적으로 자동 줄바꿈 하지 않는다.
wrap=soft
디폴트이며, 텍스트는 줄바꿈하고 엔터문자(carriage return)나 줄공급(line feed) 없이 보여줌.
wrap=hard
텍스트가 줄바꿈하고, 엔터문자(carriage return)와 줄공급(line feed)하여 보여줌.
ul 에 margin-bottom: 20px 먹히지않고 li가벗어날떄
ul:after{clear: both;display: block; content: ""} 이렇게하면 잘적용됩니다.
[주소복사] https://www.goodsweb.kr/?u=D41Y8rWu
SNS 알리기
핀터레스트
텔레그램로
블로그로
페이스북
트위터
카카오스토리
카톡 공유
관련 블로그
로딩중