☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 36_ 웹표준) header

조반짝 2023. 6. 16. 16:23
728x90
반응형

웹표준 

▶ reset. css

* { } = 전체 적용됨 

.mt10 은 margin-top 10 자동으로 전체 들어감. 

!important → 우선순위로 적용이 됨

 

>> reset.css 를 미리 만들어 놓고 사용하면 편리함.

reset.css 를 제일 첫번째로 링크해야함. 순서를 반드시 지켜야함!

●meta 태그 : 웹페이지에대한 설명 

웹폰트 적용

반드시 웹폰트를 사용해야한다.

link - html에 적용

import - css 에 적용

html 골격만들기

**컨테이너를 넣는 이유

똑같은 컨테이너를 반복해서 각 영역에 넣는 이유는 각 영역의 양쪽 부분을 따로 따로 사용하기 위해서!!!

css 편집하기

각 태그의 영역을 잡아준다

html 에 .container 를 각 아이디에 넣어준다.

css에서 .container  편집

컨테이너 영역이 잡히게 된다.

 

skip navigation 

네이버에서 tap을 누르면 왼쪽 상단에 상단메뉴보기라는 버튼이뜨고 엔터를 누르면 화면과 같이 탭으로 메뉴를 선택할 수 있다.

id 만 skip navigation이 가능하다. class 는 불가능함 (class는 여러이름을 사용하기 때문에 지정영역으로 갈 수 없다.)

skip navigation 만들기

skip navigation은 wrap 위에다가 만든다.

●  <a href="#"> :  # > 클릭했을 때 이동할 경로

reset.css 에서 a:hover 활성화 하면 링크할 수있다.

css에서 아이디 skip 편집하기

맨 밑에 썼던 컨텐츠 영역이 제일 위로 가게 된다.

active, focus : skip navigation 활성화 

active: 활성화

focus: 탭 눌렀을때 검은색 화면 뜨게 해줌

01 header 

헤더 부분은 100% 이미지를 넣을 것이다.

 

background 이미지 넣기

.  → 자기자신 : css 파일

.. → 부모 폴더: css파일 상위 폴더

이미지파일을 넣는것이 아니기 때문에 높이 값을 지정해줘야 이미지가 적용이 된다.

 

이미지를 100% 적용하기 위해서는 #header 에 background를 넣어 줘야한다.

화면을 확대 축소를 하면 이미지크기가 달라진다. 

repeat 생략 가능하다. 

html> header 메뉴, 타이틀, 아이콘 골격잡아주기

 

header_menu

css header_menu 편집

a 태그 위치 편집 시에 padding 으로 위치를 잡아준다.

윗쪽 여백이 적용이 안되는데 이런 경우는 a태그가 인라인구조이기 때문이다.

display: block 적용을 하면 한줄로 떨어지게 되므로 인라인구조 기능도 가지고 있는 display: inline-block 구조로 바꿔주면

윗쪽 여백이 떨어지게 된다.

마우스 오버시 글자색이 변경되기 위해서 a에 :hover 사용 하고 a태그에 transition 속도를 지정해줌 

header_tit편집

a태그에 링크 주소를 넣어줌

css 편집

mt 50을 class header_tit 옆에 넣어주면 바로 마진탑 50px 이 적용된다 

글자 너비에 맞게 색칠해 주기

display: inline-block 으로 해주면 글자너비에 맞게 색이 칠해진다.

하지만 그 다음 글자가 바로 옆으로 붙게 되는데 html 가서 h1 옆에 br을 넣어주면

a태그(자바기반풀스텍 웹개발자3)다음 줄로 가게된다.

 

tit a 편집

css header_icon편집

_ 이미지 넣기

.header_icon 안에 a태그 적용, a태그 안에 span 태그 적용

icon 에 mt30 적용

css 편집

icon 모양, 영역 잡아주기

아이콘 이미지 넣어주기

background: url 로 넣어주면 이미지가 들어가지만 똑같은 이미지만 들어가게 된다.

이미지를 포토샵으로 불러오면 각각의 이미지 크기가 60px x 60px 인 것을 알수 있다.

 

● background-position 명령어로 좌표축을 지정하여 화면에 보여지는 좌표로 이미지를 보이게 할 수 있다.

하늘색 바탕의 아이콘을 위치를 지정해 주기 위해 Y축으로 - 방향으로 올라가도록 위치시켜주면된다.

hover 시에 파란색 바탕으로 변경하기 위해서는 x축 방향으로 -60 가고 Y축 방향으로 각아이콘들이  -60 배수씩 움직여주면된다.

span 글자 없애주기

>> span 사이즈 크기를 0으로 지정하면 텍스트가 없어지지만 텍스트효과를 다 지워야하기 때문에 번거롭다.

IR 효과

의미있는 이미지의 대체 텍스트를 제공하기 위해 아이콘마다 class를 지정하여 ir_pm 을 적용한다.

아이콘에 텍스트가 사라지지만 의미는 그대로 남게 된다.

 

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="조반짝 팀프로젝트 이름(제작자)">
    <meta name="description" content="웹표준에 의한 웹페이지 샘플링입니다.(내용)">
    <meta name="keywords" content="웹표준, 조반짝, 하이미디어, 샘플사이트(키워드)">
    <meta name="generator" content="Visual Studio Code(작성도구)">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹표준_header</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">


    <!-- 웹폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 스킵 네비게이션 -->
    <div id="skip">
        <a href="#cont_nav">전체 메뉴 바로가기</a>
        <a href="#cont_ban">배너 영역 바로가기</a>
        <a href="#cont_cont">컨텐츠 영역 바로가기</a>
    </div>

    <div id="wrap">
        <div id="header">
            <div class="container">
                <div class="header">
                    <div class="header_menu">
                        <a href="#">로그인 가입</a>
                        <a href="#">CONTACT US</a>
                        <a href="#">ENGLISH</a>
                    </div>
                    <div class="header_tit mt50">
                        <h1>하이미디어 구로캠퍼스</h1><br>
                        <a href="https://www.himedia.co.kr/">자바기반 풀스택 웹개발자3</a>
                    </div>
                    <div class="header_icon mt30">
                        <a href="#" class="icon1"><span>icon1</span class="ir_pm"></a>
                        <a href="#" class="icon2"><span>icon2</span class="ir_pm"></a>
                        <a href="#" class="icon3"><span>icon3</span class="ir_pm"></a>
                        <a href="#" class="icon4"><span>icon4</span class="ir_pm"></a>
                    </div>
                </div>
            </div>
        </div>
        <section id="contents">
            <article id="cont_nav">
            <div class="container"></div>
            </article>
            <article id="cont_tit">
            <div class="container"></div>
            </article>
            <article id="cont_ban">
            <div class="container"></div>
            </article>
            <article id="cont_cont">
            <div class="container"></div>
            </article>
        </section>
        <div id="footer">
            <div class="container"></div>
        </div>
    </div>
</body>
</html>

<reset css>

@charset "utf-8";

/* 여백 초기화 */
body,div,ul,li,dl,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,legend,p,select,table,
th,td,tr,textarea,button,form{margin: 0; padding: 0;}

/* a 링크 초기화 */
a {color: #222; text-decoration: none;}
a:hover {color: #390;}

/* 폰트 초기화 */
body, input, textarea, select, button, table {
    font-family:'Nanum Gothic',AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;
    color: #222; font-size: 13px; line-height: 1.5;}

/* 폰트 스타일 초기화 */
em,address {font-style: normal;}

/* 블릿기호 초기화 */
dl,ul,li,ol,menu {list-style: none;}

/* 제목 태그 초기화 */
h1,h2,h3,h4,h5,h6 {font-size: 13px; color:#222; font-weight: normal;}

/* 테두리 초기화 */
img,fieldset {border:0 none;}

/* 버튼 초기화 */
button {border:0;}

/* IR 효과 */
.ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */
.ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고하 할 때 */
.ir_su {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */

/* margin, padding */
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt35 {margin-top: 35px !important;}
.mt40 {margin-top: 40px !important;}
.mt45 {margin-top: 45px !important;}
.mt50 {margin-top: 50px !important;}

<style.css>

@charset "utf-8";

#wrap{
    width: 100%;
}

#header{
    width: 100%;
    height: 325px;
    /* 헤더 이미지 높이 고려 */
    background: url(../image/header_bg.jpg) no-repeat top center;
    /* 이미지를 고정하기 위해 no-repeat을 해주고 위치를 잡아주어야하고 repeat으로 변경*/
}

#contents{}
#cont_nav{
    width: 100%;
    height: 200px;
    background-color: lightcoral;
}
#cont_tit{
    width: 100%;
    height: 200px;
    background-color: lightcyan;
}
#cont_ban{
    width: 100%;
    height: 200px;
    background-color: lightgray;
}
#cont_cont{
    width: 100%;
    height: 200px;
    background-color: lightgreen;
}

#footer{
    width: 100%;
    height: 220px;
    background-color: lightseagreen;
}

/* container */
.container{
    width: 990px;
    margin: 0 auto;
    height: inherit;
    background-color: rgba(255,255,255,0.3);
}

/* skip */
#skip{
    /* 기준점 잡아주기 */
    position: relative;
}
#skip a{
    position: absolute;
    width: 140px;
    background-color: #333;
    color: #fff;
    height: 30px;
    text-align: center;
    line-height: 30px;
    /* 탭 위치 설정 */
    left:0;
    top: -40px;
}
/* 스킵 네비게이션 활성화 */
#skip a:active,
#skip a:focus{
    top: 0;
}

/* header */
.header{    
    /* height: 325px; */
}

.header .header_menu{
    /* background-color: aqua; */
    /* 메뉴 오른쪽으로 정렬하기 */
    text-align: right;
}
.header .header_menu a{
    color: #fff;
    /* top,left,bottom 여백주기 */
    padding: 10px 0 10px 20px; 
    /* 윗쪽여백이 안 먹힘 > inline-block 을 사용함 */
    display: inline-block;
    /* 마우스 오버 속도 넣기 */
    transition: all 0.5s;
}

.header .header_menu a:hover{
    /* 마우스 오버시 글자색 바뀔수 있도록 한다. */
    color: #333;
}

.header .header_tit{
    /* background-color: red; */
    text-align: center;

}
.header .header_tit h1{
    color: #fff;
    background-color: #4aa8d4;
    font-size: 28px;
    /* 글자에만 색칠해주기 문제는 a태그에 붙게됨 */
    display: inline-block;
    padding: 5px 20px;
    transition: all 0.5s;
    text-shadow: 0 2px 2px darkblue;
    
}

.header .header_tit h1:hover{
    background-color: darkblue;
    cursor: pointer;
}

.header .header_tit a{
    font-size: 18px;
    background-color: #2698cb;
    display: inline-block;
    /* 위아래 박스 여백이 없어짐 */
    padding: 5px 20px;
    color: #fff;
    /* 위아래 박스 겹쳐지게하기 */
    margin-top: -7px;
}

.header .header_icon{
    text-align: center;
}
.header .header_icon a{
    width: 60px;
    height: 60px;
    background-color: #333;
    /* 인라인 구조이기 때문에 display: inline-block 적용*/
    display: inline-block;
    /* 양옆 여백주기 */
    margin: 0 5px;

    /* 아이콘 이미지 넣어주기 */
    background: url(../image/icon.png);
}

.header .header_icon a.icon1{
    background-position: 0px 0px;
    /* 백그라운드 포지션으로 이미지의 위치(X,Y)를 지정해준다.  */
}
.header .header_icon a.icon2{
    background-position: 0px -60px;
}
.header .header_icon a.icon3{
    background-position: 0px -120px;
}
.header .header_icon a.icon4{
    background-position: 0px -180px;
}

.header .header_icon a.icon1:hover{
    background-position: -60px 0px;
}

.header .header_icon a.icon2:hover{
    background-position: -60px -60px;
}
.header .header_icon a.icon3:hover{
    background-position: -60px -120px;
}
.header .header_icon a.icon4:hover{
    background-position: -60px -180px;
}

.header .header_icon a span{
    font-size: 0;
    /* lineheight 값이 먹기 때문에 매번 주기가 번거롭다. */
}
728x90
반응형
저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 38_ 웹표준) menu  (0) 2023.06.19
비주얼 스튜디오 코드_37 Fade In & Fade Out  (0) 2023.06.16
비주얼 스튜디오 코드 _ 35 로딩 애니메이션  (0) 2023.06.16
비주얼 스튜디오 코드 34 _ 애니메이션 효과 _ 마을의 하루 예제  (0) 2023.06.15
비주얼 스튜디오 코드 33 _ 프로필 카드 만들기  (0) 2023.06.15

'☭DEVELOPER/#2 웹개발(자바기반 풀스택)'의 다른글

  • 현재글비주얼 스튜디오 코드 36_ 웹표준) header

관련글

티스토리툴바