나무위키 목차 만들기

728x90

css 배우기 전에 html 만으로 만들었던 나무위키 목록표에 css를 적용시켜봤다.

https://blog.naver.com/smoothbutterfresh/223134426826

#코딩기록4_[html] 나무위키st 목록표 만들어보기

나무위키에 들어가면 보기쉽게 작성된 목록표를 구현해보고자 도전 ..! (아직 HTML만 배운 상태로 하는...

blog.naver.com

짠 ,, 나무위키st 목차에 css를 적용시켜봤다.

★

- a 태그에 기본으로 적용되어있던 (링크 사용 시) 밑줄을 제거함.

ㄴtext-decoration-line: underline;

링크가 연결된 파란글씨를 클릭하면 해당 본문의 부분으로 연결된다.

사용된 CSS 코드들

<style>
    @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
    
    h1{
        text-align: center;
    }
    .a{
        width: 400px;
        height: 350px;
        border:1px solid black;
        padding-top: 20px;
        padding-bottom: 20px;
        font-family: 'Nanum Gothic';
        font-size: 16px;
        line-height: 23px;
    }
    a{
        text-decoration-line: none;
    }
    a:hover{
        text-decoration-line: underline;
    }
    .b{
        width: 400px;
        height: 350px;
        border:1px solid black;
        font-family:'Nanum Gothic'; 
    }
    img{
        width: 180px;
        height: 180px;
        margin-bottom: 10px;
        margin:auto;
        display: block;
    }
    th{
        border: 1px solid black;
        width: 80px;
        background-color: antiquewhite;
    }
    td{
        border: 1px solid black;
        width: 335px;
    }

</style>

HTML 코드들

<body>
    <div>
        
        <fieldset class="a">
            <h1>목차</h1>  
        <ol>
            <li>
                <a href="https://namu.wiki/w/ChatGPT#s-1">개요</a>
            </li>
            <li>
                <a href="https://namu.wiki/w/ChatGPT#s-2">특징 및 인터페이스</a>
            </li>
            <li>
                <a href="https://namu.wiki/w/ChatGPT#s-3">등장 배경</a>
            </li>
            <li> 
                <a href="https://namu.wiki/w/ChatGPT#s-4">공식 가이드라인</a>
              <ol>
                <li>
                <a href="https://namu.wiki/w/ChatGPT#s-4.1">이용 정책</a>
            </li>  
                <li>
                <a href="https://namu.wiki/w/ChatGPT#s-4.2">특정 방식의 모델 사용에 대한 추가 요건</a>
                </li>
              </ol>
            </li>
            <li>
                <a href="https://namu.wiki/w/ChatGPT#s-5">프롬프트와 응답</a>
                <ol>
                    <li>
                        <a href="https://namu.wiki/w/ChatGPT#s-5.1">플러그인</a>
                    </li>
                    <li>
                        <a href="https://namu.wiki/w/ChatGPT#s-5.2">탈옥</a>
                    </li>
                </ol>
            </li>                         
        
            <li>
            <a href="https://namu.wiki/w/ChatGPT#s-6">의의</a>
            <ol>
                <li>
                    <a href="https://namu.wiki/w/ChatGPT#s-6.1">AI 시대의 서막과 AI 개발 전쟁</a>
                </li>
                <li>
                    <a href="https://namu.wiki/w/ChatGPT#s-6.2">패턴화된 반복적 작업의 최소화</a>
                </li>
            </ol>
            </li>
        </ol>
     </div>
    </fieldset><br>
     <table>
        
        <fieldset class="b">
        
        <h1>ChatGPT<br>
            Generative Pre-trained Transformer</h1>
            <div>
                <img src="./imgg/gpt.svg" alt="gpt pic">
            </div>
        
       
        <tr>
            <th>구분</th>
            <td>LLMs 대화형 인공지능</td>
        </tr>
        <tr>
            <th>개발사</th>
            <td>Open AI</td>
        </tr>
        <tr>
            <th>서비스</th>
            <td>부분적 유료</td>
        </tr>
        <tr>
            <th>출시일</th>
            <td>2022년 11월 30일<sup>(초기베타)</sup><br>
                2023년 5월 24일<sup>(안정화 베타)</sup></td>
        </tr>
        <tr>
            <th>모바일</th>
            <td>ios / iPad OS</td>
        </tr>
        <tr>
            <th>기반</th>
            <td>GPT-3.5, GPT-4</td>
        </tr>
        <tr>
            <th>사용자</th>
            <td>2억 명<sup>(2023년 2월 / 추정치)</sup></td>
        </tr>
        <tr>
            <th>구독자</th>
            <td>100만 명 <sup>(2023년 2월/ 추정치)</sup></td>
        </tr>
   
      
    </table>
       </fieldset>
 
</body>

+ 그리고 나무위키 들어가서 보면서 따라만들다 보니 이런 표도 있길래 만들어보고 싶어졌다...

그래서 지금까지 배운걸 토대로 최대한 따라 만들어봤다 ..ㅎ

아직은 뭔가 허접한 ...ㅎㅎ^^

728x90

'💻 > CSS' 카테고리의 다른 글

이미지 그리드 / CSS Grid (0)	2024.01.07
레이아웃 설계(1차원/ flexbox layout ) (0)	2024.01.07
웹 로그인 창에 css 적용시켜보기 (0)	2024.01.07
메모 웹 만들어보기 (0)	2024.01.07
변형 효과 /transform, transform-origin 속성 (0)	2024.01.07

Soony's House

나무위키 목차 만들기

'💻 > CSS' 카테고리의 다른 글

티스토리툴바

나무위키 목차 만들기

'💻 > CSS' 카테고리의 다른 글

관련글

티스토리툴바