CSS basics - layout

가상 클래스 선택자 pseudo class selector

class 선택자는 id 선택자도 아니고 tag 선택자도 아니다. 

class 선택자처럼 동작하지만 class 선택자는 아니고 여러가지 특수한 선택들을 하는 선택자로 

각각의 엘리먼트들의 상태에 따라서 엘리먼트를 선택하는 선택자라고 할 수 있다. 

 

 

:link            - 방문한 적이 없는 링크

:visited        - 방문한 적이 있는 링크

:hover         - 마우스를 롤오버 했을 때

:active         - 마우스를 클릭 했을 때

:focus          - tap키를 통해 focus를 이동했을 때 

 

 

Cascading : 적용 우선순위

웹브라우저 < 사용자 < 저자

 

1. style attribute

2. id selector

3. class selector

4. tag selector

 

*** !important 를 삽입해주면 우선순위를 높여줄 수 있다. 

 

 

Font size

px : 고정된 폰트의 크기를 지정할 때 사용한다.

em / rem : 사용자가 브라우저의 설정을 바꾸면 그 설정에 따라 폰트의 크기가 달라진다. 

사용자가 페이지의 폰트를 가변적으로 변경할 수 있도록 할 때 사용한다. 

최근에는 rem을 사용하는 것이 일반적이다.

사용자가 브라우저의 글꼴 크기를 바꿨을 때, rem은 변경되지만 px은 바뀌지 않는다. ( 줌을 했을 경우에는 똑같이 반응하지만, 브라우저의 옵션에서 폰트의 크기를 변경할 때는 rem만 적용된다. )

 

font-weight : 폰트의 두께를 조절한다.

line-height : 행과 행 사이의 간격을 조절한다. px보다는 상수를 사용하는 것이 좋다.

Web-font는 head태그에 link href를 삽입하고 사용하면 된다.

 

Color

color 속성을 지정하는 방법에는 다음 3가지 방법이 있다. 

• color name
• hex
• rgb

 

** <meta name="viewport" content="width=device-width, initial-scale=1.0">

이 메타태그를 삽입하면 모바일 환경에서도 보기좋은 형태로 화면은 구현할 수 있게 해준다.

 

  layout  

box-sizing

width attribute는 content의 크기를 결정한다. 

하지만 border 값이 포함되면 어떤 엘리먼트들의 크기를 예측하기 까다로워지는데 이런 문제 때문에 생겨난 것이 box-sizing이다. 

box-sizing : content-box; 

content의 크기만큼 width와 height 값이 결정된다.

box-sizing: border-box;

border의 크기를 포함하여 엘리먼트의 크기가 결정된다. 

 

마진겹침 (margin-collapsing)

부모태그가 시작적으로 아무 효과도 없는 투명한 상태가 되면 자식태그와 부모태그의 마진값이 합쳐지는 결과를 갖는다. 

(margin 값이 큰쪽의 margin 값이 사용된다.)

 

포지션 (Position) - relative VS static

offset attribute들은 해당 속성에서부터 얼마만큼 떨어져 있는 지를 나타내준다.

ex)

left: 100px;                왼쪽에서부터 100px 떨어져있다.

top: 100px;                위에서부터 100px 떨어져있다.

right: 100px;                 오른쪽에서 100px떨어져있다. 

bottom: 100px;              아래에서 100px 떨어져있다.

** left와 right이 중복되면 left가 우선되고, top과 bottom 이 중복되면 top이 우선한다.

 

이러한 offset attribute들을 적용하기 위해서는 position: relative; 코드를 넣어줘야한다.

그러면 부모를 기준으로 offset attribute 값만큼 이동한다.

position: static; 는 기본값으로 offset 값을 무시하고 자신들의 원래 위치해야하는 곳에 위치하도록 한다.

포지션 (position) - absolute

position: absolute; 는 부모의 위치를 기준으로 자신을 생성한다. 위치의 본값이 html에 대해 설정되어있지 않고 자신이 있어야하는 위치에 있도록 설정되어있기 때문이다. 

때문에 inline block으로만 바뀌고 위치상의 변화는 없다. 

 

 

만약 position: absolute; 코드를 작성하고 offset attribute 값을 주면 html을 기준으로 자신의 위치를 결정한다.

 

 

 

element의 position을 absolute로 하게 되면 자식태그는 더 이상 부모태그의 소속이 아니게 된다. 링크가 끊기면서 부모와 무관한 태그가 된다. 

때문에 위 예시에서 me가 자신의 content만큼 크기가 작아진 것이다.

 

 

예시

 

위와 같은 코드를 예시로 들 때, parent는 어떤 position 값도 주지 않았기 때문에 그대로 통과하고 grand에는 position: relative; 코드가 있기 때문에 grand를 기준으로 position offset값을 먹이게 된다.

position 값으로 static이 아닌 다른값을 주면 absolute로 되어 있는 element는 position 값이 static이 아닌 부모의 위치를 기준으로 offset 값을 지정한다.

 

 

 

포지션 (position) - fixed

position: fixed; 는 어떤 특정한 element를 화면에 고정시켜서 Scroll로부터 완전히 독립되게 하는 것이다. 

 

 

 만약 fixed된 element에 의해 다른 element들이 가려진다면 fixed의 크기만큼 padding 값을 주면 해결할 수 있다.