프론트엔드3

2023. 4. 13.

**프로젝트를 만들때 1. 주제를 정하여 2. 문구 등 디자인을 생각하고 3. 폴더생성 4.들어 갈 그림을 폴더에 저장

1교시

●position
position : fixed;        //화면고정(스크롤을 움직여도 고정된 위치로 보임)
                 absolute //절대주소(부모기준-꼭지점(1번) 기준)
                 relative   //상대주소(자기위치)
(top, left, right, bottom 등으로 위치 설정)

absolute, fixed, (relative) 는 레이어 개념을 갖는다.
※z-index : 레이어 개념(숫자가 클 수록 위로 올라옴-고정됨)  //99를 제일 큰 숫자로 생각
ex) 3번의 z-index: 1;
      2번의 z-index: 0;  
예시는 상단의 사진 처럼 적용 됨

★응용법
header에 하단의 값을 주면 머리말(제목, 회사이름, 로고) 부분이 고정된다!
position: fixed; top: 0; left: 0;
z-index: 99;

•position 설정은 부모 태그를 기준으로 함
부모: relative(상대적 위치-순서대로 설정, 처음에 출력된 위치가 기준이라 absolute 보다 큰 범위만큼 움직임)
자식: absolute(절대위치-왼쪽 위가 첫 기준)

---

2교시

●문자코드 사용하는 법
Entity Code (필요할때 찾아서 쓰기) - https://entitycode.com/

Entity Code - A Clear and Quick Reference to HTML Entities Codes

예시

●letter-spacing 글자 간격(자간) 조정

●헷갈렸던 부분
<article class="at1">
            <ul class="small_img">
                <li>
                    <div class="imgBox">       //1번째 자식
                        <img src="./img/img1.jpg" alt="">
                    </div>
                    <p>상품명</p>                    //2번째 자식
                    <p>규격 사이즈</p>            //3번째 자식
                    <p>159,000</p>               //4번째 자식
                </li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
</article>

.at1 .small_img li p:nth-child(2){

    margin-top: 10px;
}
▶2번째 자식인 이유 : div가 첫 번째 자식임(p라고 언급해도)

●크롬에서 사진 편하게 저장하는 방법
1. 크롬에서 웹 스토어 검색
https://chrome.google.com/webstore/category/extensions?hl=ko

Chrome 웹 스토어

2. 검색창에 image downloader 검색하여 다운로드
원하는 사이트 오른쪽 위 퍼즐모양(확장프로그램) 눌러 3. image downloader 클릭하면 페이지의 사진 전부 보임

·자매품: 검색창에 color picker 검색하여 다운로드 하면 타 웹사이트에서 맘에 드는 색 끌어오기 가능

---

3교시
디자인

●커서를 올렸을 때 반응하는 효과
transform: scale(1.5); 커서 올리면 크기가 커짐 1.5배
overflow: 방해하지 않고 커짐(가리는것 없이)
transition: all 0.5s; 반응속도

●검색창 만들기

1. div를 통해 상자2개를 만든다.(클래스 이름 word, kind)
분홍 상자 부분인 div class를 만들어서 검색창 요소를 공통으로 묶어준다.
-> 테두리, 위치 등 한 번에 디자인 가능

2. word 상자 설정
•input : 사용자에게 데이터를 입력받을 수 있는 태그
•placeholder : 검색창의 안내문구
<input type="text" class="input_value" placeholder="찾는 상품명 입력">
사용자는 문자(text)를 통해 입력한다.
입력 전 "찾는 상품명 입력"이라는 내용이 보이고 문자를 입력하면 내용은 사라진다.

3. kind 상자 설정
폰트 어썸의 아이콘 링크(돋보기 모양) 붙여넣기

*css의 디자인은 홈페이지 특성에 맞게 적용하자!

완성!

---

4교시

●카테고리별 아티클 작성 법
자바스크립트 이용해서 카테고리<nav>의 항목을 누르면 상세페이지(아티클에 내용 작성)로 넘어감

1. javascript 폴더를 생성하여 index.js 파일 만들기

2. head 부분에  
<script src="javascript/index.js"></script> 추가하면 연결 됨

3. 띄우고자 하는 화면 효과에 맞게 position 설정 되어있어야 함

4. 카테고리 별 article (at1, at2 등) 만들고  클래스 옆에 id 설정 후  nav 부분에 클릭효과(onclick)를 넣으면 자바스크립트가 실행 됨
(전) <div>카테고리 이름</div>
(후)→<div onclick="func0()">카테고리 이름</div>
*아티클의 내용은 어제 배운 내용대로 디자인

5. index.js 파일에서 보여주고자 하는 화면은 block 나머지는 none 처리

◆ 작업화면에 at2(상세내용)가 보이게 설정하는 법
article{
    display: none;
}
.at2{
    display: block;   // block 부분만 보임
}

●선택자
Class : 중복 가능하다
id : 중복될 수 없다. #으로 표시

---

5교시~(실습)

카테고리(남성) 화면 디자인

●float 사용 시 영역 침범이 발생 할 경우
·overflow: hidden; : float를 적용한 부모요소에 적용하면 아래의 다른 요소가 영역을 침범하는 것 막음.

·clear: both; : 위의 영역을 침범하는 아래의 요소에 적용, 양 옆에 아무 것도 오지 못하게 함, 가로 정렬 해제를 원하는 부분에 작성

•오늘의 실습

 

---

오늘의 후기
- 점점 다양한 기능을 배우는게 재밌다
(프론트엔드는 바로바로 눈에 보이는게 재밌다고 하는 이유를 알겠다)
- position을 이해했다고 생각했는데 적용 할 줄 모르겠다
- 아직 안배운 기능이 많은데 뭐를 배우지 않은지 몰라서 혼자 하려고 할 때 왜 이게 안되지 라는 생각이 많아진다
강사님께 여쭤보면 내일 배울 내용이라고 하신다(궁금증 해결 ㅋ)
- 강사님은 오늘 자바스크립트가 계획에 없으셨는데 답답하셨는지 갑자기 배우게 되었다
(나는 아직 한 화면을 만드는 것도 어려웠는데 새로운 내용이 들어와서 머리가 지끈 했다) 고작 func 하나 했는데
- overflow와 clear에 대한 이해가 부족하다
- 점점 화려해지는 화면에 뿌듯함이 생긴다^_^