죽이죽이

CSS Frameworks TailwindCSS ※ 장점 - HTML과 CSS 파일을 별도로 관리할 필요가 없다. - 클래스 명을 고민할 필요가 없다. - 디자인이 일관되어있다. - 자유롭게 커스텀이 가능하다. ※ 설치

CSS 모듈 ※ 사용하는 이유 - 이름 충돌 방지 : CSS 모듈은 클래스 이름을 지역적으로 유지하므로 다른 모듈이나 전역 스타일과 충돌하지 않는다. (각 모듈이 독립적으로 작동) - 재사용성과 유지 보수성 향상 : 컴포넌트별로 스타일을 모듈화함으로써, 코드의 재사용성과 유지 보수성을 향상시키며, 특정 컴포넌트에 대한 스타일 변경이 해당 컴포넌트만 영향을 미치게 된다. - 가독성 향상: 클래스 이름에 대한 명명 규칙이 모듈 내에서만 적용되므로 다른 부분의 클래스 이름과 구분이 쉽기때문에 가독성이 향상된다. ※ 사용 방법 - css 파일 생성 : 컴포넌트명.module.css - 컴포넌트에서 import - 클래스명 지정 : styles.클래스명

당근마켓(앱) ※ GitHub Repository - https://github.com/DanielSon93/carrotClone.git ※ Git pages 배포 - https://danielson93.github.io/carrotClone/

의사 클래스 (pseudo-class) ※ 정의 - HTML 요소의 특정 상태에 따라 스타일을 동적으로 적용하기 위한 선택자이다. ※ 동적 의사 클래스 :hover 마우스가 요소 위에 올라갔을 때의 상태를 정의 :focus 입력 요소가 포커스를 받았을 때의 상태를 정의 :active 요소가 활성화되었을 때의 상태를 정의 :link 방문하지 않은 링크의 기본 스타일을 정의 :visited 이미 방문한 링크의 스타일을 정의 ※ 상태 의사 클래스 :checked 주로 라디오 버튼이나 체크 박스와 같은 입력 요소의 체크 상태를 나타내기 위해 사용 :enabled 활성화된 상태의 입력 요소를 선택하는 데에 사용 :disabled 비활성화된 상태의 입력 요소를 선택하는 데에 사용 ※ 구조 의사 클래스 :first-..

Position ※ 설명 - 문서 상에 요소를 배치하는 방법을 지정한다. - top, left, right, bottom 값을 통해 오프셋을 결정한다. ※ 기본 사용법 속성 설명 static (기본값) 문서의 흐름에 맞게 배치한다. relative 문서의 흐름에 맞게 배치하지만, 오프셋을 top, left, right, bottom 값을 통해 정한다. absolute 문서의 흐름에서 제외하고, 가장 가까운 부모 요소(relative)를 찾아 상대적인 위치에 배치한다. 부모 요소중 relative가 없을 경우 초기 컨테이닝 블록을 기준으로 배치한다. fixed 문서의 흐름에서 제외하고, 초기 컨테이닝 블록을 기준으로 고정된 위치에 배치한다. (주로 header에 많이 사용) sticky static + f..

Flex ※ 설명 - inline-block 또는 float로 마크업을 했을때의 불편함을 개선하기 위해 나온 속성이다. - 1차원적으로 수평, 수직 영역 중 하나의 방향으로 정렬이 필요할때 사용한다. - 유동적인 레이아웃 변화를 구성하기 적합하다. - 부모요소인 Flex Container와 자식요소인 Flex Item으로 구성되어있다. ※ 기본 사용법 속성 속성 설명 설정값 설정값 설명 display Flexbox 적용 flex Flexbox 적용 flex-direction 정렬 방향 지정 row (기본값) Item을 가로로 정렬 row-reverse Item을 가로 역순으로 정렬 column Item을 세로로 정렬 column-reverse Item을 세로 역순으로 정렬 align-items Cross..

Box Model ※ 정의 - 박스 모델은 웹 페이지의 레이아웃을 구성하는 데 사용되는 개념 중 하나이다. - 웹 페이지의 모든 HTML 요소는 사각형의 "박스"로 간주되며, 각각의 박스는 여러 영역으로 나누어진다. ※ 영역 구분 - contents : 실제 내용이 표시되는 영역 - padding : 내부 여백 - border : 테두리 - margin : 외부 여백 ※ 참고 사이트 - border : https://developer.mozilla.org/ko/docs/Web/CSS/border - padding : https://developer.mozilla.org/ko/docs/Web/CSS/padding - margin : https://developer.mozilla.org/ko/docs/Web..

Internal 방식 ※ 특징 - 하나의 HTML 파일 안에 있는 태그 내에 CSS 코드가 포함되어 있어 해당 문서에만 스타일이 적용되는 방식이다. ※ 예시 External 방식 ※ 특징 - 스타일을 지정한 CSS 코드가 별도의 외부 파일로 저장되어 있어서 태그를 통해 가지고 오는 방식이다. ※ 예시 Inline 방식 ※ 특징 - 각 HTML 태그 내부 style 속성에 스타일을 정의하여 해당 태그에만 스타일을 적용시키는 방식이다. ※ 예시 적용 우선순위 ※ 우선순위 - !important : 어디서든지 사용가능 (최우선 적용) - 인라인 : HTML 태그 내에 작성 - 아이디 : 아이디 선택자(#)를 사용해서 작성 - 클래스 : 클래스 선택자(.)를 사용해서 작성 - 태그 : 태그 자체를 선택해서 작성..