개발나라 스용공주

이번 글은 삼항 연산자에 대한 설명글이다.  [ 삼항 연산자 ]삼항 연산자는 항을 3개 사용하는 연산자이다.조건식을 이용해 참과 거짓에 따라 값이 다르게 반환되는 구조이다. 아래 코드는 변수 res에 var8의 값이 짝수이면 "짝수"를, 홀수이면 "홀수"를 반환한다.let var8 = 10;let res = var8 % 2 === 0 ? "짝수" : "홀수"; 위의 코드는 아래 이미지와 같이 ?를 기준 앞에 위치한 1번 위치에 해당하는 것이 조건식이고 해당 조건식이 true면 :을 기준으로 앞에 있는 2번 위치의 값을 반환하고 false면 3번 위치의 값을 반환한다.

이번 글은 null과 undefined의 설명과 둘의 차이점과 null 병합 연산자에 대해 알아볼 것이다.  [ NULL ]null type은 아무 것도 없는 것으로 명시적으로 값을 넣어줄 때 사용된다.let empty = null;   [ Undefined ]undefined type은 변수 선언 후 아무 값도 할당하지 않았을 때 자동으로 부여되는 것이다.let none;   [ NULL과 Undefined의 차이점 ]이 둘의 차이 점은 null은 비어있는 값 자체를 값으로서 넣어준 것이고 undefined의 경우 변수의 선언만 하고 아무런 값을 넣어주지 않았을 때 정의되지 않은 곳에 자동으로 undefined이 적용된 것이다.  [ NULL 병합 연산자 ]null 병합 연산자는 존재하는 값을 추려내는..

이번 글은 비주얼스튜디오 코드를 사용하여 코딩할 때 유용한 플러그인을 소개하는 글이다.  [ Error Lens ]오류가 나타날 경우 밑줄로만 표시해주지 않고 해당 오류를 빨간색으로 표시하여 더 눈에 잘 보이도록 해주고 오류가 왜 났는지 오류의 원인을 바로 알려주는 플러그인이다.  아래 사진과 같이 오류 발생 시 오류의 원인을 바로 알려주는 것을 확인할 수 있다.

이번 글은 아래 영상에 나온 탭메뉴를 만드는 코드 리뷰이다.해당 탭메뉴는 이미지를 버튼으로 사용하여 이미지를 누르게 되면 텍스트 내용이 변경되는 코드이다.    [ 개발 과정 ]첫번째로 아래 사진과 같이 아무것도 효과도 적용되어있지않는 아래 화면을 만들어준다. 그리고 맨 첫번째 이미지에 해당하는 텍스트를 제외한 나머지 텍스트들은 안보이도록 처리해준다.(맨 첫번째 나오는 이미지와 텍스트에는 추가적으로 클래스명을 따로 부여해 해당 클래스명의 기능으로 이미지가 색상이 있고 둥근 형태이고 텍스트가 보여지는 형태가 되도록 해준다. => 그리고 클릭 시 클릭한 이미지에 추가적으로 부여한 클래스명이 옮겨가는 구조 => 옮겨가면 위에서 만든 클래스의 기능이 옮겨가지는 것 => 옮기는 것은 제이쿼리로 해준다)    두번..

이번 글은 border를 활용한 탭 메뉴 애니메이션 실습에 대한 글이다.  * border는 늘어날 수 없으므로 가상클래스로 만들어줘야함  자기자신의 X축에서 크기값을 50% 빼줘야함 (정중앙 배치)left:50%;transform: translateX(-50%); [ html ] HOME ABOUT SERVICE PORTFOLIO CONTACT  [ css ]body { margin : 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4;}a..

구조 : item이 3개 있고 그 위에 덮어질 텍스트 caption 또한 3개 존재 => 이들을 감싸는 items 존재display : 가로 배치를 위해 display : inline-block;중앙정렬하는 법 : item들이 inline-block이므로 items에 text-align : center;텍스트와 이미지 겹치기 : 이미지 위에 텍스트를 겹치는 것이므로 기준점을 이미지로 삼기 위해 position 부여를 이미지는 relative, 텍스트는 absolute 후 top과 left를 0으로 적용hover 요소 : hover 시 서서히 등장하기 위해 transition을 0.5s주고 transition을 적용하기 위해 display : none이 아닌 opacity로 보이지 않게 만들어줌 (opac..

이번 글은 요소를 없애는 2가지 방법 display:none과 visibility:hidden에 대한 설명글이다.  [ 설명 예제 ]아래 예제는 빨간색 border에 마우스가 hover될 경우 검정색 말풍선이 뜨는 구조이다.이때 여러개의 말풍선이 배치되어져 있을 때 첫번째 border에 hover되어 해당 말풍선이 나오고 두번째 말풍선에 마우스가 hover되면 첫번째 말풍선은 사라져야하는 구조일 경우의 상황이다.  이럴 경우, 첫번째 말풍선의 존재를 없애줘야한다.없애는 방법으로는 display : none;과 visiblity : hidden;이 있다.display : none : 자리값과 존재 모두 사라지게 하는 것visibility : hidden : 자리값은 유지하되 존재 자체를 사라지게 하는 것 ..

이번 글은 인접선택자에 대한 설명글이다.  [ 인접선택자란? ]인접 선택자인 +와 ~는 특정 요소 뒤에 오는 형제 요소를 선택할 때 사용된다.둘 다 형제 관계에 있는 요소를 선택할 때 쓰이지만, 선택할 수 있는 요소의 범위가 달라 서로 다른 상황에서 사용된다.  [ 인접선택자 + ]+는 특정 요소 바로 다음에 오는 형제 요소 하나만 선택할 때 사용된다. 아래래 예제에서는 h1 요소 바로 뒤에 나오는 p 요소가 있을 때만 선택하여, 해당 p 요소의 텍스트 색상을 파란색으로 설정합니다.h1 + p { color: blue; }[ + 사용 예시 ]특정 요소 뒤의 첫 번째 요소만 스타일을 적용하고 싶을 때(ex. 제목 요소 바로 뒤에 나오는 설명 문단에만 스타일을 적용하고 싶을 때 유용함)   [ 인..