CSS
1.[CSS] CSS의 기본 개념
⭐ CSS를 사용하는 이유 CSS를 통해 웹 문서의 스타일을 정의할 수 있다. HTML로 하지 않고 따로 스타일을 사용하는 이유는 * 1. 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.* * 2. 다양한 기기에 맞게 화면 레이아웃을 자동으로 바꾸어 보여주도록 할
2.[CSS] Cascading(케스케이딩)
⭐CSS(Cascading Style Sheets) CSS는 Cascading Style Sheet의 줄임말이다. Cascading은 "폭포처럼 떨어져 내리는" 또는 "상속 또는 종속" 이라는 뜻이다. 이는 Cascading이 CSS에서 가장 중요한 스타일 적용 규칙(
3.[CSS] Text Style (글자 스타일)
⭐ font-family 속성 font-family는 글꼴을 설정하는 속성이다. font-family는 상속되기 때문에 기본적으로 대표 폰트를 선언하고, 특정 폰트가 필요한 부분에서 재정의해서 사용한다 > 웹 문서에서 지정한 글꼴이 사용자 시스템에 설치되어 있지 않
4.[CSS] 웹 폰트 사용
⭐ 웹 폰트란? 방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트이다. CSS3에서 웹 폰트를 표준으로 채택했다. ⭐ 웹 폰트를 사용한 웹에 접속할 시 웹 폰트를 사용한 사이트에
5.[CSS] list style(목록 스타일)
⭐ list-style-type 속성 list-style-type는 순서 목록의 번호 스타일이나 순서 없는 목록의 불릿 스타일을 지정해주는 속성이다. 🔎 list-style-type 속성의 속성값 | 종류 | 의미 | 모양 | | :- | - | - | |disc
6.[CSS] table style(표 스타일)
⭐ caption-side 속성 caption-side는 표 제목의 위치를 정해주는 속성이다. 캡션(표의 제목)은 기본적으로 표 위쪽에 표시되지만 caption-side를 사용하면 표 아래쪽으로 표시해줄 수 있다. | 종류 | 의미 | | :- | - | |top|
7.[CSS] 박스 모델과 박스 테두리
⭐블록 레벨 요소와 인라인 레벨 요소 박스 모델은 블록 레벨 요소와 인라인 레벨 요소로 나뉜다. 💡 블록 레벨 요소 블록 레벨 요소란 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킨다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 것
8.[CSS] 레이아웃과 위치 지정
margin 속성은 요소와 요소 사이의 간격을 조절해주는 속성이다.박스 모델의 4개 방향을 한번에 지정할 수 있고, margin-top처럼 속성 이름에 방향을 함께 써서 따로 지정할 수도 있다.csshtml결과박스 모델div는 블록 레벨 요소이기 때문에 display:
9.[CSS] 배경(background) 속성
⭐background-color 속성 background-color 속성은 배경색을 지정할 때 쓰인다. color 속성처럼 rgb값, 16 진수 또는 색상 이름을 통해 지정한다. 📌 상속 불가 background-color은 상속이 불가한 속성이다. 기본적으로 모
10.[CSS] 그라데이션(gradation) 속성
linear Gradation(선형 그라데이션) 이란 두 개 이상의 색상이 수직, 수평 또는 대각선 방향으로 직선을 따라 점진적으로 변화되는 것을 말한다. 이를 구현해주는 것이 linear-gradient 속성이다.to로 시작한다.left, right, top, bot
11.[CSS] 연결 선택자와 속성 선택자
위를 예로 들면 <태그>는 현재 요소, <자식 태그>는 자식 요소, <손자 태그>는 손자 요소가 된다.하위 선택자는 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 한다. 즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든
12.[CSS] 가상 클래스(pseudo-class)와 가상 요소(pseudo-element)
✔가상 클래스(pseudo-class) ⭐가상 클래스(pseudo-class)란? 가상 클래스(pseudo-class) 란 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태일 때 스타일이 바뀌도록 하는 것이다. 어쩌면 가상 클래스보다는 영어 뜻에 맞게 의사 클래스
13.[CSS] 변형(transform)
✔ 변형(transform) ⭐ transform과 변형 함수 CSS에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성한다. ⭐ 2차원 변형과 3차원 변형 2차원 변형은 웹 요소를 평면에서 변형한다. x축은 오른쪽으로 갈수록 값이 커지고 y
14.[CSS] 트랜지션(transition)
transition의 사전적 의미는 변화, 전이, 과도기(넘어가는 단계)이다. CSS에서 transition은 과도기의 의미와 가깝다고 생각한다.CSS에서 transition은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐
15.[CSS] 애니메이션(animation)
CSS의 애니메이션(animation) 은 트랜지션을 활용하는 것보다 더 쉽게 애니메이션을 만들 수 있다.animaition 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 애니메이션이 바뀌는 특정 지점을 키프레임(keyframe)이라고 한다.CSS의 애
16.[CSS] 반응형 웹과 미디어 쿼리
✔ 반응형 웹(responsive web design) ⭐반응형 웹이란? 접속 환경이 달라도 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 구현한 사이트 ⭐ 뷰포트(viewport) 뷰포트(viewport) 란 웹페이지를 사용자가 보는 영역을 말한다. 사
17.[CSS] 그리드 레이아웃
✔그리드 레이아웃 그리드 레이아웃이란 웹 사이트를 여러 개의 column으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 말한다. 그리드 레이아웃을 사용하기 위해서는 float 속성을 사용하거나 플렉서블 박스 레이아웃이나 CSS 그리드 레이