css 개념정리 (2)

전편 저 css 개념 정리 (1)에 이어서 알아보자

 

position 위치 값의 변화를 준다. 기본값으로 static을 갖는다. 

값을 relative로 바꾸면 상대적으로 자신의 위치에서 변화가 일어난다.

    <style>
        .a{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            margin: 0px;
            position: static; 
        }
        .b{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            margin: 0px;
            position: relative;
            top: 5px;
            left: 100px; 
        }
    </style>
 
    <div class='a'></div>  
    <div class='b'></div>  

각각의 위치결과

absolute 자신의 기준점인 static을 갖고 있지 않은 상위 부모를 기준으로 갖는다.

    <style>
        .a{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            margin: 0px;
            position: relative;
            left: 50px;
        }
        .b{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            margin: 0px;
            position: absolute;
        }
    </style>
        <div class='b'>b</div>  
        <div class='a'>a</div>  

absolute를 하게되면 b와a는 서로다른 위치에 존재

fixed는 상단의 배너의 상단 고정처럼 absolute와 비슷한 거 같지만 스크롤을 내려도 계속해서 보이는 그 위치에 존재한다.

내려도 해당위치고정

이밖에도 floatm flex 등 layout 을 담당할 수 있는 기능들, 또 css의 속성들은 아래의 링크를 참고하면 좋을 것 같다

CSS 참고서

css만을 사용하다보면 불편한 부분이 있다. 예를 들어 변수라던지 순서라던지 등등..

 

이러한 점을 해결하기 위해서 전처리기가 등장했는데 Sass, Less 등이 있다.

 

이런 것들은 css의 불편했던 부분을 해소할 수 있다.

 

css 에서 opactiy를 사용하면 자식까지 투명해 진다 .

이를 방지하기 위해서 rgba에 4번째 인자에 1-0 까지 투명도를 줄수있다.