[2023 신입부원 기초 스터디] 이총명 #3주차

1 . float 속성

HTML 요소에 float이 적용되면 그 요소는 흐름에서 벗어나 둥둥 떠다니듯 배치된다.

즉 float을 적용한 요소를 다른 요소들이 감싸는듯이 보이게된다.

• none - 기본값으로 요소를 띄우지 않음
• left - 왼쪽에 띄움
• right - 오른쪽에 띄움

2.  clear 속성

clear는 float값을 취소한다.

• clear:none; - 기본값
• clear: left; - 왼쪽 취소
• clear: right; - 오른쪽 취소
• 왼쪽 오른쪽 구분하기 귀찮으니까 그냥 clear:none을 사용하도록 하자

3. position 속성

position 속성은 HTML 요소를 배치하는 방법을 지정합니다.

• static (기본값)
• static은 요소가 HTML 문서에서 일반적인 흐름을 따라 배치가 되게하며, 기본값이다.
• relative
• static과 마찬가지로 요소가 문서의 일반적인 흐름에 따라 배치되게 합니다. static과 차이점은 요소가 자신의 static 위치에서 top right bottom left와 같은 속성에 의한 상대적인 위치에 배치된다는 점이다.
• absolute
• absolute는 요소가 문서의 일반적인 흐름을 따르지 않게한다. absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직인다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 된다.
• fixed<aside> 💡 뷰포트(viewport)란? 웹 페이지가 브라우저 화면상에서 실제로 표시되는 영역이다.
• </aside>
• fixed 역시 absolute와 마찬가지로 요소가 문서의 일반적인 흐름에서 제거된다. 대신, 스크린의 뷰포트(viewport)를 기준으로 한 위치에 배치된다. 즉, 스크롤되어도 움직이지 않는 고정된 자리를 갖게 된다.
• sticky
  • top속성을 적용해야 스크롤 임계점에서 고정이됨.
  • left, right, bottom 속성을 사용할 수 없음.
• sticky는 요소가 HTML 문서안에서 static과 같이 일반적인 흐름에 따라가다가 스크롤 위치가 임계점에 이르면 fixed와 같이 박스를 화면에 고정할 수 있는 속성이다.

---

4. 가상 클래스

가상 클래스(pseudo-class)는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용합니다.

 

• 대표적인 CSS 가상 클래스
  • :link - 아직 방문하지 않은 요소를 나타낸다. href 속성을 가진 <a> <area> <link> 중 방문하지 않은 모든 요소를 선택한다.
  • :visited - 사용자가 방문한 적이 있는 링크를 나타낸다.(link와 반대됨)
  • :active - 사용자가 활성화한 요소(버튼 등)를 나타낸다.
  • :hover - 마우스 커서가 요소 위로 움직였을 때 적용되는 가상 클래스이다. 이 가상 클래스를 사용하면 마우스가 요소 위에 있을 때와 아닐 때의 스타일을 다르게 적용할 수 있다.
  • :focus - 양식의 입력 칸 등 포커스를 받은 요소를 나타냅니다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동합니다. focus 가상 클래스를 사용하면 요소가 활성화되었을 때 스타일을 변경할 수 있습니다
  • :nth-child - 형제 사이에서의 순서에 따라 요소를 선택합니다. MDN
  • :not(selector) - not(selector) 안에 포함된 요소를 제외시키겠다는 뜻입니다.

---

5.  가상 요소

• 가상 요소(pseudo-element)는 해당 HTML 요소의 특정 부분만을 선택할 때 사용한다.

• 대표적인 CSS 가상 요소
  • ::first-letter - 텍스트의 첫 글자만을 선택한다. 단, 블록 레벨 요소(block-level-element)에만 사용할 수 있다.
  • ::first-line - 텍스트의 첫 라인만을 선택한다. 단, 블록 레벨 요소(block-level-element)에만 사용할 수 있다.
  • ::before - 특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입할 때 사용한다.
  • ::after - 특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입할 때 사용한다.
  • ::selection - 해당 요소에서 사용자가 선택한 부분만을 선택할 때 사용한다.사용자가 웹 페이지에서 텍스트를 선택할 때, 즉 드래그하여 선택할 때 적용된다.

---

6. transform

HTML에서 "transform"은 CSS의 속성 중 하나로, 요소를 변형시키는 역할을 한다. "transform" 속성을 사용하면 요소를 회전, 이동, 크기 조정 등의 변형을 줄 수 있다.

• translate(tx, ty)
• 지정한 크기만큼 x축, y축으로 이동합니다.
• translateX(tx)
• 지정한 크기만큼 x축으로 이동합니다.
• translateY(ty)
• 지정한 크기만큼 y축으로 이동합니다.
• scale(sx, sy)
• 지정한 크기만큼 x축과 y축으로 확대·축소합니다.
• scaleX(sx)
• 지정한 크기만큼 x축으로 확대·축소합니다.
• scaleY(sx)
• 지정한 크기만큼 y축으로 확대·축소합니다.
• rotate(각도)
• 지정한 각도만큼 회전합니다. (+시계방향, -시계반대방향)
• rotateX(각도)
• x축을 기준으로 회전합니다. 이때 입체감 있게 표현하려면 perspective 속성을 부모 요소에 적용해야 합니다.
• rotateY(각도)
• y축을 기준으로 회전합니다. 이때 입체감 있게 표현하려면 perspective 속성을 부모 요소에 적용해야 합니다.
• rotateZ(각도)
• z축을 기준으로 회전합니다. 이때 입체감 있게 표현하려면 perspective 속성을 부모 요소에 적용해야 합니다.
• skew(ax, ay)
• 지정한 각도만큼 x축과 y축으로 왜곡합니다.
• skewX(ax)
• 지정한 각도만큼 x축으로 왜곡합니다.
• skewY(ax)
• 지정한 크기만큼 y축으로 왜곡합니다.

 

---

7. Transition

transition의 사전적 의미는 "전환"이라는 뜻으로 CSS에서 transition은 속성 값이 변할 때 더욱더 부드럽게 전환할 수 있도록 도와준다.

 

• transition-property
  • transitino-property: <속성1>, <속성2>; 와 같이 지정할 수 있습니다.
  • all : 모든 속성을 지정합니다. (all은 생략 가능합니다.)
  • none : 아무것도 지정하지 않습니다.
• 어떤 속성에 트랜지션 효과를 줄 것인지 지정합니다.
• transition-duration
• 트랜지션 효과를 몇 초 동안 실행할 것이지 지정합니다.
• transition-delay
• 지정한 초 만큼 기다렸다가 실행할 때 사용합니다.
• transition-timing-function
  • linear : 트랜지션의 시작과 끝의 속도가 일정함
  • ease-in : 천천히 시작했다가 완료될 때 속도가 증가합니다.
  • ease-out : 빨리 시작했다가 완료될 때 속도가 낮아집니다.
• 트랜지션이 시작하면서 끝날때의 타이밍, 즉 속도를 지정하는 것입니다.

예시 코드

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s ease-in-out;
} 

.box:hover {
  width: 200px;
}

 

이 코드는 .box라는 클래스를 가진 요소의 너비가 200픽셀로 변경될 때, 1초 동안 ease-in-out 타이밍 함수를 사용하여 부드러운 전환 효과를 적용한다.

---

8. 반응형 웹사이트

반응형 웹사이트는는 사용자가 사용하는 기기의 크기에 맞게 최적화되도록 디자인된 웹사이트를 말한다.
기존에는 웹사이트를 디자인할 때 특정 크기의 모니터를 기준으로 디자인을 하였기 때문에, 다른 크기의 기기에서는 디자인이 깨지거나 일부 요소가 보이지 않는 등의 문제가 발생했다. 이러한 문제를 해결하기 위해, 반응형 웹사이트는 사용자의 기기 크기에 맞게 자동으로 레이아웃과 디자인이 조절되어 최적화되도록 설계되었다.

 

뷰포트(viewport)

뷰포트란 웹 브라우저에서 실제 내용이 표시되는 영역이다. 모바일 viewport와 PC의 viewport는 그 크기가 다르다. 그렇기 때문에 반응형 웹 에서는 viewport에 맞게 화면을 보여줘야 할 필요가 있다.

이럴때 사용하는 메타태그가 뷰포트 메타태그 입니다.(메타태그란 웹 페이지의 정보를 정의하는 태그이다)

 

메타 뷰포트 태그 속성

• width : 뷰포트 가로
• height : 뷰포트 세로
• user-scalable : 사용자 확대/축소 가능 여부
• initial-scale : 초기 화면 비율
• maximum-scale : 최대 화면 비율
• minimum-scale : 최소 화면 비율

일반적인 사용법

뷰포트의 너비를 디바이스(스마트폰) 화면 너비에 맞추고 초기화면 배율을 1로 지정

<meta name="viewport" content="width=device-width, initial-scale=1">

뷰포트 단위

• vw(viewport width): 뷰포트 너비. 100vw = 뷰포트 width 의 100%
• vh(viewport height): 뷰포트 높이. 100vh = 뷰포트 height 의 100%
• vmin(viewport minimum): 뷰포트의 너비와 높이 중에서 작은 값.
• vmax(viewport maximum): 뷰포트의 너비와 높이 중에서 큰 값.

---

미디어 쿼리

미디어 쿼리는 CSS3에서 추가된 기능으로 접속하는 디바이스나 뷰포트에 따라 특정 CSS 스타일을 사용하는 방법이다.

미디어 쿼리 문법

@media 키워드를 사용해 특정 미디어(디바이스)에서 어떤 CSS를 적용할 것인지 지정함. 이때 그 특정 구간을 중단점(breakpoint)이라고도 한다.

기본형

@media [only | not] 미디어 유형 [and 조건] * [and 조건]

• only : 미디어쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않습니다. (거의 사용 안함)
• not : not 다음에 지정하는 미디어 유형을 제외합니다.
• and : 조건을 여러개 연결해서 추가할 수 있습니다.@media screen and (min-width: 768px) and (max-width: 1439px)
• 예) 미디어 유형이 screen이면서 최소 너비가 768px 이고 최대 너비는 1439px일 경우에 적용할 CSS

미디어 유형

• all : 모든 장치에 적합합니다.
• print : 인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서입니다.
• screen : 주로 화면이 대상입니다.
• speech : 음성 합성장치 대상입니다.

자주 사용하는 미디어쿼리 조건

• min-width : 웹 뷰포트의 최소 너비
• max-width: 웹 뷰포트의 최대 너비