본문 바로가기

전체 글42

태그 선택하기, 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.
반응형 웹사이트 @media(min-width: 00px) { h1{ 어쩌구저쩌구 } } width가 00px가 되면 h1은 어쩌구저쩌구 하게 되는것 2021. 7. 7.
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.
학교식 문제풀이의 폐해 https://www.acmicpc.net/problem/1550 1550번: 16진수 첫째 줄에 16진수 수가 주어진다. 이 수의 최대 길이는 6글자이다. 16진수 수는 0~9와 A~F로 이루어져 있고, A~F는 10~15를 뜻한다. 또, 이 수는 음이 아닌 정수이다. www.acmicpc.net 그냥.. 간단히 16진수를 10진수로 바꾸면 됨 그냥그냥.. x로 읽어서 d로 print하면 되는데 쌩 노가다함... 먼가 학교에서 이미 있는 기능을 안쓰고 직접 만드는걸 계속 해서 그런듯..? 심지어 효율적이지도 않아,,, 알아보니까 아스키코드로도 어쩌구저쩌구 될듯 https://www.acmicpc.net/source/30346140 로그인 www.acmicpc.net 부끄러운 나의 비효율적인 코드...... 2021. 6. 25.

티스토리툴바