본문 바로가기

JavaScript17

태그 선택하기, event handling 1. 태그를 선택할 때 ID로 선택하거나 Class 이름으로 선택할 수 있음 1,2번은 ID 선택 3,4,5는 Class 선택 3으로 선택하면 첫 요소만 4, 5로 하면 해당 class의 모든 요소가 유사배열로 전부 선택됨 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 // css 선택자로 태그 선택하기 const myTag = document.querySelector('#myNumber'); console.log(myTag); const myTag2 = document.getElementById('myNumber'); console.log(myTag2); const myTag3 = document.querySelector('.color-btn'); console.log(myTag3);.. 2021. 7. 9.
List 각 텍스트 한줄마다 앞에 숫자/점이 붙고, 기본적으로 padding-left: 40px이 있음 1. ordered list, ol //ordered list 밥먹기 //list item 공부하기 결과 1. 밥먹기 2. 공부하기 만약 1. 2. 가 싫다면 로 하면 a. b. 로 하면 A. B. 로 하면 i. ii. 로 하면 I. II. 로 하면 1. 2. 2. unordered list, ul 번호나 알파벳대신 밥먹기 공부하기 처럼 동그라미 리스트가 됨 3. 꾸미기 list-style: none; 점이든 숫자든 없어짐 list-style-type: square; 하면 동그라미가 네모가 됨 2021. 7. 1.
Float 신문같은거 보면 사진 주변으로 글자들이 흐르듯이 문단을 이루게 만들 때 쓰는 것 사진에다가 float: left; 하면 사진은 왼쪽 위에 붕 뜨고 다른 요소들이 그 아래를 채운다는 느낌.. 근데 노란색 공간에 글씨를 쓰면 파란색 사진 밑으로 글이 있어서 가려질 것 같은데 그렇지 않음. 왜냐면 텍스트는 inline 요소라서 파란 공간쪽으로 가지 못함. float를 여러 요소에 사용한다면 grid layout으로 만들 수 있음 파란색을 float:left 하고 노란색을 float:left 하면 노란색이 파란색 옆에 float 하게 되에 grid layout처럼 만들 수 있다 float와 같이 쓰이는 요소로 clear가 있다. clear: left 라고 쓴다면 왼쪽을 clear한다, 즉 요소의 왼쪽에 floa.. 2021. 6. 30.
Position 1. position: static 기본 설정 포지셔닝이 안된 요소 2. position: reletive 원래 자리를 기준으로 상대적인 포지셔닝. top: 00px 하게되면 원래 자리에서 00px 혼자 문단에서 삐져나옴 3. position: fixed 브라우저를 기준으로 포지셔닝. top: 00px 하면 페이지로부터 00px 아래에 위치하게 됨 페이지를 스크롤해도 그자리에 있음 네비게이션 바에 자주 사용 4. position: absolute 가장 가까운 포지셔닝이 된 조상 요소를 기준으로 포지셔닝 top: 00px 하면 조상 요소를 기준으로 위에서 00px 떨어져서 위치함 2021. 6. 30.
정렬 1. 가로로 가운데 정렬 -inline/inline-block요소 부모 태그에 text-align: center; 작성 -block 요소 margin-left: auto; margin-right: auto; 작성 2. 세로로 가운데 정렬 display: inline-block; line-height: (요소의 height)px; vertical-align: middle; 하면 됨. 주의사항! line-height는 상속되기 때문에 자식 태그들에는 line-height: normal;을 써줘야함 참고링크 https://css-tricks.com/centering-css-complete-guide/ Centering in CSS: A Complete Guide | CSS-Tricks Centering thi.. 2021. 6. 29.
Display Display에는 6종류가 있다 inline, block, inline-block, list-item, flex, none 1. inline 다른 요소들과 같은 줄에 머무르려고 하는 성향과, 필요한 만큼의 가로 길이만 차지하는 성향이 있음 가로세로의 개념이 딱히 없어서 width, height 정해줘도 의미없음 span, a, b, i, img, button 등이 있음 2. block 다른 요소들과 독단적인 줄에 가려고 하는 성향과, 최대한 많은 가로 길이를 차지하는 성향이 있음 가로세로 길이를 정해줄 수 있음 div, h1~h6, p, nav, ul, li 등이 있음 3. inline-block inline 요소처럼 다른 요소들과 같은 줄에 머무르면서 block 요소처럼 가로, 세로 길이도 설정해줄 수.. 2021. 6. 28.
CSS 선택자 선택자의 정확한 정의를 찾아봤으나 다들 선택자에 어떤게 있는지만 구구절절... 다양하게 찾아본 결과 "내가 고른 스타일링 기법을 어디에 적용하는지 선택하는 것" 이라고 결론을 냄 1. class, ID #class-name .ID-name 2. 자식(children) .div1 i 여기서 i가 div의 자식이 되는 것 div1 안의 모든 i에 적용됨 2-1.직속 자식(direct children) .div1 > i div1의 직속 자식에게만 적용됨. div1 안의 div2 안의 i는 직속 자식이 아니라서 적용 안됨 3. 복수 선택 .div1, .div2 ,를 통해 여러 요소를 선택 가능 4. 여러 조건 .div1.div2 div1 클래스와 div2 클래스를 가진 요소에 적용 5.가상 클래스(pesudo-.. 2021. 6. 28.
Box Model 모든 html 요소는 box model을 따름 1. padding padding: 위px 오른쪽px 아래px 왼쪽px; 위에서부터 시계방향으로 한칸씩 띄면서 쓰면 됨 만약 사방 다 똑같으면 값 하나만 쓰면 됨 위아래 동일, 좌우동일이라면 두개만 쓰면 알아서 위아래, 좌우로 설정됨 2. margin padding이랑 동일함 그리고 원래 요소들은 왼쪽정렬이라서 가운데정렬 하려면 margin-left: auto; margin-right: auto; 쓰면 됨. 알아서 계산해줌 외울필요 없음. 그때그때 검색하기 3. 실제내용 부분 width, height를 통해 가로세로를 정할 수 있음 min-width, max-width : 창의 크기가 어떻든 내용 부분의 최소/최대 넓이. 내용이 삐져나올 경우에는 overfl.. 2021. 6. 22.
div와 span 둘 다 텍스트의 일정 부분을 나눔 근데 div는 줄바꿈을 하고 span은 안함. 2021. 6. 22.