📒배운 것
css에 대해서
-Cascading Style Sheets의 약자
-한 번에 여러 웹 페이지의 레이아웃을 제어할 수 있음.
-외부 스타일시트는 CSS파일에 저장됨.
-Cascading: 연속화 (cascade : 폭포)
CSS에서 스타일이 적용될 때는, 우선순위를 가지고 적용됨.
이 우선순위가 적용되는 과정이 마치 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Cascade라는 단어가 붙었음.
작성방법
-selector(선택기)는 스타일을 지정할 HTML 요소를 가리킴.
-선언 블록에는 세미콜론으로 구분된 하나 이상의 선언이 포함됨.
-각 선언에는 콜론으로 구분된 CSS 속성 이름과 값이 포함됨.
-여러 CSS 선언은 세미콜론으로 구분되며 선언 블록은 중괄호로 묶임.
CSS selector 특징 1
-CSS 선택기는 스타일을 지정할 때 HTML요소를 "찾는" (또는 선택하는) 데 사용됨.
CSS selector 특징 2
-코드를 최소화하려면 선택기를 그룹화하는 것이 좋음.
-그룹화하려면 각 선택기를 쉼표로 구분함.
CSS 삽입 법
-HTML이 웹 문서의 뼈대를 만드는 것이라면, CSS는 색상이나 크기, 이미지 등 디자인 요소 담당
1. 내부 스타일 시트
단일 HTML 페이지에 고유한 스타일이 있는 경우 내부 스타일 시트를 사용할 수 있음.
내부 스타일은 style 요소 내부, head 섹션 내부에 정의됨.
1. 외부 스타일 시트
외부 스타일 시트를 사용하면 파일 하나만 변경하여 전체 웹 사이트의 모양을 변경할 수 있음.
각 HTML 페이지는 헤드 섹션 내부의 link 요소 내부에 외부 스타일 시트 파일에 대한 참조를 포함해야 함.
CSS 우선 적용 순위
1순위 : 속성값 뒤에 !important가 붙어 있는 속성
🔽예시<div> <p>안녕하세요. 이아현입니다</p> </div> <style> p{color: blue!important;} p{color: red;} </style>
2순위 : 인라인 스타일로 적용되어 있는 속성
3순위 : 선택자에 id가 쓰인 속성
4순위 : class, attribute, pseudo-class로 지정한 속성
5순위 : 태그 이름으로 지정한 속성
6순위 : 부모 요소에 의해 상속된 속성
CSS 기본 디자인 요소
CSS 테두리 스타일
박스모델
높이 및 너비 값
아이콘
Google 글꼴을 사용하는 방법
레이아웃
위치 속성
이 position 속성은 요소에 사용되는 위치 지정 방법의 유형(정적, 상대, 고정, 절대 또는 고정)을 지정함.
다음과 같은 다섯 가지 위치 값이 있음.
-static
-relative
-fixed
-absolute
-sticky
이러한 속성은 position속성을 먼저 설정하지 않으면 작동하지 않음. 또한 위치 값에 따라 다르게 작동함.-static
HTML요소는 기본적으로 정적으로 배치됨. 정적으로 배치된 요소는 top, bottom, left 및 right 속성의 영향을 받지 않는다.
-relative
정상 위치를 기준으로 배치됨. 상대적으로 배치된 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 설정하면 원래 위치에서 벗어나 조정됨. 다른 콘텐츠는 요소가 남긴 간격에 맞게 조정되지 않음.
-absolute
가장 가까운 위치에 있는 조상을 기준으로 위치가 지정됨(고정된 것처럼 뷰포트를 기준으로 위치가 지정되는 대신). 하지만, 절대 위치 지정 요소에 위치 지정 조상이 없으면 문서 본문을 사용하고 페이지 스크롤과 함께 이동함.
기본 선택자 review
자주쓰는 CSS Pseudo-class Selector
grid와 table-cell의 차이점
grid table-cell gird는 그리드 기반의 레이아웃 시스템으로, 요소들을 그리드로 배치할 수 있음. CSS table-cell은 테이블의 셀(cell) 요소를 이용하여 레이아웃을 구성하는 방식임. 그리드 컨테이너와 그리드 아이템을 정의하여 유연한 레이아웃을 구성할 수 있음. 테이블 구조를 사용하여 요소들을 행과 열로 정렬하며, 행과 열의 크기는 자동으로 조정됨 그리드 아이템들은 자유롭게 배치될 수 있으며, 행과 열의 크기를 조정하고 정렬할 수 있음. 테이블은 일반적으로 데이터 표시를 위해 사용되며, 특정한 테이블 구조를 갖고 있음. 그리드는 반응형 레이아웃을 쉽게 구성할 수 있는 강력한 기능을 제공함. 테이블 요소를 사용하여 레이아웃을 구성하면 행과 열 간의 정렬과 셀 간의 간격 조정이 쉬움. 결론적으로, css grid는 좀 더 유연하고 강력한 레이아웃 시스템을 제공하며, 반면 table-cell은 주로 테이블 형태의 데이터를 표시하기 위해 사용됨.
🏋️♂️느낀점
-css의 세계는 무궁무진하구나
-정말 html, css, js만 알더라도 웹 사이트 하나 뚝딱 만들 수 있겠다.
부가적으로 알게 된 점
1. label태그의 for이름과 input태그의 id이름을 동일하게 하면 (예를 들어)사용자명이라는 이름을 눌렀을 떄 바로 칸으로 커서가 넘어갈 수 있다.
2. main 안에서 섹션을 나눠서 써야지 할 때 쓰는 게 section, article은 진짜 기사 같은 거 쓸 때, aside는 부가적인 것을 옆으로 뺄 때 쓴다.
3. 전에는 float을 많이 썼는데 지금은 flex나 grid를 많이 쓴다.
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#IT개발캠프 #React #개발자부트캠프 #리액트 #리액트캠프 #부트캠프 #스나이퍼팩토리 #웅진씽크빅 #유데미 #인사이드아웃 #프로젝트캠프 #프로젝트캠프후기
