먼저 결과화면부터



만들 내용은


먼저 ul, li(리스트)를 이용해서 5가지 요소(HTML, CSS, JAVA-SCRIPT, J-Query, BOOT STRAP)을 만들고


a태그로 감싸 링크를 만든다.


------ 여기까지는 예전에 했던 예제(https://qdgbjsdnb.tistory.com/134)와 같은데 이 다음부터 새로 배운 내용들을 적용한다.


1. ul 태그를 div 태그로 감싼다.(화면의 바를 좌측에서 우측으로 채우기 위해)


2. 링크들을 좌측 정렬 하고, padding 을 적용해서 간격을 준다.


3. 배경색을 지정


4. ul의 list-style을 없애 항목들의 º 표시를 없앤다.


5. a태그의 속성을 변경해 색깔을 상황에 따라 설정






결과 코드는 다음과 같다.



<!--다른 페이지에서 호출 되는 경우 일부분만 만들어도 된다.-->
<!--
    왼쪽에서 오른쪽으로 정렬
    링크 걸기, 링크 밑줄 제거
-->
<style>
    a, li{
        float:left;
        padding: 5px 20px;
        background-color: black;
        font-weight: 600;

    }
    ul{
        list-style: none;
        min-width: 900px;
    }
    a:link{
        text-decoration: none;
        color: white;
    }
    a:visited{
        text-decoration: none;
        color: white;
    }
    a:active{

        text-decoration: none;
        color: black;
    }
    li:hover{
        /*마우스 올렸을때 li 상자 색바꾸기*/
        background-color: red;
    }
    .bar{
        /*바를 좌에서 우로 쭉 연결되게끔*/
        height: 41px;
        width: 100%;
        background-color: black;
    }
</style>
<div class="bar">
<ul>
    <a href="#"><li>HTML</li></a>
    <a href="#"><li>CSS</li></a>
    <a href="#"><li>JAVA-SCRIPT</li></a>
    <a href="#"><li>J-Query</li></a>
    <a href="#"><li>BOOT STRAP</li></a>
</ul>
</div>
<!--참조만 할 html 파일은 html영역, head영역 body영역 등 생략이 가능-->



이 문제를 저번과 같이 iframe으로 합쳐보자

저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 03.CSS' 카테고리의 다른 글

[CSS]03-08.clear(float 정렬 줄 넘김)  (0) 2018.10.17
[CSS]03-07.display, visibility, 요소 숨기기 / 보이기 / 삭제 / 블록 / 인라인  (0) 2018.10.17
[CSS]03-05.float, link 정렬, 링크 속성, 이미지 밑줄 삭제  (0) 2018.10.17
[CSS]03-03.background, 배경화면  (0) 2018.10.17
[CSS]03-02.Border, 테두리 선  (0) 2018.10.16

보통 html의 body에 쭈욱 입력을 해 놓으면


글 내용의 경우 우측으로 나열되고


그 외에 블록문은 전부 아래로 나열이 된다.


블록문을 다른 방향으로 나열하기 위해 사용하는 style 문이 float이다.


다음 예제를 확인해보자



<html>
    <head>
        <meta charset="UTF-8">
        <title>Float</title>
        <link rel="icon" href="img/btn.png">
        <style>
            div{
                width: 50px;
                height: 25px;
                border: 3px solid yellowgreen;
                margin: 5px;
                /*정렬 기준을 왼쪽으로 block -> inline*/
                float:left;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>


원래 아래로 나열되는 것이 위와 같이 나열되었다.



다음으로는 link


글자에 링크를 거는 a태그의 속성인데 링크에 마우스를 올리거나 누르는 순간이나 초기 상태 등을 설정한다.


link, visited, hover(예전에 이미지에 한번 썻었다.), active를 사용해 설명한다.



<html>
    <head>
        <meta charset="UTF-8">
        <title>링크</title>
        <link rel="icon" href="img/btn.png">
        <style>
            /*
            링크 상태
            link : 링크걸린 초기 상태
            visited : 한번 클릭된 링크 상태
            hover : 마우스가 올라간 상태
            active : 누르는 순간
            */
            a:link{
                text-decoration: none;
            }
            a:visited{
                /*
                방문했던 링크
                */
                text-decoration: none;
                color: orange;

            }
            a:hover{
                /*
                마우스 올렸을 때
                색깔 파랑
                폰트 굵게
                밑줄
                */
                color:blue;
                font-weight: 600;
                text-decoration: underline;
            }
            a:active{
                /*
                클릭했을 때
                */
                color: green;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <a href="http://www.w3schools.com/css/" target="blank">
            CSS TUTORILAS
        </a>
    </body>
</html>


각각의 결과는 아래와 같이 나온다.






첫번째가 평상시


두번째가 마우스를 올렸을 때


세번째가 클릭했을 때


네번째가 방문 했던 기록이 있을 때


실제로 웹사이트를 볼 때 경험해본 기능일 것이다. 






이번에는 예전에 [HTML]02-06.iframe, 다른 사이트 참조 + 예제(https://qdgbjsdnb.tistory.com/134) 글에서 다뤘던 예제를 이용해서


링크의 '_'를 없애고


마우스를 올렸을 때 테두리가 생기게 해보자.



<!--
    1.이미지에 해당 사이트 링크를 걸것
    2.마우스 오버 했을때 테두리가 가도록 수정
    3.링크의 밑줄 제거
-->
<style>
    img{
        border: 1px solid white;
    }
    img:hover{
        border: 1px solid black;
    }

    a:link{
        text-decoration: none;
    }
</style>



<a href="http://www.daum.net"target="_blank">
    <img src="img/daum.png" alt="다음 이미지" width="150" height="70"/>
</a>
<a href="http://www.google.com"target="_blank">
    <img src="img/google.png" alt="구글 이미지" width="150" height="70"/>
</a>
<a href="http://www.msn.com"target="_blank">
    <img src="img/msn.jpg" alt="MSN 이미지" width="150" height="70"/>
</a>
<a href="http://www.nate.com"target="_blank">
    <img src="img/nate.png" alt="NATE 이미지" width="180" height="70"/>
</a>
<a href="http://www.naver.com"target="_blank">
    <img src="img/naver.png" alt="네이버 이미지" width="120" height="70"/>
</a>


따로 html 틀을 안잡아도 작동이 되긴 한다.


위의 코드를 실행하면 전과 다르게 이미지 우측 아래 밑줄이 사라지고 마우스를 올렸을 때 박스가 생긴다.


text-decoration: none;를 통해서 밑줄이 사라지게 된다.


navi와 footer을 합친 iframe 예제를 확인해봐도 똑같이 적용되어 밑줄이 사라져 깔끔하게 보인다.






저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 03.CSS' 카테고리의 다른 글

[CSS]03-07.display, visibility, 요소 숨기기 / 보이기 / 삭제 / 블록 / 인라인  (0) 2018.10.17
[CSS]03-06.배운 내용 활용해서 사이트의 메뉴 바 만들기  (0) 2018.10.17
[CSS]03-03.background, 배경화면  (0) 2018.10.17
[CSS]03-02.Border, 테두리 선  (0) 2018.10.16
[CSS]03-01.CSS, Style, 선택자  (0) 2018.10.16

background는 특정 사진을 배경에 입히는것.


여태까지 body 안에 있는 항목들의 Style을 조정했는데


배경을 입히고 싶다면 그냥 body에 Style을 주면 된다.


먼저 간단하게 색깔을 입히는 방법



<html>
    <head>
        <meta charset="UTF-8">
        <title>배경 꾸미기</title>
        <link rel="icon" href = "btn.png">
        <style>
            h1{
                background-color: aquamarine;
            }
            div{
                background-color: blanchedalmond;
            }
            body{
                background-color: coral;
            }
        </style>
        <!--스타일이 많으면 로딩이 느려질 수 있다.-->
        <!--아이디가 # 클래스가 . 태그는 p-->
    </head>
    <body>
        <h1>Welcome To CSS page</h1>
        <p>CSS background color</p>
        <div>background area</div>

    </body>

</html>







다음으로는 이미지를 직접 지정하여 띄우는 방법이다.


CSS 파일을 만든 폴더에 img 폴더를 만들고 picture.gif라는 파일을 넣어 놨다.


이미지는 아무거나 사용해도 된다.



<html>
    <head>
        <meta charset="UTF-8">
        <title>배경 이미지</title>
        <link rel="icon" href="img/btn.png">
        <style>
            body{
                /*화면보다 이미지가 작으면 x/y 축으로 반복 된다.*/
                background-image: url("img/picture.gif");
                /*
                한쪽 축으로 이미지를 반복
                background-repeat: repeat-x;
                background-repeat: repeat-y;
                */
                
                /*반복 하지 않고*/
                background-repeat: no-repeat;
                /*원하는 위치에 배치하기*/
                /*background-position: 위치 속성*/
                background-position: right bottom;
                


            }
        </style>
    </head>
    <body>

    </body>
</html>





마지막에 right bottom이라고 하여 우측 아래에 출력된 화면


주석을 하거나 지워서 확인해보자


마지막으로 이미지 사이즈를 바꿔보자



<html>
    <head>
        <meta charset="UTF-8">
        <title>배경 이미지</title>
        <link rel="icon" href="img/btn.png">
        <style>
            body{
                /*이미지가 화면 보다 크면 전부 표시되지 않는다.*/
                background-image: url(img/201801_type1_1920.jpg);
                /*이미지 크기 변경으로 해결*/
                /*background-size: 100% 100%와 같이 비율로 조정도 가능*/
                
                /*
                이미지 크기 변경 방법
                1. 사이즈 입력
                2. cover - 이미지가 클 경우 화면에 맞춰 자른다.(기본)
                3. contain - 비율이 벗어나지 않는 선에서 축소
                background-size: 속성;
                */
                background-size: contain;

            }
        </style>
    </head>
    <body>

    </body>
</html>





첫번째는 아무 속성을 주지 않아 사진이 커서 화면 밖으로 삐져 나갔다.


두번째는 contain을 사용.


주석을 통해 직접 실행하여 차이를 확인해보자.






저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 03.CSS' 카테고리의 다른 글

[CSS]03-07.display, visibility, 요소 숨기기 / 보이기 / 삭제 / 블록 / 인라인  (0) 2018.10.17
[CSS]03-06.배운 내용 활용해서 사이트의 메뉴 바 만들기  (0) 2018.10.17
[CSS]03-05.float, link 정렬, 링크 속성, 이미지 밑줄 삭제  (0) 2018.10.17
[CSS]03-02.Border, 테두리 선  (0) 2018.10.16
[CSS]03-01.CSS, Style, 선택자  (0) 2018.10.16

+ Recent posts

티스토리툴바