비주얼 스튜디오 코드 > new file > 파일 이름: style.css 새파일 생성 > @charset "utf-8" (셋팅을 한국어로 만들어준다<.)
[기본 셋팅코드]
a태그: 링크 걸어주는 태그
img{ display: block; }: 인라인 구조이기 때문에 블럭구조로 변경(여백을 없애줌)
new file > index.html 파일에서 head에 style.css 링크 달아서 외부에서 불러오기
<link rel="stylesheet' hredf="./css/style.css">
container
html
clearfix: 바로 위에 엄마에게 클리어픽스를 줘서 일층레이어를 채워줌
header
.header .nav ul li a{}
a는 링크를 걸어주는 태그로 html에서 리스트태그 안에 <a href="#(임시태그)">를 넣어줘야한다.
navigation
nav 하위 메뉴 리스트 넣어주기
<ul>
<li>
a태그
하위로 넣어주기
a에 색을 넣어주어야 hover 했을때 따로따로 색이 변경된다.
서브메뉴 가려주기
마우스를 올려놨을 때 서브메뉴가 나타나게 하기
JQUERY 플러그인 생성
구글에 제이쿼리 검색 후 제이쿼리 다운로드 > google cdn > 스니펫 복사 > footer 밑에 붙여넣기
this는 한줄씩 서브메뉴가 나옴
".nav>ul>li 은 전체 서브메뉴가 보여짐
**배너에 이미지가 들어갈 시에 서브메뉴가 안나오기 때문에 position을 .header .nav ul li를 기준점으로 relative를 넣어주고 .header .nav ul li ul.submenu li에 absolute를 넣어줌
contents
공지사항만들기
contents > notice 공지사항부분
^ 공지사항 줄간격 맞춰주기
컨텐츠 리스트 가상요소에 목차 블릿기호 넣어주기
컨텐츠 > 갤러리 만들기
마진 오른쪽에 10px씩 여백주고 마지막사진은 마진 0준다,
링크 만들기
footer
p태그는 블럭구조, 박스
adress 주소태그
완성!
팝업창 만들기
클릭이벤트
section태그 클래스 =layer 생성
팝업창 가운데정렬
transform:translate(): 팝업창의 중심점이 전체화면의 중앙에 가도록 함.
팝업창은 사용자가 필요로하는 창을 가려줘야지 이상적이다.
position: absolute;
relative를 안 잡아주면 무조건 왼쪽 상단이 기준점이 됨.
left, top으로 %치수 조절해서 위치를 잡아줌.
left 50%, top 50% 팝업창의 왼쪽 상단 꼭지점이 left, top이 전체화면의 50%지점에 위치하게 된다.
br태그: enter 기능
팝업창 활성화하기
#layer{}
display:none; 팝업창 없애주기
html
li에 이름을 부여해주기
script에서의 주석 //
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드⑭ 피그마이용해서 이미지크기 조절 ㅣ 콘텐츠 모양을 자유롭게 변형하기_2 (0) | 2023.06.05 |
|---|---|
| 비주얼 스튜디오 코드⑬ 콘텐츠 모양을 자유롭게 변형하기 (0) | 2023.06.05 |
| 비주얼 스튜디오 코드⑪ 네비게이션, 이미지 넣기 (0) | 2023.05.26 |
| 비주얼 스튜디오 코드⑩ 레이아웃 심화 (0) | 2023.05.26 |
| 비주얼스튜디오코드 기초③ 웹페이지 레이아웃만들기 (0) | 2023.05.25 |