본문 바로가기

Programming/HTML & CSS & JavaScript48

CSS 총정리 CSS 강좌정리 1. 환경설저    1) node 설정     https://nodejs.org/ 다운받고 설치(기본설치)     cmd창에서 node -v 입력하고 버전 확인.   2) VSC 설정      - https://code.visualstudio.com/ 다운받고 설치(기본설치)      - VSC 확장팩 설치   3) 워크스페이스 작성 2. CSS 역할 및 버전   역할: html에 시각적 표현을 지정해서 스타일 관리.   css1: 1996년   css2: 1998년   css3: 현재까지도 개발중. ( 표준화 버전 ) 3. CSS 적용 방법 3가지  1)인라인 스타일 ( inline style )    - html내의 시작태그에서 style 속성으로 스타일을 지정하는 방법.     예>.. 2024. 5. 2.
CSS 5일차 - Grid(3) item 속성 4) item 에서 사용가능한 속성 a. Container 속성에서 설정된 justify-items 와 align-items 재정의 .item-1 {     justify-self: center | flex-start | flex-end | ...     align-self:  center | flex-start | flex-end | ... } item1 item2 item3 item4 item5 item6  b. 원하는 위치에 배치 1 - 위치의 번호로 배치 .item-3 {     grid-column-start: 2;     grid-column-end: 5;     grid-row-start: 1;     g.. 2024. 5. 2.
CSS 5일차 - Grid(2) Gap, 정렬, auto-rows d. gap ( 간격 ) - can i use 에서 내가 사용하는 버전에서 지원해주는지 꼭 확인할것. 가. 행의 간격  grid- row-gap: 10px 나. 열의 간격 grid-column-gap: 10px 축약표현식 문법: grid-gap:   row-gap     column-gap; grid-gap:   10px      20px  item1 item2 item3 item4 item5 item6  e. container 내의 item 정렬 가. x 축 정렬 justify-items: flex-end | center | ..; 나. y 축 정렬 align-items: flex-end | center | ..; .. 2024. 5. 2.
CSS 5일차 - Grid(1) 행 과 열 22. Grid 1) 개요 일반적으로 웹페이지는 행과 열로 구성된 grid 형식을 따름. flexbox 는 1차원인 행 또는 열만 제어가 가능하다. grid 2차원 제어 방식으로 행과 열을 같이 제어할 수 있다. 2) 2가지 구성요소 - 반드시 부모( grid container ) / 자식 ( grid item ) 관계가 성립되어야한다. ( 자손은 적용안됨 ) - 중첩 가능 가. grid container - display: grid; - container 에서 사용가능한 속성들 나. grid item - item 에서 사용가능한 속성들 ex) .container {    display: grid; }  // 부모     item // 자식     item     item          item2 //.. 2024. 5. 2.

티스토리툴바