CSS(Cascading Style Sheet) 문법

   CSS 기본 문법

 

 

   CSS 구성요소

1. 선택자

2. 속성

3. 값

 

선택자 = 어떠한 태그에 css를 적용할 건지 선언

속성 = 선택한 태그에서 바꿀 부분 지정

값 = 속성에 대한 값으로써 다 적고 ;를 붙여야함.

 

   선택자(selector)

1. id = #idName

2. class = .className

3. 태그 = 태그명

 

https://flukeout.github.io/  

css 선택자를 게임의 형식을 통해서 공부할 수 있는 사이트입니다.

 

 

  선택자 예시

<style>

 #idSel {font-weight:bold; color:red;}  

 .classSel {font-size:6px;}

 p {font-size:8px;}  

</style>

 

   자손 노드(모든 하위 노드)

<style>

/* div태그 class가 "parent"인 하위 노드의 모든 P태그 */

   div.parent p {font-weight:bold;}

</style>

   자식 노드(바로 아래 하위 노드)

<style>

/* div태그 class가 "parent"인 하위 노드의 P태그 */

   div.parent > p {font-weight:bold;}

</style>

 - 자식 노드는 바로 아래 하나의 노드만 적용됨.

 

   CSS 문법

 

   텍스트 숨기기 - https://yeoninim.tistory.com/36

 

display:none , visibility:hidden 으로 숨기면 스크린 리더가 해당 내용을 읽을 수 없다.
이럴 때 CSS 클립을 사용한다.

 

.hidden { 
 position:absolute !important;   
 width:1px;  
 height:1px;  
 overflow:hidden; 
 clip:rect(1px 1px 1px 1px); 
 clip:rect(1px, 1px, 1px, 1px); 
} 
- position:absolute;  : 레이아웃에 영향을 끼치지 않도록... 
- width:1px;, height:1px;  : 스크린 리더가 읽을 수 있도록... 
- clip:rect(1px, 1px, 1px, 1px);  : 눈에 보이는 부분 제거

 

 

   스크롤바 생성

 

박스 길이보다 내용이 더 길때 스크롤 바를 생성하는 법이다.

.divs {

  overflow : scroll;   /* 내용이 잘릴 때만 스크롤바가 보인다. */

  overflow : auto;    /* 내용이 길지 않아도 항상 스크롤바가 보인다. */

  overflow : hidden; /* 내용이 넘치면 자른다. 자른 부분은 안보인다. */

  overflow : visible; /* 기본 값 */



  overflow-x : auto;  /* 좌우만 스크롤바가 보인다. */

  overflow-y : auto; /* 상하만 스크롤바가 보인다. */

  display : scroll;     /* ?? */

}

   위치 고정 

화면이 넘어가도 , 스크롤을 이동해도 그 위치에 그대로 고정되어 있다.

position:fixed;  

   여백 추가

margin-left:1px; 

margin-right:1px; 

margin-top:1px; 

margin-bottom:1px;

relative 위치는 상대적 위치에 해당하는 요소를 밀지만 margin는 전체를 민다.

 

   마우스 커서 변경

cursor:pointer;

옵션

   상하 라인 주기(밑줄,윗줄)

 

span { 
display:inline-block; 
border-top:thick double skyblue; 
border-bottom:thick double skyblue; 
padding-bottom : 2px; /* 밑줄 간격을 벌린다 */
}

 

   이미지 위에 글씨 삽입

<div class="entry">
<h1 class="title">안녕하세요.</h1>
</div>

.entry { width : 100%; height: 100%; background-image: url('이미지주소') }
h1.title { font-size:15px; textalign="center"; }

 

   배경색 투명

.class1 { opacity:0.8; } <!-- 자식 요소까지 투명하게  -->
.class2 { background:rgba(0,0,0,0.5); } <!-- 해당 요소만 투명하게 -->

 

 

   배경 이미지 반복 여부 & 반복 방향

background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit

기본값 : repeat
상속 : No
애니메이션 : No

repeat : 가로 방향, 세로 방향으로 반복합니다.
repeat-x : 가로 방향으로 반복합니다.
repeat-y : 세로 방향으로 반복합니다.
no-repeat : 반복하지 않습니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

 

   깊이 설정( 상단에 위치시키기 )

.head {
z-index: 9999;
}

 

 

   폰트 설정

 

홈페이지를 만든사람의 컴퓨터에 있는 폰트가 이용하는 사람의 컴퓨터에도 있어야만
똑같은 글씨체로 볼수가 있다.

p { font-family: HY강서체, 새굴림, 굴림 }

위의 CSS 문을 풀이하면 HY강서체 폰트로 웹페이지를 보여주는데,
만약, 해당 이용자가 HY강서체 폰트가 없으면,
새굴림을 보여주고, 새굴림도 없으면 굴림으로 보여주라는 뜻이다.

 

   넘치는 텍스트 생략 기호로 표시

#text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;  /*줄바꿈 No*/
width: 500px;
height: 20px;
}

글자가 넘치면 뒤에 글자는 ...으로 표시된다.  넘치는 글자 길이는 width로 조정하자. 

 

 

   드래그, 더블클릭, 블럭지정 막기

div {
-ms-user-select: none;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}

 

 

   드래그 색 변경

::selection {
background-color: black;
color: yellow;
}

 

   특정 문장 삽입

/* content 앞에 추가 */ 
.test:after {
content : "123";
}

/* content 뒤에 추가 */ 
.test:before {
content : "456";
}
/* 엔터 - white-space:pre를 명시하고 
content 원하는 부분에 개행 문자 \A를 삽입 */
.test:after {
content : "\A123";
white-space:pre;
}