"CSS 완전히 이해했다"를 거의 CSS에서만 재현
3817 단어 CSS
Twitter라든지 가끔 보는 이, 실은 재현하는 것은 상당히 어려운 것은 아닌가? 생각 거의 CSS에서만 재현하기 위해.
우선 HTML을 최소한으로 작성
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="box"></div>
</body>
</html>
CSS 완전히 이해한 문자도 CSS로 하고 싶기 때문에 HTML에는 div 요소를 넣는 것만으로 한다.
CSS 작성
본제의 CSS를 쓴다.
상자 테두리
#box {
font-size: 25px;
position: relative;
margin: 0;
width: 7.5em;
height: 4em;
border: solid 1.5px black;
border-radius: 20px;
}
나중에 의사 요소를 사용하기 때문에 position: relative 를 설정해 둔다.
또한 너비와 높이는 글꼴 크기를 기준으로 단위 em 사용.
※ border 의 폭을 1.5px 로 하고 있지만, 1px 와 그다지 변하지 않는다. (확대하면 다름)
"CSS 완전히 이해했다"문자
#box::after {
position: absolute;
top: 0;
right: -1.5em;
width: 7em;
font-size: inherit;
white-space: pre;
content: "ＣＳＳ\A完全に理解した";
}
여기서 의사 요소의 차례.
position: absolute 를 설정하여 #box 요소를 기준으로 좋은 느낌의 위치가 되도록 조정한다.
또, white-space: pre (을)를 설정하는 것으로 content 의 캐릭터 라인으로 개행할 수 있도록(듯이) 한다.
완성
이것으로 친숙한 「CSS 완전하게 이해했다」가 완성되었다.
우리는 놀라운 재현도입니다.
Reference
이 문제에 관하여("CSS 완전히 이해했다"를 거의 CSS에서만 재현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/YuHima03/items/576921e1ed472f6cae41
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="box"></div>
</body>
</html>
본제의 CSS를 쓴다.
상자 테두리
#box {
font-size: 25px;
position: relative;
margin: 0;
width: 7.5em;
height: 4em;
border: solid 1.5px black;
border-radius: 20px;
}
나중에 의사 요소를 사용하기 때문에
position: relative 를 설정해 둔다.또한 너비와 높이는 글꼴 크기를 기준으로 단위
em 사용.※
border 의 폭을 1.5px 로 하고 있지만, 1px 와 그다지 변하지 않는다. (확대하면 다름)"CSS 완전히 이해했다"문자
#box::after {
position: absolute;
top: 0;
right: -1.5em;
width: 7em;
font-size: inherit;
white-space: pre;
content: "ＣＳＳ\A完全に理解した";
}
여기서 의사 요소의 차례.
position: absolute 를 설정하여 #box 요소를 기준으로 좋은 느낌의 위치가 되도록 조정한다.또,
white-space: pre (을)를 설정하는 것으로 content 의 캐릭터 라인으로 개행할 수 있도록(듯이) 한다.완성
이것으로 친숙한 「CSS 완전하게 이해했다」가 완성되었다.
우리는 놀라운 재현도입니다.
Reference
이 문제에 관하여("CSS 완전히 이해했다"를 거의 CSS에서만 재현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/YuHima03/items/576921e1ed472f6cae41
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여("CSS 완전히 이해했다"를 거의 CSS에서만 재현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/YuHima03/items/576921e1ed472f6cae41텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
