Flex 문법 관련 참고 블로그 https://heropy.blog/2018/11/24/css-flexible-box/ CSS Flex(Flexible Box) 완벽 가이드 많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F heropy.blog layout 구성 1. display 2. float 3. position 4. flex (신규문법) Flex 부모 box(container)에 flex 선언하고, 안에 있는 박스(item) 요소를 유연하게 배치하는 속성 flex는 flex만 이용 (부분 부분 잡아서 처리 가..
Float 레이아웃을 구성할 때 반드시 사용하는 속성 left / right 뿐 float 의 법칙 (암기) 부모의 높이값이 지정되지 않은 상태에서 문제가 발생 () 부모요소에 적용 가상요소: after { content: " " ; display: block; clear: both; } overflow: hidden; float 해제 - clear: both; 탑쌓기해제 실습 박스1 박스2 박스3 박스4 박스5 왼쪽 왼쪽 왼쪽 오른쪽 탑쌓기해제 플롯의 영향을 받지 않음 왼쪽 왼쪽 왼쪽 오른쪽 탑쌓기해제 플롯의 영향을 받지 않음 왼쪽 왼쪽 왼쪽 오른쪽 탑쌓기해제 플롯의 영향을 받지 않음 왼쪽 왼쪽 왼쪽 오른쪽 탑쌓기해제 플롯의 영향을 받지 않음 초보자가 많이 하는 실수! padding-bottom 으로 ..
box 크기 = border(윤곽) + 컨텐츠크기 + padding padding(패딩) [매우 중요] 박스 속성은 웹 페이지의 레이아웃을 구성할 때 가장 중요한 속성 border(윤곽)을 기준으로 안쪽으로 들어오는 여백 width 속성과 height 속성과 별도로 적용 margin(마진) [매우 중요] 윤곽을 기준으로 바깥쪽 여백 상자와 상자간의 거리를 벌릴 때 사용 width 속성과 height 속성과 별도로 적용 box-sizing width 속성과 height 속성을 변경할 수 있는 CSS3 속성 float 쌓아올릴 때 사용 (넘어가는 것을 방지) 1. 기본 너비 공식 content-box = width + border + padding 2. 기본 너비 공식 - padding, border box..
CSS 문법 각각의 스타일 속성에 다양한 값을 입력 동일한 속성 중첩가능 ▶ 마지막 속성만 적용 css 적용방법 = 순서는 가장 가까운 순서부터 1. 인라인 시트 태그 style 속성 { } 중괄호 빼고 style만 적기, color:green; 따로 특별히 주고 싶을 때 사용 2. 내부 스타일 시트 3. 외부 스타일 시트 .css 가장 많이 사용 /* css를 하기 전 꼭 들어갈 기본 값 */ * {margin: 0; padding: 0; list-style: none;} a {text-decoration: none;} img {max-width: 100%; height: auto;} 가장 기본 속성 더보기 실습 외부스타일시트 외부스타일시트 외부스타일시트 css 단위..
Visual Studio Code 설치 및 폴더 연결 홈페이지로 들어가 다운로드 받은 후 폴더 연결 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 사용할 폴더의 영역을 확인하고, 파일을 생성함 ..
JSP에서 공부할 핵심 개념 - JAVA 언어 복습 - 화면구현 언어 HTML 의 미리보기 - 서버 VS 클라이언트 - 서버사이드 렌더링 - Request(요청), Response(응답), session - 포워딩 (화면을 이동하는 방식) - MVC 2 모델 (아키텍처 부분) - 게시판 맛보기 짝 Python Js Java Django NodeJs JSP, Spring 웹 프로그래밍 웹 어플리케이션을 구현하는 행위로 웹을 기반으로 작동되는 프로그램 웹: 인터넷 서비스의 한가지 형태이며, 인터넷은 네트워크가 연결되어 있는 형태 서버 = 컴퓨터 웹 어플리케이션 JSP 웹 어플리케이션 장점 사용자: 별도의 설치 없이 프로그램 사용 특정 운영체제가 아니더라도 호환성의 문제가 없음 실제 코드가 프로그램에 노출되지..