CSS

<목차>

1. 문법

2. 자주 사용하는 스타일 속성 및 값

 

 

1. 문법

html이 웹페이지의 구조를 위한 내용이면 CSS는 모양을 위한 시트이다. 브라우저의 요소에 모양 즉, 원하는 스타일을 적용 시킨다. css는 아래의 코드블럭 내용처럼 구성된다.

선택자 {
    속성 : 값
}

 

선택자 : 어떤 요소에 어떤 스타일을 적용 시킬 것인지를 명시한다. 예를들어 <div></div>태그에 스타일을 적용시려면 선택자에 div를 적으면 된다.

 

선택자의 종류

* {} 모든 요소의 선택자 - 모든 태그에 스타일을 적용시킨다.
div {} 유형 선택자 - 모든 div 태그에 스타일을 적용시킨다.
.class {} 클래스 선택자 - 공통된 이름을 가지고 있는 클래스들에 스타일을 적용시킨다.
#id {} 아이디 선택자 - id에 사용되는 이름은 중복될 수 없으며, id이름을 가지고 있는 태그에 스타일을 적용시킨다.

 

결합자 : 두개 이상의 선택자를 연결해서 스타일을 적용시키기 위해 사용된다.

 

결합자의 종류

 

 자손 결합자(" ") : 한 칸의 공백 문자로 표현하며, 두 개의 선택자를 조합하여, 뒤쪽 선택자 요소의 조상에 앞쪽 선택자 요소가 존재할 경우 선택한다.

 

자식 결합자(>) : 두 개의 CSS 선택자 사이에 위치하여 뒤쪽 선택자의 요소가 앞쪽 선택자 요소의 바로 밑에 위치할 경우에만 선택한다.

 

인접 형제 결합자(+) : 앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택한다.

 

일반 형제 결합자(~) : 두 개의 선택자 사이에 위치하여 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택한다. 두 요소가 서로 붙어있지 않아도 사용이 가능하다.

 

 

 

2. 자주 사용하는 스타일 속성 및 값

 

.box {
    display : block;
    /* block은 블록의 요소, 화면의 한줄을 다 차지한다. div의 기본값 */

    display : inline;
    /* 인라인 요소 span, a등 인라인 요소를 가지고 있다. 요쇼의 내용의 크기만큼 차지한다. */

    display : flex;
    /* 이 속성이 있는 자식 요소의 정렬 방식을 정한다. */

    display : none;
    /* 화면에서 요소가 보이지 않게 지운다. display 속성을 none으로 하고 요소 선택을 하면 선택이 되지 않는다. */

    display : inherit;
    /* 부모의 속성을 가져와서 값을 적용한다. */

    display : initial;
    /* 태그가 원래 가지고 있던 속성으로 초기화 */
}

.wh {
    width : 100px;
    /* 태그의 너비 */

    height : 100px;
    /* 태그의 높이 */

    width : max-content;
    /* 자식 내용의 크기만큼 너비를 차지한다. */

    width : min-content;
    /* 자식 내용의 최소만큼 너비를 차지한다. */

    max-width : 100px;
    /* 설정한 너비 이상으로 태그의 너비가 넓어질 수 없다. 최대 너비를 지정 */

    min-width : 100px;
    /* 설정한 너비 이하로 너비의 크기가 줄어들지 않는다. 최소 너비를 지정 */
}

.content {
    width : 100px;
    height : 100px;

    overflow : hidden;
    /* 자식 태그가 부모 영역 이상으로 넘어가면 보이지 않게 처리 */

    overflow: scroll;
    /* 자식 태그가 부모의 영역 밖으로 나왔을 때 스크롤 효과를 준다. */

    overflow-x: hidden;
    /* 좌우로 자식태그가 넘쳤을 때 안보이게 처리 */

    overflow-x: scroll;
    /* 좌우로 자식태그가 넘어가면 스크롤 처리 */

    overflow-y: hidden;
    /* 자식태그가 아래로 넘어가면 안보이게 처리 */

    overflow-y: scroll;
    /* 자식태그가 아래로 넘어가면 스크롤 처리 */

    opacity: 0.1;
    /* 태그의 투명도를 설정 할 수 있다.  1 === 100% 0.1 === 10% */


    /* text style ---------------------------------------- */

    font-size: 16px;
    /* 태그의 내용에서 글자의 크기를 지정 */

    font-weight: 500;
    /* 태그의 글자의 굵기 지정 */

    color: red;
    /* 태그의 글자의 색 지정 */

    text-align: center;
    /* 글자 가운데 정렬 */

    text-align: end;
    /* 글자 오른쪽 정렬 */

    text-align: start;
    /* 글자 왼쪽 정렬 */

    text-decoration: overline;
    /* 택스트에 선을 추가한다. */

    text-decoration: underline;
    /* 텍스트에 밑줄을 추가한다. */

    text-decoration: none;
    /* 텍스트 꾸밈 요소 제거 */

    letter-spacing: 10px;
    /* 글자의 간격 조절 */

    /* 요소 간격 조절 ---------------------------------- */
    margin: 1px;
    /* 요소의 외부 간격 */
    /* top left right bottom */

    margin: 1px 2px;
    /* top bottom == 1px, left right == 2px */

    margin: 1px 2px 3px 4px;
    /* top == 1px, left == 2px, right == 3px, bottom == 4px */

    padding: 1px;
    /* 요소의 내부 간격 */
    padding: 1px 2px;
}