본문 바로가기

웹/웹코딩 공부35

CSS position, z-index, overflow 요약 정리 CSS position, z-index, overflow 요약 정리를 해보겠습니다. position은 원래 태그가 가진 위치값을 자기 자신이나 부모, 뷰포트 등을 기준으로 요소를 배치할 수 있게 합니다. 또한 z-index로 깊이를 달리할 수 있고, overflow로 넘치는 내용물을 자를 수 있습니다. 평면에서의 배치, 깊이로서의 배치, 넘치는 내용 잘라내기라고 이해하시면 쉽습니다. position position 명령으로는 static, relative, absolute, fixed를 할 수 있습니다. div{ position : absolute; left : 0px; top : 0px; } 이런 식으로 left, right, top, bottom 위치를 지정할 수 있습니다. static : 원래 요소.. 2022. 7. 22.
CSS float, display, visibility, opacity 요약 정리 CSS float, display, visibility, opacity 요약정리를 해보았습니다. 위의 명령들은 CSS로 레이아웃을 할 때 꼭 필요하고 자주 쓰이는 명령들입니다. 위의 것들만 이용해도 정적인 페이지는 얼마든지 디자인대로 구현이 가능하며, 기본적인 CSS 지식입니다. 레이아웃을 더 편하게 할 수 있는 flex와 grid도 display 명령에 속하지만 내용이 길어져 다음 글에서 이어가겠습니다. float float은 웹 초기에 쓰던 레이아웃 방식이지만, 최근에도 쓰이지 않는 것은 아니라서 알아두시면 좋습니다. float은 간단하게 말해서 공중에 흐르는 흐름입니다. 물결이라고 생각해도 좋습니다. div에 float : left를 하면 div와 그 이후에 나오는 요소들이 왼쪽으로 흘러갑니다. r.. 2022. 7. 21.
목록 썸네일 이미지 CSS 선택자 필요한 6종류만 총정리 CSS 선택자를 간략하게 총정리해보겠습니다. 크게 크게 어떤 선택자들이 있는지 알아보고, 필요할 때 어렴풋이 기억해내는 것을 목표로 하겠습니다. 또한 모든 선택자를 나열하기보다는, 제가 CSS를 할 때 자주 쓰던것과 알아두면 유용할 것들만 적어보겠습니다. 1. 기본 선택자 전체 : * 태그 : h1, div등을 직접 기입 id : # class : . 복수 선택 : 콤마로 이어주면 됩니다. (div p, span a) 자손 선택 : 한 칸 씩 띄어 씁니다. (div p) 자식 선택 : 한 칸 띄고 화살 괄호를 씁니다. 자식은 자손과 달리, 바로 아래 있는 직계 자손을 뜻합니다. (div >p) 여기까지만 알아도, CSS로 HTML 태그를 선택하는데에는 거의 지장이 없습니다. 다만 좀 더 영리하고 간결하게.. 2022. 7. 20.
HTML 필수 태그 32가지 정리 HTML에서 필수적으로 많이 쓰이는 태그들을 정리해보겠습니다. HTML문서에는 필수적으로 쓰이는 태그들이 있습니다. 예를 들면 HTML태그, body태그 들을 쓰지 않고서는 HTML문서를 만들 수 없습니다. 이러한 필수 태그의 종류는 어떤 것들이 있는지 알아보고, 가장 자주 쓰이지는 않을지 몰라도 알아두면 정말 유용한 HTML5 태그들도 소개하겠습니다. 자주 사용되는 HTML 태그 advancedwebranking 사이트에서 자주 사용되는 HTML 태그 순위를 매긴 것을 참고했습니다. 1. HTML 문서의 루트 요소로, 모든 태그들을 감싸는 가장 큰 단위의 태그입니다. 2. HTML 문서에 대한 메타 데이터를 넣을 수 있고 이나 라고 적고 따옴표 안에 파일의 위치와 이름.확장자를 기입합니다. HTML문서.. 2022. 7. 19.
블록, 인라인, 인라인 블록 성질과 정렬 방법 블록, 인라인, 인라인 블록 엘리먼트의 성질과 정렬 방법에 대해 에 대해 알아보겠습니다. block, inline, inline-block은 HTML을 구성하는 태그들의 가장 기초적인 성질라고 보시면 되겠습니다. 블록, 인라인, 인라인 블록은 태그마다 기본적으로 가지고 있는 성질이기도 하고, display명령을 통해 임의로 바꿀 수도 있습니다. 이것들을 알아야하는 가장 큰 이유는 CSS 정렬일 것 입니다. 태그를 원하는 크기와 정렬로 설정하기 위해, 태그의 display 속성이 어떤지 알아봅시다. 블록 엘리먼트 , , , , , 등의 태그가 해당됩니다. 블록 엘리먼트의 특징은 다음과 같습니다. 메모리에 행단위로 저장됩니다. 기본적으로 너비가 100%로 생성되어, 자동으로 줄바꿈이 됩니다. 자주 쓰는 HT.. 2022. 7. 18.
목록 썸네일 이미지 비주얼 스튜디오 코드 Emmet(단축키)사용법 비주얼 스튜디오 코드에서 Emmet(약어 단축키)쓰는 방법을 공유합니다. 코딩은 물리적으로 글을 쓰는 작업입니다. 그리고 반복되는 내용이 많죠. html 문서는 특히 한 줄 한 줄이 태그로 이루어져 있어, 일일이 타이핑을 한다면 매우 힘든 일이 될 것입니다. 이 글에서 소개해드릴 Emmet은 비주얼 스튜디오의 기본 기능이며, 다음 2가지 기능을 배울 것입니다. 1) 작성 중에 단축키로 태그 자동 완성 2) 이미 작성된 코드를 드래그해서 태그 자동 완성 Emmet 단축키 설정 Emmet을 사용하기 위해, 먼저 단축키를 설정해주겠습니다. 기본 설정에서 'Keyboard Shortcuts'로 이동합니다. 윈도우는 파일 메뉴쪽에 있었던 것 같습니다. 검색창에 abbr을 쳐보면 앞서 말씀드렸던 Emmet과 관련된.. 2022. 7. 12.
목록 썸네일 이미지 비주얼 스튜디오 코드에서 live server 실행하는 방법 비주얼 스튜디오 코드(vscode)에서 live server를 설치하고 실행하는 방법을 공유합니다. 라이브 서버는 파일을 어딘가에 업로드하지 않아도, 웹브라우저를 열어 실시간으로 코딩한 결과물을 확인할 수 있는 기능입니다. 확장프로그램 설치만 하면 간단하고 어렵지 않기 때문에 코딩 공부를 시작하신다면 꼭 이용해보시길 추천드립니다. 먼저 비주얼 스튜디오 코드를 운영체제에 맞게 다운로드하고, 기본 설정대로 설치합니다. Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual St.. 2022. 7. 11.
목록 썸네일 이미지 파일질라 FTP 접속하는 방법 파일질라를 처음 쓰시거나, 접속한지 오래되서 기억이 가물가물한 분들을 위해 간단하게 FTP 접속 방법을 공유하겠습니다. 저도 가끔 스크립트 수정할 일이 있으면 들어가기 때문에 자주 사용하지 않아서 이번 기회에 정리해두려고 적어봅니다. 파일 질라를 설치하는 방법은 이전 포스팅을 참고해주세요. 파일질라 공식 다운로드 링크(window, mac) 파일질라 다운로드를 검색하면, 공식 사이트가 아닌 softonic이라는 사이트가 가장 위에 뜹니다. 저만 그런건지 모르겠지만 여기서 FileZilla 다운로드 버튼을 클릭하면 Avast(보안 프로그램)이 다운 cucat.tistory.com 파일질라 FTP 접속하는 방법 FTP에 접속하기 위해서는 다음과 같은 준비물이 필요합니다. 호스트 : 접속하려는 도메인의 주소 .. 2022. 6. 17.