본문 바로가기

전체 글

 (239)
[JavaScript] 증감 연산자 증감 연산자는 복합 대입 연산자는 약간 간략하게 사용한 형태이다. 증감 연산자 설명 변수++ 기존의 변수 값에 1을 더합니다(후위). ++변수 기존의 변수 값에 1을 더합니다(전위). 변수-- 기존의 변수 값에 1을 뺍니다(후위). --변수 기존의 변수 값에 1을 뺍니다(전위). 예제를 살펴보자. 실행 결과 10 11 12 후위란 해당 문장을 실행한 후 값을 더하라는 의미이다. 첫번째 문장을 실행하면서 10이 출력되었고 1을 더한 것이다. 두번째 문장을 실행하면서 11이 출력되었고 1을 더한다. 세번째 문장을 실행하면서 12가 출력되었고 1을 더한다. 따라서 number의 값은 현재 13이라고 생각해볼 수 있다. 다음 예제를 살펴보자. 실행 결과 11 12 13 전위란 해당 문장을 실행하기 전에 더하라는..
[JavaScript] '=='와 '==='의 차이 '=='와 '==='의 차이점에 대해서 알아보자. '==' 연산자는 서로 다른 유형의 두 변수의 값을 비교할 수 있다. '===' 연산자는 값과 자료형이 동시에 참이어야 참을 출력한다. 즉, '=='에 비해 엄격한 비교를 한다. 웬만하면 '==='를 사용하자! ('=='는 특히 거대한 프로그램에서 버그를 발생시키기 쉬움.) 몇 가지 예제를 살펴보자. 1 == "1" true​ ​자료형이 다르지만 '==' 연산자는 서로 다른 유형의 두 변수의 값을 비교할 수 있으므로 변환을 거친 후 값이 같아졌으므로 true를 출력한다. false == "0" true false가 0으로, "0"이 0으로 변환된 뒤에 비교를 하여 true를 출력한다. "" == [] true 빈 문자열은 false, 비어있는 배열 []는..
[HTML/CSS] #21.Animations 앞서 배운 transformation에서는 마우스를 갖다 대야만 효과를 확인해볼 수 있었다. 마우스를 대지 않고도 애니메이션 효과를 줄 수 있는 방법은 없을까? 물론 있다. 다음의 코드를 보자. 코드를 보면 @keyframes라는 부분이 보인다. 이 부분이 바로 애니메이션효과를 정의하는 부분이다. 자세히 살펴보자. @keyframes CuteSugar { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } 구조가 보이는가? @keyframes 뒤에 애니메이션 이름을 정의하고 밑에 원하는 효과를 적으면 된다. 사용은 다음과 같이 쓰면 된다. img { border: 5px solid black; border-radius: 10%; an..
[HTML/CSS] #20.Tranformations transformation은 한 요소를 변형시킬 수 있다. 다음의 코드를 보자. 참고로 이미지 파일은 아무거나 사용하면 된다. img라는 요소에 transformation효과를 넣어주었다. 결과를 확인해보자. 보다시피 이미지가 회전하였음을 확인할 수 있다. rotateX(), rotateY(), rotateZ()함수에 의하여 x축 방향으로 30도, y축 방향으로 50도. z축 방향으로 10도로 회전한 것이다. 이처럼 CSS만을 가지고 3D의 영역까지 컨트롤 할 수 있다. rotate말고도 수많은 transformation이 있다. 코드를 다음과 같이 수정해보자. img { border: 5px solid black; border-radius: 10%; transform: scaleX(3); } 그리고 결..
[HTML/CSS] #19.Transitions 예전에는 애니메이션 효과를 주려면 자바스크립트를 이용했어야 했다. 하지만 요즘에는 CSS만으로도 애니메이션 효과를 주는 것이 가능하다! 다음의 코드를 보자. a { color: wheat; background-color: tomato; text-decoration: none; border-radius: 5px; font-size: 55px; } a:hover { color: tomato; background-color: wheat; } 아직 transition을 쓰지 않은 코드이다. 결과를 확인해보자. 처음에는 위와 같다가 마우스를 갖다대면 아래 이미지로 변한다! 서서히 변하지 않고 갑작스럽게 휙 바뀌는 모습이다. 그럼 이에 애니메이션 효과를 주고 싶다면 어떻게 코드를 짜야 할까? 스타일 시트의 a태그에..
[HTML/CSS] #18.Variable (Custom property) CSS에서도 변수를 사용할 수 있다는 사실을 알고 있는가? 다음의 코드를 보자. Life's not all gloom and despondency. website 여기서 --main-color이 변수다. CSS에서 변수를 쓰는 방법은 --를 먼저 써주고 변수이름을 써줘야 한다. 그리고 빈 공간이 있다면 -로 채워야한다. 따라서 --main-color라고 변수를 써준 것이다. 그리고 이 변수를 사용하려면 var(변수명)을 써주면 된다. 결과를 확인해보자. p태그와 a태그에 스타일이 적용되어 색이 바뀌었음을 확인할 수 있다!
[HTML/CSS] #17.Pseudo Selector2 우리가 앞서 배운 Pseudo Selector은 :(콜론)이 1개였다. 이번에는 콜론이 2개인 Pseudo Selector를 알아볼 것이다. 1. ::placeholder 다음의 코드를 보자. placeholder의 색을 yellogreen이 되도록 코드를 짜본 것이다. 결과를 확인해보자. 정말 placeholder의 색이 바뀌었다! 따라서 ::placeholder는 placeholder의 특성만 스타일링 하고 싶을 때 사용함을 알 수 있다. 2. ::selection 코드를 다음과 같이 작성해보자. Life's not all gloom and despondency. ::selection은 어떤 효과를 가져다 줄까? 백문이 불여일견이라고 직접 확인해보자. 다음과 같이 글씨를 마우스로 드래그하여 선택하니깐..
[HTML/CSS] #16.States 개발자 도구에서 확인할 수 있는 가장 중요한 selector는 state이다. 웹페이지에서 F12를 누르고 개발자 도구를 들어가서 확인해보자. 우측하단의 :hov를 눌러 확인해보면 다음과 같은 창이 뜬다. 위에 뜬 것이 state이다. 하나씩 살펴보자. 1.active 다음의 코드를 보자. 그리고 결과를 확인해보자. 박스를 마우스로 눌러보면 색이 바뀌는 것을 알 수 있다. active는 마우스를 클릭했을 때 적용됨을 알 수 있다. 2.hover 스타일 코드를 다음과 같이 살짝 바꿔보자. input:hover { background-color: tomato; } active대신 hover을 써줬다. 그리고 나서 결과를 확인해보자. 박스 위에 마우스 커서를 갖다대면 색이 바뀌는 것을 알 수 있다. hover..

티스토리툴바