2024. 08. 12 UIUX 웹 18일차

=> 문제를 풀면서 수업(정답 x) 

 

 

https://www.slog.gg/p/13684#f

SBS 아카데미, UI/UX/웹디자인 과정

- 수업페이지 주소(기억!, 카톡이나 메모장에 기록)

- 수업 중 녹화_ 유튜브에 업로드(일부 공개기 때문에 위 주소로 클릭해서 확인)

ㄴ 장희성 강사님 수업페이지 

 

 

https://www.slog.gg/p/13144#82%EA%B0%95

HTML, CSS

- 20단계 소스코드를 혼자 힘으로 구현

- 새 코드펜 주소 : codepen.io/pen

 

 

https://www.slog.gg/p/13693#f

부분모작 - likelion.net

- 수업 시간에 진도나가는 페이지

 

몰입코딩

https://www.youtube.com/@micoding

몰입코딩 아카이브

ㄴ 그날 수업한 거 녹화해서 업로드(youtube. 몰입코딩 아카이브)

---

text aligin : 텍스트 정렬 속성

border-radius : 박스 테두리 둥글게 만드는 속성

---

2024 웹 퍼블리싱

- HTML // CSS

- FLEX: 70%이상 사용

dispaly:  flex;  /  dispaly:  inline-flex ;

display: block / display:  inline-block;

 

형제 엘리먼트 입장에서는

display: flex == block

display:inline-flex == inline block

 

 

 

   1) display: block; 글자화

   2) inline-block, inline flex inline  : 글자화

---

flex 개구리

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

 

flex 디펜스

http://www.flexboxdefense.com/

Flexbox Defense

position 속성 정리

 

 

* div >section : nth-child(2)

 

*position absolute: 유형화 / 기준을 가지고 있음 

 

*z-index

 

 *position relative: 유령의 집

 

* absolute : 유령 

 

* to, bottom, 

---

[자바스크립트]

 

https://school.programmers.co.kr/learn/courses/3/3-hello-javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%85%EB%AC%B8

Hello, JavaScript: 자바스크립트 입문

ㄴconsole.log - 실습 선택 

 

https://school.programmers.co.kr/learn/courses/3/lessons/162

프로그래머스

 

---

[position 속성 정리]

 

종류absolute, fixedrelativestatic너비본질겹침허용이동

최대한 줄어든다.	그대로 유지	그대로 유지
유령화, 유령의집화	유령의집화	사람화
겹치는게 가능	겹치는거 불가능	겹치는거 불가능
top, left, right, bottom으로 이동, 기준이 부모유령	top, left, right, bottom으로 이동, 기준이 현재위치	-

 

유령의 집 + 유령

---

[html]

<section>
 div*9+Tab
</section>

 

[css]

---

[가운데 정렬]

  margin-left: 100px;
  margin-right: 100px;

 

  margin-left: auto;
  margin-right: auto;