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

우리는 다른 게시글을 통해 속성 노드의 생성, 수정, 삭제를 배웠다. 요소 노드에 속성 노드를 추가하기 위해선 다음과 같은 메서드를 사용했다. 속성 노드 확인 : hasAttribute() 메서드, getAttribute() 메서드, 속성 노드 생성 : setAttribute() 메서드 속성 노드 삭제 : removeAttribute() 메서드 예를 들어서 아무 속성도 없는 요소 노드에 글자에 색상도 넣고 싶다면 다음과 같이 코드를 짜면 된다. 테스트 문장입니다. 위 코드를 실행하면 아래와 같이 변한다. 위 코드를 쓰면 한 번에 여러 속성값 전달할 수도 있다. 1. 속성 노드의 간략화 하지만 문제는 이렇다. 저렇게 쓸 경우 한 두개의 요소 노드 컨트롤은 어렵지 않다. 하지만 수백개의 요소 노드의 색상을 ..

애니메이션란? HTML에 적용되는 CSS스타일을 다른 CSS스타일로 바꿀 때 부드럽게 변화시킨다. 애니메이션은 애니메이션 대상이 되는 CSS스타일과 애니메이션 시퀀스를 나타내는 복수의 키프레임으로 이뤄진다. 애니메이션과 트랜지션 물론 트랜지션으로도 애니메이션 효과를 나타낼 순 있으나 animation 그 자체보단 제한적이다. 그리고 트랜지션은 꼭 자바스크립트가 있거나 가상 클래스 선택자가 있어야 움직인다. 하지만 애니메이션은 그런것 없이 혼자 가능하다. 애니메이션은 트랜지션보다 더 나아가 그 안에서 세부적인 움직임, 시간 등도 구현이 가능하다. 애니메이션과 자바스크립트 물론 CSS애니메이션은 컴퓨터 리소스면에선 효율적이긴하다. 다만 경우에 따라 자바스크립트를 사용하는 것이 더 편하게 사용할 수 있기도 하..

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

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

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

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

자바 스크립트란? 객체(Object) 기반의 스크립트 언어다. 이름만 들으면 java와 연관있는 것 같지만 둘이 문법이 비슷한 것 빼고 실제로 별다른 공통점은 없다. 자바 스크립트의 쓰임새 자바 스크립트는 본래 웹의 동작을 구축하기 위해 만들어졌다. HTML이 웹사이트의 뼈대인 내용과 구조를 만든다면 CSS는 웹을 디자인한다. 그리고 자바 스크립트는 최종적으로 웹의 동작을 구현하는데 주로 사용되었다. 하지만 기술의 발전으로 프레임 워크를 사용해 서버 측 프로그래밍에서도 사용할 수 있게 되었다. 자바 스크립트의 특징 ● 자바 스크립트는 객체 기반의 스크립트 언어다. ● 자바 스크립트는 동적이며, 자료 타입을 명시할 필요가 없는 인터프리터 언어다. ● 자바 스크립트는 객체 지향 프로그래밍과 함수형 프로그래밍..

visibility 1번 박스 2번 박스 3번 박스 visibility는 해당 요소의 공개 여부를 결정하는 속성이다. visibility를 속성으로 부여하고 속성값으로 'hidden'을 주면 해당 요소는 화면에서 숨겨진다. 하지만 눈에는 보이지 않지만 실제로는 공간을 차지한다. 예시에선 visibility가 hidden된 box2가 눈에 보이진 않지만, 위치는 차지하게 된다. z-index 1번 박스 2번 박스 3번 박스 각종 요소를 배치하다보면 해당 요소들이 겹칠 수 있다. 이때 'z-index'값을 설정하면 해당 요소들이 겹쳤을 때 어떤 요소가 앞에 올지 정할 수 있다. 'z-index'값이 높을 수록 해당 요소가 가장 앞으로 나오게 되어있다. 예시에선 3번 박스의 'z-index'값이 가장 크므로 ..