배경화면이 적용될 div의 css 속성을 아래와 같이 지정하였다. background-image:url('url 경로'); background-repeat : no-repeat; background-size: 100% 100%; 그 후 아래와 같이 div 위에 배경화면 안에 배치될 div를 코딩했다. 톰캣을 실행 결과 화면에 div가 나오지 않는다. component div의 크기가 있더라도 background div의 width와 height를 지정해주지 않았기 때문이다. 그래서 width, height를 주려고 했으나 %는 적용이 되지 않았다. 그렇다고 px값을 입력하면 반응형 웹을 만들기에는 부적절하기 때문에 고민 끝에 padding을 통해 상하 %를 입력하여 원하는 형태의 이미지 배치를 얻을 수 ..

프론트엔드 개발을 하다 보면 이미지의 특정영역에 마우스를 over, leave, click등의 이벤트를 발생시켜야 하는 경우가 있다. 이 때, 이미지를 div 태그 안에 img 태그를 사용하여 이미지를 띠우고 해당 div를 position: relative로 지정한다. 그리고 이벤트를 발생시킬 영역을 div로 만든다. 이 때, 안 쪽에 배치되는 div의 style은 이다. 위의 그림에서 보면 검은 박스가 이미지를 넣는 div 태그이며, 빨간색 박스는 이벤트를 발생시키기 위해 배치하는 div이다. 2번 div는 1 번 div 영역을 벗어날 수 있다. 하지만 좌표 위치는 바깥 div의 시작좌표와 동일하다. 이제 div의 배치를 지정해줘야 한다. absolute로 position을 지정하면 아래의 css 속성..

Character Set (문자 집합)과 Encoding (인코딩)은 컴퓨터 시스템에서 텍스트를 저장하고 표현하는 데 필수적인 개념입니다. 이 둘은 밀접하게 연관되어 있지만, 각각 다른 역할을 합니다. Character Set (문자 집합) 문자 집합은 컴퓨터에서 사용할 수 있는 문자들의 집합입니다. 이 집합은 알파벳, 숫자, 기타 기호 등을 포함할 수 있으며, 각 문자는 고유한 식별자를 가집니다. 예를 들어: ASCII (American Standard Code for Information Interchange) 초기의 문자 집합 중 하나로, 영어 알파벳, 숫자, 일부 기호를 포함합니다. Unicode 전 세계의 모든 문자 체계를 포함하기 위해 만들어진 광범위한 문자 집합. 이는 한글, 한자, 아랍 문..

1. div로 각각의 영역을 지정한다. 2. width는 %로 지정하고, height의 경우 margin, padding으로 지정한다. div로 다른 태그들을 감싸고 있다면 padding과 margin을 추가하기가 수월하다. 3. ul, li 태그의 경우 div태그 안에 넣는다. ex) 단, li 태그의 경우 height가 원하는 대로 지정이 안될 때가 있다. 그 때는 li태그에 display:inline-block을 이용하여 높이를 지정하면 된다. 4. display:inline-block은 유용한 속성이긴 하지만 남발하면 나중에 괴로워질수 있다.