텍스트 일부를 아래 첨자같이 내리고 싶습니다. (vertical-alian?)

Question

텍스트 일부를 아래 첨자같이 내리고 싶습니다. (vertical-alian?)

조회수 292회

0

싫어요

안녕하세요. 텍스트 일부를 아래 첨자로 내리고 싶은데요..

방법을 알아내기 위해 검색 했을 때, vertical-align 이라는 방법이 있는것 같아서 적용했는데

적용되지 않아서요.. 콘솔로 검사했을때 에러가 뜨지는 않아서 .. 어떻게 수정해야 해야 할지 몰라서 여기에 올립니다.

바로 아래가 html 파일이고,

    <span class="aa">66</span>
      <p>
        <div class="bb"> </div>
        <span class="typed-text"></span><span class="cursor"> &nbsp; </span>
        <div class="bb"> </div>
      </p>
      <span class="cc">99</span>

아래는 css 파일코드입니다.

.aa {
  color: #ff8aff;
  font-size: 1.7rem;
  font-family: "ITCAvantGardeStd";
  font-weight: bold;
  vertical-align: top;
}
.bb {
  color: #000;
  font-size: 1.7rem;
  font-weight: 900;
}
.cc {
  color: #ff8aff;
  font-size: 1.7rem;
  font-family: "ITCAvantGardeStd";
  font-weight: bold;
  vertical-align: bottom;
}

66 과 99 사이에 커서를 통해서 글씨가 써졌다 지워 졌다 하는 내용인데요.

질문: 수정의 목적은 99가 아래첨자 였으면 해서요. (혹은 더 디테일 하게 조절하는 방법이 있을까요?) (66과 99가 따옴표 같은 형태로.. 글자의 원에 해당되는 부분의 위치를 맞추고 싶습니다.)

링크도 함께 걸어 놓았습니다. https://github.com/HinnnaHinnna/test_sp

항상 감사합니다..

HinnnaHinnna 20 points

2022-06-01 18:05:19에 작성됨

소스 말고 구현된 페이지 링크를 올려주세요. 초보자 2022.6.2 10:46
https://hinnnahinnna.github.io/test_sp/ 여기에 올려 드립니다. HinnnaHinnna 2022.6.2 20:05

댓글 입력

score 0 · Accepted Answer

vertical-align은 시중의 모든 CSS 기초강좌가 다 가르쳐 주는 속성이지만 막상 실제로는 거의 사용하지 않습니다. 왜냐면 써야 할 상황과 쓰는 방법이 굉장히 한정돼 있기 때문이지요. 질문자님의 경우는 그 상황이 아니구요.

원하시는 것을 하자면 보통은 :before, :after 유사선택자와 position: relative;로 쇼부를 봅니다. 일단 코드를 좀 읽어보시고요,

.quoted:before {
  content: '66';
  position: relative;
  bottom: 0.25em;
  padding-right: 0.125em;
}
.quoted:after {
  content: '99';
  position: relative;
  bottom: -0.25em;
  padding-left: 0.125em;
}

다 읽으셨으면 데모를 열어서 이런걸 하고 싶으셨던 게 맞는지 확인해 보세요.

PS. 묵직한 따옴표를 표현하기 위해 숫자 66과 99를 사용하는 것은 별로 바람직하지 않습니다. “는 명백히 기호(symbol)지만 66은 문서 본문(콘텐츠)으로 분석되기 때문이지요. (그래서 예컨대 나중에 "66을 많이 사용한 문서"로 구글 검색엔진이 오해한다거나, 시각장애인을 위한 콘텐츠 리더기가 66을 너무 자주 말한다거나 하게 됩니다.) 적당한 유니코드 문자로 대체하거나 폰트를 바꿔서 해결해 주세요.