- Riddle-Game : 율법언덕부터 해설자의 집 전까지 23년의 끝을 달리며, 질질 끌던 프로젝트를 종결해야겠다는 마음을 먹었다. 그 중 첫 번째, 천로역정을 주제로 한 미궁게임 Riddle-Game이다. 천로역정 : The Pilgrim's Progress 멸망도시를 떠나 천국도시로 향하는 크리스천의 이야기 riddle-game.github.io 원래는 좀 더 스토리가 있으나.. 갱브로와 나 모두 현생에 치여 정리할 수 없었다. 그나마 정리된 스토리 또한 갱브로가 초반에 정리해준 것..🥲 빠르게 만들기 위해 기존 Boot로 만든 프로젝트는 날리고.. jQuery와 Bootstrap를 중점적으로 이용하고 github로 웹 배포했다. (jQuery를 쓴 이유는 Bootstrap 테마와 fullpage..

- 여백을 조절하는 속성들 1. margin 속성 마진(margin)은 현재 요소 주변의 여백이다. → 한 요소와 다른 요소 사이의 간격을 조절할 수 있다. 제목 내용 제목 내용 제목 내용 제목 내용 2. padding 속성 패딩(padding)은 콘텐츠 영역과 테두리 사이의 여백이다. .outer div { width: 200px; height: 150px; border: 2px solid; margin: 30px; float: left; padding:10px; /* 위에 상자에서 padding 추가 */ } 참고문헌 : 고경희(2019), HTML5+CSS3 웹 표준의 정석, 이지스 퍼블리싱

- 스타일 우선순위, 스타일 상속 1. CSS란? CSS: Cascading Style Sheets의 약자 '위에서 아래로 흐른다'는 의미로, 선택자에 적용된 많은 스타일 중 어떤 스타일을 나타낼지 결정한다. 2. 스타일 우선순위 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정된다. 사용자 스타일 시트의 중요 스타일 : 저시력자나 색약자를 위한 스타일. 제작자 제어 불가 제작자 스타일 시트의 중요 스타일 : !important가 붙은 스타일 제작자 스타일 시트의 일반 스타일 기본적인 브라우저 스타일 시트 - 하나의 요소에 여러 스타일이 적용된 경우 ⑴ 인라인 스타일 > ⑵ id 스타일 > ⑶ 클래스 스타일 > ⑷ 태그 스타일 문단 텍스트 문단 텍스트 문단 텍스트 문단 텍스트 - 소스에서의 순서 ..

- 자주 사용하는 선택자 정리 1. 전체 선택자(universal selector) 모든 요소에 적용. 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용한다. → 전체 선택자로는 ＊를 사용한다. * { 속성: 속성 값; ... } 2. 태그 선택자(tag selector) 특정 태그가 쓰인 모든 요소에 스타일을 적용한다. /* 태그 { 스타일 } */ p { font-size:12px; /* 글자 크기 */ font-family:돋움; /* 글꼴 */ } 3. 클래스 선택자(class selector) 특정 부분에만 스타일을 적용할 때 사용 → 적용하려는 태그에 클래스를 붙여줘야 한다. /* .클래스명 { 스타일 } */ .bluetext { color:blue; /* 글자 색 */ } 4...

- 스타일 형식과 스타일 시트 1. 스타일 형식 스타일은 맨 앞에 선택자를 지정하고, 중괄호(｛,｝) 안에 세미콜론(；)으로 구분한다. /* 선택자 { 스타일 속성:속성 값; } */ p { text-align:center; } /* 텍스트 단락을 중앙에 정렬 */ h2 { font-size:20px; color:orange; } /* 2단계 제목의 글자 크기 20px, 글자 색상 주황색 */ 2. 스타일 시트 스타일은 위치에 따라 내부, 외부, 인라인으로 나눠진다. - 내부 스타일 시트 웹 문서 안에서 사용할 스타일을 정리한 것을 '내부 스타일 시트'라고 한다. → 상단 - 외부 스타일 시트 외부에 .css 파일을 따로 만들어 가져오는 것을 '외부 스타일 시트'라고 한다. → 여러 개의 웹 문서에 공통..