본문 바로가기

프론트엔드 공부4

인터랙티브 웹 개발 - 리스트 아이템 1. CSS grid : 세로 열과 가로 행을 기준으로 요소를 정렬하는 레이아웃 레이아웃 정의grid-template-rows행의 형태를 정의grid-template-columns열의 형태를 정의 간격 정의gap 아이템의 형태를 정의grid-column-start그리드 항목의 시작 열 라인을 지정grid-column-end그리드 항목의 끝 열 라인을 지정grid-row-start그리드 항목의 시작 행 라인을 지정grid-row-end그리드 항목의 끝 행 라인을 지정 2. CSS transition : 속성값의 변화를 일정 기간에 걸쳐 일어나게 하는 것transition 속성property트랜지션 효과를 적용할 CSS 속성을 지정duration트랜지션 효과가 완료되는 데 걸리는 시간을 설정timing-fu.. 2024. 7. 12.
인터랙티브 웹 개발 - 바 영역 이론 CSS에서 display 부분을 배워볼 것이다. " 요소를 어떻게 배치할 지 "" 자식 요소를 어떻게 배치할 지 " 바깥쪽안쪽blockflexinlinegrid table flow-root flow ruby 1. display : 바깥쪽 영역 (1) block 한 줄을 차지width, height, margi, padding 지정 가능, , 등(2) inline컨텐츠 영역 만큼만 차지width, height 지정 붉단으margin 좌우에만 적용padding - 시각적 영역 (상하좌우), 실제영역 차지 (좌우) , , 등  2. DOM : Document Object Model웹 문서의 객체모델 인터페이스자바스크립트 등에 의해 수정되기 위해 조작 가능한 API 제공W3C 표준window, document.. 2024. 7. 10.
인터랙티브 웹 개발 - 헤더 영역 이론 [CSS flex]: 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성-> 1차원 레이아웃 모델로 상하 레이아웃, 방향을 좌우로 바꾸거나, 레이아웃 내 아이템간 정렬을 조정하는데에 특화된 속성 display : flex; -> 아이템들을 담고있는 영역을 플렉스 컨테이너로 만들어줌   [아이템을 지정하는 속성] flex-growflex-shrinkflex-basis1. flex-grow할당 가능한 공간의 정도 (px가 아닌 숫자)형제 아이템들이 모두 동일한 flex-grow 값 = 동일한 공간형제 아이템들이 다른 flex-grow 값 = 다른 공간 2. flex-shrink아이템의 크기가 축소되는 정도 (px가 아닌 숫자)아이템의 크기가 container보다 클 때.. 2024. 7. 6.
웹 개발 이론 기초 (HTML / CSS / JS란 ?) 웹 개발에서의 이론을 배워보려고 한다.가장 기초적인 지식으로 HTML, CSS, JavaScript가 있으며, 정리해보면 아래의 표와 같다.  HTML뼈대CSS장식, 꾸밈JavaScript구동, 동작  1. HTML : Hyper Text Markup Language  하이퍼 텍스트 마크업 언어-> 프로그래밍 언어가 아닌 HTML 태그들로 구성 2. CSS : Cascading Style Sheets-> 같은 문서 구조로도 전혀 다른 결과물을 만들어 낼 수 있음-> 프로그래밍 언어도, 마크업 언어도 아님 3. JS : JavaScript-> 모든 웹브라우저가 해석할 수 있는 프로그래밍 언어-> 정적인 웹문서에 동적인 생명을 불어넣는 역할-> 자바와는 다른 언어            3-1 ) ECMAScr.. 2024. 7. 6.

티스토리툴바