2023. 4. 14.
1교시
*국내 웹사이트 디자인 참고용
https://www.dbcut.com/
디비컷 - 웹디자인 평가 및 우수 웹사이트 모음
국내외 우수 웹디자인 레퍼런스 사이트
www.dbcut.com
홈페이지에서 드래그 안되는 문자는 그림이다.(참고)
●배경화면 위에 디자인 하는 법
•body 에서 클래스 생성 후 css 공간에서 디자인 함
<div class="back"></div>
-> 이 내용만 작성
•css디자인 예시
.back{
position: fixed; top: 0; left: 0; //배경화면은 고정 값
z-index: -1; //사진을 배경화면으로(숫자가 클 수록 먼저 보이므로 음수 값을 줘 뒤로 보냄)
width: 100%; height: 100%; //화면크기 설정
background: url(../img/bg1.jpg); //css에서 빠져나와 img 폴더로 접근해서 사진 선택
background-size: 100% 100%; //전체화면 설정
}
●카테고리 여백 조정법
40+9 = 49(사용한 공간)
100-49=51(여백)
•51으로 왼쪽 10 오른쪽 10 아이콘과 문자 사이에 31을 줌
2교시
●카테고리<nav> 중 세부 카테고리 나오는 효과 넣기
●<div class="find icon"> 클래스 2개(find, icon) 준 것
icon 클래스는 공통의 영역으로 설정하고 find 영역은 단독으로 설정하여 디자인시 활용
●position 활용
-파란색 상자
position: relative; top: 0; left: 0; // 삼단바는 고정 값(부모)으로 기본 위치에 둠
position: absolute; top: 50px; left: 110%; // 상세카테고리는 자식 : nav만큼 top 값 주어 간격을 띄워주고 left는 상자 안보이게 비율보다 큰 값(넉넉하게 110%)을 줌
•이렇게 설정하면 ul(큰 빨간 상자)에 작성한 상세카테고리는 화면에 보이지 않음
•때문에 호버를 이용하여 마우스를 올리면 left 값이 0이 되게 설정하고 화면에 다시 보이게 됨
ex)작은 빨간 상자
.bar:hover ul {
left: 0; // 마우스를 올리면 나오는 효과 (left 값이 0이 되면서 상자가 보이게 됨)
}
-이렇게 설정하고 마우스를 삼단바에 올리면 화면의 비율이 100%를 넘기 때문에 화면이 움찔한다.
●화면에 비율이 넘었을때 화면 움직이는 것 조절
body {
overflow-x: hidden; // x축만 조절하기, 전체를 조절하면 스크롤 바까지 사라짐
}
●transform: translate(좌우 값, 상하 값) // 상자의 좌우상하 이동 코드
3교시
animation : 움직임
●페이지에 접속 했을 때 화면의 글씨가 나타나는 효과
-노란 상자의 문구가 밑에서 위로 올라오는 효과를 주고싶다면
▶
.at1 { //공통적으로 효과 주려고 at1에 함(상속의 개념)
position: absolute; top: 50%; left: 50%;
width: 1000px; height: 300px;
border: 0px solid white;
transform: translate(-50%, 0%);
color: white;
text-align: center;
animation: at1_ani 2s; //(분홍상자)움직임 시간 2초
}
▶파란색 상자
@keyframes at1_ani(애니메이션이름) {
0% { top: 55%; opacity: 0;} //애니메이션의 시작 프레임(=from)
100% { top: 50%; opacity: 1;} //애니메이션의 종료 프레임(=to)
}
**top에 양수 값을 주면 위로 떠오르는 효과, 음수는 아래로 내려오는 효과
0~100%의 스타일로 점차 변함
•opacity 속성 값이 0이면은 투명 1이면 불투명
●스크롤을 통해 아티클을 넘겨보고 싶을 때
●빨간상자
-position을 설정해서 작업함 (absolute (자식태그)에 top 100%줘서 화면 아래가 보이게 함)
at1의 position: relative; top: 0; left: 0;
at2의 position: absolute; top:100%; left: 0;
(참고) at1 디자인 후 at2 디자인 시 top을 0으로 두면 at2 화면이 고정되어 보여짐!
4교시
●카테고리(nav) 안에 있는 상세카테고리(ul)를 클릭하면 나오는 새로운 화면 만들기
*a태그 : 문서 연결 태그
1. 글자색이 파랑으로 설정
2. 밑줄이 그어짐
3. 손가락이 자동으로 나옴
->이러한 특징들이 필요없다면 css에서 재설정하기!
->a태그를 상세카테고리(body - nav 중 설정한 부분) 에 <a href="링크 주소">상세카테고리명</a> 작성
•원하는 링크주소 ex) "http://kbc.co.kr" 또는 내가 제작한 주소 ex) korea.html 를 작성
•제작한 주소를 작성한다면 korea.html, korea.css, korea.js 파일 생성하여 화면 구성
●상세카테고리를 클릭하여 새로 접속한 주소에서 이전의 페이지로 돌아가는 버튼 만들기
-새로 만든 korea.html 파일에 header 작성을 하여 디자인 한다
<header>
<p class="home">
<a href="index.html"> //a태그를 통해 홈 주소 연결
<i class="fa-solid fa-house"></i> //홈 아이콘 만들기
</a>
</p>
<p class="na">한국 본사</p> //회사 이름(머리말)
</header>
-> 홈 아이콘에 a태그를 적용하여 기본 링크 주소를 연결해줌.
●새로운 페이지로 열림
<a href="http://kbs.co.kr" target="_blank">전 체</a>
a태그 링크주소 다음에 target="_blank"를 하면 새로운 페이지로 열림 ex)네이버
(안하면 기존 페이지에서 변경되어 원래의 페이지로 가려면 뒤로가기 사용) ex)구글
5교시 실습 ~
●한국와이어프레임 기획에 맞게 디자인하기
*작성한 기본 내용과 같은 내용의 파일을 만들어 변형하고 싶다면 (상세 카테고리 링크의 구성을 같게 하겠다)
내컴퓨터 - 문서에서 각자의 korea.html, korea.css, korea.js 파일 복사해서 붙여넣기 후 이름과 내용 변경
●flex-wrap: wrap; //nowrap 디폴트 값
100%가 넘어가면 자동으로 줄 바꿈 ->이미지 6개를 2줄로 표현하고 싶을 때 사용
•이미지의 길이를 30%로 설정하면 6*30=180% 라 화면 100%를 넘기 때문에 flex-wrap: wrap; 을 활용하여 3개씩 2줄로 표현 가능!
●그림 누르면 글씨 보이게 하는 효과
●overflow: hidden; 설정 된 비율을 넘어가면 숨기기 하겠다.
- position 이용
사진과 글을 넣기 위해 만든 img6 클래스의 li에 1) position을 주고 사진과 글씨의 크기가 비율을 넘었기 때문에 발생된 2) overflow를 숨겨준다.
1) position: relative; top: 0; left: 0;
2) overflow: hidden;
-> 사진 뒤로 글자가 숨는 효과 발생
3) .at1 .img6 li:hover .img6_text { // li에 호버(마우스 효과)하면 글자(검은색) top:0
top: 0;
}
-> 마우스를 올리면 글자가 보이는 효과 발생
+추가
1. 파란색 상자
class ="img6_text" 부분의 position top에 70%를 주면 글자부분 상단으로 부터 70%만큼 내려가기 때문에 작성한 상품명(첫 줄) 만 보이는 효과가 생긴다.
2. 빨간색 상자
글자를 작성한 배경에 투명도를 주어 글자와 그림이 모두 보이게 하고싶다면 문자를 작성한 부분의 배경색(background)를 지정하고 색상 설정의 가운데 부분을 통해 투명도를 조절한다.
●사진 클릭하면 변경되는 효과 복습(상단 사진의 화살표를 누르면 다음 사진이 뜸)
변화가 보이고자 하는 사진에 id를 줌
<p><img src="img/big1.jpg" alt="" id="pic"></p>
여러개 있는 이미지의 코드<img "src="img/big1.jpg" alt="">에 onclick="pic.src='img/big1.jpg' 추가
ex)
<div class="img3">
<img onclick="pic.src='img/big1.jpg'"src="img/big1.jpg" alt="">
<img onclick="pic.src='img/big2.jpg'"src="img/big2.jpg" alt="">
<img onclick="pic.src='img/big3.jpg'"src="img/big3.jpg" alt="">
</div>
사진 클릭하면 변경 완료!
오늘의 후기
- position 과 overfolw 에 대한 이해는 되었다
(그치만 수업에서 적용했던 부분에만 적용 가능하고 다른 어떤 용도로 사용되는지는 아직 모르겠다)
- 드디어 화면 비율(크기)을 계산하는 방법을 알았다
- 클래스를 2개 지정하는 부분 코드를 읽는게 헷갈린다
(<div class="find icon"> find이라는 클래스, icon이라는 클래스 로 봐야하는데 find icon이라고 하나의 클래스로 봐서 css에서 해당 부분을 찾는데 애를 먹었다,,)
- 점점 재미있는 기능들을 많이 배우고 있는데 프론트엔드를 2주밖에 안배운다는 것이 조금은 아쉽기도 하였다
- animation이 아직은 어렵다
- 드디어 a태그를 배우다니,, 엄청난 영역에 접근한 것 같아 두렵다
- 비전공자가 많은 수업이다보니(나 포함) 갑자기 수업 속도가 느려졌다
- 상속이라는 것을 이론으로만 알고 있었는데 이제야 확실하게 알게 되었다. 너 좋은 친구구나!
(상속 활용을 잘 하고 싶다)
- 하루가 너무 짧다(시간 순삭)
