전편 댓글로 나도 몰랐던 기능들 잔뜩 알게 되었는데

사실 대부분은 어떻게 쓰는지 모르겠거나 편집기에는 작동 제대로 안 하더라고

내가 멍청해서 못 쓰는거일 가능성이 더 크긴 한데


그래도 뭔가 새로이 알게 된 기능도 있고 하니 그 중에서도 꾸미는데 좋은 것들을 추가로 소개해보아용


루비 <ruby>


오타쿠의 심금을 울리는 무언가가 있는 그 글쓰기 방법, 'A라고 쓰고 B라고 읽는다'를 위한 태그

정확한 사용법은 <ruby><rb>본문</rb><rp>(</rp><rt>읽는 법</rt><rp>)</rp></ruby> 이다.

이러면 본문 위에 읽는 법이 적힌다


그런데 기본 글자 크기에 따라 루비 문자가 너무 작아서 잘 안보일 수도 있음. 당장 위 예시짤만 봐도 그렇고

그럴땐 이 안에 태그를 추가로 넣으면 됨



이렇게 폰트 사이즈를 좀 조절해주면 수월하게 읽을만한 루비문자가 나옴


사실 이건 이전편에 올릴 계획이었는데 까먹어서 이번에 올림 ㅎㅎㅋㅋㅈㅅ


헤더 <h>



제목을 쓸 때에 사용하는 기능... 인데, 대충 글자 크기 조정으로 쓰기 좋다

참고로 기본 선택지 제목 글자 크기는 h2에 해당함


프리포맷 <pre>

미리 포맷된 텍스트를 보여주는? 뭐시기라고 하는데 뭔말인지 모르겠고

이건 비교를 봐야 이해가 감



왼쪽은 pre를 적용한 모습, 오른쪽은 아닌 모습이다

원래 편집기에서는 글자 간격 띄운다고 스페이스바 아무리 쳐도 자동으로 스페이스바 하나 수준으로 정렬해버리지만, 

pre를 씌워놓으면 정직하게 내가 입력한 모습 그대로 보여줌


덤으로 폰트도 왠지 굴림체로 바뀜. 왜지?


웃긴건 이런 특성 때문인지 이걸 제목이나 포인트 칸에 넣으면 글자가 화면을 넘어가도 줄바꿈을 하지 않는다

그래서


텍스트가 화면 넘어가는거 보여주거나



아예 선택지 제목으로 스크롤을 띄워버릴 수도 있음


코드 <code>


원래는 '이 부분은 코드임'이라는 것을 나타낼 때 사용하는 태그라는데

뭔가 경고문 표기를 할 때 좋아보임

물론 예문은 영어만 적어놨는데 의외로 한글 넣어도 잘 작동함


리스트 <li>


같은 li 태그로 묶인 애들끼리 리스트를 작성해줌

행간이 띄워지는데 이건 어떡해야 할지 모르겠다


참고로 리스트 옆에 동그라미(불릿이라고 부름)가 간격이 안 맞춰져서 불편하다면

<li>를 쓰기 전에 <ul> 또는 <ol>을 한겹 더 씌워주자


ul은 간격만 일렬로 맞춰주고

ol은 동그라미 대신 숫자로 표기해줌


이럴 바에야 그냥 쓸거같긴 한데 난


양방향 <bdi>


히브리어나 아랍어처럼 오른쪽에서 왼쪽으로 쓰는 문자를 적으려면 이거 씌워야함

더 정확히는 이게 있으면 양 옆에 왼→오 체계 문자가 있어도 따로 인식해줌


키보드 <kbd>


원래 '이 문자는 키보드의 키를 설명하는 것입니다'를 알려주는 태그인 모양이다

하지만 내 눈에는 간지나는 흑백 글자로 보일 뿐이다

이걸 씌우면 글자가 간지나는 흑백 글자가 됨

간지나는 흑백 글자. 중요하다고 생각하지 않습니까, 당신?



대충 이 정도

다른거 유용하게 쓸게 있는진 못찾겠음

사실 몇개 있긴 했는데 <em>은 그냥 이탤릭 <i>랑 똑같고, <strong>도 그냥 <b>랑 똑같더라고 좀 기술적으로는 뭔가 다른가?


암튼 이상