본문 바로가기

웹122

CSS flex 7가지 속성 요약 정리 CSS flex 요약 정리를 해보겠습니다. flex는 flex box라고도 하며 grid와 함께 최신 CSS 기술로, CSS3에서 처음 등장하였습니다. 한 번 알아두면 전통적인 float나 table, column보다 편리하고 간결합니다. 또한 반응형 웹을 제작하는데에 뺄 수 없는 기술입니다. 다만 속성값이 많아서 처음에 헷갈릴 수 있는데, 이전 글들에서도 그랬듯 종류는 대략적으로 훑어보고 자주 쓰는 것들을 공유해보겠습니다. flex의 구조 flex를 쓰려면 한 개 이상의 요소를 담고 있는 flex box가 있어야 합니다. 그리고 담겨 있는 요소들을 flex item이라고 합니다. 그러나 저런 용어는 개념 설명을 위한 것이고, 그냥 flex 레이아웃을 적용할 div와 그 안에 담긴 요소들이라고 이해하면 .. 2022. 7. 25.
목록 썸네일 이미지 CSS padding, border, margin 요약 정리 CSS padding, border, margin 요약 정리를 해보겠습니다. html 요소가 가지는 내용물의 크기 이외에 padding, margin으로 영역을 설정하여 원하는 대로 요소를 배치 할 수 있습니다. border는 테두리인데 padding(내부 영역)과 margin(외부 영역)사이에 위치한 영역입니다. 요렇게 그림으로 보면 이해가 쉬우실 겁니다. 그럼 어떻게 사용하는지 알아볼까요? 속성 값 적는 순서 패딩, 보더, 마진 모두 속성 값을 적는 순서가 똑같습니다. padding : 10px 20px 30px 40px; 이렇게 최대 4개를 적을 수 있는데, 필요에 따라 아래와 같이 4가지 방식으로 적을 수 있습니다. 1개 : 4개 방향의 값을 한번에 적용합니다. 2개 : 상하/좌우 (첫번째 쓴 값.. 2022. 7. 22.
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.

티스토리툴바