본문 바로가기

전체 글190

[javascript] step08. regular expression step08. regular expression (정규 표현식) 정규 표현식 (Regular Expression) 첫글자는 영문 소문자로 시작, 특수문자는 허용하지 않음... 최소 5글자 최대 10글자 가입 정규 표현식. regular expression이라고 한다. 어떤 언어를 사용하든 정규 표현식은 거의 유사하다고 말했다. 언어마다 조금씩 다르지만 javascript에서 정규 표현식은 '/' 로 감싸서 작성한다. 다른 text와 마찬가지로 정규 표현식으로 작성한 값을 변수에 담는 것은, 그 text 자체를 담는 것이 아니라 text의 참조값을 담게 된다. 또한 test(str) 함수를 통해 input 값과의 일치 여부를 확인할 수 있다. 영어 대소문자를 구분한다. (ex - Hello와 hello는 .. 2021. 12. 14.
[css] step17. quiz (가운데 정렬) step17. 01~03. quiz (가운데 정렬하는 전통적인 세 가지 방법) 다음의 세 가지가 가운데 정렬하는 전통적인 세 가지 방법이다. 가운데 정렬 예제 바깥 box를 기준으로 안쪽 box의 position을 absolute로 한 다음 부모 요소의 절반의 크기인 50%로 top과 left를 이동시키고, 객체의 좌상단이 기준이기 때문에 안쪽 box의 절반만큼 역행시켜준다. 가운데 정렬 예제 ​ top, bottom, left, right를 0으로 만들고, margin을 auto로 해서 가운데 정렬을 한다. 가운데 정렬 예제 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 ​ content를 inline-block으로 display해서 text-align으로 가로 정렬을 하고, 부모 요소를 table-cel.. 2021. 12. 14.
[css] step16. unit step16. 01~03. unit (단위) /* [ 크기나 거리를 나타내는 단위 ] px, %, em, rem */ .wrapper{ background-color: yellow; width: 500px; margin: 0 auto; } .wrapper2{ background-color: yellow; width: 50%; /* 부모 width 의 50% */ margin: 0 auto; } .wrapper .wrapper2 px : pixel (점, 화소의 개수)을 의미한다. 군대 px 아니다. % : 부모의 크기에 대한 상대적인 비율이다. em : 상속받은 글자 크기의 배수이다. 예를 들어 상속받은 글자 크기가 16px이면 1em=16px, 1.5em=24px, 2em=32px 이다. rem : 최.. 2021. 12. 14.
[css] step15. box-sizing step15. box-sizing box-sigzing 속성 .box box-sizing 속성의 default 값은 content-box 이다. width와 height에 아무것도 포함하지 않는다. 지정한 content 그 자체의 크기로 설정된다. box-sizing 속성이 border-box라면 width와 height에 padding과 border를 포함한다. 이렇게된다면 width 계산이 조금 더 간단해질 수 있다. 하지만 의도한 것보다 content의 크기가 조금 작아질 수 있다는 것을 생각한다. 2021. 12. 14.
[css] step14. etc step14. 01~02. etc visiblity 속성 visibility : default는 'visible'. 'hidden'으로 설정하면 공간만 차지하고 보이지는 않게 된다. opacity : 불투명도를 의미한다. 0과 1사이의 숫자로, 0에 가까울수록 투명해지고 1에 가까울수록 불투명해진다. 전공 용어로 쓰다가 여기에서 보니까 반가웠다. overflow 처리 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, quia illo veritatis. Repellendus, numquam? Quisquam iste, dicta dignissimos magni dolores incidunt vel ipsam natus vero volupt.. 2021. 12. 14.
[css] step13. css weight step13. 01~02. css weight Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum eaque minima inventore nulla molestias, quam corporis iusto, rerum labore consectetur saepe ex nam neque asperiores delectus aliquam deleniti, magnam accusantium. css는 가중치가 동일하다고 가정한다면 나중에 정의한 것이 적용된다. 이것이 첫 번째 원칙이다. 무조건은 아니다. 예를 들어, 동일한 변수명에 다른 숫자를 넣는다면 나중에 선언한 변수가 적용되는 것으로 빗대서 이해할 수 있을 것 같다. 하나 ​ 하지만.. 2021. 12. 14.