블로그 이미지
잡다한 취미 생활 및 일상에 대한 소소한 이야기를 적어나가는 블로그입니다.
붉은kkk

공지사항

최근에 올라온 글

최근에 달린 댓글

글 보관함

calendar

 이전 다음 2024.5
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
티스토리 가입하기 RSS FEED

'프로그래밍/HTML'에 해당되는 글 2건

  1. 2020.08.01 [Google Icon Font 삽입하기]
  2. 2020.05.14 [2. HTML Menu 정렬] 상단 Menu 항목 정렬 방법
프로그래밍/HTML

[Google Icon Font 삽입하기]

2020. 8. 1. 13:33 | Posted by 붉은kkk

https://materializecss.com/

 

Documentation - Materialize

 

materializecss.com

 <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>

      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

구글 Icon Font 삽입은 위 예제에 나온 것처럼, html 문서의 head내에 link로 처리하면 됩니다.

^^ 요즘은 문서들이 보기 쉽게 나와있어서 보고 활용하기 편한것 같네요.

 

그럼 오늘도 즐거운 프로그래밍 생활 되세요.

'프로그래밍 > HTML' 카테고리의 다른 글

[2. HTML Menu 정렬] 상단 Menu 항목 정렬 방법  (0) 2020.05.14
프로그래밍/HTML

[2. HTML Menu 정렬] 상단 Menu 항목 정렬 방법

2020. 5. 14. 03:13 | Posted by 붉은kkk

웹사이트를 만들게 되면 기본적으로 보이는 구조는 유사하게 구성이됩니다.

이번 포스팅엔 Header 부분이라고 칭할 수 있는 웹사이트의 상단에 위치한 Menu항목을 나타내고 정렬하는 방법에

대해 설명하겠습니다.

HTML & CSS & JAVASCRIPT를 공부하면서, 저는 정렬하는 부분이 가장 헷갈리고 약간의 짜증이 수반되는 영역이더라구요.

그래서 언제든 참조할 수 있도록 한번 정리를 해두고 두고두고 필요할때 볼 생각이에요.

 

 

결과물

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 메뉴 정렬 test </title>
    </head>
<style>
body{
    margin:0;
    padding:0;
    background:#ccc;
}

.nav ul {
    list-style: none;
    background:#663366;
    text-align: center;
    padding:0;
    margin:0;
}

.nav li {
    display: inline-block;
}

.nav a {
    text-decoration: none;
    color:#fff;
    width:100px;
    display: block;
    padding: 15px;
    font-size: 17px;
    font-family: sans-serif;
}

.nav a:hover {
    background: #000;
    transition: 0.4s;
}


</style>


<body>
    <div class="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Tutorial</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Newsletter</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</body>
</html>

div class="nav"로 묶고

style에서 "nav.ul, nav.li, nav.a, nav.a:hover" 에 대한 내용을 정리했습니다.

 

 

'프로그래밍 > HTML' 카테고리의 다른 글

[Google Icon Font 삽입하기]  (0) 2020.08.01
이전 1 다음

티스토리툴바