컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

트랜지션이란? CSS의 프로퍼티 즉 속성값이 바뀔 때 그 변화가 바로 일어나지 않고 시간차를 두고 일어나게 하는 것이다. 위 코드와 같이 설정하면 div 요소에 마우스 커서가 올라가면 사각형의 크기가 줄어든다. 그런데 여기선 트랜지션을 설정해줘서 div가 변화하는 과정을 순식간이 아닌 2초로 느리게 변화하게 바꿨다. 트랜지션의 발동 조건 트랜지션은 혼자서 발동하지 않는다. 그냥 CSS를 적용한다고 끝이 아니라 자바스크립트를 이용하거나 가상 클래스 선택자(hover)와 같은 추가적인 코드 작성이 필요하다.

CSS를 이용해서 주로 하게 되는 작업 중 하나는 바로 각종 글자, 이미지의 크기를 조절하는 일이다. 그럴때마다 다양한 크기 단위가 있어서 고민하게 된다. 일반적으로 word 프로그램을 쓸 때는 'pt'라는 단위 하나만 사용하면 됐다. 하지만 CSS에서 크기 단위는 'px', 'rem', 'em', '%' 등 다양한 크기 단위가 존재한다. 사실 사용하면서 이들을 구분해서 사용하기 쉽지 않다. 그래도 이를 잘 활용하면 더 이쁘게 웹페이지를 꾸밀 수 있다. 단위의 구분 다양한 크기 단위는 크게 둘로 나뉜다. 바로 절대 단위와 상대 단위다. 절대 단위의 경우 말그대로 그 단위 자체로 어떠한 크기를 나타낼지 딱 정해진 단위를 말한다. 반대로 상대 단위는 기준을 어디에 두느냐에 매번 달라지는 크기를 말한다. 사실..

시중에서 사용 중인 다양한 브라우저 (엣지, 크롬, 파이어폭스 등)은 각자 다른 디폴트 스타일을 가지고 있다. 기본적으로 가진 태그들끼리의 간격이 다르다든지 하는 등의 문제가 있다. 결국 개발을 할 때 한 가지 브라우저를 중심으로 개발을 하는데, 만약에 이러한 부분을 고려하지 않았다면 다른 브라우저를 통해 내가 만든 웹 사이트를 접속했을 때 조금씩 디자인이 어긋나게 된다. 이를 방지하기 위해 미리 이러한 요소들을 초기화를 통해 통일해주는 것이 Reset CSS다. 즉 각 브라우저 별로 다른 값들을 본격적으로 코드를 짜기 전에 CSS를 통해 초기화 시켜 통일 시켜주는 것이다. 아래와 같이 미리 CSS 값을 초기화해줌으로써 브라우저 별로 다를 수 있는 값들을 통일 시켜준다. 이를 통해 자신이 설정한 디자인적..

C, 자바와 달리 자바 스크립트의 경우 타입 변경이 자유롭다. var, let을 써주며 별도의 타입을 지정하지 않아도 엔진에서 알아서 판단해서 적절한 자료형을 부여한다. 그래서 위와 같은 변수에 다른 타입의 값을 재할당할 수도 있는 등 자유로운 형변환이 이뤄진다. 이러한 자료형 변환은 크게 두 가지로 나뉜다. 묵시적 타입 변환(implicit type conversion) 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변경한다. 명시적 타입 변환(explicit type conversion) 묵시적 타입 이외에도 사용자가 직접 원하는 방식으로 타입을 변환할 방법도 있다. 이를 명시적 타입 변환이라 한다. 1. Number() / 숫자로 형변환 Number()의 괄호 안에 들어간..

자바스크립트 HTML 문서에 적용하기 자바 스크립트의 경우 HTML 문서를 동적으로 작동하도록 도와주기 때문에 기본적으로 HTML 문서 내에 위치한다. 하지만 필요에 따라 그 위치를 변경할 수 있다. 스크립트 적용 위치 자바 스크립트는 아래와 같이 크게 세가지로 적용 위치를 변경해줄 수 있다. 1. 테스트입니다. 2. 태그 내에 3. HTML 문서 밖에 스크립트 파일 생성 후 삽입 테스트입니다. 스크립트 적용 위치가 다른 이유 일반적으로 간단히 학습용 페이지를 만들경우 스크립트 파일이 간단하고 내용이 길지 않다. 그래서 어디 위치하나 스크립트 실행에 있어 크게 시간 차이가 없다. 하지만 프로젝트가 커지고 스크립트 파일이 방대해지면 위치에 따른 시간 차가 난다. 즉 페이지 로딩의 효율화를 위해 필요게 맞게..

'align-content'이란? 'align-item'과 비슷하다. 하지만 'align-content'란 아이템이 아닌 아이템 라인을 정렬한다. 단, 'align-content'를 제대로 써주기 위해선 'flex-wrap'이 적용되서 라인이 두 줄이상 되어야 한다. 'align-content'의 속성값 'align-content'의 속성은 다음과 같이 설정해준다. align-content: 속성값; 속성값 설명 stretch 기본 설정값. flex-start 플렉스 아이템을 한 곳으로 모아서 공백없이 나열한다. 이때 수평축이 메인축일 때 교차축인 수직축 위쪽부터 정렬. 이때 수직축이 메인축일 때 교차축인 수평축 위쪽부터 정렬. flex-end 플렉스 아이템을 한 곳으로 모아서 공백없이 나열한다. 이때 ..

'flex-wrap'이란? 플렉스 박스의 베이스라인에 더이상 여유가 없을 때 플렉스 아이템을 다음 줄로 넘길지 설정하는 것. 아래와 일반적으로 박스가 나열되있는 상황에서 브라우저 창의 크기를 줄이면 아래 사진처럼 변경된다. 하지만 'flex-wrap'을 속성값으로 줬을 때는 아래와 같이 줄을 넘겨서 정렬해준다. 'flex-wrap'의 속성값 'flex-wrap'의 속성은 다음과 같이 설정해준다. flex-wrap: 속성값; 속성값 설명 nowrap 기본 설정. 플렉스 아이템이 다음줄로 넘어가지 않음. 대신 아이템 너비를 줄여서 한 줄에 배치시킴. wrap 플렉스 공간에 여유가 없으면 다음 줄로 넘김. wrap-reverse 플렉스 공간에 여유가 없으면 다음줄로 넘김. 단 reverse의 경우 역으로 아래..

align-items란? 'align-items' 속성을 이용하면 아이템들을 교차축(Cross Axis)기준으로 정렬할 수 있다. 'align-items'의 속성값으로 줄 수 있는 값은 다음과 같다. align-items: 속성값; 속성값 설명 stretch 기본 설정임. 플렉스 아이템 높이가 컨테이너 높이와 같게 변경된 뒤 연이어 배치됨. flex-start 수평축이 메인축일 때 교차축인 수직축 위쪽부터 정렬 수직축이 메인축일 때 교차축인 수평축 좌쪽부터 정렬 flex-end 수평축이 메인축일 때 교차축인 수직축 아래쪽부터 정렬 수직축이 메인축일 때 교차축인 수평축 우쪽부터 정렬 center 수평축이 메인축일 때 교차축인 수직축 가운데 정렬 수직축이 메인축일 때 교차축인 수평축 가운데 정렬 baseli..