분류 전체보기101 7장_효과적인 레이아웃을 위한 CSS 속성 다루기 7.1 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기 1차원 방식으로 고안된 효과적 레이아웃 설계 스타일 속성 플렉스 박스 레이아웃 살펴보기 - 주축(main axis) : 플렉스 박스 진행 방향과 수평한 축 - 교차축(cross axis) : 주축과 수직한 축 - 플렉스 컨테이너(flex container) : display 속성값으로 flex, inline-flex가 적용된 요소 - 플렉스 아이템(flex item) : 플렉스 컨테이너의 자식요소 item-1 item-2 item-3 item-4 .flex-container{ width:300px; height:200px; background-color:#c4c4c4; border:1px solid black; } .flex-item{ color:.. 2023. 12. 1. 6장_CSS 필수 속성 다루기_3 6.7 애니메이션 속성으로 전환 효과 제어하기 정지된 이미지를 연속적으로 보여주어 움직이는 것처럼 적용 키 프레임 정의하기 애니메이션 효과를 전환 효과에 부여하기 위해 키 프레임을 정의 /*기본 형식*/ @keyframes { 0%{/*CSS 코드*/} n%{/*CSS 코드*/} 100%{/*CSS 코드*/} } /*예시*/ @keyframes bgchange{ 0%{background-color:red;} /*시작 시점의 배경은 빨간색*/ /*25%, 50% 등과 같이 중간 지점도 얼마든지 정의가능*/ 100%{background-color:blue;} /*종료 시점의 배경은 파란색*/ } /*위 예시와 동일한 문법*/ @keyframes bgchange{ from{background-color:red.. 2023. 11. 29. 6장_CSS 필수 속성 다루기_2 6.4 배경 속성으로 요소의 배경 설정하기 background-color 속성 요소의 배경에 색상을 입힐 때 사용background-color:; /*예시*/ div{ width:100px; height:100px; background-color:red; } - background-image 속성 요소의 배경에 이미지를 삽입할 때 사용 ```CSS background-image:url('이미지 경로'); /*예시*/ div{ width:160px; height:120px; background-image:url('이미지 경로'); } 1. 요소의 배경크기 작성 2. 이미지의 크기를 배경 크기와 맞출것! background-repeat 속성 요소의 배경 크기가 삽입 이미지보다 클 경우의 반복.. 2023. 11. 28. 6장_CSS 필수 속성 다루기_1 6.1 CSS의 특징 살펴보기 기본 스타일 시트 HTML 자체에는 꾸밈을 담당하는 역할을 가진 태그나 기능X 하지만 기본태그 각각의 속성값에 따른 스타일이 다른 이유 -> 내장된 기본 스타일 시트 적용 우선순위와 개별성 사용자 별도 스타일 속성 정의 > 기본 스타일 시트의 스타일 속성 정의(우선적) h1{ font-size:16px; font-weight:normal; } CSS는 스타일이 단계적으로 적용 -> 같은 스타일을 여러번 정의하면 마지막 속성이 적용 -> 단계적 적용(개별성 규칙) ```CSS p{color:red;} p{color:blue;} p{color:orange}; /*마지막 orange 스타일이 적용됨*/ 선택자 예 점수 전체선택자 * 0 태그선택자 div,.. 2023. 11. 28. _컴퓨터 구조_ 07. 보조 기억 장치 07-1. 다양한 보조 기억 장치 하드 디스크 자기적 방식으로 데이터 저장(자기 디스크의 일종으로도 지칭) -하드 디스크의 물리적 구성요소 1. 플래터 : 실질적으로 데이터가 저장되는 하드디스크 내의 원판 2. 스핀들 : 플래터를 회전시키는 요소 3. RPM : 스핀들이 플래터를 돌리는 분당 회전수 단위 4. 헤드 : 플래터 위에서 데이터를 읽고 쓰는 바늘같은 부품 5. 디스크 암 : 헤드를 원하는 위치로 이동시키는 부품 하드디스크는 트랙과 섹터의 단위로 데이터를 저장 -하드 디스크의 논리적 구성요소 1. 트랙 : 플래터를 여러 동심원으로 나누었을 때 그 중 하나의 원 2. 섹터 : 트랙을 피자와 같이 여러 조각으로 나누었을 때 그 중 하나의 조각 3. 실린더 : 여러겹 겹쳐놓은 플래터 상에서 같은 위치.. 2023. 11. 26. _컴퓨터 구조_ 06. 메모리와 캐시 메모리 06-1 RAM의 특징과 종류 RAM의 특징 실행할 명령어와 데이터의 저장공간-휘발성 저장장치 전원을 끄면 저장된 내용이 사라짐(RAM) -비휘발성 저장장치 전원을 꺼도 저장된 내용이 유지됨(하드 디스크, SSD, CD-ROM, USB) -> CPU는 비휘발성 저장장치인 보조기억장치에 직접접근X 따라서, 비휘발성 저장장치에 "보관할 대상", 휘발성 저장장치에 "실행할 대상"을 저장 - RAM의 용량과 성능 RAM 용량이 클수록 보조기억장치의 데이터를 많이 가져와 미리 저장 가능 -> ==많은 수의 프로그램 동시 실행==에 유리 -> 용량이 필요 이상으로 커질 경우 의미X - RAM의 종류 ```MarkDown -DRAM(Dynamic RAM) 저장된 데이터가 "동적"으로 변하는 RAM(시간이 지날수록 데.. 2023. 11. 25. 이전 1 ··· 12 13 14 15 16 17 다음