[2023 신입부원 스터디] 박승환 #3주차 - CSS를 마무리하며.....

@@   시험기간으로 인해 1 주 정도 건너뛰고 들으니 다시 복습해야 하는시간이 필요했다. 내가 쓴 블로그를 보고 강의도 다시 보며  복습하니 문뜩 내 블로그가 너무 설명만 한다는 느낌이 들었다. 그래서 설명보다는 내가 느낀 점에 대해서 기술해보려한다.  @@

                                                                                                                                  

float 속성 

띄운다는 사전적 의미를 가지는 것 처럼 이는 HTML요소들을 왼쪽 오른쪽에  배치를 하는 것이다.

배치한다는 의미는 다른 요소들과 어울리도록 띄워지는 것으로 이해 하였다.

사진을 예를들면

본문에 글이 있다면

글 왼쪽에 사진을 띄우고 싶다면  float: left;

글 오른쪽에 사진을 띄우고 싶다면 float: right 를 사용하면 된다.

float: left를 한 모습

 

 

 

 

 

 

 

 

 

여기서 주의할 점은 float를 할 경우 주위에 모든 것을 포함하기 때문에 영역을 나누지 못한다. 그럴 때 clear속성을 이용하면 float를 취소 할 수 있다.

 

position

 말그대로 HTML요소들의 위치를 결정 해 주는 것이다

먼저 요소들을 배치하는 방법을 지정하는  속성이 존재하는데, 

static: 일반 적인 흐름으로 배치, 기본 값

relative:  static처럼 일반적인 흐름을 따르지만

top, bottom, right, left 등으로 상대적인 위치 지정

absolute: 이는 일반적인 흐름을 따르지 않는데, static속성을 가지고 있지 않은 것을 기준으로 이동한다.

fixed:우리가 사이트를 방문할때 고정되어 있는 물체를 본 적이 있을 것이다. 그 때 사용한다.

이도 위치를 지정가능하다   

sticky:  우리가 스크롤을 내릴 때 임계점에 다다르면  고정되는 것들이 있는데 이를 표현할 때 사용한다.

 

Background 베경 스타일

 요소의 배경을 지정하는데 사용한다.

앞에서 부터 하던 것이기 때문에 설명을 간단히 하자면

색을 지정할 수 있고, 반복, 위치 설정, 크기 등 다양한 것들을 할 수 있다.

 

가상 클래스

이를 이용하면  내가 선택하는 요소들을 특별하게 나타낼 수 있다. 

가장 기억에 남는 것은 hover를 사용하면 마우스를 올려놓은 곳에 기능을 추가할 수 있다.

 

transform 

그래프라고 해석을 할 수 도 있다고 생각한다

좌표인 x, y 에 따라서 달라진다.

translate(xpx, ypx) 로 이동을 하고

scale(x, y) 로 확장 및 축소를 한다.

rotateX(각도),  rotateY(각도) 로 설정한 각도만큼 회전한다.

skew(x, y)로 기울인다 --> 비튼다?

사용법: ex)  transform: translate(20px, 30px) 

 

tansition 

이는 반응을부드럽게 하는 것이다.

예를 들어,

하나의 요소를 hover를 통해  width, height 를 지정하고

transition-property: width, height 를 사용하면

요소에 마우스를 올렸을 때 설정한 너비와 세로만큼 천천히 부드럽게 커지는 것을 볼 수 있다.

그리고 trasition - duration과 trasition - delay 를 사용하면 커지는 시간에 대해서 설정이 가능하다.

사용법: ex)  trasition - duration: 2s; , trasition - delay:2s;

transition-timing-function을 사용하면 속도를 지정할 수 있다.

여기서는 

linear:  시작과 끝 속도 맞춤

ease-in: 천천히 시작했다가 속도 증가

ease-out: 빠르게 증가했다가 속도 감소 를 사용함.

사용법: ex)  transition-timing-function: ease-in; 

 transition 단독으로 사용--> 이 모든 것을 한번에 하는 단축키같은 것.

transition: ( duration의 해당하는 초, delay의 해당하는 초) 로 인식하여 할수 있다.

이는 모든 요소에 하도록 기본값이되어있다.

 

 

animation 강의를 들은 후 내가 원하는 기능임을 알게 되었다.

animation은 말그대로 사이트에서 요소를 움직이게 하거나 동작 같은 것을 하게끔 하는 것 같다.

@keyframes 으로 애니메이션을 생성한다. 

@keyframes 애니메이션{

     from ~ % ~ to로 해서 어디부터 어디까지 애니메이션을 사용한다라는 기본 구조를 가지고 있다.

중간에는 색깔을 지정하거나, 크기 , 이동, 모양 등을 설정한다.

그리고 animation-name: 을 통해 이름을 정의 한다음, 

animatio-durantion, delay, interation-count 등등으로 내가 원하는 animation을 사용할 때 시간이나 반복횟수 등을 설정할 수 있다.

 animation- 다음 것들은 많은 종류가 있다.

 

@@이는 설멸하기 어렵지만 만들고 나면 매우 재밌는 것 같다. @@

 

 

반응형 웹사이트

다양한 디바이스에 대해서 최적화된 화면을 보여주는 웹사이트

뷰포트(viewport): 브라우저에서  실제 내용이 표시되는 영역

meta 를 통해 viewport를 사용하면 각 디바이스에 맞게 화면이 최적화된다.

이를 메타 뷰포트 태그라고 하는데 추가로 메타 뷰포트태그 속성들이 존재한다.

이 속성들을 이용해 화면을 축소, 확대, 비율 조정등이 가능하다.

 

미디어 쿼리를 이용해 특정 조건에서 반응하도록 하는것 같다.

예를 들어 확대 축소를 할 때 내가 지정한 px까지 CSS를 넣을 수 있다는 것이다.

@media 특정 조건 (and, not...) 특정조건... 으로 구성한다.

**Flexbox**

중요함

 

과거에는 position, display등으로 레이아웃을 했다면 업데이트 이후 지금은 Flexbox를 통해 레이아웃함.

HTML요소를 배치 정렬 분산할 수 있는 방법을 제공하는 새로운 레이아웃방식

 

flex container :부모

flex item: 자식

 

 

 

 

 

 

 

 

flex container 속성에는 많은 종류가 있지만 가장 기억에 남는 것들을 떠올린다면,

flex-flow로 direction과 wrap을 동시에 설정하는 것

 

justify-contet 를 통해 좌측 우측 중앙 간격 띄기 등을 사용할 수 있어 가장많이 사용할 것 같다.

flex item 속성에서는 ,flex를 통해 gorw, shrink, basis를 동시에 설정하는 것이다.

 

 

---

 

 

@@드디어 HTML과 CSS를 마무리 했다. 강의 내용 이외에도 다양한 속성들이 존재할테지만 강의에서 가장 강조하는 것은 이 모든것을 외우는 것은 불가능하기 때문에 이런것들이 있다 정도만 알고 있는 것이다. 하지만 이럴 수록 복습은 무조건 해야된다고 생각을 한다. 다음주에는 HTML, CSS를 이용하여 나를 소개하는 사이트를 만드는 활동을 한다. 이를 위해 다시 복습해서 완성도가 높고 퀄리티 좋은 사이트를 만들어 보겠다!!! @@