2023 10-17 html css 사용하여 웹사이트만들기

웹사이트를 만든 넷티파이

 

사이트에 들어가서 

 

폴더채로 업데이트 하면 

 

알아서 사이트가 배포가 됩니다. 

 

 

배포된 사이트의 결과 

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

코드를 여기다가 올려봤자 가독성만 떨어질 뿐이라고 생각하여 파일을 업로드했습니다.

오전과제.zip

0.01MB

html 내의 head 내에 있는 이코드는 

  <link href="./header.css" rel="stylesheet">

     <link href="./info.css" rel="stylesheet">

     <link href="./notice.css" rel="stylesheet">

     <link href="./banner.css" rel="stylesheet">

     <link href="./footer.css" rel="stylesheet">

 

css 를 연결하기 위해 존재하며 링크로 이어지도록합니다.

그렇게되면 class 가 css 에 이어질수있게됩니다

<div class="container">

    <header class="header">

      <div class="header-content flex">

        <div class="header-content__logo pointer " > 대전의 볼거리 </div> <!--제목 -->

        <br>

        <nav class="header-content__nav flex">

            <ul>

헤더는 헤더 css 내에 있는 css 설정들을 갖고올수있게합니다. 

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

이스크립트는 부트스트랩을 사용할수있게합니다. 

 <div id="demo" class="carousel slide" data-bs-ride="carousel">

    <!-- 지표 슬라이드  -->

    <div class="carousel-indicators">

      <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>

      <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>

      <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>

    </div>

id 를 지정하고 class 를 carousel slide 로 불러오게합니다. 

타겟은 id demo 를 따라가며 슬라이드 순서 0 1 2 가 생겨납니다 

컴퓨터는 1부터가아니라 0 부터 시작합니다.  

        <section class="notice">

            <h2 class="notice_title"></h2>

            <div class = "notice__container flex">

                <!-- 사진돌아가게하기 -->  <!--선나누기-->

        <div id="demo" class="carousel slide" data-bs-ride="carousel">

    <!-- 지표 슬라이드  -->

    <div class="carousel-indicators">

      <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>

      <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>

      <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>

    </div>

   

    <!-- 슬라이드 설정 /캐러셀 회전목마 -->

    <div class="carousel-inner">

      <div class="carousel-item active" >

        <img src="https://i.namu.wiki/i/h6zHs8THx-HPJ2Y0QUWF0GcXqSapqI32UTK4NV9cc4WsXP-ljbvaMkkWeaCQ6LoH-ES88j-X-2OH1pQTMu_goQ.webp" alt="한화이글스경기장" class="d-block" style="width:100%" height="465">

        <div class="carousel-caption">

          <h3>한화이글스경기장</h3>

          <p>대전경기장입니다.</p>

        </div>

      </div>

      <div class="carousel-item">

        <img src="https://i.namu.wiki/i/KXB5tNEzE10bdzKFt-2fqoqTRWHfACHxgIOcW2RjwDGmZElf0KBItwUhQ2WEqjyclmz3Ps8_d8hEvR6Y9ZOxNA.webp" alt="성심당" class="d-block" style="width:100%" height="465" >

        <div class="carousel-caption">

          <h3>성심당</h3>

          <p>대전의 유명한 빵집입니다.</p>

        </div>

      </div>

      <div class="carousel-item">

        <img src="https://i.namu.wiki/i/oK_s4ewfpN3ZR5radjgMoCQ8XOrzXzQzG5XWqwTZCIoo5lgEXdddLjlgzyo5KaFOdXzKs0RO8DdSXZcYz6IUdA.webp" alt="대청댐" class="d-block" style="width:100%" height="465" >

        <div class="carousel-caption">

          <h3>대청댐</h3>

          <p>대청댐은 대전의 큰댐입니다. </p>

        </div>  

      </div>

    </div>

   

    <!-- 왼쪽오른쪽 컨트롤할수있게하기 -->

    <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">

      <span class="carousel-control-prev-icon"></span>

    </button>

    <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">

      <span class="carousel-control-next-icon"></span>

    </button>

  </div>

 

여기서부턴 이미지 소스링크로 사진을 불러오고 그냥불러오면 사진이 뒤죽박죽되버리니  height="465" 
를 사용하여 크기를 맞춰줍시다 필자는 style 를 사용하여 위아래 크기를 맞추려고 했을때 퍼센트 와 ,px 가 다른영역까지 

침범하여 height="465"  를 그냥 넣었습니다.  

   <!-- 왼쪽오른쪽 컨트롤할수있게하기 -->

    <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">

      <span class="carousel-control-prev-icon"></span>

    </button>

    <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">

      <span class="carousel-control-next-icon"></span>

    </button>

  </div>

 <hr>

타입 버튼은 지정된 div id demo 를 따라가며 이전과 다음을 선택할수 있게해줍니다. 

버튼을누르면 slid 가 0 <->1<-> 2 <->0 내에 움직이게 됩니다. 

                        <article class="notice__item flex">

                            <div class = "notice__tumb"> </div>

                            <div class="notice__content a">

                                <img src="https://i.namu.wiki/i/KXB5tNEzE10bdzKFt-2fqoqTRWHfACHxgIOcW2RjwDGmZElf0KBItwUhQ2WEqjyclmz3Ps8_d8hEvR6Y9ZOxNA.webp" style="float: right;" width= 100px>

                         

                                <div class="notice__content__title pointer" onclick="window.open('https://www.sungsimdangmall.co.kr/')">성심당 </div>

                                <div class="notice__content__address">대전광역시 중구 대종로480번길 15</div>

                                <div class="notice__content__number"> 1588-8069</div>

                                   </div>

                        </article>

그냥 두면 지혼자 글옆에 사진이 붙어 이상하게 보이기에 style float 를 사용하여 고정시켜주었습니다. 
그리고 이 클래스 옆에 

<div class="notice__content a">

 a 는 html 의 a css 로 

 .a img {

            transition: all 0.2s linear;

            border: 1px solid #ddd;

            border-radius: 4px;

            padding: 5px;

            width: 100px;

            transition: all 0.2s linear;

            }

            .a:hover img {

                transform: scale(5.4);

                }

.a 가 img에  붙게 하여 
보더 직사각형크기로 사진내에 들어가게합니다 

hover 는 마우스 커서로 갖다대면 확대대도록 합니다.

 

scale 은 커지고 작아지고를 의미합니다. 

<div class="notice__content__title pointer" onclick="window.open('https://namu.wiki/w/%EB%AA%A9%EC%B2%99%EA%B5%90')"> 목척교 </div>

그리고 클래스 옆의 포인터는 

 

.pointer {

            cursor: pointer;

            }

말그대로 포인터로 누르면 마우스 커서가 손모양으로 바뀌게 해줍니다.  

class 내의 여러개를 사용하기위해선 _ 를 붙이는게 아닌 그냥 띄어쓰기를 해줍시다.

 

                               <div class="notice__content__title pointer" onclick="window.open('https://ko.wikipedia.org/wiki/%EB%8C%80%EC%A0%84%EC%8A%A4%EC%B9%B4%EC%9D%B4%EB%A1%9C%EB%93%9C')"> 대전스카이로드</div>

글씨를 누르면 새창에 링크 이동을 하게 만들어줍니다. 

 

<a href="./engindex.html"> <img src="https://wikis.krsocsci.org/images/1/10/%EC%98%81%EA%B5%AD%EC%9D%98_%EA%B5%AD%EA%B8%B0.png" alt="" width="40" height="30" style="float: right;"></a>

73번째 줄은 이미지를 누르면 링크이동을하기위해 <a href= "링크주소"> 로 열고 <img src="대충주소" > </a> 이렇게 해서 
닫아주어야 사진내의 링크이동이 들어갑니다 필자는 처음에 밖으로 빼놓고하니 

관광명소옆에 링크이동이 만들어졌습니다. 

eng index 는 그냥 기존에있는 index 를 복사하여 한글을 영어로 바꾸고 링크주소도 영어로설명하는주소로 바꿉니다.

이러면 영문페이지 만들어집니다.
그런뒤 한글국기 사진을 링크로하여 한글페이지 이동도 할수있게 만들수 있게해줍니다...

 

 

 

 

 

--------------------------------------------------------------------------------------------------------------------------------------------------------------

 

만들고 사용하기위해 참조한 링크 

 

 

 

css 폰트가 영어로만 가능한경우에두가지가 연결된 css 를 사용한경우  
영어전용은 engindex 만 작동하게 된다. 

한글폰트는 둘다 적용이된다.

https://www.w3schools.com/css/css_font.asp

CSS Fonts

 

Carousel 은 회전목마로 버튼누를때마다 사용할수 있게되는걸 참조하였다.

https://www.w3schools.com/bootstrap5/bootstrap_carousel.php

Bootstrap 5 Carousel

https://noonnu.cc/

 

눈누

한글폰트 영어도 가능하다. 

https://html-css-js.com/html/character-codes/icons/

Icons and Symbols - 𝗛𝗧𝗠𝗟 𝗖𝗛𝗔𝗥𝗔𝗖𝗧𝗘𝗥 𝗖𝗢𝗗𝗘 𝗣𝗜𝗖𝗞𝗘𝗥

html 아이콘 밑에 전화번호랑 이메일 옆에 사용된이모티콘 

https://papago.naver.com/

네이버 파파고

파파고 번역기돌려서 영문페이지만듬 

 

https://www.codingfactory.net/10628

CSS / box-shadow / 박스에 그림자 효과 만드는 속성

박스 옆에 그림자효과 글씨에도 적용되는걸 확인하여 글씨에도 사용함 

https://www.delftstack.com/ko/howto/html/text-next-to-image-html/

HTML에서 이미지 옆에 텍스트 배치

사진 강제고정 사진이 자꾸 틀에서 벗어나기에 링크 오른쪽에 붙여 섞이지 않게함 

 

 

https://www.codingfactory.net/12584

CSS / 마우스 오버 효과 / 이미지 확대

이미지 확대효과 갖다대면 커짐 


https://hajoung56.tistory.com/53

[HTML&JSP] DIV 영역에 링크 걸기와 마우스 커서 모양

포인터 커서를 갖다대면 손모양이 만들어진다. 

 

css에다가 혹은 html 스타일에다가

.pointer {

            cursor: pointer;

            }

이렇게 추가해주면된다.