본문 바로가기

분류 전체보기361

[Linux] 가상 머신 만들기 가상 머신 만들기 1. 새로 만들기. 2. 이름 설정, 종류 : Linux, 버전 : Other Linux(64-bit). 3. 메모리 크기 : 4096 MB. 4. 하드 디스크 : 지금 새 가상 하드 디스크 만들기. 5. 하드 디스크 파일 종류 : VDI(VirtualBox 디스크 이미지). 6. 물리적 하드 드라이브에 저장 : 동적 할당. 7. 파일 위치 및 크기 : 50.00 GB. 가상 머신 기본 설정 1. '설정'에 들어간다. 2. 시스템 > 부팅 순서 설정 변경. 3. 시스템 > 프로세서 개수 : 2로 설정. 4. 저장소 > 광학 드라이브 : 다운받은 CentOS로 변경. 5. 오디오 > 오디오 사용하기 해제. 6. 네트워크 > 어댑터2 > 네트워크 어댑터 사용하기 설정 변경. 7. USB >.. 2022. 9. 18.
[Linux] Linux 실행 환경 구성 VritualBox란? : PC에 설치된 운영체제에 가상 머신을 생성해, 그곳에 다른 운영체제를 설치할 수 있게 해주는 프로그램. Oracle VirtualBox 다운로드 1. 아래 사이트에 접속한다. https://www.virtualbox.org/ Oracle VM VirtualBox Welcome to VirtualBox.org! News Flash New September 2nd, 2022VirtualBox 6.1.38 released! Oracle today released a 6.1 maintenance release which improves stability and fixes regressions. See the Changelog for details. Important August 30t.. 2022. 9. 17.
[CSS] custom property custom property 📌 custom property : 값을 저장하는 것. '변수'라고 생각하면 쉬움. root에서 선언 📌 규칙 : --( )-( ) 형식으로 이름 사용. No words are enough for you. 멜로디로 담고 싶어. So, 너의 모든 감정 내가 들을 수 있게 해줘. I just want to love you. 널 혼자 두지 않아 난 I just want you, I need you. 이 밤은 짧고 넌 당연하지 않아. + 추가 설명 더보기 p::first-letter { background-color: var(--main-color); → p의 첫번째 글자 배경색 설정. border: var(--default-border); → p의 경계선 설정. } p::first.. 2022. 9. 15.
[CSS] Pseudo Element Pseudo Element ::placeholder 📌 ::placeholder : placeholder 꾸밀 때 사용. Pseudo Element ::selection 📌 ::selection : 선택한 것의 설정을 변경 할 때 사용. Pseudo Element ::first-letter 📌 ::first-letter : 첫 글자만 적용. Pseudo Element ::first-line 📌 ::first-line : 첫 줄만 적용. Pseudo Element - 예시 No words are enough for you. 멜로디로 담고 싶어. So, 너의 모든 감정 내가 들을 수 있게 해줘. I just want to love you. 널 혼자 두지 않아 난 I just want you, I need y.. 2022. 9. 15.
[CSS] States States 📌 States ① active : 마우스가 클릭할 때. ② focus : 선택되었을 때. ③ focus-within : focused인 자식을 가진 부모 엘리먼트에 적용됨. ④ hover : 마우스가 대상 위에 있을 때. ⑤ visited : 방문한 상태인 경우.(링크에만 적용.) button1 button2 Go Naver + 추가 설명 더보기 button:active { background-color: tomato; → button 클릭하면 배경색 변함. } button:hover { background-color: lightskyblue; → button 위에 마우스 커서가 올라가면 배경색 변함. } button:focus { background-color: orange; → butt.. 2022. 9. 15.
[CSS] Pseudo Selectors Pseudo Selectors 📌 Pseudo Selectors : 세부적으로 요소를 선택. Pseudo Selectors - : 📌 : ① div : first-chid { } → div의 가장 처음에 있는 자식 요소. ② div : last-chid { } → div의 가장 마지막에 있는 자식 요소. ③ div : nth-child(n) { } → div의 n번째에 있는 자식 요소. 💡 even(= 2n) : 짝수, odd(= 2n + 1) : 홀수, 3n 등 사용 가능. 1 2 3 4 5 6 7 8 9 + 추가 설명 더보기 div { height: 50px; width: 50px; background-color: darkgray; color: white; } div:first-child{ backg.. 2022. 9. 14.
[CSS] position position : fixed 📌 fixed : 위치 고정. 💡 스크롤해도 위치가 고정되어 있음. 처음 위치한 곳에 고정되며 위치 변경이 가능함. top, left, bottom, right 중 하나의 속성이라도 설정하면 위치가 변경됨. 💡 변경 전에는 같은 레이어 상에 위치하기 때문에 겹쳐서 그려지지 않음. 속성 설정을 한 경우, 가장 위에 위치한 레이어에 그려지기 때문에 겹쳐서 그려지게 됨. (top: 5px; 지우면 확인 가능) position : static 📌 static : 레이아웃이 박스를 처음 위치하는 곳에 두는 것. position : relative 📌 relative : 요소가 처음 위치한 곳에서 상, 하, 좌, 우로 이동. position : absolute 📌 absolute : .. 2022. 9. 14.
[CSS] Flexbox Flexbox 📌 Flexbox : 자식 요소에는 아무것도 적지 않고, 부모 요소에만 적는다. 📌 부모에 ' display : flex; '를 명시. 부모가 자식을 조정할 수 있음. 📌 justify-content : 배치할 위치 설정. + 추가 설명 더보기 ① 'div'의 부모 요소인 'body'에 'diplay: flex;'가 명시되어 있으므로, 'div'는 부모 요소인 'body'에 따라 설정된다. ② 'body'의 'justify-content: center;'로 인해, 'div'는 주축(수평. 변경 가능.) 기준으로 중앙에 위치하게 된다. * justify-content는 주축(수평. 변경 가능.)에 적용되는 속성. Flexbox - main axis, cross axis 📌 main axis .. 2022. 9. 14.