이 시리즈는 필자가 웹프로그래밍을 겪으면서 생각처럼 잘안되고 짜증나는 css를 효율적이게 쓰기위해서 만든 시리즈이다.
여기에 들어온 여러분들도 이 쓰레기 같은 css의 고통을 같이 덜수 있기를 바란다.
참고:
css지옥에서 탈출하자(1) - 인라인 요소(inline element)와 블록 요소(block element)는 다르다.
css지옥에서 탈출하자(2) - display와 인라인(inline), 블록(block) 그리고 div를 display를 이용해서 옆으로 나열
css지옥에서 탈출하자(3) - display와 flex, 세로로 뭔가 배치하고 싶다면 flexbox를 쓰자, (추가로 div를 flex로 나열, 비율에 맞게 div 세로로 배치)
css지옥에서 탈출하자(5) - 엘리먼트를 드래그 앤 드랍(drag and drop)으로 자유롭게 옮긴다고?
css지옥에서 탈출하자(6) - css로 삼각형을 그려보자
css지옥에서 탈출하자(7) - display inline-block 나열시 공백 제거하기
css지옥에서 탈출하자(8) - div에 transition을 줘서 부드럽게 애니메이션 효과로 움직이기
css지옥에서 탈출하자(9) - 스크롤바가 없는 스크롤을 만든다?
css지옥에서 탈출하자(10) - 현재 내가 얼마나 스크롤(scroll)했는지 부여주고 싶을 때, 진행도(progressed) 표시
css지옥에서 탈출하자(11) - css로 원을 그려보자. 원속의 원 만들기(과녁처럼)
css지옥에서 탈출하자(12) - 반응형과 미디어 쿼리 완전 기초
css지옥에서 탈출하자(13) - table에서 문자열 조정하기(word-break , word-wrap, white-space)
css지옥에서 탈출하자(14) - 특정 element를 우클릭했을시 새탭과 새창 고르는 창(context menu)뜨게하기
svg에서 글자를 가운데로 정렬하는 방법을 검색해 봤는데 한국에서는 잘 안나오는거 같다.
아직 svg를 쓰는데 익숙하지는 않은것 같다. 그래서 대부분 svg예제에서보면 x,y로 위치를 줘서 배치를 하는 것을 볼 수 있다.
그런데 위치를 상대적으로 배치하는것 역시 중요하다. 그래서 수직 수평 중앙정렬을 한번 해보도록 하자.
위의 예제는 수직 중앙 정렬을 html의 svg의 text를 중앙 정렬한 예제이다.
이를 코드로 구현한 것은 아래와 같다.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>Document</title>
</head>
<body>
<div>
<svg width="200" height="200">
<text text-anchor="middle" alignment-baseline="middle" transform="translate(100, 100)">
Lorem
</text>
</svg>
</div>
<style>
html,
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
svg {
background-color: red;
}
</style>
</body>
</html>
위와 같은 코드를 사용하면 수직 수평 중앙 정렬을 구현할 수 있다.
왜 그런지 한번 알아보도록 하자.
<svg width="200" height="200">
일단 svg의 크기가 중요하다.
이 크기의 절반을 사용할 것이기 때문이다.
<text text-anchor="middle" alignment-baseline="middle" transform="translate(100, 100)">
그 다음 trasnform의 translate로 svg크기의 절반크기 만큼 움직여준다.
하지만 문제는 여기서 끝나지는 않는데 그 이유는 svg의 text 글꼴의 정책 때문이다.
아래의 두가지를 보자.
하나는 text-anchor인데 이는 text의 가로 기준점을 정한다. 위의 순서대로 start, middle, end이며 기본값은 end이다.
가운대로 해야하니까 middle로 해주자.
그 다음은 alignment-baseline이다. 이는 세로 기준점을 정하는데 위의 순서대로 start, middle, end이며 기본값은 end이다.
사실 svg를 사용할 때 짜증나는 이유는 이 기본 값이 end이기 때문이다. 그것 때문에 html을 일반 글자들과는 돌아가는 방식이 살짝 다르다.
어쨋든 이 두 속성을 middle로 해줘야 잘 정렬된다.
그러면 위처럼 가운대 중앙 정렬된걸 볼 수 있지만 완전하진 않고 약간은 차이가 있다. 크기가 작을수록 티가좀 나는데 잘 알아보길 바란다.
'Usage > WEB-HTML-CSS' 카테고리의 다른 글
| css지옥에서 탈출하자(14) - 특정 element를 우클릭했을시 새탭과 새창 고르는 창(context menu)뜨게하기 (0) | 2019.05.28 |
|---|---|
| css지옥에서 탈출하자(13) - table에서 문자열 조정하기(word-break , word-wrap, white-space) (0) | 2019.05.08 |
| css지옥에서 탈출하자(12) - 반응형과 미디어 쿼리 완전 기초 (0) | 2019.04.18 |
| css지옥에서 탈출하자(11) - css로 원을 그려보자. 원속의 원 만들기(과녁처럼) (0) | 2019.02.27 |
| css지옥에서 탈출하자(10) - 현재 내가 얼마나 스크롤(scroll)했는지 부여주고 싶을 때, 진행도(progressed) 표시 (1) | 2019.02.19 |