1. CSS 기본 style 변경하기
CSS의 글자색, 배경색, 글꼴을 바꾸는 방법을 알아보자.
color
글자색은 color, 배경색은 background-color로 값을 부여할 수 있다. 색을 표현하기 위해 rgb 값을 이용하는데, 각각 0~255까지의 값을 나타낼 수 있다. 만약 255,0,0을 준다면 빨간색이 나오는 것이다.
그리고 이 값을 16진수 표기법으로 사용할 수 있다.(#ff0000) 그리고 같은 값이 반복되는 경우 축약형으로 쓸 수 있는데 예를들어 #ffff00인 경우 #ff0으로 축약하여 사용할 수 있다.
font
글꼴의 경우 font-family를 통해 값을 부여해 줄 수 있다. 예를들어 font-family:"Gulim";을 사용하면 굴림체를 사용하게 되는 것이다.
글꼴의 사이즈를 변경해 줄 수 있는데 픽셀을 직접 부여해 주거나 상대적인 크기를 정해 줄 수 있다. 픽셀을 직접 부여하는 것은 font-size:16px 처럼 하면 된다.
상대적인 크기를 정해주기 위해서는 em을 사용할 수 있는데, 기준값에 대해 1em이면 1배, 2em이면 2배 이런식으로 크기를 정해주는 것이다. 만약 기준값이 16px라면 2em은 32px가 되는 것이다. 보통 기준값의 기본값은 16px인데, 상위 노드에서 글꼴의 사이즈를 정해줬다면 그 사이즈가 기준이 되는 것이다. 즉, 사이즈 역시 상속을 받기 때문에 부모 노드의 사이즈를 기준값으로 하는 것이다.
예시
위의 그림에서 div 태그의 속성들을 설정해 주었다. 배경색에 ff0를 넣어 노란색으로 해 주었고, 글꼴은 굴림체, 글자 크기는 16px로 해 주었다.
그리고 myspan에 대하여 글자 색을 f00으로 빨간색, 글자 크기를 2em으로 상위 노드인 div가 16px로 설정되었기 때문에 32px가 되도록 해 주었다.
2. element 배치하기(CSS layout)
엘리먼트들을 화면에 배치하는 것을 layout 작업 또는 rendering 과정 이라고 한다. 기본적으로 엘리먼트들은 위에서 아래로 배치 된다. 하지만 배치를 다양하게 해야 웹 사이트를 표현할 수 있기 때문에 여러 속성들을 활용하여 배치를 다양하게 할 수 있다.
주로 사용되는 속성은 display, position, float이 있다.
display(block, inline, inline-block)
display로 엘리먼트가 배치되는 방식을 정해줄 수 있다.
display:block
display 속성이 block이거나 inline-block인 경우 그 엘리먼트는 위에서 아래로 쌓이게 된다. 일반적으로 div와 p를 포함한 대부분의 태그들이 block형태로 쌓이게 된다.
display:inline
display 속성이 inline인 경우 좌에서 우로, 아래방향을 향하여 빈자리를 차지하며 흐른다. 높이와 넓이를 지정해도 반영이 되지 않는다. 주로 span, a, strong 태그들이 inline형태로 배치된다.
만약 display 속성을 정해준다면 정해준 속성에 맞게 배치가 되는 것을 확인할 수 있다.
position(static, relative, absolute, fixed)
엘리먼트를 좀 더 다양하게 배치할 수 있다.
static
position의 기본 속성은 static이다. 그냥 순서대로 배치된다.
relative
원래 자신이 위치해야 할 곳을 기준으로 상대적인 값을 부여할 수 있다. top/left/right/bottom 으로 위치를 설정할 수 있다.
그림을 보면 원래 relative가 위치해야 할 곳이 static 아래이므로 그 곳을 기준으로 벌어진 것을 확인할 수 있다.
absolute
기준점으로 부터 top/left/right/bottom 으로 위치를 설정한다.
기준점은 단순히 상위 엘리먼트가 아니라 상위 엘리먼트 중 static이 아닌 position을 기준으로 한다.
그림과 같이 원점으로 부터 왼쪽으로 130px, 위로부터 30px 떨어진 것을 확인할 수 있다.
아래와 같이 상위 엘리먼트를 relative로 해 주면 relative로 부터 정해준 거리만큼 벌어진 결과를 확인할 수 있다.
상위 엘리먼트의 속성이 static이 아닌 것이 되어서 상위 엘리먼트를 기준으로 벌어진 것을 확인할 수 있다. 만약 상위 엘리먼트중 static이 아닌 것이 없다면 그냥 body를 기준으로 이동한다.
fixed
fixed는 viewpoint(전체화면) 좌측 위 모서리를 기준으로 위치가 설정된다. 즉 스크롤을 하여 화면을 내리더라도 보이는 화면 기준으로 위치가 설정되어 있기 때문에 화면에서 사라지지 않고 계속해서 보이는 것이다.
만약 wrap class에 style을 줘서 postion을 relative로 하고, 위치를 변환한다면 다른 것들은 wrap의 위치에 따라 변하지만 fixed는 고정되어 있는 것을 확인할 수 있다.
출처 : 부스트코스 웹 프로그래밍(풀스택)
https://www.boostcourse.org/web316/lecture/254263
