과인만의 웹페이지를 만들어보자!(html로 레드벨벳 페이지, 팬페이지, 리스트 ol,ul,dl, li 태그, 목차 점프앵커 a href 활용)

반가워요. 웨이러버임.

지난 글에 이어서 html 웹페이지 만들기(레드벨벳 팬페이지 예제)를 계속 해보도록할게요.​굳이 레드벨벳 아니더라도 트와이스, nct 등등 좋아하시는 아이돌 그룹이나쁘지않아 ​가수, 배우 팬패이지를 만들어보자는 심정을 가지고​재밌게 습관해보세요!​지난 글에서 예고한 바대로https://blog.naver.com/tmvkdlehtm88/221892656255

걸그룹 팬페이지라면,​걸그룹 멤버 소개도 하고 싶고 대표곡 소개도 하는 것이 인영토­정이라고 예기씀드렸습니다!​목차를 만들어 멤버 소개 파트와 대표곡 소개 파트를 분리해 작성을 하기 전에​리스트 태그인

      을 소개해드리도록 하겠습니다.​(참고: 얘기만 궁금하신 분은 마지막 문단으로 바로 내려가세요 !)​<리스트 만들기>– 순서가 있는 리스트(ordered list) :

        – 순서가 리스트(unordered list) :

          – 정의만 내리는 리스트(definition list) :

          ​위의 태그들과

        • 태그를 적절하게 활용하여 리스트를 만들 수 있습니다.

            리스트 태그 예시 : 라면끓이는 노하우을 순서대로 적어보겠슴니다.​ 라면 끓이기

            라면 끓이는 순서

            1. 물을 끓인다.
            2. 라면과 스프를 넣는다.
            3. 5분 동안 끓이면 완성

            >

            1. 물을 끓인다.
            2. 라면과 스프를 넣는다.
            3. 5분 동안 끓이면 완성

            ​type=”a”로만 설정해줬을 뿐인데

          1. 본인열문 마다 a, b, c ~~~ 자동으로 순서 본인열 알파벳이 본인오는 것을 확인할 수 있읍니다. ​소문자 a 대문자A 1도 마찬가지 임니다.(참그러므로 ‘가’, ‘ㄱ’등 한글은 본인열처리 안됍니다.)

              리스트 태그 예시 : 대략 기억자신는 걸그룹 순으로 순서없이 자신열하면 이강처럼 쓸 수 있겠지요.​ 걸그룹

              걸그룹

              • 트와이스
              • 레드벨벳
              • 블랙핑크
              • 어린이즈원
              • 이달의소녀
              • itzy
              • 에버글로우

              >

              응용해서 중첩 리스트를 만들어보겠슴니다. : 3대 기획사 걸그룹​

                태그 안에서

              • 를 나열하고 그
              • 안에 또한
                  태그 열고

                • 를 나열하면 됩니다.어떤 sound인지 이해가 안간다면 바로 아래를 보시면 됩니다.​​ 걸그룹

                  3대 기획사 걸그룹

                  • SM
                    • 소녀시대
                    • 레드벨벳
                  • JYP
                    • 원더걸스
                    • 미스에이
                    • 트와이스
                    • itzy
                  • YG
                    • 2ne1
                    • 블랙핑크

                  >

                  같은 원리로

                    태그 안에서

                  • 를 본인열하고 그
                  • 안에 또
                      태그 열고

                    1. 를 본인열하는 것도 적용됩니다.​ 걸그룹

                      3대 기획사 걸그룹 런칭 순서

                      • SM
                        1. 소녀시대
                        2. 레드벨벳
                      • JYP
                        1. 원더걸스
                        2. 미스에이
                        3. 트와이스
                        4. itzy
                      • YG
                        1. 2ne1
                        2. 블랙핑크

                      >

                      정의 리스트 태그 작성 방법​

                      정의내려야 할 것
                      여기다 정의 대상에 대해서 정의를 줄줄이 해준다

                      ​위의 형식이 정석임니다. 메모장에는 이후과 다같이 써주면 됍니다.​웹브라우저

                      웹 브라우저 종류

                      크롬
                      구글에서 만든 것으로 좋은 디버거를 갖추고 있어 디버깅에 많이 사용

                      파이어폭스
                      Mozilla 재단에서 오픈 소스로 만든 것으로 W3C의 웹 그냥을 선도

                      익스플로러
                      마이크로소프트에서 만든 브라우저로 현재 국내 시장에서 가장 많이 사용

                      옆에 태그를 써서 글자를 보다 강하게 출력해서 시간적인 심심함을 보충해주었습니다.

                      >

                      요즘 html 리스트 태그에 대해 배웠으니 자유자재로 사용할 수 있겠죠?만들던 레드벨벳 페이지에 멤버, 대표곡 목차를 추가하고 대표곡들을 리스트 태그를 이용해서 나쁘지않아열해보도록 하겠습니다.​ The RedVelvet

                      The Red The Velvet

                      레드벨벳(Red Velvet)은 SM 엔터테인먼트 소속의 한국 5인조 걸그룹이 었다.

                      레드벨벳은 레드와 벨벳으로 대표하는 2개의 컨셉으로 유명하다.

                      레드컨셉은 팝 장르가 대부분으로 밝고 젊은 분위기가 대부분이 었다. “Ice Cream Cake”, “Dumb Dumb”은 레드 컨셉의 대표곡으로 꼽힌다.

                      레드보다 조금 더 성숙한 벨벳은 컨템포러리 알앤비 장르가 대부분이 었다. “Bad Boy”는 대표적인 벨벳 컨셉으로 여겨진다.

                      목차

                      멤버

                      대표곡

                      • 행복 (Happiness)
                      • Ice Cream Cake
                      • Dumb Dumb
                      • 7월 7일 (One Of These Nights)
                      • 러시안 룰렛 (Russian Roulette)
                      • Rookie
                      • 빨간 맛 (Red Flavor)
                      • 피카부 (Peek-A-Boo)
                      • Bad Boy
                      • Power Up
                      • RBB (Really Bad Boy)
                      • 짐살라빔 (Zimzalabim)
                      • 소리파소리파 (Umpah Umpah)
                      • Psycho

                      >

                      보시는 바와 함께 목차 리스트가 만들어지고 대표곡 리스트 나쁘지않아열이 성공적으로 출력된 것을 확인할 수 있음니다.

                      위의 태그들 중에 다소 익숙치 않은 a href 태그가 있지요? 설명해드리겠습니다.​

                      목차

                      멤버

                      대표곡

                      ​<원리>클릭해야할 처소리위치 : 점핑 앵커

                      클릭으로 인해 도착하는 최종위치

                      : 점핑 앵커 도착지점’a’로 인해 점핑이 연결되는 것을 확인할 수 있다.​이 태그들을 좀더 쉽게 설명하자면, 멤버 : 의 주인공(?)을 ‘멤버’로 설정하고 태그로 마무리 하고나쁘지않아서 웹페이지를 실행한다소리 ‘멤버’를 클릭하면,​

                      멤버

                      : 해당 태그라인을 쓴 웹페이지 위치까지 자동으로 점핑되지요.사용자에게 직관적인 편의성을 제공하는 태그라고 할 수 있습니다. 현재 웨이러버가 작성하는 레드벨벳 페이지에서는 아직 작성된 문서길이, 양이 많지 않기 때문에 즉시 효과를 볼 수는 없지만 문서가 길어질수록 더훨씬 빛을 발하는 태그라고 할 수 있지요!위키 류의 문서들에서도 쏠쏠하게 활용되는 태그임.

                      ​이상 html로 리스트를 작성하고 점프 앵커를 심는 것까지 다루어 보았습니다.

                      >

                      ​이후 글에서는 멤버별 차이점과 특이점들을 명확하게 비교할 수 있는 ‘표’를 html 상으로 만들어보도록 하겠슴니다.​더불어 대표곡 마다 유튜브 노래비디오로 곧바로 넘어갈 수 있도록 설정하는 하이퍼링크 태그도 다같이 배워볼게요!​감사할것입니다. :D​​#팬페이지 #웹페이지 #html #html웹페이지 #html펜페이지 #ol태그 #ul태그 #dl태그 #href태크 #html위키 #위키만들기 #위키페이지만들기 #html리스트