728x90 전체 글73 [Linux] 리눅스 기본 명령어 (1) 🌈 리눅스 기본 명령어 알아보기 1. pwd : 현재 위치 확인하기 2. mkdir : 새로운 폴더 생성하기 3. ls : 특정 폴더에 포함된 파일이나 폴더 확인하기 💡 Option ls -a: a는 all 의 의미를 가지고 있어, 숨어있는 폴더나 파일을 포함한 모든 항목을 터미널에 출력 ls -l: l을 사용하면 가장 왼쪽에 d와 -를 확인할 수 있는데, d는 폴더 -는 파일을 나타냄 ls -al: 폴더나 파일의 포맷을 전부 터미널에 출력 4. cd : 폴더에 진입하기 5. touch : 파일 생성하기 6. rm : 폴더나 파일 삭제하기 💡 Option rm -rf: rm만 단독으로 사용하면 폴더는 지울 수 없기에 폴더를 지우기 위해서 rm -rf를 입력해줘야한다. 7. mv : 폴더나 파일의 이름을.. 2022. 4. 28. [CSS] 다시 정리해보는 박스 구성 요소 (Margin, Border, Padding, Content) 🌈 박스를 구성하는 요소 - Content, Padding, Border, Margin 1. Border (테두리) h1 tag 에 border의 빨간 선을을 추가하여 확인해보면 아래와 같이 h1 tag의 테두리를 확인할 수 있다. 💡 테두리를 점선으로 만들어보기 border의 속성값 중 테두리 스타일에 dotted라는 속성을 넣어주면 된다. 💡 테두리를 둥글게 만들어보기 border-radius 를 이용해 테두리를 둥게 만들어볼수도 있다. 💡 테두리에 그림자 넣기 box-shadow 를 이용해 테두리에 그림자도 넣을 수 있다. 2. Margin (바깥여백) tag에 margin을 주어 border와의 차이점을 먼저 확인해보자. 살구색으로 표시되어 있는 border의 바깥 부분이 margin 인 것을 .. 2022. 4. 28. [CSS] 줄 바꿈이 되는 박스와 옆으로 붙는 박스 ( block, inline, inline-block) 🌈 줄 바꿈이 되는 박스 block VS 옆으로 붙는 박스 inline, inline-block HTML 태그 중에 어떤 태그는 줄바꿈이 되고 어떤 태그는 줄바꿈이 되지 않는다. 우리는 줄바꿈이 되는 박스를 block 박스, 줄바꿈이 일어나지도 않고 맘대로 크기지정을 할 수 없는 박스를 inline 박스라고 부른다. 그리고 이 두가지 속성이 섞인 박스도 존재하는대 이는 inline-block 박스라고 부른다. 줄 바꿈이 되는 대표적인 태그 -> , , 줄 바꿈이 되지 않는 대표적인 태그 -> 💡 아래 표를 기억해두면 코드를 작성하는데 훨씬 유용할 것! block inline-block inline 줄바꿈 여부 줄바꿈이 일어남 줄바꿈이 일어나지 않음 줄바꿈이 일어나지 않음 기본적으로 갖는 너비 100% 글.. 2022. 4. 28. [JavaScript] querySelector 함수 사용해보기 🌈 querySelector 함수 사용해보기 querySelector()는 제공자 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 element를 반환한다. 일치하는 요소가 없다면 null을 반환하게 된다. 👉 querySelector를 이용하여 신문기사 제목 내 맘대로 바꿔보기 위 기사 제목을 querySelector를 이용하여 내 맘대로 바꿔보자! 제목의 class 이름을 먼저 확인해보자. 이 기사의 경우에는 class 이름이 "media_end_head_headline" 으로 설정되어 있다. console 창으로 넘어가 document.querySelector('.media_end_head_headline').textContent = "안녕하세요"; 다음과 같이 입력하면 기사 제목이 안녕하세.. 2022. 4. 27. [CSS] CSS란? 🌈 CSS란? CSS는 Casacading Style Sheets의 약자로 HTML과 같은 마크업 언어가 표현되는 방법을 결정한다. HTML이 구조를 담당한다면, CSS는 내부와 외부를 꾸미는 역할을 담당한다. CSS 는 선택자와 선언부로 구성된다. 선택자는 태그, 아이디, 클래스와 같은 HTML요소를 가리키고 선언부에는 글자 색상, 크기와 같은 속성 이름과 값이 포함된다. 선택자 {속성:값; 속성:값; ...} 2022. 4. 27. [HTML] HTML이란? 자주 사용하는 HTML 요소 🌈 HTML HTML은 HyperText Markup Language 의 약자로 웹 페이지의 틀을 만드는 마크업 언어이다. HTML은 기본적으로 부등호 로 묶인 tag들의 집합으로 구성되어 있다. Ex. , Tag로 시작해서 Tag 로 끝나는 것을 아래 예제로 확인할 수 있다. 👉 자주 사용하는 HTML의 요소 1. VS tag 는 한 줄을 다 차지하고 tag는 컨텐츠의 크기만큼만 공간을 차지한다. 위 코드를 웹 페이지 상에서 확인해보면 div tag는 한 줄을 차지하지만, span tag는 컨텐츠 크기만큼만 공간을 차지하는 것을 확인할 수 있다. 2. img를 삽입할 때 사용한다. img 태그는 닫는 태그가 없다. 3. 링크를 삽입할 때 사용한다. 4. , , ul - unordred list li -.. 2022. 4. 27. [CSS] 마진(margin) 그리고 패딩(padding) 이란? 🌈 마진 (margin) "바깥 여백" 마진은 요소 주변 여백을 뜻한다. 마진의 크기를 조절해 다른 요소 사이들 간의 간격을 남겨 User-friendly한 UI를 만들 수 있다. 💡 사용법 𝟏. border 를 기준으로 위 / 오른쪽 / 아래 / 왼쪽 따로 지정하는 방법 margin-top : 위 여백 margin-right : 오른쪽 여백 margin-bottom : 아래 여백 margin-left : 왼쪽 여백 𝟐. 4가지 방향을 한 번에 지정하는 방법 margin : [위] [오른쪽] [아래] [왼쪽] * margin은 음수 값이 적용된다. * auto 를 사용하여 가운데 정렬이 가능하다. (사용법: margin: auto; margin: 0 auto;) 🌈 패딩(padding) "안쪽 여백" p.. 2022. 4. 27. [CSS] Position: relative, absolute 🌈 CSS Position 이란? HTML 요소가 웹 페이지 상에서 위치를 결졍하는 방식을 설정하는데 아래와 같이 다섯개로 정할 수 있다. 1) static postion 2) relative position 3) fixed position 4) absolute position 5) sticky poisition 💡block & inline block : block 구조는 한 줄을 모두 차지 (, ) inline: 컨텐츠 크기 만큼만 차지 () 💻 Static position HTML의 요소를 위치하는 가장 기본적인 방식은 정적 위치 지정방식이다. static 방식으로 설정된 요소는 top, right, bottom, left 속성 값에 영향을 받지 않고, 단순히 웹 페이지의 흐름에 따라 차례대로 요소들.. 2022. 4. 27. [HTML] 간단히 정리해보는 HTML5란 무엇인가 🌈 HTML5 "차세대 웹 표준," WHATWG[Web Hypertext Application Technology Working Group]와 W3C[World Wide Web Consortium]가 발표한 HTML의 최신 버전으로 2014년 10월 28일 완전히 표준화 되었다. 기존에는 텍스트와 하이퍼링크만 표시하던 HTML이 멀티미디어 등 다양한 애플리케이션까지 표현하고 제공하도록 진화한 웹 프로그맹 언어가 탄생한 것이다. 이런 HTML5라는 말은 꼭 W3C의 HTML5표준 뿐만 아니라 최신 웹 기술을 통틀어 칭하기도 한다. 👉 HTML5의 특징 𝟏. 문법면에서는 이전에 비해 상당히 간결하고 명확해졌다. 이전에는 자바스크립트를 사용해서 엄청난게 긴 코드를 써서 간접적으로 구현해야 했던 기능들이 정식 .. 2022. 4. 27. 이전 1 ··· 5 6 7 8 9 다음 728x90
