24년 08월 29일

오전

클론코딩 계속 작업중..

 

오늘 클론코딩을 js(자바스크립트) 없이 css만 사용해서 만들기를 하고 있는데 하면서 깨달은 점이 있다.

css 만으로도 웹페이지 기능들을 구현가능하지만 너~~~무 오래걸린다.

(선생님조차도 배너 하나 만드는데 몇시간이 걸렸음..)

 

css만으로 웹페이지를 만드려고 하면 선택자를 일일히 다 지정해주어야 하기 때문에 일이 너무 복잡해지고 힘들어진다.

이럴 때는 js를 사용해서 변수로 작업해야 작업이 수월해짐.

---

.banner>.slide-block>#s2:checked~.slide-wrapper{
    left:-1160px;
    opacity: 1;
} // id s2가 체크 됐을 때 .slide-wrapper 클래스가 -1160px 만큼 이동
.banner>.slide-block>#s3:checked~.slide-wrapper{
    left:calc(-1160px * 2);
    opacity: 1;
} 
.banner input[type="radio"]{
    display: none;
}

opacity : 요소 투명도 값  (1이 불투명 0이 투명)

 

클론코딩으로 만들어본 프로그래머스 웹페이지(미완성)

 

banner 움직이는 원리 : (페이지 그림 부분)

width 를 길게 설정해서 사진을 일렬로 나열함. 그리고 overflow : hidden 을 설정해서

겹치는 부분 안보이게 만듬.

그리고 input radio 타입으로 사용.

radio 에 id를 하나씩 지정 - 사진 하나씩 연결 후에 다른 라디오 선택될 때마다 css로 사진이 옆으로 넘어가게 만듬. 그 후에 transition 설정해서 부드럽게 넘어가는 효과 만들어줌.

---

 

오후

클론코딩 1시간 정도 더 하고 마무리

section 3번부터

3번 section

 

display : grid 속성

 grid-template-columns: repeat(3, 1fr);

(한 줄에 요소 3개씩 동일한 비율로 나열하겠다 는 뜻)

 

클론코딩을 하면서 느낀 점 : 함부로 이곳저곳에 display:flex 설정을 하면 안된다는 것. 여기저기서 충돌이 나서 위치가 완전히 꼬여버림 !!

 

그리고 오늘 수업들으면서 좀 어지럽고 힘들었는데, 알고보면 어려운 함수라던가 그런건 여기는 전혀 없는데 선택자를 여러개 지정해서 각자 속성을 지정하다 보니 순서같은게 헷갈려서 어려웠음.

---

코드를 쓸 때 어떤 블록이 어떤 블록인지 알 수 있도록 주석으로 구역 나눠서 구분해놓기 !!

---

**css 로 별점 만들기 (프로젝트할 때 쓸 수 있을듯) ****

근데 js로 하는게 편하다고함

부트스트랩 , offcanvas , modal ,navbar

부트스트랩 navbar 적용

부트스트랩을 사용하면 이런식의 내비게이션 바를 간단하게 만들 수 있다.

---

.wrapper>header>.top-header+nav^main>section>footer

html 웹페이지 만들때 자주 사용하는 구조 (여기서 더 구조를 추가하거나 함)

 

 

조별과제 역할 나누기

 

내가 맡은 페이지