K_blueprint

최근 교내에서 뜻이 맞는 2명과 함께 작은 프로젝트를 진행하게 되었습니다. 해당 카테고리는 프로젝트 기간 동안 제가 공부하고 진행한 내용을정리해 두는 '개발일지'입니다. 혹여나 읽으시다가 더 좋은 방법이 있거나 잘못된 정보 및 코드 내용 등이 있을 시에편하게 댓글 달아주시면 배우는 마음으로 감사히 새겨듣겠습니다:D [프로젝트 개요]해당 프로젝트는 '학습 도우미 웹앱'(aka. 러닝메이트)을 개발하는 프로젝트입니다.프로젝트의 기간은 약 7주이며, 팀원은 총 3명입니다.필요에 따라 교수님의 자문을 구할 예정이며 주 1회 오프라인 미팅을 진행하는 것을 원칙으로 합니다. [프로젝트 아이디어 분석]학생들이 학습 자료(pdf, hwp, ppt 등)를 업로드하면 해당 내용을 GPT API를 활용하여 분석하고..

HTML 태그가 출력될 위치를 지정하는 것을 '배치(positioning)'이라고 한다.오늘은 이 배치와  관련된 프로퍼티와 블록/인라인 박스에 대해서 알아보자  - 먼저 배치와 관련된 프로퍼티는 아래와 같다.displaypositionleft / right / top / bottomfloatz-indexvisibilityoverflow [블록 태그 & 인라인 태그] - HTML의 태그는 블록 태그와 인라인 태그로 나뉘게 되며 이는 아래와 같다. 블록 태그 : , , , 인라인 태그 : , ,  - 블록 박스인지, 인라인 박스인지에 따라 태그가 브라우저에서 차지하는 영역과 위치에 많은 차이가 있게 된다.\  (블록 박스)- 블록 박스는 '새 라인에서 시작'하며, 옆에 다른 태그를 배치할 수 없다는 특징이..

오늘은 HTML5에서 텍스트 및 박스의 그림자를 부여할 수 있는 프로퍼티에 대해서 정리해 보겠습니다.  [텍스트에 그림자 효과 부여하기] - 'text-shadow'프로퍼티를 활용해서 텍스트의 그림자 효과를 줄 수 있다.- 해당 프로퍼티를 사용하는 방법은 아래와 같다.text-shadow : __h-shadow : 원본 텍스트와 그림자 텍스트 사이의 수평 거리v-shadow : 원본 텍스트와 그림자 텍스트 사이의 수직 거리blur-radius : 그림자의 번짐(흐릿함)을 조절color : 그림자의 색none : 그림자 효과 없음 - 아래는 위의 프로퍼티를 활용한 예시 코드와 출력 결과이다. (소스코드)div.red{ text-shadow: 3px 3px red;}그림자를 보세요! (출력결과)  -..

오늘은 HTML 태그에 배경을 칠하거나 혹은, 배경 이미지를 출력하는 방법을 알아보자.  [배경에 색 칠하기 & 이미지로 그리기]- 'background-color', 'background-image' 프로퍼티는 각각 배경색과 배경 이미지를 지정한다.- 만약 위의 두 프로퍼티가 동시에 지정된다면 배경색을 우선적으로 적용시킨 후에 배경 이미지를 배치하게 된다.- 이와 관련된 예시 코드는 아래와 같다.div { background-color : skyblue; background-image : url("(경로입력)/(이미지 파일명));}  [배경 이미지의 위치]- 'background-position' 프로퍼티는 박스 내의 이미지의 시작 위치를 지정한다.- left top(디폴트), left cen..

[고급 테두리 꾸미기] CSS3은 둥근 모서리의 테두리나 이미지 테두리 등의 고급 테두리를 지원한다. - 'border-radius' 프로퍼티를 이용하면 테두리의 모서리를 곡선으로 둥글게 만들 수 있다.- 아래는 모서리의 반지름을 '50px'로 지정한 둥근 모서리 테두리의 예시 코드와 브라우저 출력 결과이다. (소스코드) 저는 둥근 모서리를 가진 박스입니다. (출력결과) - 각각의 모서리 별로 반지름을 다르게 설정할 수 있는데 border-top-left(좌측 상단 모서리), border-top-right(우측 상단 모서리), border-bottom-left(좌측 하단 모서리), border-bottom-right(우측 하단 모서리) 이렇게 4개의 모서리에 개별적인 값을 할당할 수 있다. - 아래..

오늘은 HTML5로 '테두리'의 디자인을 다뤄보겠습니다:-) [테두리의 두께 & 모양과 색]- 테두리는 패딩(padding) 혹은 여백(margin)과 달리 '두께'/'모양'/'색'을 지정하는 여러 가지의 프로퍼티를 두고 있다.- 아래는 태그에 테두리를 꾸미는 예시 코드이다.p{ border-width : 3px; /* 테두리의 두께를 3px로 설정 */ border-style : dotted; /* 테두리의 스타일을 도트(점)으로 설정 */ border-color : blue; /* 테두리의 색을 파란색으로 설정 */} - 위의 스타일을 지정하고 태그를 사용하게 되었을 때 아래와 같은 테두리를 확인할 수 있다.  + 테두리의 두께는 '3px'와 같이 정확한 수치로 할당해도 되지만, 정확한 수치..