워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

앞 강좌에서 네비게이션바를 기본만 만들었는데 마우스오버시 색상이 변화되는 것도 해보고 방문한 링크도 다른 색으로 표현해본다.

이전의 코드를 불러오면 다음과 같다.

<style type="text/css">
#nav ul {
list-style-type: none;
}

#nav ul li {
float: left;
margin-right: 40px;
text-align: center;
}

#nav ul li a {
display: block;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
border: 1px solid #666;
}

#nav ul li a:link, #nav ul li a:visited {
color: #000;
text-decoration: none;
}

#nav ul li a:hover, #nav ul li a:active {
color: #F00;
text-decoration: underline;
}

</style>
</head>

<body>
<div id="nav">
<ul>
<li><a href="http://www.daum.net">Home</a></li>
<li><a href="../products.html">Products</a></li>
<li><a href="../services.html">Services</a></li>
<li><a href="../about Us.html">About Us</a></li>
</ul>
</div>
</body>

여기까지의 화면은 다음과 같다.


이번에 만들어볼 네비게이션바의 모양은 다음과 같다.


테두리의 두께를 2픽셀로 했더니 좀 투박스럽다. 보통은 1픽셀로 해서 은은하게 튀어나온 느낌을 주게된다.

우선 해야할 것은 li 태그간의 간격인 마진을 없애는 것이다.

#nav ul li {
float: left;
margin-right: 0px;
text-align: center;
}
삭제해도 되고 0으로 넣어도 된다. 0의 경우 단위인 px를 넣지 않아도 되지만 다른 숫자는 반드시 단위를 붙여야한다.

그다음으로 테두리의 색상을 주는데 상, 좌는 밝은색, 우,하는 어두운색을 주게되면 위처럼 3D효과가 나온다. 그리고 배경색도 준다.

#nav ul li a {
display: block;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
background:#66CC99;
border-top: 2px solid #CCC;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
border-left: 2px solid #CCC;
}
앞강좌에서는 태두리 스타일을 하나의 색상을 줬기때문에 한줄만 필요했는데 여기서는 네줄이나 필요하다. 두가지 색상을 서로 다르게 해야하기 때문이다. 배경색도 짙은 초록색으로 했다. 이번에는 링크에 대해 장식을 해본다.

#nav ul li a:link {
color: #000;
text-decoration: none;
}
#nav ul li a:visited {
color: #000;
text-decoration: none;
background: #F90;
}

#nav ul li a:hover {
color: #609;
text-decoration: none;
background: #690;
}
#nav ul li a:active {
color: #F00;
text-decoration: none;
}
4가지 요소를 각각분리해서 visited부분에는 오렌지색을 hover부분에는 다른 초록색을 주고 글자의 색을 보라색으로 했다. active는 그대로 빨간색이다. html코드의 home부분에서 실제로 링크되는 웹페이지 주소를 daum으로 입력했다. 이제까지는 가상의 웹주소를 입력했지만 실제로 방문해봐야 visited 부분이 색이 변하는지 알 수 있기때문이다. home에 마우스오버하면 색이 변경되고 클릭하면 글자색이 빨간색으로 깜빡이고 daum으로 이동한다. 다시 페이지로 돌아오면 home버튼이 오랜지색으로 되어있는 것을 확인할 수 있다.



정상적인 파일-->

test3.html

이상한 문제의 파일-->

test3-2.html




댓글 (4)

댓글 목록