[CSS 기본]

!·2022년 7월 6일

웹 스터디

목록 보기

5/5

포스팅을 시작하기 앞서, CSS 에 대한 예제 및 속성값은 여기에서 확인할 수 있습니다. 또한 CSS 연습게임 은 여기에서 해볼수 있습니다.

CSS란?

Cascading Style Sheet 의 약자로, cascading은 흐르는, 폭포, 연속적인의 뜻을 가지고 있다.
기본적으로 html 과 함께 웹 사이트 를 구성하는 중요한 뼈대이다.
그렇다면 왜 cascading 이라는 단어를 쓸까? 그것은 우리가 css를 정의하는 방식에 있다. 이 때 크게 3가지로 나눌 수 있으며, 가장 상위에 위치하는 단계가 author style 이다. 이것은 개발자가 직접 작성한 .css 파일을 의미한다. 두번째 단계는 user style 이다. 유저 가 설정하는 밤/낮 모드, 한/영 번역모드 등과 같이 유저가 정의하는 스타일인 셈이다. 마지막은 brower style 이다. 말그대로 browser 가 정의하는 스타일이다. 따라서, 상위 단계부터 하위 단계까지 순서대로 cascading 하는 것으로 스타일링된다.

셀렉터

html 의 어떤 태그를 선택할지 결정하는 문법이다.

* // 모든 태그를 의미한다.
Tag // 태그명을 명시하면 해당하는 모든 태그를 의미한다.
#Id // #뒤에 Id를 명시하면 해당하는 모든 Id를 의미한다.
.class // .뒤에 class를 명시하면 해당하는 모든 class를 의미한다.
:state // :뒤에 state를 명시하면 해당하는 모든 state를 의미한다.
[] // []안에 명시한 attribute를 갖는 모든 attribute를 의미한다.

<html>
<body>
  <ol>
    <li id = "special">First</li>
    <li>Second</li>
  </ol>
  <button>Button 1</button>
  <button>Button 2</button>
  <ol>
    <div class = "red"></div>
    <div class = "blue"></div>
    <a href = "http://www.naver.com">Naver</a>
    <a href = "http://www.daum.com">Daum</a>
    <a>Empty</a>
</body>
</html>

* { 
  color:green;
}   
li {
  color:blue;
}
li#special {
  color:pink;
}
.red {
  background:Yellow;
  padding: 20px 20px;
  padding-top: 20px;
  margin: 20px;
  width:100px;
  height:100px;
}
button:hover { // 버튼 태그에 마우스를 올린다면..
	color:red;
    background: beige;
}
a[href="http://www.naver.com] {
	color:purple;
}

display

<body>
  <!--Block-level -->
  <div></div>
  <div></div>
  <div></div>
  
  <!--Inline-level -->
  <span></span>
  <span></span>
  <span></span>
</body>

div, span{
  width : 20px;
  height : 20px;
  margin : 20px;
}
span {
  background : blue;
  display : block;
}
div {
  background : red;
}

span 태그는 내용물이 없으면 보이지 않는다.
display 프로퍼티를 block로 둬, 보이게 할 수 있다.
inline 값은, 내용물의 유무에 따라 크기 조절을, block 값은 내용물에 상관없이 결과가 나타난다.

position

.container {
  background: yellow;
  left : 20px;
  top : 20px;
  position : relative;
}
.box{
  background : blue;
  position : absolute;
}

static : 디폴트 포지션 값이며, 레이아웃을 고정시키는 position이다.
relative : width, height, margin 등의 이동을 적용시킬 수 있는 position이다.
abosolute : 해당 물체를 담고 있는 컨테이너를 기준으로 이동을 적용시키는 것을 말한다. 위의 경우에는 class가 .container인 경우이다.
fixed : 윈도우를 기준으로 이동을 적용한다.
sticky : 스크롤링이 되어도 위치가 유지된다.

postion의 기능을 구현하기위해 과거에는 jquery 나 bootstrap 등을 이용해 구현하였다. 오늘날에는 기본적으로 제공해주고 있다. 하지만, 일부 브라우저들은 지원이 안되는 경우가 있다. 이를 확인하려면 여기에서 확인이 가능하다.