웹/HTML & CSS10 맥에서 vscode 자동완성 단축키 윈도우 : ctrl + space or 사용자 설정 맥 : ⌘+I or 사용자 설정 code > preferences > keyboard shorcut(⌘K + ⌘s) 사용자 키바인딩 및 기본 설정되어 있는 단축키 이용 2021. 1. 5. em rem 차이 1. em 타이포그래피에서 부모 자식 간의 사이즈를 기준으로 배수로 상대사이즈를 나타내는 단위이다. 기본적으로 font-family에 따라서 보여지는 텍스트 크기는 달라질 수 있으나 em은 항상 고정된 폰트 사이즈를 갖게 된다. html 폰트사이즈 값을 16px로 할 경우 1em = 16px 2em = (16*2)32px 3em = (16*3)48px See the Pen em by sonia (@sophyspick) on CodePen. 위 예시를 보자 parent는 html의 크기를 기준으로 폰트 사이즈가 지정되고 child는 parent의 크기를 기준으로 사이즈가 지정된다. parent는 (16*3) 48px child는 (48*0.5) 24px이 되는 것이다. 즉, em은 부모의 폰트 사이즈를 곱.. 2020. 9. 4. 맥(Mac)에서 로컬 서버 구동시키는 방법(php, apache) 맥(Mac)에서 로컬 서버 구동시키는 방법(php, apache) php파일을 로컬에서 웹서버로 실행시키려면 몇 가지 세팅이 필요하다. 목차 아파치(apache), php 버전 확인하기 아파치 실행하기 php파일을 웹으로 띄우기 폴더(디렉토리) 접근 권한 해제 아파치 재시작 1. 아파치(apache), php 버전 확인하기 터미널, 명령프롬프트에 아래와 같이 입력해보고 존재하지 않으면 다운받고 진행하자. (아파치, php) $ apachectl -v $ php -v 현재 상태) 맥북으로 아파치 2.4.41, php 7.3.11버전을 사용하고 있음 2. 아파치 실행하기 $ sudo apachectl start http://localhost/ 로컬호스트를 웹에 검색하면 It works! 라고 뜨는 것을 확인.. 2020. 7. 31. [favicon] 파비콘 만드는 방법 - 파비콘 총정리! 1. 파비콘이란? favicon은 favorites + icon. 의 합성어, 즐겨찾기 아이콘이다. 인터넷 웹브라우저 주소창에 표시되는 웹사이트를 대표하는 탭, 즐겨찾기 아이콘으로 16x16 32x32 48x48 64x64 128x128 등의 사이즈, 8비트, 24비트, 32비트 색상으로 용량과 사이즈가 작은 파일로 제작할 수 있다. 파비콘을 지정하지 않으면 기본으로 지구본 아이콘으로 보여지게 된다. 핸드폰으로 웹사이트를 홈화면으로 추가할 때도 파비콘이 쓰인다. 2. 파비콘 확장자 특이한 점은 jpg, png 와 같이 흔히 보는 확장자와는 다르다. 파일명.ico 로 제공된다. .ico는 MS윈도우의 아이콘에 쓰이는 그림 파일 포맷이다. ⬅︎ 윈도우 아이콘의 확장자는 ico이다. 3. 파비콘 만드는 방법 .. 2020. 7. 2. multiline truncation with pure CSS :: css만으로 말줄임표를 해보자 via GIPHY 말줄임표를 쓰고 싶은 곳에 아래 스타일을 추가해주세요. .single-line{ display: block; display: -webkit-box; position:relative; overflow: hidden; width: 100%; height: 28px; font-size: 18px; line-height: 26px; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } 바쁘신 분들을 위해 css를 선사합니다. 클래스 추가해주시면 원하는 결과가 나올 겁니다! line-clamp 값에 원하는 숫자를 쓰면 숫자만큼 잘립니다. -webkit-line-cla.. 2020. 6. 16. ::before ::after content에 대해 쌉 이해 가능 ::before ::after content에 대해 쌉 이해 가능 안녕하세요 웹로드케스트입니다. CSS3 가상요소 before, after를 활용한 예제와 content에 대해 쉽게 설명해드리겠습니다. 1. ::before, ::after 의 차이점 ::before - 선택한 element(s) 앞에 가상 콘텐츠 삽입 ::after - 선택한 element(s)s 뒤에 가상 콘텐츠 삽입 See the Pen ::before, ::after diffrent by dadada (@yesna) on CodePen. 예제를 보시면 before를 사용하면 HTML element(태그) 앞에 위치하고 after를 사용하면 HTML element 뒤에 위치하게 됩니다 2. content를 쓰는 이유 가상 요소 bef.. 2020. 6. 14. 이전 1 2 다음
