나는 이렇게 학습한다/Etc 19

CSS _ Position 3대장 을 만나보자.

HTML로 웹페이지를 만들다 보면 내가 넣은 요소들이 내 맘대로 위치하지 않는다. (아주 자기들 멋대로다!) 그렇기 때문에 우리는 CSS 스타일로 내가 원하는 위치에 요소들이 위치할 수 있도록 position 속성을 조절해 주어야 한다. 자 그럼 이제부터 position 3 대장을 만나보자! 1 대장 relative -> 사전적 의미 : 상대적인 2 대장 absolute -> 사전적 의미 : 절대적인 3 대장 fixed -> 사전적 의미 : 고정된 사실 사전적 의미만으로 벌써 감이 잡힐 것이다. relative는 상대적으로 위치시키는 것이고 absolute는 절대적으로 위치시키는 것이고 fixed는 기냥 붙박이처럼 박제시키는 것이다! 설마 아직 감이 안 잡혔다고? 그럼 아래 예제 코드를 살펴보자! 1대장..

<img > 태그 와 {background-image} 의 차이를 알고 싶어?

웹페이지에 이미지를 넣는 방식은 크게 두 가지가 있다. 1번. HTML에서 태그를 활용해 넣는 방법. ​ 2번. CSS 에서 background-image 속성을 활용해 넣는 방법. { background-image: url("이미지 링크"); }​ 그렇다면 이 둘의 차이점은 무엇인가? (줄여서 1번, 2번이라 지칭하겠음) 1번은 이미지 로딩이 실패할 때, alt="대체 메시지"로 대체 결과물을 출력할 수 있지만 2번은 그렇지 못하다. 1번은 HTML이 구문 분석될 때 요청이 이루어지므로 성능면에서 2번보다 좋다. 1번은 검색 엔진에서 색인을 생성하여 검색시에 노출이 되지만 2번은 자동으로 색인화하지 않기 때문에 검색 시 노출되지 않는다. (자세한 이유는 하단에) 그럼 이 둘을 어떨 때 사용하면 좋을까?..

자바스크립트 #변수, 스트링, 함수

오늘 배운 것 - 콘솔로그 다른 자료형을 함께 출력할때는 , 로 구분 - `null`과 `undefined`는 모두 자바스크립트의 데이터 타입 - object = dictionary 관련 블로그 : [https://agvim.wordpress.com/2017/08/30/python-dictionary-vs-javascript-object/](https://agvim.wordpress.com/2017/08/30/python-dictionary-vs-javascript-object/) - 변수명.length = len(변수명) ex. "I LOVE WECODE".length - 일반 함수(인풋과 리턴 없음. 실행하면 바로 출력) //함수 선언 function sayHello() { console.log("안..

리눅스 #디렉토리의 구조

오늘 배운 것 unix 계열은 디렉토리의 용도에 따라서 이름이 정해져있습니다. 리눅스 디렉토리 스트럭처 검색go 1. / – 루트 모든 파일 및 디렉토리는 루트 디렉토리에서 시작됩니다. 루트 사용자만 이 디렉터리 아래에 쓰기 권한이 있습니다. /root는 /와 동일한 루트 사용자의 홈 디렉토리입니다. 2. /bin – 사용자 이진(바이너리 = 이진수) 이진 실행 파일을 포함합니다. 단일 사용자 모드에서 사용해야 하는 일반 Linux 명령은 이 디렉토리 아래에 있습니다. 시스템의 모든 사용자가 사용하는 명령은 여기에 있습니다. 예를 들어 ps, ls, ping, grep, cp. 3. /sbin – 시스템 바이너리(바이너리 = 이진수) /bin과 마찬가지로 /sbin에도 이진 실행 파일이 포함되어 있습니다..

리눅스 #쉘과 커널, 쉘 스크립트

오늘 배운 것 커널 : 알멩이, 핵심 쉘 : 껍데기, 주변 >>> 사용자가 명령을 입력하면 그 명령을 컴퓨터가 이해할 수 있도록 하는 프로그램이 쉘(shell)입니다. (쉘 : 사람이 이용하기 쉬운 명령어로 커널에게 전달하는 것) 쉘과 커널이 분리된 이유는 무엇일까? 쉘은 사람의 명령어를 해석하는 역할. 즉 사용자 입장에서 편한 쉘 프로그램을 사용하면 각자 취향에 맞게 커널을 제어할 수 있기 때문에 분리 된 것이 아닐까 추정됨. 다양한 쉘 프로그램을 사용해보면 쉘과 커널에 대한 이해도가 높아질 것 bash vs zsh zsh이 추가적인 기능을 갖고 있기 때문에 보다 더 편리하다는 평가를 받고 있다. ex. cd dir1 Music >>> dir1 디렉토리에서 Music 다이렉트로 이동가능 cd /U [+..

리눅스 #IO Redirection

오늘 배운 것 IO : input, output Redirection : 방향 재설정 Output ex. ls -l > [파일명.txt] >>> '>' 출력할 값을 > 다음 파일에 저장해라. : 출력값 방향 재설정 리눅스 명령어로 출력할 값의 방향을 설정할 수 있다. 스탠다드 아웃풋 : 터미널 창으로 그냥 출력하는 것 '스탠다드 아웃풋'을 리다이렉션 : 1> 또는 > 를 이용하여 설정 '스탠다는 에러'를 리다이렉션 : 2> 로 설정 : 에러 메시지 출력을 다른 방향으로 출력하는 것 ex. rm rename2.txt 1> result.txt 2> error.log >>> 리네임2 파일을 리썰트 파일로 변경하여 출력(리네임2 파일이 존재한다면), 만약 에러가 뜨면 에러 메시지가 에러 파일로 출력 Input ..

리눅스 #wget, git, 왜 CLI인가?(순차적으로 실행, 파이프라인)

오늘 배운 것 wget : 파일을 다운 받을 수 있는 명령어 ex. wget -O [파일명.확장자] [다운로드주소] wget -O favoriteActor.jpg https://news.nateimg.co.kr/orgImg/es/2021/03/29/PS21032900034.jpg 파일명.확장자 입력시 띄어쓰기는 안되더라. 띄어쓰기 하면 그냥 첫번째 단어로 다운로드 됨 git : 버전 관리 프로그램 (git clone : 오픈소스 복사해서 가져오기) ex. git clone https://github.com/facebook/react.git react_src git clone [오픈소스주소] [내컴퓨터디렉토리명] >>> 오픈소스주소에 나와 있는 버전 일체를 내가 설정한 디렉토리명으로 다운로드 받는다 왜 C..

리눅스 #sudo, nano, 패키지 매니저(Homebrew)

오늘 배운 것 https://www.facebook.com/groups/codingeverybody/permalink/1410557108984821/ 리눅스 명령의 빈도수 확인하는 방법(본인 것) sudo(super user do의 약자) >>> 권한이 있는 유저를 뜻한다. 파일 편집 (nano) 파일에 정보를 추가하고 편집하는 방법으로서 nano 에디터를 사용하는 방법 명령어는 그냥 nano를 치면 된다. 아래와 같은 모습 아래 단축키 들을 활용하여 파일을 수정 편집할 수 있다. 저장은 컨트롤 + O 나가기는 컨트롤 + X 범위 지정은 컨트롤 + 6 자르기는 컨트롤 + K 붙이기는 컨트롤 + U 나와서 ls 로 파일 생성 여부를 확인한 모습 패키지 매니저(homebrew) brew.sh -> homeb..

리눅스 #디렉토리와 파일, --help 와 man

오늘 배운 것 CLI (command line interface) GUI (graphic user interface) 리눅스, 터미널은 CLI 이다. 명령은 현재 위치한 디텍토리에서 수행한다. 파라미터 = 옵션 = 매개변수 *매개 변수 媒介變數 : 수학 두 개 이상의 변수 사이의 함수 관계를 간접적으로 표시할 때 사용하는 변수. ex. ls -a / -l(파일리스트 자세히) ls 현재 디렉토리의 파일 목록을 출력하는 명령어. 'ls -l'은 자세히 보기 pwd 현재 위치하고 있는 디렉토리를 알려주는 명령어 mkdir (make directory) mkdir 새로 생성할 디렉토리명 cd (change directory) cd 이동할 디렉토리의 경로명 상대경로와 절대경로 상대경로는 현재 디렉토리의 위치를 기..