clone 페이지 구현을 위한 html태그, css속성
경일게임아카데미 웹페이지를 복사 구현하기 위해 다양한 태그와 속성을 이용한다.
1. html태그
- div
block속성을 가지고 있는 태그.
연속으로 작성시, 높이(height)만큼의 가로영역을 모두 차지한다.
그 다음 영역은 밑으로 떨어져 구현된다.
- span
inline속성을 가지고 있는 태그.
연속으로 작성시, 왼쪽부터 오른쪽방향으로 차례대로 구현된다.
- ul, li
목록을 작성할때 사용하는 태그.
li 태그안에 a태그 (앵커태그)를 넣어 사용한다.
a태그에는 이미지도 들어갈 수 있다.
a태그 속성값으로 아무것도 들어가지 않을때는 "#"을 사용한다.
<ul id="menu">
<li><a href="#">집사소개</a></li>
<li><a href="#">성장과정</a></li>
<li><a href="#">발톱정보</a></li>
<li><a href="#">커뮤니티</a></li>
<li><a href="#">감자캐기</a></li>
</ul>
토막 확장자 상식
1. gif : 용량이 적고 뒷배경을 투명하게 할수 있다.
2. jpg : 용량은 적당하고, 뒷배경은 투명하게 할수 없다.
3. png : 용량이 많이들고, 뒷배경을 투명하게 할수 있다.
4. svg : 벡터방식으로 용량이 가장크고,
사이즈를 늘이고 줄여도 깨짐이 없다.
아이콘으로 많이 쓴다.
2. css속성
-
position
position: absolute;
: body영역을 기준으로 요소를 움직이게 설정한다.
position: relative;
: 부모요소를 기준으로 움직이게 설정한다.
position과 함께 쓰이는 속성값
- top, right, bottom, left
: 2방향을 정한 픽셀만큼 이동시킨다.
4방향 설정은 불가능
- z-index
: 영역이 겹쳤을 시 화면 앞으로 보낼 것과 뒤로 보낼 것의 우선순위를 정한다.
숫자가 높을 수록 앞으로 나온다.
.visual-menu {
/*width: 1920px;
width: 100%;*/
height: 42px;
margin: 0 auto;
position: relative;
background-color: rgb(0,0,0,0.5);
bottom: 39px;
}
-
list-style
ul, li, href 등 부가적으로 붙는 것들을 조절해주는 속성값
list-style: none;
: li 사용시 앞에 붙는 동그라미를 없애주는 속성
ul,li{
list-style: none;
}
-
width: 100%;
영역의 가로 한줄을 모두 사용하겠다는 뜻
-
margin: 0 auto;
위 아래로 margin 0을 설정하고, 좌 우는 자동으로 설정하게 도와주는 착한 친구.
.header {
width: 1200px;
height: 100px;
margin: 0 auto;
box-sizing: border-box;
}
-
display: inline-block;
inline속성을 block속성으로 바꿔주는 속성값.
사용시 요소마다 빈 공간이 생긴다.
.visual-menu > ul {
margin: 0 auto;
display: inline-block;
padding-top: 9px;
}
-
float
div를 정렬할 때 사용한다.
block속성을 유지한 채 해당 요소를 설정 방향으로 이동시킨다.
근처에 붙어있는 요소들도 영향을 받는다.
해결법: 붙어있는 요소에도 float를 준다.
.footer-menu {
float: left;
width: 1200px;
padding: 20px 0 30px 0;
}
.footer-menu > ul > li {
display: inline-block;
float: left;
width: 110px;
box-sizing: border-box;
font-size: 12px;
}
-
text-decoration
a태그 사용시 밑에 그어져 있는 밑줄을 안 보이게 한다.
a태그는 block형태로 바꾸거나 inline형태로 바꿔줘야 크기조절이 가능하다.
-
text-align
현재 영역에서 부터 정렬을 할 수 있다.
* {
margin: 0;
padding: 0;
text-decoration: none;
color: aliceblue;
text-align: center;
}
-
background
요소의 배경색을 변경 할수있다.
투명도 설정이 가능하다.
.visual-menu {
/*width: 1920px;
width: 100%;*/
height: 42px;
margin: 0 auto;
position: relative;
background-color: rgb(0,0,0,0.5);
bottom: 39px;
}
-
opacity
선택자의 투명도를 조절한다.
.visual-menu > ul > li > a.on{
opacity: 1;
background-color: black;
}
3. clone 페이지 결과물
block속성을 가지고 있는 태그.
연속으로 작성시, 높이(height)만큼의 가로영역을 모두 차지한다.
그 다음 영역은 밑으로 떨어져 구현된다.
inline속성을 가지고 있는 태그.
연속으로 작성시, 왼쪽부터 오른쪽방향으로 차례대로 구현된다.
목록을 작성할때 사용하는 태그.
li 태그안에 a태그 (앵커태그)를 넣어 사용한다.
a태그에는 이미지도 들어갈 수 있다.
a태그 속성값으로 아무것도 들어가지 않을때는 "#"을 사용한다.
<ul id="menu">
<li><a href="#">집사소개</a></li>
<li><a href="#">성장과정</a></li>
<li><a href="#">발톱정보</a></li>
<li><a href="#">커뮤니티</a></li>
<li><a href="#">감자캐기</a></li>
</ul>
토막 확장자 상식
1. gif : 용량이 적고 뒷배경을 투명하게 할수 있다.
2. jpg : 용량은 적당하고, 뒷배경은 투명하게 할수 없다.
3. png : 용량이 많이들고, 뒷배경을 투명하게 할수 있다.
4. svg : 벡터방식으로 용량이 가장크고,
사이즈를 늘이고 줄여도 깨짐이 없다.
아이콘으로 많이 쓴다.
-
position
position: absolute;
: body영역을 기준으로 요소를 움직이게 설정한다.
position: relative;
: 부모요소를 기준으로 움직이게 설정한다.position과 함께 쓰이는 속성값
- top, right, bottom, left
: 2방향을 정한 픽셀만큼 이동시킨다.
4방향 설정은 불가능 - z-index
: 영역이 겹쳤을 시 화면 앞으로 보낼 것과 뒤로 보낼 것의 우선순위를 정한다.
숫자가 높을 수록 앞으로 나온다.
.visual-menu { /*width: 1920px; width: 100%;*/ height: 42px; margin: 0 auto; position: relative; background-color: rgb(0,0,0,0.5); bottom: 39px; }
- top, right, bottom, left
-
list-style
ul, li, href 등 부가적으로 붙는 것들을 조절해주는 속성값
list-style: none;
: li 사용시 앞에 붙는 동그라미를 없애주는 속성ul,li{ list-style: none; }
-
width: 100%;
영역의 가로 한줄을 모두 사용하겠다는 뜻 -
margin: 0 auto;
위 아래로 margin 0을 설정하고, 좌 우는 자동으로 설정하게 도와주는 착한 친구..header { width: 1200px; height: 100px; margin: 0 auto; box-sizing: border-box; }
-
display: inline-block;
inline속성을 block속성으로 바꿔주는 속성값.
사용시 요소마다 빈 공간이 생긴다..visual-menu > ul { margin: 0 auto; display: inline-block; padding-top: 9px; }
-
float
div를 정렬할 때 사용한다.
block속성을 유지한 채 해당 요소를 설정 방향으로 이동시킨다.
근처에 붙어있는 요소들도 영향을 받는다.해결법: 붙어있는 요소에도 float를 준다.
.footer-menu { float: left; width: 1200px; padding: 20px 0 30px 0; } .footer-menu > ul > li { display: inline-block; float: left; width: 110px; box-sizing: border-box; font-size: 12px; }
-
text-decoration
a태그 사용시 밑에 그어져 있는 밑줄을 안 보이게 한다.a태그는 block형태로 바꾸거나 inline형태로 바꿔줘야 크기조절이 가능하다.
-
text-align
현재 영역에서 부터 정렬을 할 수 있다.* { margin: 0; padding: 0; text-decoration: none; color: aliceblue; text-align: center; }
-
background
요소의 배경색을 변경 할수있다.
투명도 설정이 가능하다..visual-menu { /*width: 1920px; width: 100%;*/ height: 42px; margin: 0 auto; position: relative; background-color: rgb(0,0,0,0.5); bottom: 39px; }
-
opacity
선택자의 투명도를 조절한다..visual-menu > ul > li > a.on{ opacity: 1; background-color: black; }
3. clone 페이지 결과물
웹페이지 전체화면 캡처 방법
1. F12로 개발자도구 진입
2. Ctrl + Shift + P 동시에 입력
3. 모음집에서 "capture" 검색
4. 검색결과에서 "Capture full size screenshot" 클릭 후 저장
Author And Source
이 문제에 관하여(clone 페이지 구현을 위한 html태그, css속성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yoonk1228/clone-페이지-구현을-위한-html태그-css속성저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)