[211228] label응용, positon:flex, box-shadow, 라이브러리

목차

1.   input과 label

2.   transform

3.   display:flex

4.   box-shadow

 

 

---

1. input과 label 

See the Pen label by supermint (@ma_ad_shouri) on CodePen.

 

 

1) input과 label이 선언된 순서대로 각각 생성된다.

2) 코드가 옆으로 나열되는 것과 background가 글씨크기만큼 생성되는 것을 보면 inline 속성이다

3) input id를 label 요소인 for로 연결하면, label을 클릭할때 input의 checkbox도 같이 반응한다.

4) 2번째 박스는 색이 없고, 3번째 박스는 색이 있는 이유. 인접접근자는 연결하려는 본체코드 밑에 있어야 적용되기 때문. 2번째 박스는 input 코드가 label 코드 아래에 있다.

4) input에 display:none;을 적용하면 렌더링한 화면에서는 없는것처럼 사라진다.

5) 보이지 않는 것일뿐 정상적으로 작동하고 있는게 포인트.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/label

 

---

 

2. transform : positon이 적용되어있을때 조건을 적용할 수 있는 속성 

https://developer.mozilla.org/ko/docs/Web/CSS/transform

해당 링크에 가면 여러가지 transform의 예시와 적용된 이미지를 실습할 수 있다.

위치를 이동할때 유의해야 할 점은 '이동하는 개체의 크기를 고려했는가'이다.

See the Pen Untitled by supermint (@ma_ad_shouri) on CodePen.

1. 위치를 이동하는 top : 50%만 적용되어 있는 분홍박스

2. 자신의 높이 50%만큼 덜 움직이는 transform : translateY(-50%);도 적용되어 있는 파란박스

이 두 박스의 움직임을 보면 알 수 있듯, 분홍박스는 50% 이동을 했어도 자신의 높이를 포함시킨채 이동되어 있는 상태다. 그래서 화면의 중심보다 박스의 중심이 아래로 내려가있다.

 

---

 

3. display : flex 사용하기

기존에 사용하던 float보다 손쉽게 가운데 정렬을 할 수 있다고 한다. float 다시 개념 보고 넘어가자.

 

---

float가 뭐더라

• float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져
• 텍스트 및 인라인(inline) 요소가
• 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.

마지막 목록이 이해가 안가긴 하는데, 내가 이해한 float

• inline들로 이루어진 텍스트 위를 떠다니는(float) 배라고 생각하면 편하다.
• float를 선언하면 display:block;으로 속성이 변경된다 (예외 존재)
• float 선언한 요소가 일단 달라붙고나면 요소의 주변은 inline 속성이 배치되면서 float요소를 감싼다.(그럴 수 밖에 없다. float 요소가 강제로 구겨서 들어간 위치니까.)

참고사이트 : https://developer.mozilla.org/ko/docs/Web/CSS/float

 

---

다시 display:flex;로 돌아와서

중앙정렬을 하려고해도 div로 감싸고 넓이 지정하고 margin:0 auto;를 줘야하는데 그러지않고 css에서 속성만 줘도 가능해짐.

div로 불필요하게 감싸지 않아도 되니 깊이(depth?)가 줄어들고 코드가 단순해진다.

 

• 부모에게 영향을 주는 padding
• 자식에게 영향을 주는 margin
• margin처럼 자식에게 영향을 주는 float
• padding처럼 부모에게 영향을 주는 flex
  • 직관적이고 단순하지만, 그만큼 세밀한 조정이 힘들다.
  • 새로운 정보를 넣어도 부모에게 영향을 줘놓은 상태기 때문에 알아서 정렬이 된다.

참고사이트1 : https://developer.mozilla.org/ko/docs/Web/CSS/flex

참고사이트2 : https://studiomeal.com/archives/197

flexbox 실습하기 좋은 사이트 : https://flexboxfroggy.com/#ko

 

---

4. box-shadow

/* 새로운 속성 : 그림자 x y 번짐 색상*/
box-shadow: 7px 7px 5px rgba(0,0,0.2);

See the Pen box-shadow by supermint (@ma_ad_shouri) on CodePen.

 

1. x축 지정, 번짐 0

2. y축 지정, 번짐 3

3. x축과 y축 지정, 번짐 10

 

---

 

5. 라이브러리란?

배경

웹을 이루는 3갸지 : html, css, javascript -> 브라우저별로 해석하는 방법이 다름

그러나, 옛날에도 표준적인 규칙이 있었지만 지켜지지 않았음.

왜냐하면 쥬류인 익스플로러가 표준을 지키지 않는 브라우였기때문.

 

제이쿼리의 등장

우리나라에서 익스플로러가 너무 주류라서 버릴수도 없어서 익스플로러, 크롬, 폭스 각각 프로그래밍을 하며 크로스 브라우징을 할 수 있어야했다. 그러다 어느 브라우저나 똑같이 보이게 만들 수 있는 프로그램인 제이쿼리(자바스크립트 라이브러리)가 등장함. 

 

제이쿼리의 쇠퇴

주류가 크롬으로 바뀌고 익스플로러가 더이상 업데이트를 하지 않는다고하며 엣지를 밀음. (W3C) 모두가 표준을 맞추기 시작하면서 크로스 브라우징이 중요하지 않게 되었다. 자연스레 제이쿼리를 사용할 필요가 사라짐.프로그램이 무겁기도 하고.

 

결론

이런 전제정보들을 알아야 왜 자바스크립트를 잘 배워야하고 제이쿼리를 나중에 배우지 않아도 되는 이유를 알 수 있다.

라이브러리(도서관)=제이쿼리 : 폴더 / 책 : 코드

라이브러리(CS)는 유행을 쉽게 타는데 css(기본)를 제대로 만들 줄 알면 라이브러리 사용하기 쉬움. 우선 다 직접 구현할 줄 알아야함.

 

---

<개인메모>

탭메뉴

 

free css 뜯어보기 : 세세히 보지말고 책 읽듯이 훅훅 읽으며 아는거 모르는거 인식하고 구조를 읽는게 중요

웹에서 폰트를 가져올 수 있다.

구글폰트

팝잇콘 : 탭 이름 앞에 있는 이미지

+ 여러개 주기코드가 너무 길때는 엔터를 ,를 넣고 엔터를 치면 굳 -> css를 생각하면서 html을 짤때 사용할 수 있음. 짬이 빛나는 코드 그러니 나는 이런 기능이 있구나-하는걸 알아만 놓자

소문자->대문자로 만들어주는 css

:focus

background:important

webkit

meta태그 : 브라우저에서 렌더링 되지 않는 모든 부분을 처리해줌 -> 관련 og.img 우리는 아직 body만 할 수 있으면 됨. 어느정도 할 줄 알때 슬적 head 부분 보면 됨. 지금 보기엔 시간대비 가성비 낮음.

 

 

form

회원가입

게시판 등록페이지

-> 네이버 클로닝 정말 예쁘게 짠 설정과 틀 예쁜건 외워둬서 써먹자 최신폼은 아닌건 감안해야힘.

브라우저를 업데이트 하지 않은 모든 사용자를 수용해야하므로 업데이트 지원을 하지 않은 버젼임

예)

input padding 7px 14px; -> 버튼 넣을때도 어지간하면 패딩값 이렇게 주면 예쁨