안녕하세요. 김용성입니다.
오늘은 html과 css 간단한 꿀팁 몇가지를 포스팅할까 해요.
이미 아시는 분들도 존재하겠지만, 나름의 좋은 꿀팁이라고 생각해서 이렇게 포스팅하게 되었습니다.
스크롤 smooth
html 페이지 내에서 스무스한 스크롤을 구현하는 방법을 알려드리도록 하겠습니다.
(물론 jquery 등을 이용해서 구현해도 되지만 그것보다 훨씬 간단하고, 많이 사용되는 방법입니다.)
//index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrap">
<a href="#one">1번</a>
<a href="#two">2번</a>
<a href="#three">3번</a>
</div>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>우선 이런식으로 html 구조를 잡아보았습니다. 상위에 있는 a태그를 누르게 될 경우 해당하는 div 영역으로 스크롤이 되는 것을 아실텐데요. 다음과 같이 작동할 것입니다.
.gif)
뭔가 뚝뚝 끊기는 것이 아쉽지 않나요? 이럴 때에는 smooth 속성을 사용해서 부드러운 스크롤 움직임을 구현할 수 있습니다.
방법
전체 html 태그에 class 속성을 줍니다. (id여도 상관없습니다.)
<html class="smooth" lang="en">그 뒤에 저 smooth라는 class에 다음과 같은 스타일을 입력해줍니다.
.smooth {
scroll-behavior: smooth;
transition: 1s;
}이제 실행 결과를 한번 살펴볼까요?
.gif)
보시다시피 스무스한 스크롤이 잘 적용된 것이 확인됩니다.
scroll-behavior이라는 스타일 속성을 잘 알고 계시면 정말 도움이 될 때가 많습니다.
꼭 알아두세요~.~
그렇지만 scroll-behavior은 인터넷 익스플로러에서는 사용할 수 없다는 점 알아두시길 바랍니다.🤦
transform을 사용한 중앙정렬
다들 중앙정렬을 어떤식으로 하시나요?
flex를 사용하는 방법도 있을테고, width 값을 아는 경우에는 margin: 0 auto; 를 사용하기도 할겁니다.
그렇지만 만약 너비 값을 잡을 수 없는 상황이라면? 또는 flex를 사용할 수 없는 인터넷 익스플로러 11 밑으로 컨텐츠를 만들어야하는 상황이라면? 조금 난감해지죠.
그럴 때는 tranform을 사용할 수 있습니다!
<!DOCTYPE html>
<html class="smooth" lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="all" href="style.css" />
<title>Document</title>
</head>
<body>
<div id="wrap">
<p class="txt">중앙정렬을 해보도록 할게요.</p>
</div>
</body>
</html>이런식으로 구조를 잡아놓고 스타일을 줘보도록 하겠습니다.
우선 자식 요소에서 position:absolute 속성을 주기 위해 부모 body를 position:relative로 변경해주도록 하겠습니다.
body {
background-color: yellow;
position: relative;
}그리고 자식 txt 클래스에는 다음과 같이 position:absolute와 left:50% 속성을 주어 해당 요소가 부모 요소의 50%지점으로 이동하도록 해볼게요.
.txt {
position: absolute;
left:50%;
display: inline-block;
background-color: grey;
padding: 10px;
}자 그러면 이런식으로 화면에 나타날 것입니다.
어떤가요? 50%의 기준이 요소의 시작부분으로 되어있기 때문에 오른쪽으로 치우쳐진 것이 보이죠?
우리는 이때 transform 속성을 사용해서 기준점을 요소의 가운데로 변경해줄 수 있습니다.
방법
txt class에 다음과 같은 스타일요소를 추가해주면 됩니다.
transform: translateX(-50%);
가운데로 잘 정렬된 것이 보이시나요?
transform은 정말 Css의 가장 중요한 스킬이라고 해도 과언이 아닐 정도로 많이 사용되는데요. 그것을 응용해서 이렇게 가운데 정렬도 할 수 있다는 점 알고가셨으면 좋겠습니다.
🙌 마무리
요즘 react-native의 style 속성에 너무 익숙해진 이유로 웹의 css를 작성하다보면 오타도 많이내고, 가끔 오류를 찾지 못할 때가 있어요. 다시 적응하기 위해 노력중인데요. 얼른 다시 익숙해져서 빠르게빠르게 웹페이지를 구축하던 때로 돌아가고 싶네요.😂
오늘의 포스팅도 봐주셔서 감사합니다:)
