HTML & CSS
-
CSS - Sass(SCSS)HTML & CSS 2022. 4. 8. 13:18
설치 npm install -g sass 사용법 sass --watch style.scss:style.css sass --watch .:. : 현재 디렉토리의 sass 파일을 css파일로 컴파일 문법 1. 중첩 ( Nesting ) /* style.scss */ #navbar { width:80%; height:23px; ul{ list-style-type: none; } li{ float:left; a { font-weight:bold; } } } /* style.css */ #navbar { width:80%; height:23px } #navbar ul { list-style-type:none; } #navbar li { float:left; } # navbar li a { font-weight: ..
-
CSS - [기초 / 피드백]HTML & CSS 2022. 4. 8. 10:29
1rem ( root em = 16px ) : html태그에 적용된 font-size의 영향을 받습니다. html태그의 폰트 크기에 따라서 상대적으로 크기가 결정 font-family : 서체 지정 font-weight : 폰트 두께 line-height : 행과 행 사이의 간격 지정 cascading : !important > style attribute > id selector > class selectort > tag selector vertical-align : top; : 수직 정렬 margin: auto; : 남는 여백을 알아서 나눠가진다. 1. 글자 관련은 height가 아닌 line-height 속성을 적용 2. 클릭 이벤트는 패딩까지 적용하고 마진 적용x 3. swiper 적용시 marg..
-
CSS - GridHTML & CSS 2022. 4. 1. 14:52
용어정리 그리드 컨테이너 ( Grid Container ) : display: grid를 정용하는 Grid의 전체영역 그리드 아이템 ( Grid Item ) : Grid 컨테이너의 자식 요소 그리드 트랙 ( Grid Track ) : Grid의 행 또는 열 그리드 셀 ( Grid Cell ) : Grid의 한칸 그리드 라인 ( Grid Line ) : Grid 셀을 구분하는 선 그리드 번호 ( Grid Number ) : Grid 라인의 각 번호 그리드 갭 ( Grid Gap ) : Grid 셀 사이의 간격 그리드 영역 ( Grid Area ) : Grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합 컨테이너에 적용하는 속성 display: grid .container { display: gri..
-
CSS - FlexHTML & CSS 2022. 4. 1. 12:21
Flex 컨테이너에 적용하는 속성들 display : flex; .container { display : flex; } : 내용물만큼의 크기를 차지한다. 배치 방향 설정 .container { flex-dirction: row; flex-dirction: column; flex-dirction: row-reverse; flex-dirction: column-reverse; } row : 아이템들이 행 방향으로 배치 row-reverse : 아이템들이 역순으로 행 배치 column : 아이템들이 열 방향 배치 column : 아이템들이 역순으로 열 배치 줄넘김 처리 설정 .container { flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; } ..
-
[이론] cssHTML & CSS 2022. 1. 11. 08:58
CSS selector 전체선택자 : *로 표시되며 웹문서 내 모든 요소 선택 태그선택자 : 요소 이름으로 사용하여 요소 선택 아이디선택자 : #기호로 표시되며 특정한 요소 선택 *HTML구조의 공간분할을 적용할 때 body태그 안에 한 개만 존재 클래스선택자 : 미침표. 기호로 표시되며 특정한 요소 선택 *공통되는 스타일을 적용할 경우 중복가능 계층선택자 : 특정 위치의 요소를 계층적 구조로 요소 선택 자손선택자 > 자식선택자 + 형제(근접후행)선택자 ~ 형제(후행)선택자 display block : block형식 inline 마진상쇄현상 : 두 개이상의 block요소의 상하 마진이 겹칠 때 가장 큰 마진으로 결합되는 현상