본문 바로가기

Etc.60

[CSS] 가상 클래스(Pseudo-class) vs 가상 요소(Pseudo-element) 헷갈리기 쉬운 선택자. 장식적인 요소를 html 태그 없이 구현하고 싶을때 사용한다. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes Pseudo-classes - CSS: Cascading Style Sheets | MDN A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it. developer.mozilla.org htt.. 2021. 11. 3.
[WSL] home directory 아무래도 vscode WSL로 개발을 하다보니까 궁금한 점이 생겼다. 그냥 쌩 cli로만 개발하기에는 허접하기도 하고.. html 실행해서 보고 싶은데.. 그러면 도대체 wsl의 홈디렉토리를 file explorer로 어떻게 접근하지? 결론적으로는 vscode 해당 폴더에서 우클릭하고 Reveal in Explorer을 선택해주니 \\wsl$\Ubuntu-18.04\home\ahj\front_end_school_html 요렇게 요상한 경로로 파일 탐색기를 데려가 주었다. wsl$ 상위 폴더인 최상위 폴더는 접근할 수 없는지 네트워크라고 불리우는 폴더는 접근할 수 없었다. 터미널에서 접근하는 방법은 cd ~ 해주면 home 디렉토리로 이동하는데 최상위 루트의 하위 home 디렉토리가 아니라 /home/[유.. 2021. 11. 2.
[HTML] emmet 문법 https://docs.emmet.io/cheat-sheet/ Cheat Sheet Download cheat sheet as printable PDF A5 docs.emmet.io html 작업환경에서(나의 경우는 vscode 상) 자동완성 기능 h1 h1{hello world} h1+p h1{hello}10 h1#one h1.one table>(tr>(td4))3 lorem lorem3 lorem5 img img:z a[a="value1" b="value2" c=1] a a[href="www.naver.com"] h1.one.two#three body 태그 사이에 있는 것들이 다 emmet 문법들인데 저렇게 입력하고서 팝업?처럼 뜰 때 tab 키를 누르면 저기에 연동되어 있는 tag들이 자동 입력된다.. 2021. 11. 1.
[WSL] bash? zsh? oh-my-zsh? bash bash 자꾸 다들 그러길래 뭔가 싶어서 검색해봤더니 이미 사용하고 있던 zsh가 bash 발전 버전 같은 것이었다;; 항상 '그런데 zsh가 뭐지' 하면서 쓰고 있긴 했는데...😅 이것도 모르고 쓰고 있었니.. 우선 가볍게 이해하고 읽기에 이 블로그 글이 좋은 듯 https://ithub.tistory.com/205 shell, bash, zbash의 간단 개념정리 linux 계열 운영체제를 사용하시는 분들 중 bash, bashrc, zbash 에 대한 개념이 없거나, 헷갈리시는 분들 가볍게 읽어주세요. ;) shell, sh, bash, zbash 등.. 간단하게 알아보자. shell이란? 명령어 처리기 (ak.. ithub.tistory.com shell은 명령어 처리기 그 종류로 sh,.. 2021. 10. 31.
[WSL] wsl 버전 확인 https://devahj.tistory.com/10?category=894991 [ubuntu] 노마드코더 개발자 설정 공부 뭘 정리해야할지 잘 모르겠지만 바닐라 JS 2주 챌린지 쉬는 김에 놀면서(?) 세팅 좀 해보고 싶어서 짧게 개발자 설정을 도와주는 강의를 하나 들었다. 총 1시간 40분 가량의 분량이었는데 어제 밤 devahj.tistory.com 이 때 그냥 뭣도 모르고 시키는 대로 설치하다 보니깐 문득 내 wsl 버전이 생각이 안나서 검색해봤다. wsl version check ->https://askubuntu.com/questions/1177729/wsl-am-i-running-version-1-or-version-2 WSL: Am I running version 1 or version .. 2021. 10. 31.
[CSS] float 이거 분명히 나중에 검색할 단어 찾기도 어렵고 헷갈릴꺼다. 왼쪽 정렬 오른쪽 정렬 이런 HTML 코드가 있을 때 /* CSS 코드 */ .left-align { text-align: left; } .right-align { text-align: right; } 이렇게만 쓰면 왼쪽 정렬 오른쪽 정렬 이렇게 다른 줄로 나온다. 이 둘이 한 줄로 나오게 하고 싶다면 float를 써야한다. /* CSS 코드 */ .left-align { float: left; } .right-align { float: right; } 이렇게 써주면 "왼쪽 정렬 ~~ 오른쪽 정렬" 한줄로 나온다! https://developer.mozilla.org/ko/docs/Web/CSS/float https://developer.mozi.. 2021. 10. 29.
[HTML] div, section, article 셋은 모두 한 division을 담당하는 태그다. 그런데 왜 굳이 3개씩이나 있을까? content1 content2 content3 content4 look at this dirt...y..읍읍 구역을 나눠서 html을 작성하다 보면 이렇게 더럽게 쓰일 수도 있다. content1 content2 content3 content4 section과 article을 이용하면 좀 더 각 구역의 의미를 살리면서 코드를 쓸 수 있고 보기에도 좋다. 노마드 코더 파이썬 챌린지 할 때 div 범벅인 페이지 분석했을 때 좋지 못한 기억이 떠올랐다... 웩 2021. 10. 29.
[HTML] 접근하는 마음가짐 https://www.youtube.com/shorts/50ur0KsTUqw https://zetawiki.com/wiki/HTML%EC%9D%80_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4%EA%B0%80_%EC%95%84%EB%8B%99%EB%8B%88%EB%8B%A4 HTML은 프로그래밍 언어가 아닙니다 - 제타위키 다음 문자열 포함... zetawiki.com 이렇게 우스갯 소리로 말하듯이 HTML은 '마크업 언어'로 그냥 데이터의 구조를 알려줄 뿐인 언어다. HTML로 구성된 페이지를 창의력, 논리력을 사용한 코딩으로 보면 무겁게 느껴질 수도 있을 것 같다. 그래서 두희님이 강의에서 말씀해주신 것처럼 그냥 하나의 '보고서'.. 2021. 10. 29.
[CSS] 선택자(후손 및 자손, 동위) CSS를 너무 겉핥기처럼만 보고 지나갔나 보다.. 다 까먹었네 div li { /* 이거는 후손 선택자, div 안에 li든, div 안에 div 안에 div 안에... 암튼 div 안에 있는 모~든 li 태그 선택자 */ /* 쓰고자 하는 코드 */ } div > h1 { /* div 바로 밑에 있는 h1 태그만, 자손 선택자 */ /* 쓰고자 하는 코드 */ } 동위 선택자 + vs ~ h1+div{}/* 얘는 h1태그 바로 밑에 붙어 있는 동등한 위치의 div 한개만 선택하는 선택자 */ h1~div{}/* 얘는 h1태그와 동등한 위치에 있는 div 태그 싹다 선택 */ 2021. 10. 28.
[WSL/CLI] 비어있지 않은 폴더 지우기 딴짓 그만하고 이제 깃헙 커밋도 열심히 하고 다시 CLI 가지고 놀자 아직 헷갈리는 개념 -vscode에서 zsh로 열면 왜 그냥 vscode랑 열때랑은 다른 모드로 뜨는 것일까? 둘의 차이가 있나?? 어디에 물어보지 -한 달 전쯤에 노마드 코더님 따라 일단 깔고 세팅해봤는데 wsl은 뭐고 zsh는 뭐지? 영상 다시 첨부터 보면서 개념을 익혀보자 이젠 -리눅스로 쓰면 다른 폴더 만들어서 가상 작업환경에서 일하는게 좋다는데 그게 뭐였더라.. 내일 찾아보자 -CLI로, 키보드로만 개발하는 거 뭔가 멋있고 재밌다..ㅎㅎ 빨리 능숙해지고 싶다! 암튼 다시 자꾸 폴더를 만들고서 github에 있는 repository를 가져오니까 폴더 안에 같은 이름 폴더가 생겨서 아싸리 폴더를 다 지우고 다시 만드려고 하니 비어.. 2021. 10. 20.

티스토리툴바