CSS속성 3편 ( 글자 + 위치 속성 )

1편 - [Web Programming] - CSS 속성 1편 ( 단위 + 박스 속성 )

2편 - [Web Programming] - CSS 속성 2편 ( display + 배경 속성 )

3편에서는 글자 속성과 위치 속성을 다뤄보겠다. 😊

HTML 역사를 살펴보면 대학에서 원격으로 논문을 제출 하는 용도로 만들어졌다.

따라서 글자와 관련된 속성이 굉장히 많다.

font-size 는 말그대로 1편에서 다룬 크기 단위를 사용해서 지정해 주면 된다.

font-family 는 글꼴을 지정해 준다. 여기서는 조심해야할 부분이 바로 사용자 컴퓨터에 설치된 글꼴을 입력 할 수 있다는 것이다.

웹 페이지를 만들 때 내 컴퓨터에는 설치된 글꼴일 수 있지만 사용자의 컴퓨터에 없을 수 있다.

이러한 경우를 고려해 font-family 속성을 여러개 입력하면 웹 브라우저가 지정된 여러개의 글꼴 중

사용자의 컴퓨터에 설치된 글꼴을 찾아 보여준다.

여기서 또 생각 할 수 있는게 다국적 사용자를 대상으로 웹 페이지를 제공할 경우다.

이런 경우 font-family 속성의 가장 마지막에 Serif ( 명조체 ), Sans-serif ( 고딕체 ), Mono space ( 고정 폭 글꼴 )을 사용한다.

font-style 과 font-weight 는 글자의 기울기나 두께를 지정해주는 역할을 한다.

예시) font-style: italic ( 기울기 ), font-weight: bold ( 굵게 )

다음은 글자의 정렬과 관련된 text-align 이다.

center, end, left, right 등과 같은 키워드를 사용 할 수 있다.

여기서 지난 번과 같이 span 형식에서는 text-align 속성이 적용이 되지 않는다.

span 태그는 너비가 존재 하지 않기 때문이다.

line-height 속성은 글자의 높이를 지정하는 속성으로 최근에는 수직 중앙 정렬할 때 주로 사용한다.

text-decoration 은 링크의 밑줄을 제거할 때 사용 할 수 있다.

a 태그에 href 속성을 지정하면 글자에 밑줄이 생기는 것을 볼 수 있다.

이를 제거 하기 위해서 text-decoration: none; 을 지정하면 된다.

---

이어서 위치 속성에 대해 알아보자 😸

요소의 위치는 두 가지 방법으로 설정 된다.

절대 위치 좌표 : 요소의 X 좌표와 Y좌표를 설정해 절대 위치를 지정

상대 위치 좌표 : 요소를 입력한 순서에 따른 상대 위치를 지정       

위와 같이 태그의 위치 설정 방법을 변경할 때는 position 속성을 사용한다.

아래의 예제를 보자

absolute 속성을 주고 위치를 설정해 주었다.

만약 박스들의 위치를 바꿔주고 싶다면 z-index 속성을 사용하면 된다.

⭐ 다음은 중요한 위치 속성 공식이다. ⭐

위와 같이 작성 해보면 

이와 같은 문제점이 생길 것이다.

이는 position 속성에 absolute 키워드를 적용하면 부모 태그가 영역을 차지하지 않는다.

따라서 부모 태그가 영역을 차지 하게 하려면 우리는 부모 태그에 height와 width 속성을 지정해 주어야 한다.

이제 부모 태그가 영역을 차지하고 있지만 내부의 요소가 부모의 범위를 벗어나 버렸다.

이때 사용하는 속성이 overflow다.

- 끝 :) -