Web/HTML · CSS

쌍용 강북 교육센터 국비학원 Day 57일차 BootStrap 부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크이다. 하나의 코드로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하게 만들 수 있으며, 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다. Bootstrap은 모바일 우선으로 개발되었으며, 반응형웹을 위해서 아래와 같이 뷰포트 메타 태그 추가해야 한다. - width=device-width 웹 페이지의 크기가 모니터의 실제 크기를 따라가도록 만든 설정으로서 모니터, 스마트폰 등의 화면에 맞는 비율로 화면이 뜨도록 만듭니다. - initial-scale=1 보여지는 화면의 zoom up 정도를 1배율로 한다는 것이다. 이 값..

쌍용 강북 교육센터 국비학원 Day 44일차 태그 src - 이미지가 저장된 주소의 URL 주소 (경로)를 명시한다. alt - 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정한다. width : 이미지의 가로 크기를 지정 height : 이미지의 세로 크기를 지정 loading : 이미지 로딩 방식을 지정 (기본값은 eager로, 모든 이미지를 불러온다. lazy로 설정하면 이미지가 뷰포트의 일정 거리 안으로 들어오면 불러온다. 불필요한 이미지 로딩을 줄여서 페이지 속도를 증가시킬 수 있다.) image 주요 CSS 속성 border-radious - 테두리를 둥글게 만드는 속성 (예 - 20px 20px 20px 20px / 20px 20px 20px 20px , 50%) opac..

쌍용 강북 교육센터 국비학원 Day 43일차 태그 form태그는 웹 페이지에서의 입력 양식을 의미한다. 로그인 창이나, 회원가입 폼 등이 이에 해당된다. 텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리하게 된다. form 태그 속성 폼 속성을 이용하여 해당 데이터를 전송할 때 어디로 보내야하는지 어떤 방법으로 보낼지 정하는걸 의미한다. name - 폼을 식별하기 위한 이름을 지정한다. (name은 보통 JSP에서 DB의 컬럼명으로 사용) accept-charset - 폼 전송에 사용할 문자 인코딩을 지정한다. target - action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다. method ..

쌍용 강북 교육센터 국비학원 Day 42일차 여백설정 margin, padding margin - 바깥여백을 의미 padding - 안쪽여백을 의미 px이나 %로 값을 입력하며 한개의 값만 입력하면 모든방향에서의 여백설정이고, 2개의 값은 상, 하, 4개의 값을 모두설정하면 값의 순서는 시계방향으로 돌아간다. (상 -> 우 -> 하 -> 좌) float 속성 float 는 단어는 원래 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성이다. inherit - 부모 요소에서 상속 left - 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. right - 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 ..

쌍용 강북 교육센터 국비학원 Day 41일차 기초적인 Java와 Oracle 다음에 이것을 병합하는 JDBC를 거쳐 이제 41일차 기준 HTML, CSS, JSP로 넘어간다. HTML의 주석문 처리 단축키 - Ctrl + Shift + / head의 주석문 - /* 내용 */ body의 주석문 - CSS의 우선순위 1. ! important (css 강제적용) 2. 해당 태그에 직접준 것 3. HTML 파일에서 준 style 태그 (임베디드방식) 4. 외부에 있는 css파일을 로드하는 것 (예 ) Display Block 방식 세로형태로 보여지는 방식으로 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다. 태그와 , 태그의 기본값은 block 방식이다. 또한..