CSS를 사용하는 방법?
- HTML 안에서 Style 속성을 이용하는 방법 (인라인 스타일)
- <style> 태그를 통해 HTML 문서 내부에서 이용하는 방법 (내부 스타일 시트)
- 별도로 CSS 파일을 분리하여 HTML의 문서에 연결하는 방법 (외부 스타일 시트)
인라인 스타일, 내부 스타일, 외부 스타일 적용이 혼합되어 사용될 경우 어떤 스타일을 적용하나?
인라인 스타일 -> 내부 스타일 시트, 외부 스타일 시트 -> 웹 브라우저 기본 스타일 순서로 우선적용
CSS의 기본 구조
- 선택자, 프로퍼티, 값
내부 스타일 시트 방식으로 css를 적용
외부 스타일 시트 방식으로 css를 적용
.a-button:hover
- a-button 요소에 마우스를 가져갔을 때만 적용되는 스타일
.a-button:active
- a-button 요소를 클릭했을 때 적용되는 스타일
Transition
- 스타일 변경 시 부드럽게 전환
- 선택자가 변화되는 것을 시간의 흐름을 줘서 변화시키는 속성
a-button 요소에 마우스를 오버하면 버튼의 투명도를 1초에 걸쳐서 0.7로 변화시켜라
a-button 요소에 마우스를 오버하면 버튼의 색을 3초에 걸쳐서 검정색으로 변화시켜라
- 커서 hover 시 pointer로 변경
- 클릭 시 투명도 변
- 모든 트랜지션 1초
- 마우스 hover 시 box-shadow 생성
색을 표현하는 방법
- 색 이름
- RGB 값
- HEX 값
- RGBA 값 - 255가지의 빨강, 초록, 파란색을 표현하는 것은 같지만 추가된 A 값은 투명도를 결정함(1은 단색, 0은 완전한 투명)
수치 값을 표현하는 방법
- 픽셀 : 고정된 절댓값
- 퍼센트 : 상대적 측정
- em, rem (환경에 따라 변하는 가변 단위)
- em
- 같은 엘리먼트에서 지정된 font-size를 기준으로 px로 바뀌어 화면에 표시
- 같은 엘리먼트에 설정된 폰트 크기 값이 없을 경우, 상위 요소의 폰트 사이즈가 기준이 된다.
- rem
- 최상위 엘리먼트에서 지정된 font-size의 값을 기준으로 변환됨
- 대개는 HTML tag에서 지정된 font-size가 기준이 된다.
- em
Margin
Padding
Border
가상 클래스(의사 클래스)
- 부모 <div>, 첫번째 <span>, 두번째, 세번째 <p>이 있는 경우 <p>는 <div>의 두번째 자식이기 때문에 :first-child의 경우에는 p에는 style이 적용되지 않는다.
- 반면 :first-of-type은 <div>의 두 번째 자식이어도 해당 p 타입의 첫번째 자식이기 때문에 적용이 된다.
각 클래스 지정
- container-two 클래스 전체 div 태그의 스타일 지정
- float: left -> 요소를 왼쪽으로 띄워서 정렬
- div 태그 중 2n+1번째 요소 즉, 홀수번째 요소만 하늘색 지정
- div 태그 중 마지막 요소에만 width를 300px로 지정
결과물
가상 요소(의사 요소)
- 가상 클래스처럼 선택자에 추가되며 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능하다.
- ::before와 ::after는 꼭 content와 같이 쓰여야 하며 이 content는 가짜 속성이다
- HTML문서에 정보로 포함되지 않은 요소를 CSS에서 새롭게 생성시켜주는 역할을 한다.
실습
Float CSS 속성
- 컨테이너의 왼쪽 또는 오른쪽에 요소를 배치하여 텍스트 및 인라인 요소가 주위를 둘러쌀 수 있도록 한다.
실습
Clear CSS 속성
- float 의 영향을 받지 않도록 할 수 있다.
- float 속성을 사용하고 아래 다음 요소를 원할 때 clear 속성을 사용해야 한다.
- clear 속성은 float 요소 옆에 있는 요소에 어떤 일이 발생해야 하는지 지정한다.
실습
float를 rigth로 바꿀 시 clear가 적용되지 않는다. float와 clear 모두 같아야 적용된다.
Object-fit
- 컨테이너에 맞게 <img> 또는 <video>크기를 조정하는 방법을 지정하는 데 사용된다.
- 종횡비를 유지하며 주어진 치수에 맞게 조정됨
- 종횡비를 유지하지만 주어진 치수를 채우고 잘림
Object-position
- 컨테이너 내에서 <img> 또는 <video>를 배치하는 방법을 지정하는 데 사용된다.
object-position : left 지정
img의 왼쪽 부분을 보여줌
object-position : right 지정
img의 오른쪽 부분을 보여줌
Input 요소
- 텍스트 입력 (text)
- 비밀번호 입력 (password)
- 라디오 버튼 (radio)
- 체크박스 (checkbox)
- 파일 선택 (file)
- 선택 입력 (select)
- 문장 입력 (textarea)
- 버튼 입력 (button)
- 전송 버튼 (submit)
- 필드셋 (fieldset)
Transform
- Transition : 선택자가 변화되는 것을 시간의 흐름을 줘서 변화시키는 속성
- animation : 하나의 줄거리를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현
- Transform : 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여. 시각적 서식 모델의 좌표 공간을 변경
Transform-functions
animation CSS
- 요소를 한 스타일에서 다른 스타일로 점진적으로 변경할 수 있다.
- 애니메이션에 대한 몇 가지 키프레임 keyframes을 지정해야 한다.
- 키프레임은 특정 시간에 요소의 스타일을 유지한다.
animation 속성 값
Background-clip
- 요소 내에서 배경이 확장되어야 하는 거리를 정의
- 기본값 : 배경이 테두리까지 확장
- padding-box : 배경이 패딩까지 확장
- content-box : 내용 부분만 확장
실습
Flexbox
- flexbox는 컨테이너의 아이템들을 보다 효율적이고 동적으로 정렬하기 위해 도입되었다.
- flexbox 구성 요소
- Flex Container
- div 태그에 display : flex를 주면 해당 태그가 flexbox 컨테이너가 된다.
- Flex Items
- flexbox 컨테이너의 직계 자식들을 의미한다.
- Flex Container
flex-direction 속성에 의한 양 축의 변화
- 주축(main axis)이 flex-direction 속성에 의해 정의되고 교차축(cross axis)은 수직으로 진행된다.
Flex Container Properties
flex-direction
- flex-direction : row의 경우 기본값으로서 주축이 왼쪽에서 오른쪽으로 향하게 된다.
- flex-direction : row-reverse의 경우 주축이 row의 반대인 오른쪽에서 왼쪽으로 향하게 된다.
- flex-direction : column의 경우 주축이 위에서 아래로 향하게 된다. 이때 교차축이 왼쪽에서 오른쪽을 향한다.
- flex-direction : column-reverse의 경우 주축이 아래에서 위 향하게 된다.
실습
flex-wrap
- flex 기본 설정대로라면 아이템 개수가 늘어나면 아이템의 크기가 줄어들어 어떻게든 단일한 줄에 포함시키지만 flex-wrap 설정을 해주면 줄 바꿈이 일어난다.
- nowrap : 모든 플렉스 항목이 한 줄에 표시됩니다.
- wrap : 플렉스 항목은 위에서 아래로 여로 줄로 줄바꿈 됩니다.
- wrap-reverse : 플렉스 항목은 아래에서 위로 여러 줄로 줄바꿈 됩니다.
실습
nowrap을 적용할 경우 어떻게든 한 줄에 다 넣으려고 width을 줄이고 옆으로 넘치게끔 표시를 하는 모습이다.
flex-flow
- flex-direction과 flex-wrap을 동시에 표현할 수 있다.
Justify-content
Align-items
- 축의 수직 방향을 기준으로 정렬이 된다.
- 현재 줄의 Cross Axis를 따라 flex item이 배치되는 방식에 대한 기본 동작을 정의한다.
- 교차 축에 대한 justify-content 라고 생각하면 된다.
실습
Align-content
- align-items는 한 줄을 기준으로 정렬하는 반면 align-content는 두 줄부터 사용하는 데 의미가 있다.
- 그래서 align-content의 경우 두 줄의 flex-wrap: wrap; 인 상태에서 사용해야 한다.
- nowrap인 경우 라인이 넘어가지 않아 계속 한 줄인 상태이기 때문에 적용이 되지 않는다.
실습
Align-self
- 위 align-items, align-content는 부모 요소의 자식들 전체를 묶어서 정렬을 해주는 반면, 부모 요소의 자식 아이템들을 각각 다른 방식으로 정렬할 수 있다.
- 이때 align-content 속성을 지워줘야 제대로 적용이 가능하다.
실습
'HTML & CSS' 카테고리의 다른 글
CSS(Cascading Style Sheets) Basics [2] (0) | 2023.08.16 |
---|---|
HTML(Hyper Text Markup Language) Basics (0) | 2023.08.14 |
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!